style(storybook): unify form element story layouts
- Button: Sizes | Variants side by side, States as Brand / Standard Solid / Standard Outline matrices (3 / 2 / 1 columns), 8px button gap; the Interact row stays only in the verification "Brand States" Story - Input / Textarea / Select: state name in the field Label slot, repeated field Label and group titles removed, aria-label keeps field meaning with the visible state name; Select uses the Input field grid - Combobox / Date Picker: Sizes / States use the same state-name Label and Input grid; Usage unchanged - Toggle: top Variants / States in 2 columns, 8px toggle gap, 단독 toggle keeps its own width - Component code, props, tokens and verification Stories unchanged; component docs updated to match
This commit is contained in:
1 parent
e8c16f5292
commit
a7b56ff23e
14 files changed
+351
-187
No files matched your search
@@ -70,6 +70,7 @@ Radix 구조·`aria-pressed`·`data-state`·Enter/Space·controlled/uncontrolled
|
||||
## 9. Storybook
|
||||
|
||||
- 대표 Story `All`("Toggle"): Variants(Off/On, default·outline)와 States(Disabled off/on), 단독 · 연결 그룹(단독 Toggle, `spacing=0` ToggleGroup 단일·다중 선택), Sizes(2026-11-09 Overview를 Variants로 바꾸고 PC 3열 기준으로 재배치). 2026-10-22 Icon-only·icon + text 예시는 숨김 `IconOnly`로만 확인하고, Controlled(`pressed` 표시)·className 확장 예시는 대표 화면에서 제거했다. `pressed` / `onPressedChange`와 `className` 확장 API(§5)는 그대로다.
|
||||
- 2026-11-12 폼 요소 전시 통일: 나란히 놓인 토글 간격을 Button Story와 같은 8px로 맞췄다(Off/On·Disabled·Sizes·숨김 `IconOnly`, 기존 12px). `단독` 예시는 열 너비로 늘어나지 않고 Toggle 자체 너비를 유지한다. 상단 Variants·States는 기존 3열 중 두 칸 배치 대신 2열로 바꿔 전체 폭을 각 행의 한 줄 폭 비율(324:234, 최소 max-content)로 나눈다. 미리보기 폭 1000px 이상(브라우저 1280px + LNB 180px 포함)에서 Variants 4개가 한 줄로 유지되고, 그 미만은 1열로 쌓여 자연스럽게 줄바꿈한다. 이 때문에 States 시작 위치는 아래 `단독 · 연결 그룹` 3열과 맞추지 않는다. Toggle·토큰·API는 변경 없다.
|
||||
- verification: `States`, `Icon Only`, `Disabled`.
|
||||
|
||||
## 10. 사용자 확정 결정
|
||||
|
||||
Reference in new issue
Block a user