style(storybook): group overlay, disclosure and navigation story pages
- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible, Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each (specimens moved to *-examples.tsx; absorbed Stories keep their IDs) - Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied - Component docs updated to the new representative pages
This commit is contained in:
1 parent
71d504407d
commit
bad2acfc49
35 files changed
+649
-521
No files matched your search
@@ -32,7 +32,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hm-design/ui"
|
||||
| 구현 상태 | 기본 Primary Fill + 명시적 Secondary Fill + Legacy non-fill + 넘침 이동 버튼(D-090) 구현 (`hm-tab` class 없음) |
|
||||
| 기준일 | 2026-10-09 (D-01 조합·D-02 상단 White 80% 반영, API는 2026-10-08 기본값 유지) |
|
||||
| 기반 | shadcn/ui Tabs (Radix `Tabs`) |
|
||||
| 대표 Story | `Components/Navigation/Tabs` → `All` (이름 "Tabs"): Primary(Fill + content) / Secondary(Fill + surface) |
|
||||
| 대표 Story | `Components/Navigation/Tabs` → `All` (이름 "Tabs"): Variants Primary(Fill + content) / Secondary(Fill + surface), Behavior Overflow, Usage |
|
||||
| 보류 | 아래 §11 |
|
||||
|
||||
## 2. 적용 근거
|
||||
@@ -126,13 +126,13 @@ Radix Tabs 구조·ARIA(`role=tablist/tab/tabpanel`, `aria-selected`)·roving ta
|
||||
|
||||
## 9. Storybook
|
||||
|
||||
- 대표 Story `All`("Tabs"): **Variants**는 Primary(fill / panelSurface를 생략한 기본)·Secondary(`panelSurface="surface"`)·Overflow(20개 탭, 이전 States의 Overflow 예시)를 PC 균등 3열로 두고, **Usage**는 Card 내부 · Secondary / 페이지 직접 배치 · Primary 2열이다(2026-11-09 Overview·States 구역을 Variants로 통합, 이 페이지의 위아래 패딩만 줄여 1280×900 한 화면). 같은 Primary가 반복되던 **Default API** 구역(`fill`만, `fill` + `panelSurface="content"` 명시)은 2026-10-22 숨김 verification `DefaultApi`로 옮겼다. 기존 대표 Story ID와 메뉴를 유지한다. Hover는 실제 포인터로 확인한다.
|
||||
- 대표 Story `All`("Tabs"): **Variants**는 Primary(fill / panelSurface를 생략한 기본)·Secondary(`panelSurface="surface"`) 균등 2열, **Behavior**는 Overflow(20개 탭, 이전 States의 Overflow 예시, 이전/다음 이동 버튼·내부 스크롤) 1개를 같은 2열 grid의 왼쪽 열에, **Usage**는 Card 내부 · Secondary / 페이지 직접 배치 · Primary 균등 2열이다. 세 구역은 같은 grid(24px 간격)를 쓰며, 섹션 본문의 실제 콘텐츠 너비(컨테이너 쿼리, 공통 board 들여쓰기 제외)가 720px 이상이면 2열, 미만이면 1열이다. 섹션 제목·예제 라벨·간격은 공통 `StorySection` / `StateBoard`를 따른다(2026-11-13 Overflow를 Variants에서 Behavior로 분리, 예제 내용 불변. 이전: 2026-11-09 Overview·States 구역을 Variants로 통합). 같은 Primary가 반복되던 **Default API** 구역(`fill`만, `fill` + `panelSurface="content"` 명시)은 2026-10-22 숨김 verification `DefaultApi`로 옮겼다. 기존 대표 Story ID와 메뉴를 유지한다. Hover는 실제 포인터로 확인한다.
|
||||
- verification(`tags: ["verification"]`): `DefaultApi`, `Secondary`, `SelectedFirst`, `SelectedLast`, `Focus`, `Disabled`, `Overflow`, `SecondaryOverflow`, `LongLabel`. Primary 기준이며 Secondary는 같은 CSS 경로를 쓴다. Focus는 `play`로 실제 focus를 준다.
|
||||
- `LongLabel`은 짧은 라벨, 긴 라벨 1개, 긴 라벨 여러 개, 260px 좁은 container를 함께 검증한다. 라벨은 `nowrap`·무말줄임이며 실제 필요 폭이 넘을 때 이동 버튼으로 전환한다.
|
||||
- non-fill Story(`Selected`, `SelectedMiddle`, `Fill`, `FillContent`, `FillOverflow`와 대표의 non-fill 구역)는 2026-10-06에 제거했다. API(`fill=false`, Legacy profile CSS)는 유지한다(§10).
|
||||
- 2026-10-08 숨김 `Compatibility`(`verification` 태그 + **VERIFICATION ONLY** 표시)는 Legacy `fill={false}` / `fill={false} panelSurface="surface"` 동일성과 `panelSurface="surface"`만 명시한 경우의 Secondary 전환을 확인한다. 일반 Story 메뉴를 추가하지 않는다.
|
||||
- Variants / Usage, `DefaultApi` 및 Fill verification 예제의 콘텐츠 panel은 `px-0 py-6`로 통일해 D-01을 실제로 반영한다. Primary는 상위 content 면, Secondary는 상위 surface 면에 연결하며 내부 패널의 별도 border·배경·radius를 제거한다. Compatibility의 Legacy non-fill 두 예제만 이전 `border bg-card rounded-b p-4`를 보존한다.
|
||||
- **Usage**(2026-10-09 추가)는 공개 Card / Input / Textarea / Table을 조합해 Card 내부 Secondary와 페이지 content 면 위 Primary를 보여준다. 두 예제 모두 `TabsContent`는 `px-0 py-6`이며 별도 배경·border·radius를 추가하지 않는다. 대표 Story ID·기존 구역·verification Story는 유지한다.
|
||||
- **Usage**(2026-10-09 추가)는 공개 Card / Input / Textarea / Table을 조합해 Card 내부 Secondary와 페이지 content 면 위 Primary를 보여준다. 두 예제 모두 `TabsContent`는 좌우 16px·상단 12px·하단 24px(`px-4 pt-3 pb-6`, 2026-11-13)이며 Card 예제의 Card / CardContent 여백은 그대로 둔다. 패널은 별도 배경·border·radius를 추가하지 않는다. 대표 Story ID·기존 구역·verification Story는 유지한다.
|
||||
|
||||
## 10. 사용자 확정 결정
|
||||
|
||||
|
||||
Reference in new issue
Block a user