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

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @olundot/ui
 
+## 0.20.0-next.6
+
+### Minor Changes
+
+- 3d64e18: `DataTable`에 행 펼침을 더했다.
+
+  - `renderExpanded(row)`: 펼친 내용을 그린다. 처음 펼칠 때 그리고 접어도 남겨 두어 닫을 때도 높이가 전환된다.
+  - `getExpandLabel(row)`: 펼침 버튼과 펼치는 카드 제목의 접근 이름이다. `renderExpanded`와 함께 필수다.
+  - `expandedIds`, `onExpandedChange`: 펼친 행의 `keyField` 값이다. `expandedIds`가 없으면 표가 상태를 가진다. 여러 행을 함께 펼칠 수 있다.
+  - 1024px 이상: 표 끝에 40px 열을 붙이고 32px 펼침 버튼(`IconButton` md, ghost·neutral, `chevron-right`)을 둔다. 펼치면 화살표가 90° 돈다. 행의 빈 곳을 눌러도 펼친다. 펼친 내용은 바로 아래 행 하나에 표 폭으로 그린다.
+  - 1024px 미만: 카드 제목이 펼침 버튼이 되고 그 ::after가 카드를 덮는다. `value` 뒤, ⋮이 있으면 그 아래에 도는 화살표를 둔다. 펼친 내용은 카드 안 아래쪽에 그린다. ⋮과 행 선택 체크박스는 제목 밖에서 따로 눌린다.
+  - 높이는 `grid-template-rows` `0fr`→`1fr`로 `--dur-base` 동안 바뀐다. 접힌 내용은 `visibility: hidden`이라 포커스와 클릭을 받지 않는다. 동작 줄이기 설정에서는 전환이 없다.
+  - `rowHref`, `linkComponent`, `onRowClick`, `virtual`과는 함께 쓸 수 없다. 타입이 막는다. `selectable`과는 함께 쓴다.
+  - `DataTableProps`는 이제 두 갈래(이동, 펼침)의 유니온 타입이다. `interface … extends DataTableProps<T>`로 넓히던 코드는 `type … = DataTableProps<T> & …`로 바꾼다. `Partial<DataTableProps<T>>`를 펼쳐 넘기던 코드는 `renderExpanded`가 선택값이 되어 타입 오류가 날 수 있다.
+
+- 08232da: `EmptyState`에 `layout`을 더했다. 기본값 `inline`은 지금과 같다.
+
+  - `layout="page"`는 화면 본문 전체를 대신하는 빈 상태다. 폭은 부모를 채우고 내용은 가로 가운데에 둔다.
+  - 768px 이상에서는 가장 가까운 세로 스크롤 영역의 남은 높이만큼 늘어나 내용을 세로 가운데에 둔다. 위아래 형제와 여백을 뺀 높이라 스크롤이 생기지 않는다. 내용이 이미 넘치면 늘지 않는다.
+  - 768px 미만에서는 위쪽에 붙이고 위 여백을 `--space-12`로 둔다.
+  - 앱에서 화면 단위 빈 상태를 가운데에 두던 `flex min-h-[50vh] items-center justify-center` 래퍼는 지우고 `layout="page"`를 쓴다.
+
+- ea4266c: `bg-inset` 바탕 위 neutral 표식이 바탕과 같은 색이 되지 않게 했다. 공개 prop은 그대로다.
+
+  - 채움이 `--fill-on-bg`를 따른다: Badge `neutral`, Chip 개수(`neutral`, `muted`), TwoTierBadge `neutral` 채움. 값이 없으면 예전 채움을 쓴다.
+  - `--fill-on-bg`를 넘기는 곳: `contained` Tabs 목록, ModeToggle, 눌린 `muted` Chip, `filled` + `neutral` Button과 IconButton, 파일이 든 FileUploadZone. 앱의 `bg-inset` 유틸리티도 같다.
+  - 되돌리는 곳: `surface` 공통 배경(Card, DataTable, EmptyState 등), `neutral` Chip, `outline` Button과 IconButton.
+  - 라이트의 inset 바탕 위 Badge `neutral`은 #F1F1F2에서 #FFFFFF로 바뀐다. 다크의 Chip 개수는 #16181D에서 #26272B로 바뀐다. inset 바탕 밖은 바뀌지 않는다. 눌린 `muted` Chip의 개수는 예외로, 칩 자체가 inset이라 라이트에서 흰 채움이 된다.
+  - `bg-[var(--bg-inset)]` 같은 임의값 바탕은 넘기지 않는다. 앱은 `bg-inset` 유틸리티를 쓴다.
+
+- 9f80206: `Switch`에 `labelPlacement`와 `fullWidth`를 더한다. `labelPlacement="start"`는 라벨을 앞에, 트랙을 뒤에 둔다. 기본값 `end`는 지금과 같다. `fullWidth`를 주면 행이 부모 폭을 채우고 트랙이 오른쪽 끝에 놓인다. 라벨이 길면 라벨이 줄을 바꾸고 트랙은 첫 줄 오른쪽 끝에 남는다. 설명은 라벨 아래에서 라벨과 같은 선에서 시작한다.
+
+  라벨과 설명은 어절 경계에서만 줄을 바꾼다(`word-break: keep-all`). 두 배치 모두에 적용되어, 좁은 칸에서 단어 중간이 끊기던 기존 사용처의 줄바꿈도 바뀐다.
+
+- 3ff068d: `Tabs`의 `TabItem.badge`를 건수 알약으로 바꿨다. 공개 API는 늘지 않는다. `line`, `contained`, 세로 방향 모두 해당한다.
+
+  - 모양: 테두리가 없어지고, 채움은 `--action-selected` 반투명 겹침이라 바탕을 따라간다. 숫자는 탭 글자색을 따른다. 높이는 18px에서 16px로 줄고 글자 굵기는 600에서 500으로 바뀐다. 선택된 탭의 테두리 강조는 없어진다.
+  - 1000부터 `999+`로 보인다. 예전에는 100부터 `99+`였다.
+  - 0도 보인다. 예전에는 0을 숨겼다. 숨기려면 값을 넘기지 않는다. 음수와 `NaN`은 보이지 않는다(개발 모드에서 경고).
+  - 탭 접근 이름에 실제 수가 들어간다. "감지 내용 12"처럼 읽고, `999+`로 보이는 탭도 "학생 1234"처럼 실제 수로 읽는다. 보이는 알약은 그대로 `aria-hidden`이다.
+  - 알약 글자 굵기는 고정이라 선택이 바뀌어도 탭 폭이 그대로다.
+
+  탭 목록이 넘치면 가로 스크롤은 그대로 되고 스크롤바만 숨긴다. 키보드로 고른 탭이 보이는 자리로 스크롤되는 동작은 그대로다.
+
+### Patch Changes
+
+- Updated dependencies [ea4266c]
+  - @olundot/tokens@0.18.0-next.3
+
+## 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