feat(core): icon button 토큰 적용 및 사이즈, 컨테이너 레이아웃 변경#572
Open
dididoeun wants to merge 16 commits into
Open
Conversation
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughIconButton의 size 타입을 확장하고 테마 토큰(spacing, dimension, radius) 기반 계산을 도입해 variant별 width/height/padding/border-radius 산정을 재구성했습니다. getInteractionSize 반환이 단순화되고, 테스트·시각 픽스처·문서 예제가 확장되었습니다. ChangesIconButton 크기 정책 시스템 토큰화
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/icon-button/style.ts`:
- Around line 195-199: The solid/outlined branch hardcodes padding to
theme.spacing[6], which breaks icon sizing when numeric sizes are used; replace
the fixed padding in the variant === 'solid' || variant === 'outlined' block
with a computed padding derived from the container "box" minus the requested
icon "size" so the icon's font-size equals the visible content area (i.e.,
compute padding = (dimensionToken(theme, clampedBox) - sizeToken)/2 or
equivalent using existing tokens), keeping use of dimensionToken and clampedBox
and removing theme.spacing[6] so padding adapts to numeric size inputs.
- Around line 55-57: getBackgroundBoxSize can return a token smaller than the
WCAG minimum 24×24 target; modify getBackgroundBoxSize to enforce a minimum 24px
clamp before mapping to tokens (e.g., compute the desired size as max(icon *
1.5, 24) and then call nearestToken on that value), so references to
getBackgroundBoxSize, nearestToken, and DIMENSION_TOKENS are used but the mapped
token will never be below the 24px equivalent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3115a349-7845-463f-a9e1-bd7b3e1d9ba4
📒 Files selected for processing (5)
packages/core/src/components/icon-button/index.test.tsxpackages/core/src/components/icon-button/index.tsxpackages/core/src/components/icon-button/style.tspackages/core/src/components/icon-button/types.tstests/visual/src/fixtures/icon-button.tsx
Contributor
🚀 Preview
|
dididoeun
added a commit
that referenced
this pull request
May 28, 2026
WCAG 2.2 SC 2.5.8 Target Size (Minimum) 준수를 위해 background variant 박스 크기도 max(24 nearestDimensionToken(icon × 1.5))로 clamp. normal/outlined/solid와 동일 정책으로 4 variant 전반 일관성 확보. CodeRabbit review 반영 (#572). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
size에 'xlarge' | 'large' 토큰 추가. normal variant에서 interaction = icon × 1.5 (홀수 → 짝수 ceil) radius = round-nearest(interaction × 0.3 radiusToken tie→down) 공식으로 통일. number size에도 동일 공식 적용. outlined/solid는 'xlarge'/'large'를 'medium'으로 폴백시켜 기존 정책 유지. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
WCAG 2.2 SC 2.5.8 Target Size (Minimum) 준수를 위해 normal variant interaction 영역을 max(24 evenCeil(icon × 1.5))로 clamp. 토큰 케이스는 변동 없고 number size가 작을 때(<16)만 24×24로 끌어올림. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- background variant 박스 크기 = nearest dimension token(icon × 1.5 tie→up). ::before 글래스와 backgroundBlendStyle은 inset:0으로 박스를 채움. - normal variant 박스 크기도 nearest dimension token으로 치환 (이전 짝수 보정 로직 대체). radius는 round-nearest(box × 0.3 radiusToken tie→down) 유지. - WCAG 24×24 clamp는 normal에서만 유지. - 변경 결과: normal large 30→32(r10) normal number=22 34→32 background size=20 30→32. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
medium의 아이콘 20→18 small의 아이콘 18→16로 줄임. 박스 크기는 40/32 그대로 두고 padding을 10→11 7→8로 조정. number size는 기존 padding 6 유지. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
WCAG 2.2 SC 2.5.8 Target Size (Minimum) 준수를 위해 outlined/solid variant의 number size를 max(24 N)으로 clamp. 토큰(medium/small)은 이미 24 이상이라 변동 없음. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
button(5a3a2ea) 패턴 따라 theme.dimension/spacing/radius 사용. normal/background의 동적 박스/패딩은 dimensionToken/spacingToken/ radiusToken 헬퍼로 lookup하고 토큰에 없는 값(padding 5 11)은 px 폴백. 컨테이너 border-radius 9999px → theme.radius.full. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- background variant interaction 영역을 container 100%로 변경(이전 calc(100% + 8px)). normal/outlined/solid와 동일 정책. - background 미지정 시 기본 아이콘 24 → 20으로 변경. 박스는 자동 토큰(32×32)으로 산출. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
WCAG 2.2 SC 2.5.8 Target Size (Minimum) 준수를 위해 background variant 박스 크기도 max(24 nearestDimensionToken(icon × 1.5))로 clamp. normal/outlined/solid와 동일 정책으로 4 variant 전반 일관성 확보. CodeRabbit review 반영 (#572). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- size=number를 모든 variant에서 박스(컨테이너) 크기로 해석 아이콘은 content-box로 자동 산출 (font-size 제거) - nearestToken 적용 범위 축소: 박스는 raw px padding/radius만 spacing/radius 토큰에 스냅. 토큰 후보는 theme에서 런타임 파생 - background variant 단일 32×32 preset으로 통일 (string size 무시 number로만 박스 커스텀) - normal variant 인접 sibling에 --wds-icon-button-inset 노출 PushBadge가 9개 position 모두에서 배지를 아이콘 모서리로 자동 보정 - icon-button을 constants.ts(타입/preset)·helpers.ts(스냅 알고리즘)·style.ts(CSS emit)로 역할 분리 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Sh031224
force-pushed
the
feat/icon-button-update
branch
from
575f27c to
ddfbd7a
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/data/components/actions/icon-button/web.mdx (1)
129-131: ⚡ Quick winoutlined/solid의 xlarge/large 지원 방식 명확화 권장.
PR 목표에 따르면 outlined/solid variant에서 xlarge/large는 medium으로 폴백됩니다. 현재 문서는 xlarge를 지원 목록에 포함하고 있어 사용자가 xlarge와 medium이 다르게 렌더링될 것으로 오해할 수 있습니다.
폴백 동작을 명시하는 것을 고려해 주세요. 예: "
xlarge,large는medium으로 폴백"📝 명확화 제안
- `outlined`, `solid`: - `medium` (default) - - `small`. `xlarge` + - `small` (`xlarge`, `large`는 `medium`으로 폴백)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/data/components/actions/icon-button/web.mdx` around lines 129 - 131, 문서의 사이즈 목록에서 오해를 주는 부분을 고치세요: `outlined` 및 `solid` 변형에서 `xlarge`와 `large`는 실제로 별도 스타일이 없고 `medium`으로 폴백된다는 문구를 명시적으로 추가합니다; 즉, 현재 `outlined`, `solid: medium (default), small, xlarge`와 같은 표기는 `xlarge`가 다른 렌더링을 하지 않는다는 점을 반영하도록 `xlarge`, `large`는 `medium`으로 폴백된다는 문장으로 교체하거나 괄호로 설명을 붙여 `outlined`/`solid` 섹션에 명확히 표시하세요 (참고 심볼: `outlined`, `solid`, `xlarge`, `large`, `medium`).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/data/components/actions/icon-button/web.mdx`:
- Line 131: Replace the incorrect punctuation between the inline code tokens
`small`. `xlarge` by swapping the period for a comma so the text reads `small`,
`xlarge`; update the MDX content where the exact token sequence `small`.
`xlarge` appears to remove the stray period and ensure spacing and backticks
remain correct.
---
Nitpick comments:
In `@docs/data/components/actions/icon-button/web.mdx`:
- Around line 129-131: 문서의 사이즈 목록에서 오해를 주는 부분을 고치세요: `outlined` 및 `solid` 변형에서
`xlarge`와 `large`는 실제로 별도 스타일이 없고 `medium`으로 폴백된다는 문구를 명시적으로 추가합니다; 즉, 현재
`outlined`, `solid: medium (default), small, xlarge`와 같은 표기는 `xlarge`가 다른 렌더링을
하지 않는다는 점을 반영하도록 `xlarge`, `large`는 `medium`으로 폴백된다는 문장으로 교체하거나 괄호로 설명을 붙여
`outlined`/`solid` 섹션에 명확히 표시하세요 (참고 심볼: `outlined`, `solid`, `xlarge`, `large`,
`medium`).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 12366295-1212-4c19-928a-223ed8aab15c
📒 Files selected for processing (1)
docs/data/components/actions/icon-button/web.mdx
- scale={variant === 'normal'} 로 normal 외 variant는 scale 효과 비활성
- docs Sizes 섹션 variant별 지원 size 정리 (background 단일 사이즈 명시)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/icon-button/index.tsx (1)
60-68: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win불필요한 switch 문을 제거하세요.
모든 case가 동일한 값
'100%'를 반환하므로 switch 문이 불필요합니다. KISS 원칙을 위반하며 코드 복잡도를 높입니다.♻️ 제안하는 리팩토링
방안 1 (권장): 함수를 단순 반환으로 변경
const getInteractionSize = () => { - switch (variant) { - case 'normal': - case 'outlined': - case 'solid': - case 'background': - return '100%'; - } + return '100%'; };방안 2: 함수 제거 후 직접 인라인
-const getInteractionSize = () => { - switch (variant) { - case 'normal': - case 'outlined': - case 'solid': - case 'background': - return '100%'; - } -}; - const getInteractionVariant = () => { // ... }; -const interactionSize = getInteractionSize(); - return ( <WithInteraction width="auto" - height={interactionSize} + height="100%"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/icon-button/index.tsx` around lines 60 - 68, The function getInteractionSize currently uses a switch on variant but every case returns the same value; simplify it by removing the switch and make getInteractionSize return the constant '100%' (or inline the constant where getInteractionSize() is used); update references to getInteractionSize and the variant variable accordingly (e.g., replace the switch-based getInteractionSize implementation with a simple return '100%').
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/icon-button/index.tsx`:
- Around line 60-68: The function getInteractionSize currently uses a switch on
variant but every case returns the same value; simplify it by removing the
switch and make getInteractionSize return the constant '100%' (or inline the
constant where getInteractionSize() is used); update references to
getInteractionSize and the variant variable accordingly (e.g., replace the
switch-based getInteractionSize implementation with a simple return '100%').
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b4515b27-9ff8-4067-ba20-e7912610e961
📒 Files selected for processing (2)
docs/data/components/actions/icon-button/web.mdxpackages/core/src/components/icon-button/index.tsx
✅ Files skipped from review due to trivial changes (1)
- docs/data/components/actions/icon-button/web.mdx
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- 프리셋을 padding 역산 → iconSize(dimension 토큰) 직접 지정으로 전환 - 커스텀 number 아이콘 비율 variant별 분기 (normal/background 2/3 outlined/solid 0.47) - 박스 크기를 clamp(24 N maxDimensionToken)로 상하한 제한 - helpers: nearestDimensionToken/maxDimensionToken 추가 resolvePadding/nearestSpacingToken 제거 - 테스트를 iconSize(svg) 검증으로 전환 박스 상한은 테마에서 동적 도출 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sh031224
changed the title
Sh031224
changed the title
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
IconButton의 size 정책을 4 variant 전반에서 icon-first 모델로 정비하고 dimension·radius 토큰을 적용합니다.size는 박스(컨테이너) 크기를 뜻하며, 아이콘 크기는 variant별 비율로 자동 산출해dimension토큰에 스냅합니다.padding을 따로 두지 않고 중앙정렬로 자동 생성됩니다 (inset = (box − icon) / 2).clamp(24, size, 64)— 하한 24px(WCAG 2.2 SC 2.5.8 Target Size Minimum), 상한 64px(dimension 최대 토큰, 테마에서 동적 도출).스펙 문서: Confluence — IconButton
산출 규칙 (number size)
주요 변경 (variant별)
normal
xlarge36/24/r10 ·large32/20/r10 ·medium28/18/r8 ·small24/16/r8 (기본xlarge)box × 2/3스냅, radius =box × 0.3스냅(최대 r20)scale인터랙션은 normal에서만 유지background
box × 2/3스냅::before글래스 레이어inset: 0으로 박스 채움outlined / solid
medium40/18 ·small32/16 (radius.full, 기본medium)box × 0.47스냅 (chrome이 있어 아이콘을 다소 작게)xlarge/large는medium으로 폴백공통
font-size(1em 기준)로 지정 — padding 선언 제거maxDimensionToken(theme)로 동적 도출normalvariant는 인접 sibling에--wds-icon-button-inset: (box − icon)/2를 노출해 PushBadge가 아이콘 모서리에 정렬되도록 보정Variant 정합 (box / icon, px)
smallmediumlargemedium폴백)xlargemedium폴백)number={N}xlargemedium전체 number 케이스 표는 Confluence 4절 참고.
Test plan
pnpm vitest run packages/core/src/components/icon-button/index.test.tsx— 27 케이스 통과 (preset normal/background/outlined·solid + 폴백 + number 스냅 + WCAG 24 clamp + 박스 상한 클램프)tsc --noEmit통과eslint packages/core/src/components/icon-button통과Breaking changes
4.0.0 메이저 버전 변경이므로 다음 시각/API 변경이 의도된 breaking입니다:
size의 의미가 박스 크기로 통일 (이전 normal은 아이콘 px 기준이었음). normal'medium'/'small'박스가 28/24로 변경 — 기존 의미가 필요하면xlarge등으로 마이그레이션clamp(24, N, 64)로 제한🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements
Tests
Documentation