fix: align disabled input label opacity with ui_viz
This commit is contained in:
1 parent
4cfe224123
commit
91c8e5e14e
5 files changed
+86
-5
No files matched your search
@@ -91,6 +91,14 @@ native `<input>` 동작 전체(`type`, `file:` 스타일 class, `placeholder`),
|
||||
|
||||
## 10. 사용자 확정 결정
|
||||
|
||||
**2026-10-11 최종 사용자 결정 — Disabled Input Label**
|
||||
|
||||
- Input Story 소비 조합(`src/components/input.stories.tsx`의 `Specimen`)의 Disabled Label은 기존 `text-muted-foreground` → `--muted-foreground` → `--hm-sem-fg-secondary` 색(`#6E6759`)을 유지하고, `input.disabled`일 때만 `opacity-60`을 적용한다. HEX·Semantic Token·공개 Input API는 변경하지 않는다.
|
||||
- Disabled Input 컨트롤 `0.6`, 소비 Label `0.6`, 부모 Field `1`이다. 형제 요소에 각각 적용하여 중첩 opacity를 만들지 않는다. 기본·readOnly·Error Label은 기존 `1`을 유지한다(Disabled가 아닌 경우).
|
||||
- 공통 [Label Component](label.md#4-상태-규격)의 Disabled `0.5`는 유지한다. Helper Text(`#6E6759`)와 Error Message(`#D32F2F`)도 기존 구현을 유지하며 이번 변경 대상이 아니다.
|
||||
- 이전 검토의 “Label 100% 유지”는 당시 선택이며 현재 최종 결정은 Disabled Input Story Label `60%`다. 아래 2026-10-02 승인과 2026-10-06 검증은 당시 기록으로 보존하며, 이번 Label 정책의 현재 검증을 대신하지 않는다.
|
||||
- 실제 소비 화면은 자동으로 확대 수정하지 않는다. 신규 화면의 공개 Label 재사용·control 연결 계약은 유지하며, 공통 Label의 Disabled 정책을 이 Story 결정으로 대체하지 않는다.
|
||||
|
||||
**2026-10-02**
|
||||
|
||||
- Input Disabled opacity `0.6` 확정.
|
||||
@@ -131,3 +139,9 @@ src/components/story-board.tsx
|
||||
- `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 기존 문서 예시 CSS warning 및 Storybook chunk 크기 / plugin timing warning 유지.
|
||||
- 검증 범위: Chromium 환경. 다른 브라우저의 렌더링은 별도 확인이 필요하다.
|
||||
- 대표 `All`과 숨김 `InvalidFocus` 확인. 일반 Focus는 border만 변경, Small/Medium/Large 28/34/42px 및 12/14/16px 유지. Readonly border 0 / padding 0, Disabled opacity 0.6 유지. Border CSS 계약 1.5px, 이 브라우저 환경의 computed border-width는 1px으로 정규화; padding 보정은 11.5px 유지. 기존 non-invalid Readonly의 UA outline 정책은 이번 범위에서 유지.
|
||||
|
||||
### Disabled Input Label 검증 (2026-10-11)
|
||||
|
||||
- 실제 Storybook(Chromium/Edge): Disabled Label `rgb(110, 103, 89)` / opacity `0.6`, Input `0.6`, 부모와 모든 조상 opacity `1`. 공통 Label Disabled `0.5`, Input Default/readOnly/Error Label `1` 유지.
|
||||
- 실제 배경 `rgb(245, 240, 229)`에서 합성색 약 `#A49E91`, 대비 약 `2.35:1`(원본 100% 약 `4.93:1`). 일반 텍스트 `4.5:1`보다 낮으며, 실제 disabled 컨트롤에 연결된 비활성 UI 라벨의 WCAG 1.4.3 예외와 구분한다. 사용자 확정 정책은 유지하고 가독성 우려를 기록한다.
|
||||
- Default/Disabled/Readonly/Error/Error Message/Playground 및 대표 All 390/768/1280/1440px, `htmlFor`/control 연결·편집·readOnly·disabled focus·문서 overflow 확인. Typecheck, UI build, Storybook build 통과. Guard FAIL 0, 원본 `NOT VERIFIED` 보존. [검증 범위와 제한](../reports/disabled-input-label-2026-10-11.md).
|
||||
@@ -93,12 +93,12 @@ Radix Label 동작·접근성, `data-slot`, `cn(..., className)`, `select-none`,
|
||||
|
||||
## 10. 사용자 확정 결정
|
||||
|
||||
- 추가 사용자 결정 없음.
|
||||
- **2026-10-11 최종 사용자 결정**: [Input Story 소비 조합의 Disabled Label](input.md#10-사용자-확정-결정)은 원본 색 `#6E6759` / opacity `0.6`을 적용한다. 공통 Label Component의 Disabled `0.5`는 그대로 유지한다. Input 기본·readOnly·Error Label은 Disabled가 아니면 `1`, Message / Helper Text는 기존 구현 유지다. 이 결정은 공통 Label API·Theme·Checkbox/Switch/Radio Label 규칙으로 확대하지 않는다.
|
||||
|
||||
## 11. 미확정 / 보류
|
||||
|
||||
- 독립 Label 규격 없음. Input·Textarea Field Label 값을 Label 컴포넌트에 적용한 것이다. Checkbox/Radio option label의 전경 role은 ui_viz `TBD`(`field-semantics.md` §3)이므로 해당 컴포넌트 작업에서 따로 확인한다.
|
||||
- Disabled opacity: Input의 "Label·Message 포함 .6"(2026-10-02 Input 한정 결정)은 확대하지 않고 shadcn 기본 0.5를 유지.
|
||||
- Disabled opacity의 과거 기록: Input의 "Label·Message 포함 .6"(2026-10-02 Input 한정 결정)은 공통 Label로 확대하지 않고 shadcn 기본 `0.5`를 유지했다. 2026-10-11 최종 결정은 Input Story 소비 Label만 `0.6`으로 적용하며, Message는 변경하지 않는다. 이전 검토의 “Label 100% 유지”와 과거 검증은 당시 기록이고 현재 정책은 §10을 따른다.
|
||||
- Required 표시 색(`#D32F2F`, TEXTAREA-07)과 표시 방식은 소비 조합이다. 컴포넌트 API 없음.
|
||||
- D-093 원본 실행본 13/700: `KNOWN_DEVIATION / FOLLOW_UP`.
|
||||
|
||||
@@ -118,3 +118,4 @@ src/components/label.stories.tsx
|
||||
- Storybook computed style(`components-form-label--all`): 14px / 20px / 500, color `rgb(110,103,89)`, Disabled 연결 시 opacity 0.5.
|
||||
- 라벨 클릭 시 연결된 input으로 실제 focus 이동 확인.
|
||||
- 2026-10-02 당시 미확인: 사이드바 화면, 390px 폭, Checkbox/Radio와의 조합. 현재 Checkbox/Radio는 구현되어 있으나 이 과거 검증 기록이 조합 검증 완료를 뜻하지는 않는다.
|
||||
- 2026-10-11 선택 회귀: 실제 공통 Label 대표 Story Disabled의 색 `rgb(110, 103, 89)` / opacity `0.5`, 부모 `1`, disabled Input과의 `htmlFor` 연결 확인. 공통 Label 구현·Theme는 변경하지 않았다. [Input Story Label 60% 별도 결정 및 검증](../reports/disabled-input-label-2026-10-11.md).
|
||||
Reference in new issue
Block a user