refactor(ui): rename Settings to Section - #9428
Conversation
🦋 Changeset detectedLatest commit: cbd62f4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe PR renames the Mosaic Estimated code review effort: 3 (Moderate) | ~20 minutes Mergeability Score: 🟡 Moderate · up to This rename removes the existing public Settings API and its customization contracts, which can break current consumers, while the release metadata does not provide migration guidance. The PR should not merge until compatibility or a clear migration and release path is addressed. Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/mosaic/components/section/section.tsx (1)
156-365: 🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy liftPreserve the
Settingscompatibility contract.This rename removes public
Settingsexports, theme selectors, and CSS variables. Existing framework SDKs can still importSettingsor configurecl-settings-*and--cl-settings-*. A non-major@clerk/uiupdate would then cause type or module-resolution failures and lose consumer theme overrides.
packages/ui/src/mosaic/components/section/section.tsx#L156-L365: Keep deprecatedSettingsaliases and map legacy theme selectors to the Section implementation.packages/ui/src/mosaic/components/section/section.vars.stylex.ts#L5-L8: Keep legacy Settings variable aliases for existing appearance configuration.packages/ui/src/mosaic/components/section/index.ts#L1-L15: Preserve the legacy component entry point and deprecated type exports.packages/ui/src/mosaic/styles/index.ts#L51-L65: Continue exporting deprecated Settings symbols from the styles public API.As per coding guidelines, “Maintain backward compatibility in
packages/clerk-jsandpackages/uiwith SDK versions already in the wild.”🤖 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/ui/src/mosaic/components/section/section.tsx` around lines 156 - 365, Preserve the deprecated Settings compatibility surface: in packages/ui/src/mosaic/components/section/section.tsx#L156-L365, retain Settings aliases and map legacy theme selectors to Section; in packages/ui/src/mosaic/components/section/section.vars.stylex.ts#L5-L8, retain legacy Settings variable aliases; in packages/ui/src/mosaic/components/section/index.ts#L1-L15, preserve the legacy entry point and deprecated type exports; and in packages/ui/src/mosaic/styles/index.ts#L51-L65, continue exporting deprecated Settings symbols.Source: Coding guidelines
🤖 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 @.changeset/section-component.md:
- Around line 1-2: Add the required changeset metadata in the frontmatter of
section-component.md for the `@clerk/ui` package, including its release level and
a summary covering the Section public API/module-path changes and the Settings
compatibility plan; do not leave the changeset empty.
In `@packages/swingset/src/stories/section.mdx`:
- Around line 7-35: Reorganize the Section documentation page to use the
required compound-component section order: Example, Usage, Parts, then Styling.
Add the missing Example, Parts, and Styling sections around the existing Usage
content, using the page’s established documentation structure.
- Line 29: Update the Section.Media documentation in the Section story to list
the supported sm, md, and lg sizes, preserving the existing descriptions and
wording for md and lg.
---
Outside diff comments:
In `@packages/ui/src/mosaic/components/section/section.tsx`:
- Around line 156-365: Preserve the deprecated Settings compatibility surface:
in packages/ui/src/mosaic/components/section/section.tsx#L156-L365, retain
Settings aliases and map legacy theme selectors to Section; in
packages/ui/src/mosaic/components/section/section.vars.stylex.ts#L5-L8, retain
legacy Settings variable aliases; in
packages/ui/src/mosaic/components/section/index.ts#L1-L15, preserve the legacy
entry point and deprecated type exports; and in
packages/ui/src/mosaic/styles/index.ts#L51-L65, continue exporting deprecated
Settings symbols.
🪄 Autofix
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: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 1a968b3b-c1d7-4b25-898a-521cb03d464c
📒 Files selected for processing (18)
.changeset/section-component.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/section.mdxpackages/swingset/src/stories/section.stories.tsxpackages/swingset/src/stories/settings.mdxpackages/swingset/src/stories/settings.stories.tsxpackages/ui/src/mosaic/components/reset.test.tsxpackages/ui/src/mosaic/components/section/index.tspackages/ui/src/mosaic/components/section/section.markers.stylex.tspackages/ui/src/mosaic/components/section/section.test.tsxpackages/ui/src/mosaic/components/section/section.tsxpackages/ui/src/mosaic/components/section/section.vars.stylex.tspackages/ui/src/mosaic/components/settings/index.tspackages/ui/src/mosaic/components/settings/settings.markers.stylex.tspackages/ui/src/mosaic/components/settings/settings.test.tsxpackages/ui/src/mosaic/components/settings/settings.vars.stylex.tspackages/ui/src/mosaic/styles/index.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
💤 Files with no reviewable changes (6)
- packages/ui/src/mosaic/components/settings/index.ts
- packages/ui/src/mosaic/components/settings/settings.markers.stylex.ts
- packages/swingset/src/stories/settings.mdx
- packages/ui/src/mosaic/components/settings/settings.vars.stylex.ts
- packages/ui/src/mosaic/components/settings/settings.test.tsx
- packages/swingset/src/stories/settings.stories.tsx
| --- | ||
| --- |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add a release changeset for @clerk/ui.
This cohort changes the @clerk/ui public API and module paths. An empty changeset omits the required release and migration information. Add an @clerk/ui entry that describes Section and the Settings compatibility plan.
As per coding guidelines, “Use Changesets for version management and changelogs.” Based on learnings, empty changesets are acceptable for documentation-only or non-published changes.
🤖 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 @.changeset/section-component.md around lines 1 - 2, Add the required
changeset metadata in the frontmatter of section-component.md for the `@clerk/ui`
package, including its release level and a summary covering the Section public
API/module-path changes and the Settings compatibility plan; do not leave the
changeset empty.
Sources: Coding guidelines, Learnings
| ## Usage | ||
|
|
||
| ```tsx | ||
| import { Section } from '@clerk/ui/mosaic/components/section'; | ||
|
|
||
| <Section.Root> | ||
| <Section.Title>Account</Section.Title> | ||
| <Section.Group> | ||
| <Section.Row> | ||
| <Section.Item> | ||
| <Section.Media>{icon}</Section.Media> | ||
| <Section.Content> | ||
| <Section.Label>Name</Section.Label> | ||
| <Section.Description>Shown throughout the application.</Section.Description> | ||
| </Section.Content> | ||
| <Section.Actions>{control}</Section.Actions> | ||
| </Section.Item> | ||
| </Section.Row> | ||
| </Section.Group> | ||
| </Section.Root> | ||
| ``` | ||
|
|
||
| `Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `md` and `lg` sizes. | ||
|
|
||
| Use `Section.Items` for a nested value list beneath a row's header item. The row keeps an 8px header-to-list gap, nested items stack without gaps at a 44px minimum height, and their content receives 12px vertical padding. | ||
|
|
||
| Override `--cl-section-items-gap` on `Section.Root` or a specific `Section.Row` to customize the space between the row header and its nested value list. It defaults to 8px. | ||
|
|
||
| ## Examples |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use the required compound-component page structure.
Section is a compound component. This page uses Usage and Examples, but it lacks Example, Parts, and Styling. Use the required order: Example, Usage, Parts, then Styling.
As per path instructions, “Compound Components pages must use the exact section order: Example, Usage, Parts, then Styling.”
🤖 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/swingset/src/stories/section.mdx` around lines 7 - 35, Reorganize
the Section documentation page to use the required compound-component section
order: Example, Usage, Parts, then Styling. Add the missing Example, Parts, and
Styling sections around the existing Usage content, using the page’s established
documentation structure.
Source: Path instructions
9fd9cbf to
cbd62f4
Compare
cbd62f4 to
b41da6d
Compare
b41da6d to
cbd62f4
Compare
3 participants
Description
Renames the Mosaic
Settingscompound component toSectionso the API describes its broader use across product sections. This updates the component and prop exports, file paths, theme selectors, CSS variables, Swingset registry, stories, and documentation while preserving the existing rendering, accessibility, and layout behavior.Consumers should compose the component with
Section.Root,Section.Group,Section.Row,Section.Item, and the remainingSection.*parts.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change