Skip to content

Commit

Permalink
fix(form-label/helper-text): fix merging of classname not working pro…
Browse files Browse the repository at this point in the history
…perly when inside a `FormControl` (#2156)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## 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**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
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

## Summary

<!-- Please brief explanation of the changes made -->

FormControl 내부에 위치한 FormLabel, FormHelperText(ErrorMessage)에 className
오버라이드가 잘 적용되지 않는 문제를 수정합니다.

## Details

<!-- Please elaborate description of the changes -->

베지어 마이그레이션 과정에서 FormControl이 FormLabel, FormHelperText에게 래퍼 스타일을 전달하는
과정이 변경되었습니다.

변경 과정에서 `get***Props` 함수가 반환하는 `className` 과 인자로 받는 `className` 의 속성명이
서로 겹치게 되었는데, 이 때 두 className이 모두 적용되는 게 아니라 인자로 받는 `className` 이 우선순위를
가지고 적용되면서 FormControl이 전달하는 래퍼 스타일이 무시되는 버그가 있었습니다. 이를 수정합니다.

### Breaking change? (Yes/No)

No

<!-- If Yes, please describe the impact and migration path for users -->

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

- [Channel
Desk](https://desk.channel.io/root/threads/groups/Bug-10/6617adea666db15cf58f/6617adea666db15cf58f)
  • Loading branch information
sungik-choi authored Apr 11, 2024
1 parent 15da8c2 commit c224a4b
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 4 deletions.
5 changes: 5 additions & 0 deletions .changeset/witty-icons-beg.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@channel.io/bezier-react": patch
---

Fixes an issue where injecting `className` into `FormLabel`, `FormHelperText` inside a `FormControl` does not apply styles correctly.
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'

const BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(
function BaseHelperText(props, forwardedRef) {
const { type, typo = '13', children, ...rest } = props
const { type, typo = '13', children, className, ...rest } = props

const contextValue = useFormControlContext()
const getProps =
Expand Down Expand Up @@ -52,7 +52,11 @@ const BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(
<Text
ref={mergedRef}
as="p"
className={classNames(styles.FormHelperText, formControlClassName)}
className={classNames(
styles.FormHelperText,
formControlClassName,
className
)}
typo={typo}
align="left"
{...ownProps}
Expand Down
6 changes: 4 additions & 2 deletions packages/bezier-react/src/components/FormLabel/FormLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
help,
bold = true,
color = 'txt-black-darkest',
className,
children,
...rest
} = props
Expand Down Expand Up @@ -67,7 +68,8 @@ export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
<Text
className={classNames(
styles.LabelText,
!HelpComponent && formControlClassName
!HelpComponent && formControlClassName,
className
)}
ref={forwardedRef}
as="label"
Expand All @@ -91,7 +93,7 @@ export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
<LegacyHStack
align="center"
spacing={6}
className={HelpComponent && formControlClassName}
className={formControlClassName}
>
<LegacyStackItem
shrink
Expand Down

0 comments on commit c224a4b

Please sign in to comment.