@t3q-ui/design-system 1.58.0 → 1.59.0

package/skills/tds/reference/components.md

@@ -26,7 +26,7 @@ MCP `docs-list` / `docs-show <id>` / `docs-show-story` 와 같은 내용이다.
 
 | prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
-| `titleRight` | `ReactNode` |  | Right-aligned slot next to the title (e.g. a secondary title action). |
+| `titleRight` | `ReactNode` |  | 제목 오른쪽 자리. 정보가 있는 작은 행동만 둔다(예: `PageHeaderRefreshButton`). 상태는 `status`·`meta` 에 두고, 장식 Tag·Badge·글자는 넣지 않는다(2026-11-06). |
 | `actions` | `ReactNode` |  | 주요 행동 버튼. 제목 줄 오른쪽 (ListPage·DetailPage 와 같은 자리, 2026-10-19 14차) |
 | `stats` | `DashboardStat[]` |  | 맨 위 요약 타일. 2열, 넓은 화면(xl)에서 4열, 간격 12px |
 | `loading` | `boolean` |  | true 면 타일 숫자 자리에 Skeleton. 패널 로딩은 각 DashboardPanel 의 `loading` |
@@ -46,7 +46,7 @@ const Default = () => <DashboardDemo />;
 | prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
 | `meta` | `ReactNode` |  | 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup` + `MetaItem` — 가로로 흘려 다음 줄로(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다, 2026-11-06 격자 대신 흘림) |
-| `titleRight` | `ReactNode` |  | Right-aligned slot next to the title (e.g. a secondary title action). |
+| `titleRight` | `ReactNode` |  | 제목 오른쪽 자리. 정보가 있는 작은 행동만 둔다(예: `PageHeaderRefreshButton`). 상태는 `status`·`meta` 에 두고, 장식 Tag·Badge·글자는 넣지 않는다(2026-11-06). |
 | `primaryAction` | `DetailPageAction` |  | 주 행동 1개 (예: 배포·새 추론 서비스). `primaryBold` 로 맨 오른쪽에 그린다 |
 | `secondaryActions` | `DetailPageAction[]` |  | 보조 행동들 (예: 다운로드·복제·새 버전). `secondary` 로 주 행동 왼쪽에 준 순서대로 — 2개까지만 보이고 3번째부터는 "더보기" 메뉴로 접힌다(2026-10-19 14차) |
 | `deleteAction` | `DetailPageAction` |  | 삭제. 항상 "더보기" 메뉴 안(구분선 아래 danger 항목)에 둔다 — 빨간 버튼을 첫 화면에 펼치지 않는다(2026-10-19 14차). 확인 Dialog 는 소비 앱이 onClick 에서 연다 |
@@ -149,7 +149,7 @@ const Default = () => <FormDrawerDemo />;
 | `error` | `ReactNode` |  | 서버 오류 등 폼 전체 오류. 버튼 위에 Alert(danger) 로 표시 |
 | `submitMode` | `enum` |  | 제출 버튼 활성 규칙. `always`(기본) = 제출 중이 아니면 항상 눌리고, 누르면 react-hook-form 이 검증해 틀린 항목마다 FormMessage 를 보인다. `whenValid` = 모든 입력이 유효해질 때까지 잠근다(2026-10-12 전 기본). "누르면 검증해 이유 표시" 가 흔한 폼 관례라 기본을 바꿨다 |
 | `children` (필수) | `ReactNode` |  | FormSection 으로 묶은 FormField 들 |
-| `titleRight` | `ReactNode` |  | Right-aligned slot next to the title (e.g. a secondary title action). |
+| `titleRight` | `ReactNode` |  | 제목 오른쪽 자리. 정보가 있는 작은 행동만 둔다(예: `PageHeaderRefreshButton`). 상태는 `status`·`meta` 에 두고, 장식 Tag·Badge·글자는 넣지 않는다(2026-11-06). |
 | `onCancel` | `(() => void)` |  | 취소 버튼 핸들러. 없으면 취소 버튼을 그리지 않는다 |
 | `requiredLegend` | `boolean` |  | true 면 폼 맨 위에 "* 표시는 필수 입력 항목입니다" 안내 한 줄 |
 | `canvas` | `enum` | `plain` | 본문 바탕. 'plain'(기본)은 흰 캔버스에 섹션 구분선. 'subtle' 은 연한 회색 캔버스 위에 폼 전체를 흰 Card 하나로 — UIClip 폼 진단(evals/metrics-spec §16.7)용 옵트인이며 캔버스 정책(DESIGN.md)은 흰색 그대로다 |
@@ -175,7 +175,7 @@ const Invalid = () => <FormPageDemo invalid />;
 |---|---|---|---|
 | `title` (필수) | `string` |  | 페이지 제목 (h1) |
 | `description` | `ReactNode` |  | 제목 아래 설명 |
-| `titleRight` | `ReactNode` |  | 제목 오른쪽 슬롯 (예: 새로고침 버튼·마지막 갱신 시각) |
+| `titleRight` | `ReactNode` |  | 제목 오른쪽 슬롯 (예: 새로고침 버튼·마지막 갱신 시각). 장식 Tag·Badge·글자는 넣지 않는다 |
 | `actions` | `ReactNode` |  | 주요 행동 버튼 (보통 1개). 제목 줄 오른쪽(PageHeader `actions`) — 2026-10-19 14차: 페이지 수준 행동은 제목 줄(Polaris 인덱스 페이지·GitHub Issues·기준선과 같은 자리). 1.22.0~1.47.4 의 필터 줄 왼쪽(SharePoint 계열)은 2026-10-13 UIClip(폐기된 자) 근거였다 |
 | `filters` | `ReactNode` |  | 검색·필터 컨트롤. 헤더 오른쪽 아래 (TableFilter*, ColumnFilter 등) |
 | `onResetFilters` | `(() => void)` |  | 필터를 되돌리는 핸들러. 주면 빠른 필터 줄(표 바로 위) 오른쪽 끝에 "필터 초기화" 외곽선 버튼이 **항상** 자리를 잡는다(빠른 필터·건수가 없으면 filters 줄 끝). 검색창은 그래서 표 오른쪽 끝까지 닿는다(2026-10-18 10차). 필터가 걸렸을 때만 조건부로 넘기지 말고(빈 결과에서 버튼이 튀어나와 배치가 바뀐다) 항상 넘기고 `filtersActive` 로 보일지를 정한다 |
@@ -1002,7 +1002,7 @@ const Basic = () => (
 |---|---|---|---|
 | `breadcrumbTitle` | `string \| null` |  | Optional override for the breadcrumb tail (last item). - `undefined` (default): consuming apps may fall back to `title`. - `null`: explicitly suppress the auto-appended breadcrumb tail. - `string`: use the given text as the breadcrumb tail regardless of `title`.  design-system itself does not render breadcrumbs (they are passed in as the `breadcrumb` slot) — this field is a contract for the consuming app's breadcrumb wrapper to read. |
 | `meta` | `ReactNode` |  | 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup` + `MetaItem` — 가로로 흘려 다음 줄로(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다, 2026-11-06 격자 대신 흘림) |
-| `titleRight` | `ReactNode` |  | Right-aligned slot next to the title (e.g. a secondary title action). |
+| `titleRight` | `ReactNode` |  | 제목 오른쪽 자리. 정보가 있는 작은 행동만 둔다(예: `PageHeaderRefreshButton`). 상태는 `status`·`meta` 에 두고, 장식 Tag·Badge·글자는 넣지 않는다(2026-11-06). |
 | `contentMaxWidth` | `string` |  | 내용(빵부스러기·제목·행동·설명·탭)의 최대 폭 — CSS 길이(예: `var(--max-w-page-content)`). 주면 그 폭 안에 가운데 두고 띠(배경·아래 선)는 전폭 그대로. FormPage 가 폼 폭에 맞춰 넘긴다(2026-10-26 22차). 기본 없음 = 전폭 |
 
 예시 — story "WithTabs — 탭 + 배지 (controlled)":