Open
Conversation
- xsmall: 아이콘 크기 12px 추가 - small: border-radius 6px→8px, gap 3px→4px, 아이콘 크기 14px 추가 - medium: border-radius 8px→10px, 아이콘 크기 14px 추가 - docs: Sizes 데모에 아이콘 포함 예제 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
WalkthroughContentBadge 컴포넌트의 데모 문서를 업데이트하여 leadingContent prop을 통한 아이콘 추가를 보여주고, 해당 스타일 모듈에서 border-radius, gap, SVG 크기 규칙을 조정했습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 the current code and only fix it if needed.
Inline comments:
In `@packages/wds/src/components/content-badge/style.ts`:
- Around line 37-39: In packages/wds/src/components/content-badge/style.ts
replace the hardcoded pixel values for border-radius, padding, gap and icon
sizes in the ContentBadge style definitions with theme tokens from wds-theme
(use the theme’s radius, spacing and icon/size tokens) so the values at the
shown locations (border-radius: 10px; padding: 7px 8px; gap: 4px; and the other
hardcoded sizes at the other groups) are derived from theme tokens; import the
theme or token helpers used across other components and swap the literal px
values for the appropriate token references (e.g., theme.radius.* /
theme.spacing.* / theme.iconSize.*) in the style.ts definitions for the content
badge.
- Around line 42-45: The current descendant selectors that force all inner svg
sizes in the ContentBadge styles are too broad and override explicitly sized
icons; update the selectors that target svg inside the badge (including
leadingContent/trailingContent rules) to only affect SVGs that do not already
declare dimensions, e.g. change targets to svg:not([width]):not([height]) (and
optionally also exclude inline style width/height with
:not([style*="width"]):not([style*="height"])), or narrow the selector to a
dedicated icon class (e.g. .content-badge__icon > svg) so only intended icons
are resized and existing explicit sizes are preserved.
🪄 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: 6543b350-6beb-4964-a86a-3ba45f58c3cc
📒 Files selected for processing (2)
docs/data/components/contents/content-badge/web.mdxpackages/wds/src/components/content-badge/style.ts
Comment on lines
+37
to
39
| border-radius: 10px; | ||
| padding: 7px 8px; | ||
| gap: 4px; |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
style.ts의 고정 px 값은 theme token으로 치환해 주세요.
Line 3739, 4344, 4951, 5556, 67~68에서 radius/gap/icon size를 하드코딩하고 있습니다. 이 파일은 토큰 기반으로 관리해야 스케일 변경 시 일관성을 유지할 수 있습니다.
As per coding guidelines **/components/*/style.ts: Define style functions in style.ts using theme tokens from wds-theme.
Also applies to: 43-44, 49-51, 55-56, 67-68
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/wds/src/components/content-badge/style.ts` around lines 37 - 39, In
packages/wds/src/components/content-badge/style.ts replace the hardcoded pixel
values for border-radius, padding, gap and icon sizes in the ContentBadge style
definitions with theme tokens from wds-theme (use the theme’s radius, spacing
and icon/size tokens) so the values at the shown locations (border-radius: 10px;
padding: 7px 8px; gap: 4px; and the other hardcoded sizes at the other groups)
are derived from theme tokens; import the theme or token helpers used across
other components and swap the literal px values for the appropriate token
references (e.g., theme.radius.* / theme.spacing.* / theme.iconSize.*) in the
style.ts definitions for the content badge.
Comment on lines
+42
to
+45
| svg { | ||
| width: 14px; | ||
| height: 14px; | ||
| } |
Contributor
There was a problem hiding this comment.
배지 내부 모든 SVG 크기 강제는 기존 사용처를 깨뜨릴 수 있습니다.
Line 42, Line 54, Line 66의 svg descendant selector는 leadingContent/trailingContent로 들어오는 모든 SVG를 일괄 리사이즈합니다. 기존에 명시 크기를 준 아이콘까지 덮어써서 회귀가 날 수 있으니, 명시 크기 SVG는 제외하거나 더 좁은 타깃으로 제한해 주세요.
🔧 제안 수정안
- svg {
+ svg:not([width]):not([height]) {
width: 14px;
height: 14px;
}
@@
- svg {
+ svg:not([width]):not([height]) {
width: 14px;
height: 14px;
}
@@
- svg {
+ svg:not([width]):not([height]) {
width: 12px;
height: 12px;
}Also applies to: 54-57, 66-69
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/wds/src/components/content-badge/style.ts` around lines 42 - 45, The
current descendant selectors that force all inner svg sizes in the ContentBadge
styles are too broad and override explicitly sized icons; update the selectors
that target svg inside the badge (including leadingContent/trailingContent
rules) to only affect SVGs that do not already declare dimensions, e.g. change
targets to svg:not([width]):not([height]) (and optionally also exclude inline
style width/height with :not([style*="width"]):not([style*="height"])), or
narrow the selector to a dedicated icon class (e.g. .content-badge__icon > svg)
so only intended icons are resized and existing explicit sizes are preserved.
Contributor
🚀 Preview
|
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
1 participant
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
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일