From 4c301a867e377959f3c9e67fc7b2e7978211d4e7 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Thu, 20 Oct 2022 21:12:37 +0900
Subject: [PATCH 1/6] fix(form-control): delete grid-column minmax style to
 avoid text overflow

---
 .../src/components/Forms/FormControl/FormControl.styled.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts b/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts
index 6a00747acf..2fd8bc56c3 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts
+++ b/packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts
@@ -23,7 +23,7 @@ export const TopHelperTextWrapper = styled(Box)`
 export const Grid = styled(Box)`
   display: grid;
   grid-template-rows: repeat(2, auto);
-  grid-template-columns: minmax(${LEFT_LABEL_MIN_WIDTH}px, auto) 1fr;
+  grid-template-columns: ${LEFT_LABEL_MIN_WIDTH}px 1fr;
   grid-column-gap: 12px;
   align-items: center;
 `

From 702e3acd2df2c9acd7af56bb8a1426e83db50555 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Thu, 20 Oct 2022 21:15:17 +0900
Subject: [PATCH 2/6] fix(form-label): add word-break style and shrink to avoid
 text overflow

---
 .../src/components/Forms/FormLabel/FormLabel.styled.ts          | 1 +
 .../bezier-react/src/components/Forms/FormLabel/FormLabel.tsx   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
index 87bb98aa3a..6558dc7626 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
+++ b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
@@ -5,4 +5,5 @@ import { Text } from 'Components/Text'
 export const Label = styled(Text)`
   display: block;
   text-align: left;
+  word-break: break-all;
 `
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
index 21ee04d25d..1d3b486f53 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
+++ b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
@@ -78,7 +78,7 @@ forwardedRef: React.Ref<HTMLLabelElement>,
         ? LabelComponent
         : (
           <HStack align="center" spacing={6}>
-            <StackItem>
+            <StackItem shrink weight={1}>
               { LabelComponent }
             </StackItem>
             <StackItem>

From d2c5be1128f0c582722c14bfed7bcdc1e7c26173 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Thu, 20 Oct 2022 21:18:45 +0900
Subject: [PATCH 3/6] test: update snapshot

---
 .../FormControl/__snapshots__/FormControl.test.tsx.snap   | 8 ++++++--
 .../Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
index 6e0215e24f..cb01a29303 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
@@ -93,6 +93,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
 .c3 {
   display: block;
   text-align: left;
+  word-break: break-all;
 }
 
 .c8 {
@@ -322,7 +323,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
 .c1 {
   display: grid;
   grid-template-rows: repeat(2,auto);
-  grid-template-columns: minmax(150px,auto) 1fr;
+  grid-template-columns: 150px 1fr;
   grid-column-gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -447,6 +448,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
 .c4 {
   display: block;
   text-align: left;
+  word-break: break-all;
 }
 
 .c11 {
@@ -711,6 +713,7 @@ exports[`FormControl > Snapshot > With single field 1`] = `
 .c3 {
   display: block;
   text-align: left;
+  word-break: break-all;
 }
 
 .c5 {
@@ -833,7 +836,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
 .c1 {
   display: grid;
   grid-template-rows: repeat(2,auto);
-  grid-template-columns: minmax(150px,auto) 1fr;
+  grid-template-columns: 150px 1fr;
   grid-column-gap: 12px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -900,6 +903,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
 .c4 {
   display: block;
   text-align: left;
+  word-break: break-all;
 }
 
 .c6 {
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
index 9a15878163..bd0e11267e 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`FormLabel > Snapshot > 1`] = `
 .c1 {
   display: block;
   text-align: left;
+  word-break: break-all;
 }
 
 <label

From 9223cd55912548d3b2aa11d113f8d145afd28a34 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Thu, 20 Oct 2022 21:31:35 +0900
Subject: [PATCH 4/6] chore(changeset): add changeset

---
 .changeset/strange-readers-grab.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/strange-readers-grab.md

diff --git a/.changeset/strange-readers-grab.md b/.changeset/strange-readers-grab.md
new file mode 100644
index 0000000000..7a6ae6763a
--- /dev/null
+++ b/.changeset/strange-readers-grab.md
@@ -0,0 +1,7 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+- For avoiding text overflow, Change FormControl grid label cell size from flex to fixed.
+- For avoiding text overflow, Add 'work-break: break-all' style to FormLabel.
+- For avoiding text overflow, Add flex-shrink style to StackItem which is wrapping FormLabel when there is 'help'.

From 4ffd0f3240da6c505a4750f7668f7450b98b9d41 Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Fri, 21 Oct 2022 12:02:19 +0900
Subject: [PATCH 5/6] fix(form-label): change word-break property from
 break-all to break-word

---
 .../FormControl/__snapshots__/FormControl.test.tsx.snap   | 8 ++++----
 .../src/components/Forms/FormLabel/FormLabel.styled.ts    | 2 +-
 .../Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
index cb01a29303..c5bf957bcb 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
 .c3 {
   display: block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .c8 {
@@ -448,7 +448,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
 .c4 {
   display: block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .c11 {
@@ -713,7 +713,7 @@ exports[`FormControl > Snapshot > With single field 1`] = `
 .c3 {
   display: block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .c5 {
@@ -903,7 +903,7 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
 .c4 {
   display: block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .c6 {
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
index 6558dc7626..bdda8b170c 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
+++ b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
@@ -5,5 +5,5 @@ import { Text } from 'Components/Text'
 export const Label = styled(Text)`
   display: block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 `
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap b/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
index bd0e11267e..d5a0b69cf9 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
+++ b/packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`FormLabel > Snapshot > 1`] = `
 .c1 {
   display: block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 <label

From 5a650aa720e2b04337386e3c840f04b492fb8b7c Mon Sep 17 00:00:00 2001
From: Ed Sungik Choi <sungik.dev@gmail.com>
Date: Fri, 21 Oct 2022 12:06:08 +0900
Subject: [PATCH 6/6] chore(changeset): add changeset

---
 .changeset/flat-ghosts-poke.md     | 7 +++++++
 .changeset/strange-readers-grab.md | 7 -------
 2 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/flat-ghosts-poke.md

diff --git a/.changeset/flat-ghosts-poke.md b/.changeset/flat-ghosts-poke.md
new file mode 100644
index 0000000000..6c9ab72bce
--- /dev/null
+++ b/.changeset/flat-ghosts-poke.md
@@ -0,0 +1,7 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+- For avoiding text overflow, Change FormControl grid label cell size from flex to fixed.
+- For avoiding text overflow, Add 'work-break: break-word' style to FormLabel.
+- For avoiding text overflow, Add flex-shrink style to StackItem which is wrapping FormLabel when there is 'help'.
diff --git a/.changeset/strange-readers-grab.md b/.changeset/strange-readers-grab.md
index 7a6ae6763a..e69de29bb2 100644
--- a/.changeset/strange-readers-grab.md
+++ b/.changeset/strange-readers-grab.md
@@ -1,7 +0,0 @@
----
-"@channel.io/bezier-react": patch
----
-
-- For avoiding text overflow, Change FormControl grid label cell size from flex to fixed.
-- For avoiding text overflow, Add 'work-break: break-all' style to FormLabel.
-- For avoiding text overflow, Add flex-shrink style to StackItem which is wrapping FormLabel when there is 'help'.