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

channel-io / bezier-react

React components library that implements Bezier design system.

Apache License 2.0

230 stars 47 forks source link

Open yangwooseong opened 1 year ago

yangwooseong commented 1 year ago

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

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

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

sungik-choi commented 1 year ago

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

chaejunlee commented 8 months ago

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

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

sungik-choi commented 8 months ago

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

YuHyeonWook commented 2 weeks ago

해결되었나요?

channeltalk[bot] commented 2 weeks ago

yangwooseong commented 2 weeks ago

@YuHyeonWook 아니요, 우선순위가 많이 높지는 않아보여서 TODO로 남겨두고 있는 상태입니다.