@olundot/ui 0.20.0-next.4 → 0.20.0-next.5

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @olundot/ui
 
+## 0.20.0-next.5
+
+### Minor Changes
+
+- a0b298b: `Button`·`IconButton`·`CopyButton`의 옛 `variant`를 지운다. 호환성을 깨는 변경이다. `appearance`와 `tone`으로 옮긴다(`primary`·`default` → `filled` + `primary`, `secondary`·`outline`·`subtle` → `outline` + `neutral`, `ghost` → `ghost` + `neutral`, `danger`·`destructive`·`emergency` → `filled` + `danger`). `ButtonVariant`·`IconButtonVariant` 타입과 `buttonVariants`의 `variant` 인자도 없어진다.
+
+  `Button`의 `leadingIcon`·`trailingIcon`과 `size="icon"`·`"icon-xs"`를 지운다. 아이콘이 있는 버튼은 글자가 있는 `IconButton`(`icon`, 끝 아이콘은 `iconPosition="end"`)으로, 아이콘만 있는 버튼은 `IconButton` `lg`·`md`로 옮긴다.
+
+  `IconButton`은 옛 경로가 없어진다. `appearance`와 `tone`을 비워도 `ghost` + `neutral`이고 `size`는 늘 `Button`과 같은 5단계다. 옛 `sm`(28px)은 `xs`, 옛 `lg`(40px)는 `xl`로 옮긴다. 그대로 두면 30px, 36px가 된다. 아이콘 획 굵기도 같은 크기의 `Button`을 따른다. `data-variant`가 없어진다.
+
+  글자가 있는 `IconButton`은 같은 `size`의 `Button`과 모양, 상태가 같다. 눌림 축소, 포커스 테두리와 2px 그림자, 비활성 테두리, 전환 속성이 `Button`과 같아지고 `shrink-0`이 빠진다. `IconButton`에 `loading`을 더한다. 회전 표시가 아이콘 자리를 대신하고 `aria-busy`, `aria-disabled`, 비활성 상태가 된다.
+
+  새 조합 `outline` + `danger`를 연다. `--bg-surface` 바탕에 `--error` 테두리와 글자, hover는 `--error-bg`다. `Button`과 `IconButton`이 같은 칠을 쓴다. 하단 막대와 푸터에서 주 작업 옆의 위험 작업에 쓴다.
+
+  `Button`에 `appearance="link"`를 더한다. `variant="link"`를 대신하고 `Button`에만 있다. `tone`은 `primary`(`--accent` 글자, 기본값)와 `danger`(`--error` 글자)다. 밑줄은 hover 때만, 방문 표시는 없다. 가로 여백은 0이다. 전에는 크기의 여백이 `px-0`을 이겼다. 비활성이면 바탕 없이 글자만 흐려진다. `buttonVariants({ appearance: "link" })`도 같은 클래스를 돌려준다.
+
+  `Button asChild`가 자식 배열 때문에 `React.Children.only` 오류를 내던 것을 고친다. `Slot.Slottable`로 자식 하나를 그리고 회전 표시와 메뉴 표시를 그 안에 넣는다. `disabled`·`loading`이면 자식에 `aria-disabled`, `tabIndex={-1}`를 달고 클릭과 가운데 클릭을 막는다. `href`는 자식 것이라 지우지 않는다. 이동은 `<Button asChild appearance="link"><Link href>…</Link></Button>`로 그린다.
+
+  `Button`과 글자가 있는 `IconButton`에 `menuIndicator`를 더한다. 메뉴를 여는 버튼 끝에 `aria-hidden` ▾(`ChevronDown`)를 붙인다. 크기와 획은 버튼 크기를 따른다. `IconButton`에서 `iconPosition="end"`나 아이콘만 있는 버튼과는 타입이 막는다. `aria-haspopup`은 트리거가 단다.
+
+  `CopyButton`은 `variant` 대신 `appearance`·`tone`을 받는다. 기본값은 `outline` + `neutral`로 전과 같다.
+
+  `ActionFooterAction`의 `variant`를 `appearance`·`tone`으로 바꾼다. 위험 작업 묶음은 `tone="danger"`로 정한다. `leadingIcon`이 있는 작업은 글자가 있는 `IconButton`으로 그린다.
+
+  `scripts/codemods/button-020.mjs`가 아이콘 `Button`을 글자가 있는 `IconButton`으로, `CopyButton`과 그 자리의 `ActionFooter` `actions` 리터럴 `variant`를 새 축으로 옮긴다. 리터럴 `variant="link"`는 `appearance="link"`로, `*MenuTrigger asChild` 바로 안의 끝 `ChevronDown`은 `menuIndicator`로 옮긴다.
+
+- 71ce3f9: `EmptyState`의 `bordered` 카드 크기를 정한다. 폭은 부모를 채우되 560px까지이고 가운데에 놓인다. `md`는 높이가 240px 아래로 줄지 않는다. `sm`과 `lg`는 내용 높이를 따르고, `bordered`가 아니면 달라지지 않는다.
+- 141c7f5: `DataTable` 1024px 미만 카드와 `ListCard`에 행 메뉴를 더하고 아이콘 자리와 메타 줄을 바꿨다.
+
+  - `DataTableMobileCardContent.actions`, `ListCard`의 `actions`(`ListCardActions`): `{ items, label }`을 받아 ⋮ 버튼(`IconButton` md, ghost·neutral)과 `ActionMenu`를 그린다. 1024px 미만에서는 메뉴 시트로 열린다. `label`은 ⋮ 버튼의 접근 이름이다.
+  - 아이콘 자리: 아이콘이 하나면(⋮만, 또는 이동 화살표만) 오른쪽 위, 제목 줄에 둔다. ⋮과 이동 화살표가 같이 있을 때만 이동 화살표를 오른쪽 아래로 내리고 카드 최소 높이를 84px로 둔다. 이동 화살표가 세로 가운데에서 오른쪽 위로 옮겨 간다.
+  - 아래 줄의 날짜(`date`, `ListCard`의 `caption`)를 `status`에서 떼어 냈다. 상태 배지나 날짜 중 하나만 있어도 아래 줄을 그린다.
+  - `DataTableMobileCardContent.ariaLabel`: 제목이 글자(`string`, `number`)면 생략할 수 있고, 생략하면 제목 글자가 카드의 접근 이름이 된다. 제목이 다른 노드면 타입이 `ariaLabel`을 요구한다.
+  - `value`는 오른쪽 윗줄, 아이콘 왼쪽에 둔다. 앞 요소(`leading`, 행 선택 체크박스)는 제목 줄에 맞춘다.
+  - 메타는 묶음 하나를 한 줄로 그린다. 값 사이는 `·` 대신 12px 간격이고, 값 중간에서는 줄을 바꾸지 않는다. 스크린 리더가 값을 끊어 읽도록 값 사이에 숨긴 쉼표를 둔다. `meta` 타입은 그대로다.
+  - `onRowClick`이나 링크 없는 `rowHref` 카드는 제목이 `button`이 되고, 그 ::after가 카드 전체를 덮는다. 목록 항목(`listitem`)은 더 이상 클릭과 포커스를 받지 않는다. 행 선택 체크박스와 ⋮은 제목 버튼 밖에 놓여 따로 눌리고, ⋮ 메뉴 선택이 `onRowClick`으로 번지지 않는다.
+  - `ListCard`에 `actions`와 `href`나 `onClick`을 같이 주면 카드 전체 대신 제목이 링크나 버튼이 된다. `actions`가 없으면 전과 같다.
+
 ## 0.20.0-next.4
 
 ### Minor Changes