Migrate `FormHelperText`, `FormErrorMessage`, and `FormLabel` component with scss

[yangwooseong]

Self Checklist

• [x] I wrote a PR title in English and added an appropriate label to the PR.
• [x] I wrote the commit message in English and to follow the Conventional Commits specification.
• [x] I added the changeset about the changes that needed to be released. (or didn't have to)
• [x] I wrote or updated documentation related to the changes. (or didn't have to)
• [x] I wrote or updated tests related to the changes. (or didn't have to)
• [x] I tested the changes in various browsers. (or didn't have to)
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

• 1733

Summary

• FormHelperText, FormErrorMessage, FormLabel컴포넌트를 scss로 마이그레이션 하고 as, interpolation속성을 인터페이스에서 제거합니다.

Details

• 각각의 컴포넌트를 scss로 마이그레이션할 때, FormControl.styled.ts에 있던 스타일 코드를 각 컴포넌트의 .module.scss로 이동시켰습니다. 또한 context로서 Wrapper컴포넌트를 주던 것을 labelPosition만 주고 각 컴포넌트의 .module.scss에서 스타일링 하도록 변경했습니다. FornControl.module.scss에서 스타일링 코드를 작성하고 각 컴포넌트에서는 여기에 있는 className을 사용하게 할 수도 있었는데, 컴포넌트간의 의존성을 만드는 것이 좋지 않아보여서 이렇게 했습니다.

• Ref타입으로 deprecated된 HTMLParamElement을 쓰던 것을 적절한 타입으로 변경합니다.

• 컴포넌트의 레이아웃이 labelPosition에 영향을 받기 때문에 일부러 MarginProps는 인터페이스로 노출하지 않았습니다.

• 지금은 Text의 속성을 그대로 노출하고 있는데, 사실상 고정된 스타일(color, typo)를 사용하고 있기 때문에 이런 속성역시 제거해야되나 고민됩니다. 어떻게 생각하시는지 궁금합니다 @sungik-choi

Breaking change? (Yes/No)

• Yes, FormHelperText, FormErrorMessage, FormLabel no longer supports as and interpolation props.

References

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLParamElement

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 1a45cfe940b1c8f19a88cacfd3db47035b64464b

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

This PR includes changesets to release 1 package

| Name | Type | | ------------------------ | ----- | | @channel.io/bezier-react | Major |

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[bot]]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (1d6c349) 85.96% compared to head (1a45cfe) 85.94%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## alpha #1893 +/- ## ========================================== - Coverage 85.96% 85.94% -0.02% ========================================== Files 234 232 -2 Lines 3341 3337 -4 Branches 747 745 -2 ========================================== - Hits 2872 2868 -4 Misses 391 391 Partials 78 78 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[sungik-choi]

지금은 Text의 속성을 그대로 노출하고 있는데, 사실상 고정된 스타일(color, typo)를 사용하고 있기 때문에 이런 속성역시 제거해야되나 고민됩니다. 어떻게 생각하시는지 궁금합니다

사용처 확인해보고 오버라이드하는 곳이 거의 없다면 제거해도 좋을 거 같네요 👍

[yangwooseong]

FormLabel, FormHelperText가 Wrapper를 가지고 있지 않았기 때문에 스탠드얼론으로 사용할 수도 있었어요. Wrapper를 각 컴포넌트에서 가지고 있도록 변경되면, FormControl 의 레이아웃에 의존하는 padding, margin 속성들이 적용되어서 스탠드얼론으로 사용되는 케이스들의 레이아웃이 틀어지게 됩니다.

아하 그렇군요 제가 오해했네요. 그럼 이전 구현처럼 Control 에서 스타일링 된 Wrapper를 컨텍스트로 받도록 변경하겠습니다

[yangwooseong]

FormLabel, FormHelperText가 Wrapper를 가지고 있지 않았기 때문에 스탠드얼론으로 사용할 수도 있었어요. Wrapper를 각 컴포넌트에서 가지고 있도록 변경되면, FormControl 의 레이아웃에 의존하는 padding, margin 속성들이 적용되어서 스탠드얼론으로 사용되는 케이스들의 레이아웃이 틀어지게 됩니다.

아하 그렇군요 제가 오해했네요. 그럼 이전 구현처럼 Control 에서 스타일링 된 Wrapper를 컨텍스트로 받도록 변경하겠습니다

className 을 주는게 더 간단해 보여서 컨텍스트로 Wrapper가 아닌 className을 내려주도록 했습니다. FormControl과 같이 쓰이지 않는 경우에는 이전 구현처럼 div로 감싸지 않은 상태로 렌더링되도록 했습니다. 사실 굳이 하나 더 div element 를 주지 않고 className만 합치면 될 것 같은데, 고민하다가 이 부분은 이전과 동일하게 별도의 div element를 주는 방식으로 했습니다.