Enhance FormControl and FormLabel style to avoid text-overflow

[sungik-choi]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• I wrote a unit test about the implementation.
• I wrote a storybook document about the implementation.
• I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox ❌
  • macOS: Chrome, Edge, Safari, (Optional) Firefox ✅

Related Issue

없음

Summary

• 폼 유즈 케이스에서 라벨 컴포넌트의 영역이 150px로 고정되어있는걸 확인했습니다. FormControl 의 불필요한 minmax 스타일을 제거하고 고정 너비로 변경합니다.
• FormLabel 컴포넌트의 text-overflow를 방지하기 위해 word-break: break-word 스타일을 추가하고, Help 컴포넌트와 함께 사용될 경우도 마찬가지로 flex-shrink 속성을 추가합니다.

Details

라벨이 길 경우 아래와 같이 줄넘김 처리가 됩니다.

AS-IS

TO-BE

Breaking change or not (Yes/No)

No

References

• Bezier Figma

[changeset-bot]

🦋 Changeset detected

Latest commit: 9223cd5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

Base: 71.08% // Head: 71.08% // No change to project coverage 👍

Coverage data is based on head (5a650aa) compared to base (a2759dc).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff            @@
##           next-v1     #937   +/-   ##
========================================
  Coverage    71.08%   71.08%           
========================================
  Files          206      206           
  Lines         2902     2902           
  Branches       810      810           
========================================
  Hits          2063     2063           
  Misses         721      721           
  Partials       118      118           

Impacted Files	Coverage Δ
...components/Forms/FormControl/FormControl.styled.ts	100.00% <ø> (ø)
...src/components/Forms/FormLabel/FormLabel.styled.ts	100.00% <ø> (ø)
...react/src/components/Forms/FormLabel/FormLabel.tsx	100.00% <ø> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[CHEWCHEWW]

기존 사용이 불편했던 부분이라 스펙이 통일돼서 좋네요 🥳

[quino0627]

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

[sungik-choi]

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