channel-io / bezier-react

React components library that implements Bezier design system.
https://main--62bead1508281287d3c94d25.chromatic.com
Apache License 2.0
215 stars 47 forks source link

Fix `flex-wrap` property of `FormGroup` according to 'direction' property #1720

Open yangwooseong opened 10 months ago

yangwooseong commented 10 months ago

Summary

아래 이미지처럼 FormGroup을 사용해서 TextField 여러 개를 가로 배치할 때, flex-wrap 속성을 오버라이딩 해야하는 불편함이 있습니다.

image

Description

FormGroup 내부에서 direction 에 관계없이 flex-wrap: wrap 으로 주고 있는 것이 원인입니다. FormGroupdirection 속성에 따라서 flex-wrap 속성을 다르게 주는 것이 좋아보입니다.

https://github.com/channel-io/bezier-react/blob/19ca751d6d48f45b731d82da933ed2c12af7e801/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.styled.ts#L1-L7

### Tasks
- [ ] Fix `flex-wrap` property of `FormGroup` according to 'direction' property

References

sungik-choi commented 10 months ago
image

추가. 위와 같이 Radio / Checkbox 의 그룹으로 사용되는 케이스의 레이아웃을 고려해야합니다

chaejunlee commented 7 months ago

안녕하세요! 해당 이슈에 작업을 하고 싶습니다. 혹시 direction: horizontal 일 때 flex-wrap: nowrap이 되는 것이 맞을까요?

그리고 Radio / Checkbox 의 그룹으로 사용되는 케이스의 directionflow가 어떻게 되는 것일까요? 보이기에는 direction: vertical, flex-wrap: wrap으로 보이는데 맞을까요? 아니면 다른 방식일까요?

Screenshot 2024-02-20 at 22 00 21

image

sungik-choi commented 6 months ago

@chaejunlee 답변이 늦어 죄송합니다! 저희 팀 디자이너에게 확인해보니, 올려주신 첫번째 스크린샷처럼 그려져야 합니다. 먼저 y축으로 쌓이되, 넘칠 경우 우측 y축부터 다시 쌓이는 방식입니다.