feat: integrate latest HMDesign design system updates
This commit is contained in:
1 parent
99faec189e
commit
1c4e0bb9a1
209 files changed
+8845
-552
No files matched your search
+15
-13
@@ -1,5 +1,7 @@
|
||||
# Button
|
||||
|
||||
> 2026-10-10 추가 수정 요청 기준: Gray Solid/Outline 기준 #767676, Red Solid 추가. 팝업 결정 버튼은 동일 Solid·size. 일반 화면의 여러 반복·보조 버튼은 Outline, 검색은 조회 Solid Green / 초기화 Outline Gray 예외. 과거 검증 기록은 당시 결과이며 현재 검증은 [추가 수정 보고서](../guidelines/publisher-additional-review-2026-10-10.md)를 따릅니다.
|
||||
|
||||
현재 HM 구현과 Runtime-neutral 사용 기준 문서. 공통 원칙은 `AGENTS.md`와 `docs/guidelines/runtime-portability.md`를 따른다. 이 문서는 Button API·Token·상태·사용 위치·조합 계약을 기록한다.
|
||||
|
||||
## 1. 상태
|
||||
@@ -15,7 +17,7 @@
|
||||
## 2. 적용 근거
|
||||
|
||||
- **ui_viz Confirmed**: size, padding-x, label size/line-height(button.md §26, D-087), Brand gradient·bevel(D-087), Standard Solid/Outline 색(§28, D-086, D-087), Hover/Pressed 동일 Black 20%(§12), Red Outline Hover/Pressed Red 8%.
|
||||
- **HM 사용자 확정 규칙**: 실제 화면 Brand 최대 1개·팝업 Brand 금지, 일반 확인/작성 Solid 세트, 삭제 확인·행/반복 작업 Outline 세트, 같은 세트의 appearance와 size 통일(§5). Disabled `0.6`은 ui_viz 규격 값이며, Input·Select의 2026-10-02 결정과는 별개다.
|
||||
- **HM 사용자 확정 규칙**: 실제 화면 Brand 최대 1개·팝업 Brand 금지, 일반 확인/작성 Solid 세트, 삭제 확인 Solid 세트·행/반복 작업 Outline, 같은 세트의 appearance와 size 통일(§5). Disabled `0.6`은 ui_viz 규격 값이며, Input·Select의 2026-10-02 결정과는 별개다.
|
||||
- **shadcn 유지**: 구조(CVA, `data-slot`, `cn(..., className)`), focus/invalid ring class, `ghost`·`link` variant와 기존 size 이름.
|
||||
- **미정의/TBD**: Focus 표현(ui_viz TBD → shadcn 기본 focus ring 유지), `aria-invalid` 표현(ui_viz에 없음 → shadcn class 유지), `ghost`·`link`의 규격(ui_viz 없음).
|
||||
|
||||
@@ -57,10 +59,10 @@
|
||||
- `outline`: 반복·보조 작업과 표/목록 행 작업에 사용한다.
|
||||
- 일반 작성·수정창: 취소 Solid + 등록/저장 Solid.
|
||||
- 일반 확인창: 취소 Solid + 확인 Solid.
|
||||
- 삭제 확인창: 취소 Outline + 삭제 Outline.
|
||||
- 삭제 확인창: 취소 Solid + 삭제 Solid.
|
||||
- 표/목록 행과 반복·보조 작업: 동일 `appearance`의 Outline 조합.
|
||||
- FilterBar 대표 Story의 초기화·조회: `cancel` + `primary`, 둘 다 Outline·`size="default"`. 목록의 반복 조회·보조 작업 세트다.
|
||||
- 하나의 세트는 `appearance`와 `size`를 통일한다. 역할 차이는 variant의 기존 역할색과 문구로 표현한다.
|
||||
- 검색은 조회 `primary/solid` + 초기화 `cancel/outline`·같은 size를 사용한다. 조회·초기화는 진행/취소 결정 세트가 아니므로 같은 appearance를 강제하지 않는다.
|
||||
- 취소·적용처럼 동일 작업의 결정 세트는 `appearance`와 `size`를 통일한다. 역할 차이는 variant의 기존 역할색과 문구로 표현한다.
|
||||
|
||||
사용 위치를 기준으로 appearance를 명시하며 버튼 문구만으로 판단하지 않는다. 컴포넌트는 appearance 생략 시 기본 `brand`를 출력하므로, 팝업·버튼 세트에서는 기본값에 의존하지 않는다.
|
||||
|
||||
@@ -89,7 +91,7 @@ asChild: shadcn 그대로
|
||||
- `secondary` (Brown): `brand`, `solid`, `outline`.
|
||||
- `modify` (Orange): `brand`, `solid`. **`outline` 미지원**.
|
||||
- `cancel` (Gray): `solid`, `outline`. **`brand` 미지원**.
|
||||
- `destructive` (Red): `outline`만 지원. **`brand`, `solid` 미지원**.
|
||||
- `destructive` (Red): `solid`, `outline` 지원. **`brand` 미지원**.
|
||||
|
||||
공개 Props는 `variant`와 `appearance`를 독립적으로 받는다. TypeScript 통과나 Storybook Controls에서 선택 가능하다는 사실은 해당 조합의 디자인 지원을 뜻하지 않는다. 미지원 조합에는 필요한 역할별 CSS Custom Property가 없으며 자동 보정·fallback도 없다. 기존 CSS 변수에 임의 fallback이나 새로운 역할색을 추가하지 않는다.
|
||||
|
||||
@@ -98,16 +100,16 @@ asChild: shadcn 그대로
|
||||
- `<Button>`은 Primary Brand다. `variant="destructive"`만 지정하면 미지원 Destructive Brand, `variant="cancel"`만 지정하면 미지원 Cancel Brand가 된다. 각각 허용 appearance를 명시한다.
|
||||
- `variant="default"`는 Primary 별칭이며 appearance 생략 시 Brand다. `variant="outline"`는 Primary Outline 별칭이며 전달한 appearance보다 우선한다. Red Outline은 `variant="destructive" appearance="outline"`로 작성한다.
|
||||
- `ghost`/`link`는 HM Role × Appearance 계약 밖의 shadcn 호환 variant다. `data-appearance`를 출력하지 않으며 appearance를 전달해도 HM treatment를 적용하지 않는다.
|
||||
- `AlertDialogAction`과 `AlertDialogCancel`의 기본 appearance는 Button과 달리 `solid`다. `<AlertDialogAction variant="destructive">`만 지정하면 미지원 Destructive Solid다. 삭제 확인은 Action과 Cancel **모두** `appearance="outline"`을 명시한다. 자세한 합성 API는 [Alert Dialog](alert-dialog.md#5-api)를 따른다.
|
||||
- `AlertDialogAction`과 `AlertDialogCancel`의 기본 appearance는 `solid`다. 삭제 확인도 Action(Red)과 Cancel(Gray) 모두 Standard Solid를 사용한다. 자세한 합성 API는 [Alert Dialog](alert-dialog.md#5-api)를 따른다.
|
||||
|
||||
```tsx
|
||||
// 삭제·취소: 같은 appearance와 size (DialogClose asChild로도 합성 가능)
|
||||
<Button variant="cancel" appearance="outline" size="default">취소</Button>
|
||||
<Button variant="destructive" appearance="outline" size="default">삭제</Button>
|
||||
<Button variant="cancel" appearance="solid" size="default">취소</Button>
|
||||
<Button variant="destructive" appearance="solid" size="default">삭제</Button>
|
||||
|
||||
// Alert Dialog 삭제 확인: 두 요소 모두 Outline을 명시
|
||||
<AlertDialogCancel appearance="outline" size="default">취소</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" appearance="outline" size="default">삭제</AlertDialogAction>
|
||||
// Alert Dialog 삭제 확인: 두 요소 모두 Standard Solid
|
||||
<AlertDialogCancel appearance="solid" size="default">취소</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" appearance="solid" size="default">삭제</AlertDialogAction>
|
||||
```
|
||||
|
||||
미지원 조합 추가, role별 자동 appearance 선택, 기본 appearance 변경은 사용자 결정이 필요한 별도 변경이다. 현재 계약과 공개 API를 유지한다.
|
||||
@@ -129,7 +131,7 @@ React가 아닌 Runtime도 배포된 `@hm-design/ui/theme.css` 또는 승인된
|
||||
- Role × Appearance는 §6.1의 허용 조합만 사용한다. 위 속성 vocabulary가 모든 곱집합을 허용하는 것은 아니다.
|
||||
- CSS는 `--hm-button-*` Component variable과 `--hm-sem-*`/기존 Theme variable을 소비한다. HEX와 임의 variable을 추가하지 않는다.
|
||||
- native `disabled`, `:hover`, `:active`, `:focus-visible`로 Disabled/Hover/Pressed/Focus 계약을 유지한다. `aria-disabled`만으로 native disabled를 대체하지 않는다.
|
||||
- 팝업의 취소/확인 조합은 같은 `size`를 사용하고, 삭제 확인은 취소·삭제 모두 Outline이어야 한다. Escape, Tab 순서, 초기 포커스와 닫힌 뒤 trigger 포커스 복귀는 modal primitive 또는 동등한 keyboard contract로 보존한다.
|
||||
- 팝업의 취소/확인 조합은 같은 `size`를 사용하고, 삭제 확인은 취소·삭제 모두 Standard Solid이어야 한다. Escape, Tab 순서, 초기 포커스와 닫힌 뒤 trigger 포커스 복귀는 modal primitive 또는 동등한 keyboard contract로 보존한다.
|
||||
|
||||
React의 `variant` prop을 그대로 복제할 필요는 없지만, 동일한 role/treatment attribute와 시각·상태·접근성 계약을 유지해야 한다.
|
||||
|
||||
@@ -148,7 +150,7 @@ CVA 구조, `data-slot`, `asChild`(Radix `Slot`), `className` 확장, focus-visi
|
||||
## 11. Storybook
|
||||
|
||||
- 대표 Story `All`("Button")이 기본 sidebar의 유일한 Button 항목이다 → 1뎁스.
|
||||
- `All`의 구역: Overview → Sizes → Variants → States. 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다.
|
||||
- `All`의 구역: Overview → Sizes → Variants → States. 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Solid와 Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다.
|
||||
- verification(`tags: ["verification"]`, 기본 sidebar 제외): `Roles`, `Sizes`, `States`("Brand States"), `StandardStates`, `LongLabel`, `KoreanLabels`, `IconTextNarrow`, `Destructive`, `Playground`(HM 전용), `Compatibility`(ghost/link, default/outline 별칭). Controls는 조합별 선택을 제한하지 않으므로 §6.1의 허용 조합을 직접 지킨다. Verification은 기술 점검용이며 운영 화면의 사용 위치·세트 규칙은 §5가 우선한다.
|
||||
- 대표 경로/ID: `Components/Form/Button → All` (`components-form-button--all`), `Components/Overlay/Dialog → All` (`components-overlay-dialog--all`), `Components/Overlay/Alert Dialog → All` (`components-overlay-alert-dialog--all`), `Patterns/Data/Filter Bar → Filter Bar` (`patterns-data-filter-bar--all`). 삭제 세트 점검 ID는 `components-form-button--destructive`(verification)다.
|
||||
- 운영 규칙은 `프로젝트-지침.md` §6.3, §7 참조.
|
||||
|
||||
Reference in new issue
Block a user