fix(ui): Stepper UI wrapping improvements#8693
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: e4d2851 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
|
Snapi: no API changes detected in |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/expo
@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: |
|
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 Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughThis PR updates the ConfigureSSO Stepper to wrap each step item with a styled Span (imported from Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx (2)
122-145: ⚡ Quick winKeep
Skeletonwrapper behavior aligned withRootto avoid wrap regressions in loading state.
Rootnow wraps each step+separator in a flexSpan, butSkeletonstill usesReact.Fragment. Consider mirroring the same wrapper pattern inSkeletonso chevrons don’t wrap inconsistently while loading.🤖 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/components/ConfigureSSO/elements/Stepper/Stepper.tsx` around lines 122 - 145, The Skeleton component is still using React.Fragment for each step which causes wrapping differences vs Root; update Skeleton so each step+separator is wrapped in the same flex Span wrapper used by Root (instead of React.Fragment), move the key onto that Span, and preserve rendering of <ItemSkeleton /> and the conditional Icon (descriptors.configureSSOStepperSeparator) inside that Span so loading-state chevrons wrap identically to Root.
8-43: ⚡ Quick winPlease add/adjust tests for Stepper wrapping and separator alignment.
This UI behavior changed materially (item wrapper + flex layout), but no tests were added/updated in this PR. Add coverage for wrapping behavior and separator placement to prevent regressions.
As per coding guidelines, "
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the 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 `@packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx` around lines 8 - 43, Add tests for the Root Stepper component to cover the new item wrapper + flex wrapping and separator placement: render the Root (Stepper) with multiple child steps and assert that descriptors.configureSSOStepper is applied, that each child is wrapped by the Span wrapper, and that Icon with ChevronRight appears only between items (not after last); include a test that forces wrapping (e.g., constrain container width or set CSS to small width) and assert separators remain positioned between items on wrapped lines. Focus on querying for Span wrappers and Icon/ChevronRight elements and checking counts/positions to prevent regressions in Root, Span, and separator rendering.
🤖 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.
Nitpick comments:
In `@packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx`:
- Around line 122-145: The Skeleton component is still using React.Fragment for
each step which causes wrapping differences vs Root; update Skeleton so each
step+separator is wrapped in the same flex Span wrapper used by Root (instead of
React.Fragment), move the key onto that Span, and preserve rendering of
<ItemSkeleton /> and the conditional Icon
(descriptors.configureSSOStepperSeparator) inside that Span so loading-state
chevrons wrap identically to Root.
- Around line 8-43: Add tests for the Root Stepper component to cover the new
item wrapper + flex wrapping and separator placement: render the Root (Stepper)
with multiple child steps and assert that descriptors.configureSSOStepper is
applied, that each child is wrapped by the Span wrapper, and that Icon with
ChevronRight appears only between items (not after last); include a test that
forces wrapping (e.g., constrain container width or set CSS to small width) and
assert separators remain positioned between items on wrapped lines. Focus on
querying for Span wrappers and Icon/ChevronRight elements and checking
counts/positions to prevent regressions in Root, Span, and separator rendering.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 900692fa-8deb-4585-8220-a3c083e42783
📒 Files selected for processing (2)
.changeset/neat-mild-pale.mdpackages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx
alexcarpenter
changed the title
Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
3 participants
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change