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>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughContentBadge 컴포넌트의 데모 콘텐츠 텍스트를 업데이트하고, 스타일시트에서 크기별 패딩, 간격, 보더 레이더스 값을 조정했으며, 아이콘 SVG의 폰트 사이즈를 명시했습니다. 또한 DESIGN-GUIDE.md를 추가하여 디자인 시스템 컴포넌트 수정 절차를 문서화했습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 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 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 |
size-limit report 📦
|
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
| svg { | ||
| width: 14px; | ||
| height: 14px; | ||
| } |
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.
🚀 Preview
|
- medium border-radius 10px → 8px, 패딩 7px 8px → 5px 8px로 변경 - 데모 라벨 텍스트 'Content badge' → '텍스트'로 변경 - AGENTS.md에 디자인 시스템 작업 가이드 추가 - changeset 설정 및 패치 changeset 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@AGENTS.md`:
- Around line 184-188: The fenced code block containing the three-column example
starting with "[Atomic 파일] [Semantic 파일] [컴포넌트 사용]" is
missing a language identifier and triggers markdownlint MD040; fix it by adding
a language tag (e.g., use ```text) immediately after the opening backticks so
the block becomes ```text ... ```, preserving the block contents exactly.
🪄 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: bb2b7853-2dc4-4988-9932-a3993791cae3
📒 Files selected for processing (5)
.changeset/config.json.changeset/content-badge-style-update.mdAGENTS.mddocs/data/components/contents/content-badge/web.mdxpackages/wds/src/components/content-badge/style.ts
✅ Files skipped from review due to trivial changes (2)
- .changeset/content-badge-style-update.md
- .changeset/config.json
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/data/components/contents/content-badge/web.mdx
AGENTS.md
Outdated
| ``` | ||
| [Atomic 파일] [Semantic 파일] [컴포넌트 사용] | ||
| 변수(raw 값 정의) → 변수(atomic alias) → 스타일 | ||
| 예: #FF0000 예: color.red.primary 예: semantic.label.error | ||
| ``` |
There was a problem hiding this comment.
코드 펜스에 언어 식별자를 지정해 주세요.
Line 184의 fenced code block에 language가 없어 markdownlint(MD040) 경고가 발생합니다.
🔧 제안 수정안
-```
+```text
[Atomic 파일] [Semantic 파일] [컴포넌트 사용]
변수(raw 값 정의) → 변수(atomic alias) → 스타일
예: `#FF0000` 예: color.red.primary 예: semantic.label.error</details>
<details>
<summary>🧰 Tools</summary>
<details>
<summary>🪛 markdownlint-cli2 (0.22.0)</summary>
[warning] 184-184: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
</details>
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
Verify each finding against the current code and only fix it if needed.
In @AGENTS.md around lines 184 - 188, The fenced code block containing the
three-column example starting with "[Atomic 파일] [Semantic 파일]
[컴포넌트 사용]" is missing a language identifier and triggers markdownlint MD040; fix
it by adding a language tag (e.g., use text) immediately after the opening backticks so the block becomes text ... ```, preserving the block contents
exactly.
</details>
<!-- fingerprinting:phantom:poseidon:hawk:55c3bf76-a589-4b05-a912-3bc11f450d82 -->
<!-- This is an auto-generated comment by CodeRabbit -->
Summary
width/height→font-size로 변경Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
버그 수정
문서