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

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # @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
+
+- 7f40e11: `ActionFooter` 배치를 바꿨다. 저장 상태가 남는 폭을 채우지 않고 주요 작업 묶음 바로 앞에 붙는다.
+
+  - 640px 이상: 위험 작업 묶음은 시작 쪽, 저장 상태와 주요 작업 묶음은 끝 쪽에 한 줄로 놓는다.
+  - 640px 미만: 넘칠 때만 줄을 바꾸던 배치 대신 두 줄로 고정한다. 윗줄은 위험 작업 묶음과 저장 상태, 아랫줄은 주요 작업 묶음이다. 주요 작업 버튼은 같은 폭으로 아랫줄을 채운다. 위험 작업과 저장 상태가 모두 없으면 윗줄을 두지 않는다.
+  - DOM 순서와 포커스 순서는 그대로다.
+
+- 1b23296: DataTable의 좁은 화면 카드를 새로 공개한 `ListCard`로 바꿨다.
+
+  - **breaking**: `getMobileCardContent(row)`가 필수 prop이다. 반환 객체 `{ title, ariaLabel, leading?, meta?, status?, date?, value? }`가 카드 하나를 정한다. 첫 열과 나머지 열로 그리던 label:value 카드와 그 `data-slot`(`data-table-mobile-card-primary`, `-field`, `-select`)은 지웠다. 카드의 접근 이름은 `ariaLabel`이다.
+  - 표와 카드가 바뀌는 경계를 `md`에서 `lg`로 옮겼다.
+  - 좁은 화면 정렬은 목록 위 오른쪽의 정렬 버튼 하나다. 누르면 정렬 가능한 열의 라디오 메뉴가 열리고, 같은 열을 다시 고르면 오름차순, 내림차순, 정렬 해제 순으로 바뀐다. 접근 이름은 "정렬 학번, 오름차순" 꼴이다. 옛 정렬 토글 줄(`data-table-mobile-sort-toolbar`)은 지웠다.
+  - 선택 가능한 표는 카드 위에도 전체 선택 체크박스를 둔다.
+  - `virtual` 없이도 마운트 뒤에는 CSS가 보이는 쪽(표나 카드)만 행을 그린다. 서버 렌더와 첫 페인트는 그대로 둘 다 그린다. 경계를 넘을 때 포커스는 같은 행으로 옮긴다.
+  - `virtual` 카드 목록은 카드마다 높이를 재고, 안 잰 카드는 잰 카드 평균으로 어림한다.
+  - `align: "right"` 셀이 더는 흐려지지 않는다. 열 머리는 그대로다.
+  - `ListCard`: 제목, 메타 줄 2개, 상태 배지와 날짜의 아래 줄, 오른쪽 주 값(`value`)과 이동 화살표. 상태가 없으면 `caption`을 그리지 않는다.
+
+- 1b23296: Use the 1024px desktop boundary for overlays, forms, and responsive page layouts. Share the overlay media query between menu presentation and swipe dismissal.
+
+### Patch Changes
+
+- 1f6ee84: `Button` 라벨 줄 높이를 아이콘 크기와 같게 한다. `xs`는 14px, `sm`·`md`는 16px, `lg`·`xl`은 18px이다. 이전에는 라벨이 바깥 본문의 줄 높이를 물려받아 아이콘보다 줄 상자가 컸다. 버튼 높이와 글자 크기는 그대로다. 글자의 세로 위치는 0.5px 안에서만 달라진다.
+- 52a99dc: 컨트롤 여백을 폐기된 `--pad-*` 유틸리티 대신 같은 값의 `--space-*`로 쓴다. Button, Input, Textarea, Select, Checkbox, RadioGroup, Card, Tabs의 값이 그대로라 화면 변화는 없다.
+- Updated dependencies [1b23296]
+  - @olundot/tokens@0.18.0-next.2
+
 ## 0.20.0-next.3
 
 ### Minor Changes