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
@@ -98,7 +98,7 @@ Radix Root/Trigger/Portal/Content/Viewport/Item/ItemText 구조, 키보드 조
|
||||
|
||||
## 9. Storybook
|
||||
|
||||
- 대표 Story `All`("Select"): Sizes(Medium / Large 비교, 각 Trigger로 실제 목록 열기) → States(`selected`, `disabled`, `disabled-placeholder`) → Validation(`invalid`, `invalid-disabled`; 2026-11-09 `Invalid / Focus`에서 제목 변경, Focus 예시가 없다). PC에서는 세 구역이 같은 3열 칸을 쓰고 Sizes·Validation은 첫 두 칸만 채운다. 2026-10-22 Overview의 `default`·로드 시 열린 `open` 예시는 대표 화면에서 뺐다. 열린 목록은 숨김 `Open`, 크기별 수치 목록은 숨김 `Sizes`("Compare Sizes")에서 확인한다. size 생략 시 Large(§5)는 그대로다.
|
||||
- 대표 Story `All`("Select"): Sizes(Medium / Large 비교, 각 Trigger로 실제 목록 열기) → States(`selected`, `disabled`, `disabled-placeholder`) → Validation(`invalid`, `invalid-disabled`; 2026-11-09 `Invalid / Focus`에서 제목 변경, Focus 예시가 없다). PC에서는 세 구역이 같은 3열 칸을 쓰고 Sizes·Validation은 첫 두 칸만 채운다. 2026-11-12 폼 요소 전시 통일(Input 기준): States·Validation은 상태명을 Select Label 자리에 한 번만 표시하고 반복되던 `Status` Label과 별도 그룹 제목을 없앴다. 접근성 이름은 Trigger의 `aria-label="Status (상태명)"`(보이는 상태명 포함). 세 구역은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열)를 써서 Input과 같은 필드 폭을 가진다. Select·토큰·API·verification Story는 변경 없다. 2026-10-22 Overview의 `default`·로드 시 열린 `open` 예시는 대표 화면에서 뺐다. 열린 목록은 숨김 `Open`, 크기별 수치 목록은 숨김 `Sizes`("Compare Sizes")에서 확인한다. size 생략 시 Large(§5)는 그대로다.
|
||||
- verification(`tags: ["verification"]`): `Default`, `Open`, `Selected`, `Disabled`, `Sizes`("Compare Sizes"), `Medium`, `Large`, `LongContent`, `Scroll`, `Playground`(HM 전용).
|
||||
- `Disabled` Story 구성: Trigger 비활성 상태들(placeholder 포함).
|
||||
- `InvalidFocus` verification Story: 앞/뒤 버튼 사이의 Invalid Trigger와 Disabled Invalid Trigger. Tab / Shift+Tab, Enter / Space, Escape 및 focus return을 실제 키보드로 확인한다.
|
||||
|
||||
Reference in new issue
Block a user