Skip to content

Enhance FormControl and FormLabel style to avoid text-overflow #937

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 21, 2022
Merged

Enhance FormControl and FormLabel style to avoid text-overflow #937

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4c301a8
fix(form-control): delete grid-column minmax style to avoid text over…
sungik-choi Oct 20, 2022
702e3ac
fix(form-label): add word-break style and shrink to avoid text overflow
sungik-choi Oct 20, 2022
d2c5be1
test: update snapshot
sungik-choi Oct 20, 2022
9223cd5
chore(changeset): add changeset
sungik-choi Oct 20, 2022
4ffd0f3
fix(form-label): change word-break property from break-all to break-word
sungik-choi Oct 21, 2022
5a650aa
chore(changeset): add changeset
sungik-choi Oct 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/strange-readers-grab.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'.
2 changes: 1 addition & 1 deletion packages/bezier-react/src/components/Forms/FormControl/FormControl.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`
Expand Down
8 changes: 6 additions & 2 deletions ...ges/bezier-react/src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
.c3 {
display: block;
text-align: left;
word-break: break-all;
}

.c8 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -711,6 +713,7 @@ exports[`FormControl > Snapshot > With single field 1`] = `
.c3 {
display: block;
text-align: left;
word-break: break-all;
}

.c5 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions packages/bezier-react/src/components/Forms/FormLabel/FormLabel.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ import { Text } from 'Components/Text'
export const Label = styled(Text)`
display: block;
text-align: left;
word-break: break-all;
Copy link
Contributor

@quino0627 quino0627 Oct 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

break-all은 영어의 경우에 어색해서 기피하는 것 같던데, 언어 specific한 고려를 bezier에서 하는 것도 어색해서 고민이네요

Copy link
Contributor Author

@sungik-choi sungik-choi Oct 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#924 와 시안을 고려해봤을 때 break-word 로 변경하는 게 적절해보입니다.

`
2 changes: 1 addition & 1 deletion packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ forwardedRef: React.Ref<HTMLLabelElement>,
? LabelComponent
: (
<HStack align="center" spacing={6}>
<StackItem>
<StackItem shrink weight={1}>
{ LabelComponent }
</StackItem>
<StackItem>
Expand Down
1 change: 1 addition & 0 deletions packages/bezier-react/src/components/Forms/FormLabel/__snapshots__/FormLabel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`FormLabel > Snapshot > 1`] = `
.c1 {
display: block;
text-align: left;
word-break: break-all;
}

<label
Expand Down