- 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
- Button page shows Toggle; new Selection Controls page compares Checkbox,
Radio Group and Switch states (specimens moved to *-examples.tsx)
- Date Picker page includes Calendar; Combobox, Input and Slider layouts
(Korean slider labels) tidied
- Absorbed representative Stories keep their IDs as verification Stories
- Component docs updated to the new representative pages
- Manager sidebar labels and sort order for the grouped pages; LNB 1-depth
text start 12px (token, baseline and LNB doc updated)
- Shared story frame: drop the divider under section titles, side margin
max 60px -> 30px; Foundation color/typography spacing
- Pseudo-state mirroring also pins :focus-visible via data-sb-focus while
keeping the previous clones for compound rules (Slider Focus + Drag)
- 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
- Story page frame: H2 16/24/700 -> 12px -> divider -> 16px -> content, sections 28px apart;
StorySectionGrid keeps its 24px column gap
- Content indent (--sb-page-indent 16px, 12px at 640px and below): .sb-page-indent for information
blocks; group boards (StateBoard / CardBoard, data-sb-board) indented once per section block so
per-column boards keep their 24px gap
- Input / Select / Toggle Sizes grids take the same indent; field Labels unchanged
- Full-width Pattern previews (GNB, LNB, Loading Screen, Page Header) opt out with indent={false}
- Foundation/폰트: Text Colors name / usage / HEX levels, Font Family and Font Weight token lines,
Specimens row spacing and indent; specimen values unchanged
- Guideline and WORKING_CONTEXT updated
StoryPageHeader no longer shows the page title, kicker, description or the SW group notice; it renders only a visually hidden H1 with the Story title, so the preview keeps a page heading for screen readers while the first section starts at the top gutter (unchanged position).
- OrgChart verify-p8 / p9 / p9-1 / p9-2-composition wait for the first visible StoryPage content block and read the page H1 instead of .sb-page-title; existing expectations are unchanged.
- SW overview browser test clicks the page gutter as its outside-click target.
- Drop the unused .sb-page-description from the SW Storybook hide rules.
- Update the Storybook page frame rule in the project guideline.
- Add StoryNotice and a withSWNotice decorator so every visible SW Story
shows the common notice above its title; non-SW Stories are unaffected.
- Align the SW Header overview with the common SW Story page layout, let the
preview Stage fill the available width and keep inner scroll on narrow screens.
- Rename SW/Footer to SW/하단 명령어바 (sidebar title only, Story IDs fixed via
id: "sw-footer"), drop the top SWHeader from its preview and lower the
workspace height bounds by the removed 49px.
- Manager LNB: 246px width, 16px brand title, 14px/700 menu and section
titles, depth1 48px / depth2+ 42px rows, 24px section gap
- Foundation: rename Color to HM Color (Story ID foundation-color--all kept),
remove Company Colors subtitle and the page-title bottom border
- Patterns/Layout/LNB: Storybook-only overrides in lnb.stories.css
(240px column, 212px min width, 14px menu, 48/42px rows, profile text,
group dividers); representative board dividers per section
- Sync story inventory and docs (brand-color-steps, lnb); shared package
defaults and tokens are unchanged
- Story page Inner side margin: 16px up to a 480px viewport, linear to 60px at 768px, 60px beyond (no width jump)
- Follow the 60px margins: Responsive 1920 row from a 2040px page (was 2000px); property compare 3 columns from 1125px, 2 columns from 787px (was 1080 / 720)
- SW browser tests: drop the removed --sb-page-max-width override, compare thresholds 787 / 1125
Drop page / section descriptions, state notes and repeated captions from
the representative Stories of 44 components, the Patterns, Center
Graphic and OrgChart pages. Value readouts, spec lists and captions hide
only on the representative page; hidden verification Stories keep them.
Tabs Default API and the Filter Bar draft / applied counts move to the
hidden DefaultApi and DraftApplied Stories; Center Overview is hidden
with its direct URL kept. Story IDs are unchanged.
Align the component, pattern and OrgChart docs with the pages, point the
quality reference check at the DraftApplied Story, and make the P8
styles check expect no section header on the preview-only Expanded page.
Deploy Storybook / deploy (push) Successful in 1m12s
- SWHeader (760-1799px): pictures hide one at a time by measured room (치수 아이콘, 선 그림,
글꼴명, 색상 칩, 레이어 상태 아이콘), then the file name narrows 310 -> 96px, then values
ellipsize; re-fit after web fonts load. 가중치/스케일 columns grow for longer values.
- Gauge style B / property window range: Figma controll_bar_new 633:77827 colors, ring and
shadow on the previous size (6px track, 14px thumb).
- Property window: editable text values (e.g. 하이퍼링크) get the editing face like numbers.
- SW Header › Logo: same cases, order and layout as SW Viewer › Logo (ID kept).
- Storybook inner: 80vw from 1920px. Responsive More 1920px rows use the page's usable width
(container sw-story-page) and span 1920px when there is room.
- SW/Popup sidebar: Property Panel only; Custom Content / Multiple Popups tagged verification.
- SW Viewer Settings Popup: 축척 지정 demo popup removed, frame 620px.
- Tests: inventory / simplification sidebar expectations, Popup-only unit select check.
Verified: check:ai-docs PASS, changed test syntax, headless Chrome checks of header compaction,
Responsive 1920 rows (1920 hidden / 2560, 3840 shown), Popup sidebar, Settings Popup.
Not verified: integrated-visual baselines (not updated), full regression, changed tests not run.
Deploy Storybook / deploy (push) Successful in 1m11s
- SW Viewer layer popup: search + 전체 레이어 fixed, only the list scrolls; the all-layers
control is the SWLayerVisibilityIcon bulb (role="switch"), one light #d2c8b4 line under it.
- Example H and the layer popup AI docs follow the bulb layout (VIEWER, DESIGN_RULES,
COMPONENT_CATALOG, COMPOSITION_PATTERNS, AI_GUIDE sync).
- Popup toggle switch (Figma toggle_btn_new 633:75188 / 633:75902): one sw.css face for the
HM UI Switch in SWPopup and SWViewerSwitch in SWViewerPanel; SW Header switches unchanged.
- SW Footer stories: no inner scrollers, fluid screens; workspace fits the viewport.
- SW Footer category tabs keep their positions when selected (divider slots kept, pocket
edges drawn over the neighbours' padding).
- Storybook .sb-page-inner: 1440px max from 1920px (was 80vw).
- SW Header equal-split change was cancelled; header CSS unchanged.
Verified: check:ai-docs PASS, viewer test 49 PASS (1 FAIL hover face + timeout pre-existing),
footer-design-review 21 PASS, browser checks of switch/footer/inner.
Not verified: footer-popup-viewer-refinement (needs full Storybook build), text-weight/hover
tests, Switch 37x16 AI docs (deferred).
Deploy Storybook / deploy (push) Successful in 1m18s
Below 1920px the inner keeps min(100%, 1280px) minus the gutters; from 1920px it
is 80vw (1536px at 1920, 2048px at 2560), centered, with no horizontal scroll.
Deploy Storybook / deploy (push) Successful in 54s
- Expanded OrgChart: the chart moves right under the page title; data, layout
and interaction settings stay below it. Setting notes, section descriptions,
hidden legends and the Drag & Drop ON/OFF text are removed; the example
counts stay only as a hidden data hook for the OrgChart browser checks, and
the pending note shows only while the employee count differs.
- Tabs: drop the text-only Do / Don't section (rules live in tabs.md §16).
- Button: the representative page hides the Brand / Standard state notes
(story-only showNote); the hidden States Stories keep them.
- Report: the follow-up simplification and its verification.
Drop the category kicker from the 83 sidebar Stories (kicker is now optional;
hidden verification Stories keep it) and shorten or remove repeated, obvious
or internal page/section descriptions. Required specs, limits, virtual-data
and undecided-value notices stay. Story IDs, exports, fixtures, shared state
notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md
shkim4
DESKTOP-KPCP6AL\ㅅㅎ