Skip to content

feat: remove rounded option, add border-radius prop#1201

Merged
junghyeonsu merged 8 commits intodevfrom
feat/image-frame-border-radius
Feb 9, 2026
Merged

feat: remove rounded option, add border-radius prop#1201
junghyeonsu merged 8 commits intodevfrom
feat/image-frame-border-radius

Conversation

@junghyeonsu
Copy link
Contributor

@junghyeonsu junghyeonsu commented Feb 2, 2026

Summary by CodeRabbit

  • 새로운 기능

    • ImageFrame에 borderRadius 속성 추가로 토큰 기반 모서리 반경 지정 가능
  • 리팩터

    • 기존 boolean형 rounded 사용법을 borderRadius로 전환(rounded는 deprecated 처리)
  • 문서

    • 모든 컴포넌트 문서와 예제에서 rounded→borderRadius로 업데이트, 새 border-radius 예제 추가 및 이전 rounded 예제 제거/교체
  • 잡일

    • 변경로그 및 릴리스셋 반영

@junghyeonsu junghyeonsu self-assigned this Feb 2, 2026
@changeset-bot
Copy link

changeset-bot bot commented Feb 2, 2026

🦋 Changeset detected

Latest commit: 7c350f0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@seed-design/rootage-artifacts Patch
@seed-design/react Patch
@seed-design/css Patch
@seed-design/figma Patch
@seed-design/mcp Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 2, 2026

📝 Walkthrough

Walkthrough

ImageFrame API가 boolean rounded에서 토큰형 borderRadius 사용으로 전환되었고, 문서·예제·레시피·루트 스키마가 이에 맞춰 업데이트되었으며 일부 구현에는 rounded가 deprecated 형태로 남아 있습니다.

Changes

Cohort / File(s) Summary
Changeset
\.changeset/tasty-masks-guess.md
세 패키지(@seed-design/rootage-artifacts, @seed-design/react, @seed-design/css)에 대한 패치 버전 변경 기록 추가.
문서 페이지
docs/content/react/components/image-frame.mdx, docs/content/docs/components/(display)/image-frame.mdx
섹션 및 설명을 "Rounded" → "Border Radius"로 변경하고 예제 참조를 borderRadius="r2"로 업데이트.
예제 추가/수정/삭제
docs/examples/react/image-frame/border-radius.tsx, docs/examples/react/image-frame/rounded.tsx (삭제), docs/examples/react/image-frame/overlay*.tsx, docs/examples/react/image-frame/overlay-custom.tsx, docs/examples/react/image-frame/overlay-inset.tsx, docs/examples/react/image-frame/overlay-multiple.tsx, docs/examples/react/image-frame/overlay.tsx, docs/examples/react/image-frame/preview.tsx, docs/examples/react/image-frame/ratio.tsx
border-radius 예제 파일 추가, 기존 rounded 예제 삭제 및 모든 예제에서 rounded boolean 사용을 borderRadius="r2" 토큰 사용으로 교체.
스타일 레시피
packages/qvism-preset/src/recipes/image-frame.ts
베이스에 overflow: "hidden"borderRadius: "inherit" 추가; 자식 img/videoborderRadius: "inherit" 적용; rounded 변이가 별도 공개 변이로 이동하고 defaultVariantsrounded: false 추가. 레시피 구조/상속 영향 검토 필요.
루트 스키마 변경
packages/rootage/components/image-frame.yaml
cornerRadius 속성 및 rounded 변이 그룹(및 true/false 매핑)이 재도입되어 root.cornerRadius 매핑 제공. 스키마 재도입으로 매핑·문서 정합성 확인 필요.
컴포넌트 구현
packages/react/src/components/ImageFrame/ImageFrame.tsx
rounded prop이 deprecation 주석과 함께 남아있고, 내부에서 imageFrameRecipe({ stroke, rounded }) 호출로 인자 순서 변경(기능적 차이는 없음). 타입·문서·호환성 점검 필요.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 둥근 모서리였던 날들은 토큰을 만나고
borderRadius로 새 옷을 입었어요 ✨
예제는 갈아입고 문서는 바뀌며,
작은 당근 코멘트 하나 남기고,
깡충깡충 배포하러 갑니다 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 변경 사항의 주요 내용을 명확하게 요약합니다. ImageFrame 컴포넌트에서 rounded 옵션 제거와 border-radius 속성 추가라는 핵심 변경사항을 정확히 반영합니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/image-frame-border-radius

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

  • 136.113.208.247/32 (new)
  • 34.170.211.100/32
  • 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In @.changeset/tasty-masks-guess.md:
- Line 7: 수정된 변경 로그의 오타를 바로잡아 주세요: 설명에서 "ImageFrmae"를 찾아 "ImageFrame"으로 교정하고
문장(예: "ImageFrame `rounded` 옵션을 제거하고, borderRadius를 받을 수 있게 변경합니다")이 자연스럽게 읽히도록
띄어쓰기/마침표도 점검하여 사용자-facing 변경 로그로 적절히 다듬어 주세요.
🧹 Nitpick comments (1)
docs/examples/react/image-frame/border-radius.tsx (1)

8-74: alt 텍스트 형식 일관성 개선을 고려해 주세요.

alt 텍스트 형식이 약간 불일치합니다:

  • Line 12: "size 20 borderRadius=r1" (등호 사용)
  • Line 24: "size 24 borderRadius r1" (공백 사용)

일관된 형식으로 통일하면 좋겠습니다.

♻️ alt 텍스트 형식 통일 제안
-            alt="size 20 borderRadius=r1"
+            alt="size 20 borderRadius r1"

또는 모든 alt 텍스트에 동일한 형식을 적용하세요.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Feb 2, 2026

Deploying seed-design-v3 with  Cloudflare Pages  Cloudflare Pages

Latest commit: 7c350f0
Status: ✅  Deploy successful!
Preview URL: https://93845768.seed-design.pages.dev
Branch Preview URL: https://feat-image-frame-border-radi.seed-design.pages.dev

View logs

junghyeonsu and others added 4 commits February 4, 2026 16:22
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ed-design into feat/image-frame-border-radius
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/rootage/components/image-frame.yaml`:
- Around line 34-38: The deprecation message for the `rounded` option is
incorrect: for users who set `rounded=false` (intending square corners) the
guidance to use `borderRadius="r2"` would make corners rounded; update the
deprecation text in the "false" case of the `rounded` option in image-frame.yaml
to instruct users to either omit `borderRadius` or set it to a value that yields
square corners (or explicitly `borderRadius="none"` / the component's
non-rounded default), and change the explanatory sentence to clarify that
`borderRadius` now controls corner styling and that no prop (or the explicit
non-rounded value) preserves the original square behavior.
🧹 Nitpick comments (1)
packages/rootage/components/image-frame.yaml (1)

17-19: cornerRadius 설명이 deprecated된 rounded 옵션에 종속되어 있습니다.

현재 설명이 "rounded 옵션 사용 시 적용되는 모서리 반경입니다"로 되어 있는데, PR 목적상 borderRadius prop이 새로운 방식이므로 설명을 좀 더 일반적으로 수정하는 것이 좋겠습니다.

📝 수정 제안
          cornerRadius:
            type: dimension
-            description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
+            description: 이미지 프레임의 모서리 반경입니다.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/qvism-preset/src/recipes/image-frame.ts`:
- Around line 6-17: Remove the top-level borderRadius: "inherit" from the base
style object so the component doesn't unintentionally inherit the parent's
radius; keep (or add) borderRadius: "inherit" only on the child selector "& >
img, & > video" so only the media elements inherit rounding, and ensure any
prop-based rounding (e.g., a rounded prop handler) applies to the wrapper rather
than relying on base to inherit from parent.

@junghyeonsu junghyeonsu merged commit a3e6859 into dev Feb 9, 2026
11 checks passed
@junghyeonsu junghyeonsu deleted the feat/image-frame-border-radius branch February 9, 2026 02:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant