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).
|
||||
Reference in new issue
Block a user