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

[yangwooseong]

Summary

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

Description

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

bezier-react/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.styled.ts

Lines 1 to 7 in 19ca751

	import { styled } from '~/src/foundation'
	import { AlphaStack } from '~/src/components/AlphaStack'
	export const Stack = styled(AlphaStack)`
	flex-wrap: wrap;
	`

Tasks

Beta Give feedback

1. Fix flex-wrap property of FormGroup according to 'direction' property

References

[sungik-choi]

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

[chaejunlee]

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

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

[sungik-choi]

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