fix(sw): widen the step header text logo to its content
- SWProcessHeader logoText: at least 58px and as wide as the text, instead of a fixed 58px place that cut longer words (home >= 106px) - Align JSDoc (SWHeader, SWViewerHeader, SWProcessHeader) and docs with the content-width logo slot: DESIGN_RULES §1 common rule and §14, COMPONENT_CATALOG, VIEWER.md, SW Header / Step Header specs - No prop or public API change
This commit is contained in:
1 parent
9a861a8d55
commit
e70082550e
9 files changed
+24
-16
No files matched your search
@@ -159,6 +159,6 @@ const groups: SWViewerHeaderGroup[] = [
|
||||
|
||||
## 7. 디자인 변경 시 주의
|
||||
|
||||
- 크기(52px Header, 34px 버튼, 40px 토글·스위치 칸, 41~42px field 면)와 색은 참고 뷰어 실측값이고(Model / Layout 탭은 2026-10-23 Figma 7652:40344 모양, 높이는 field 그룹과 같은 42px·버튼 37.5px), 로고 면 64px는 2026-10-23 `SWHeader` 로고 기준입니다. 파일명·객체 수정·속성 면 배경은 SWHeader와 같은 사용자 확정 토큰(`--hm-sw-header-document-*`, `object-*`, `property-*`)을 공유하므로 바꾸면 두 Header가 함께 바뀝니다.
|
||||
- 크기(52px Header, 34px 버튼, 40px 토글·스위치 칸, 41~42px field 면)와 색은 참고 뷰어 실측값이고(Model / Layout 탭은 2026-10-23 Figma 7652:40344 모양, 높이는 field 그룹과 같은 42px·버튼 37.5px), 로고 면은 2026-10-23 `SWHeader` 로고 기준이며 폭은 고정값이 아니라 로고 내용 폭을 따릅니다(Header 테두리 1px 안쪽에서 11 + 로고 + 36, 로고 위치는 SWHeader와 같은 x 12. 32 × 17 예시 로고에서 79px은 측정 예시, 공통 원칙은 [DESIGN_RULES.md](./DESIGN_RULES.md) §1). 파일명·객체 수정·속성 면 배경은 SWHeader와 같은 사용자 확정 토큰(`--hm-sw-header-document-*`, `object-*`, `property-*`)을 공유하므로 바꾸면 두 Header가 함께 바뀝니다.
|
||||
- **높이:** 패키지는 뷰어(도면) 영역 높이를 정하지 않습니다. Header는 52px 한 줄, 팝업만 최대 90vh입니다. 화면 높이는 앱의 상위 레이아웃이 정하고(예: `html, body, #root { height: 100% }` → 세로 flex, Header 다음 도면 영역 `flex: 1; min-height: 0`), 도면 영역 크기 변화에 맞춰 렌더러 크기를 바꾸는 것은 프로그램 담당입니다(ResizeObserver 권장). Storybook 예시의 고정 높이는 미리보기 프레임 값일 뿐 컴포넌트 값이 아닙니다.
|
||||
- Light/Dark 분기는 없습니다. 참고 뷰어와의 알려진 차이: 도면 공간(tabs) field 면 높이 42px(참고 41px — 참고 Tabs 루트가 39px인 구현 부산물), 크기 조절은 네이티브 `resize` 대신 같은 위치의 모서리 Grip(모든 브라우저 동작), 패널 Escape 닫기 추가, 로고 기본 표시 없음(사용자 결정).
|
||||
Reference in new issue
Block a user