feat(core): icon button useLegacyInteractionLayer 하위 호환성 대응 - #640
Conversation
…아웃 호환) https://wantedlab.atlassian.net/browse/WRP-2919 4.0.0에서 normal variant의 size가 아이콘 크기에서 박스 크기로 바뀌면서 인터랙션 레이어가 레이아웃 공간을 차지하게 됐다. 3.x 화면을 간격 조정 없이 옮길 수 있도록 size를 다시 아이콘 크기로 해석하고 인터랙션 레이어와 radius만 4.0 사이즈 정책의 짝 박스 값으로 레이아웃 바깥에 겹쳐 그리는 호환 옵션을 추가한다. 문자열 size는 프리셋의 아이콘 크기를 박스로 쓴다. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Essentials Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Essentials Run ID: 📒 Files selected for processing (9)
Included review availability: 4 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour. Walkthrough
ChangesIconButton 레거시 레이아웃
Priority: ⬇️ Low Estimated code review effort: 3 (Moderate) | ~25 minutes Change: Feature Sequence Diagram(s)sequenceDiagram
participant IconButton
participant iconButtonStyle
participant legacyBoxForIcon
IconButton->>iconButtonStyle: useLegacyInteractionLayer 전달
iconButtonStyle->>legacyBoxForIcon: normal 아이콘 크기 전달
legacyBoxForIcon-->>iconButtonStyle: 상호작용 박스 크기 반환
iconButtonStyle-->>IconButton: 아이콘 및 레이어 스타일 적용
Merge Risk: ⚪ Minimal · up to The compatibility option preserves the intended legacy icon-and-overlay sizing behavior while leaving other variants unchanged. No actionable merge risk was identified. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
size-limit report 📦
|
🚀 Preview
|
Sh031224
changed the title
1 participant
Summary
IconButton에useLegacyInteractionLayerprop을 추가합니다.normalvariant에서 3.x 레이아웃을 복원하는 호환 옵션입니다.size={number}는 아이콘 크기로 적용되고 박스도 아이콘과 같은 크기 → 레이아웃 footprint가 3.x와 동일size는 프리셋의 아이콘 크기가 박스 (xlarge24 기본,large20,medium18,small16)size가 원래부터 박스 크기)부수 변경
ICON_SIZE_RATIO/RADIUS_RATIO를constants.ts로 이동, 역산 헬퍼legacyBoxForIcon추가 (프리셋 4개를 정확히 재현하는지 불변 테스트로 보장)Legacy interaction layer섹션 추가 (사이즈 슬라이더 비교 데모, PushBadge 조합 예시)MIGRATION.mdIconButton에size의미 변경(아이콘 → 박스) 절 추가 및 escape hatch 안내LegacyNormalIconButton추가 (새 스냅샷은visual-test-update.yml로 생성 필요)Type of Change
Checklist
pnpm vitest run packages/core전체 통과)icon-button/index.test.tsx44 passed: 프리셋/숫자/WCAG 하한/최대 토큰 초과/다른 variant 무시/불변식)Related Issues
Test plan
Icon button → Legacy interaction layer데모에서 점선 footprint가 아이콘 크기이고 hover 시 레이어가 바깥으로 그려지는지 확인With push badge에서 배지가 아이콘 모서리에 정렬되는지 확인gh workflow run visual-test-update.yml --ref feature/sh031224/WRP-2919로LegacyNormalIconButton스냅샷 생성🤖 Generated with Claude Code
Summary by CodeRabbit
IconButton의normal변형에서size가 아이콘 크기가 아닌 버튼 박스 크기를 기준으로 동작합니다.useLegacyInteractionLayer옵션으로 이전 동작을 사용할 수 있습니다.