UI v0.21.1 Tabs디자인개편 - #38
Hidden character warning
Conversation
Tabs 아이템 높이를 sm/md/lg 모두 36px로 통일해 Button·Input·Calendar 트리거와 동일한 표준 컨트롤 높이(총 48px)를 맞추고, size는 폰트 크기만 변경하도록 조정. 배경을 투명(옐로우 보더) 패턴으로 바꿔 Calendar 트리거· SelectBox와 시각 언어를 일치시키고 hover 텍스트 대비를 보정. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request bumps the package version to 0.21.1 and refactors the Tabs component design tokens in src/styles/token.semantic.css to unify control heights and update background and border colors. Feedback highlights that the corresponding documentation needs to be updated to reflect these new token values, and points out a potential discrepancy in the comment's height calculation formula regarding the border width.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| /* 총 렌더 높이 = 아이템 높이 + 패딩(4px×2) + 보더(2px×2) = 48px 고정. | ||
| Button/Input/Calendar 트리거와 동일한 표준 컨트롤 높이 — size는 폰트 크기만 변경 */ | ||
| --tabs-item-height-sm: 36px; | ||
| --tabs-item-height-md: 36px; | ||
| --tabs-item-height-lg: 36px; |
There was a problem hiding this comment.
새롭게 변경된 디자인 토큰 값들이 문서 파일(ui-docs-site/components/tabs.md)에 반영되지 않았습니다.
문서의 디자인 토큰 섹션에 기재된 기존 값들(높이 28 / 34 / 42px, 배경색 secondary-300, 테두리 색상 border-divider 등)을 이번 변경 사항에 맞춰 함께 업데이트해 주셔야 문서와 실제 코드 간의 불일치를 방지할 수 있습니다.
또한, 주석의 계산식에서 보더(2px×2)로 계산하여 총 렌더 높이를 48px로 명시하셨으나, yds-tabs 컴포넌트에 적용된 보더 두께인 var(--yds-border-width)가 만약 1px라면 실제 총 렌더 높이는 46px이 됩니다 (36px + 8px + 2px = 46px).
--yds-border-width가 1px인지 혹은 실제 의도한 보더 두께가 2px인지 확인하시고, 주석의 계산식이나 토큰 설정을 일치시켜 주시기 바랍니다.
1 participant
개요
Tabs 컴포넌트의 시맨틱 토큰을 정비했습니다. 다른 표준 컨트롤(Button·Input·Calendar 트리거)과 높이·시각 언어를 통일합니다.
변경 사항
refactor: Tabs 컨트롤 높이 통일 및 배경·보더 토큰 정비
--tabs-item-height-sm/md/lg를 모두36px로 통일 (총 렌더 높이 = 36 + 패딩 4×2 + 보더 2×2 = 48px 고정). size는 이제 폰트 크기만 변경--color-tabs-bg를transparent로,--color-tabs-border를--color-border-primary-light로 변경 → Calendar 트리거·SelectBox와 동일한 "투명 배경 + 옐로우 보더" 패턴primary-100→primary-200으로 보정커밋 구성
🤖 Generated with Claude Code