chore(ui): Layer architecture for <ConfigureSSO />#8493
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: c7a50b2 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 |
iagodahlem
force-pushed
the
iago/configure-sso-layers
branch
from
aee336b to
1e69b19
Compare
iagodahlem
force-pushed
the
iago/configure-sso-layers
branch
from
2987dc3 to
7f84287
Compare
iagodahlem
changed the title
iagodahlem
changed the title
<ConfigureSSO />
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@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: |
Contributor
|
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR refactors the experimental <__experimental_ConfigureSSO /> from a monolithic ConfigureSSOWizard into layered primitives: a stateful Wizard with useWizard, a presentational Stepper (breadcrumb, excludes select-provider), a compound Step (Header/Body/Footer/Counter), and ProfileCard header/footer chrome. The ConfigureSSO flow context drops isLoading; ConfigureSSO now composes ConfigureSSONavbar, a loading-gated ConfigureSSOCardContent, ConfigureSSOFlowProvider, and an inline Wizard with explicit steps. Legacy StepLayout and ConfigureSSOWizard were removed and theming descriptors/selectors updated. Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
![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: 1
🤖 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 `@packages/ui/src/components/ConfigureSSO/elements/ProfileCard.tsx`:
- Line 4: The type alias ProfileCardHeaderProps uses React.PropsWithChildren but
the React namespace isn't imported; import PropsWithChildren from 'react' and
update the type to use PropsWithChildren (or keep React.PropsWithChildren but
ensure React is imported) so the ProfileCardHeaderProps definition and any
usages compile without TS2304; search for ProfileCardHeaderProps and the
ProfileCard component in ProfileCard.tsx to apply the import and type fix.
🪄 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: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: c35dd481-dca7-44f9-9bb6-4cacc4aef0f0
📒 Files selected for processing (29)
.changeset/wizard-architecture-layers.mdpackages/ui/src/components/ConfigureSSO/ConfigureSSO.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSOHeader.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSOSkeleton.tsxpackages/ui/src/components/ConfigureSSO/elements/ProfileCard.tsxpackages/ui/src/components/ConfigureSSO/elements/Step.tsxpackages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsxpackages/ui/src/components/ConfigureSSO/elements/Stepper/index.tspackages/ui/src/components/ConfigureSSO/elements/Stepper/types.tspackages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsxpackages/ui/src/components/ConfigureSSO/elements/Wizard/WizardContext.tsxpackages/ui/src/components/ConfigureSSO/elements/Wizard/index.tspackages/ui/src/components/ConfigureSSO/elements/Wizard/types.tspackages/ui/src/components/ConfigureSSO/steps/ConfigureCreateAppStep.tsxpackages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsxpackages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsxpackages/ui/src/components/ConfigureSSO/steps/ProvideEmailStep.tsxpackages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsxpackages/ui/src/components/ConfigureSSO/steps/StepLayout.tsxpackages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsxpackages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsxpackages/ui/src/components/ConfigureSSO/steps/index.tspackages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsxpackages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsxpackages/ui/src/components/ConfigureSSO/wizard/index.tspackages/ui/src/components/ConfigureSSO/wizard/types.tspackages/ui/src/elements/contexts/index.tsx
💤 Files with no reviewable changes (7)
- packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx
- packages/ui/src/components/ConfigureSSO/wizard/types.ts
- packages/ui/src/components/ConfigureSSO/wizard/index.ts
- packages/ui/src/components/ConfigureSSO/steps/ConfigureCreateAppStep.tsx
- packages/ui/src/components/ConfigureSSO/steps/StepLayout.tsx
- packages/ui/src/components/ConfigureSSO/steps/ProvideEmailStep.tsx
- packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx
| import { descriptors, Flex } from '@/customizables'; | ||
| import { common } from '@/styledSystem'; | ||
|
|
||
| type ProfileCardHeaderProps = React.PropsWithChildren; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if any other tsx/ts files in this package use React.PropsWithChildren without a React import
rg -l 'React\.PropsWithChildren' --type=ts --type=tsx | head -20
rg -n 'React\.PropsWithChildren' --type=ts 2>/dev/null | head -20
rg -n 'React\.PropsWithChildren' -g '*.tsx' | head -20
# Check if files that use React.PropsWithChildren also import React
rg -l 'React\.PropsWithChildren' -g '*.tsx' | xargs -I{} sh -c 'echo "=== {} ==="; head -5 {}'Repository: clerk/javascript
Length of output: 19549
🏁 Script executed:
cat -n packages/ui/src/components/ConfigureSSO/elements/ProfileCard.tsxRepository: clerk/javascript
Length of output: 1452
🏁 Script executed:
cat packages/ui/tsconfig.jsonRepository: clerk/javascript
Length of output: 1134
🏁 Script executed:
cat packages/ui/src/global.d.tsRepository: clerk/javascript
Length of output: 767
🏁 Script executed:
# Check if there's a React ambient global declaration or if `@types/react` has export as namespace
cat packages/ui/src/global.d.ts | head -20
# Check if there's a root tsconfig or other global.d.ts files
fd global.d.ts packages/
# Check package.json for `@types/react`
grep -A 5 -B 5 '@types/react' packages/ui/package.jsonRepository: clerk/javascript
Length of output: 1232
🏁 Script executed:
cat packages/ui/package.json | grep -A 10 -B 2 '@types/react'Repository: clerk/javascript
Length of output: 42
🏁 Script executed:
cat packages/ui/package.json | head -50Repository: clerk/javascript
Length of output: 1491
🏁 Script executed:
cat packages/ui/package.json | grep -E '"(dependencies|devDependencies|peerDependencies)"' -A 20Repository: clerk/javascript
Length of output: 1466
🏁 Script executed:
# Verify that TypeScript would error on this by checking if there's any build configuration that adds ambient React
# Also check the root tsconfig or any type roots
cat tsconfig.json 2>/dev/null | head -30 || echo "No root tsconfig"Repository: clerk/javascript
Length of output: 732
🏁 Script executed:
# Let's verify that the code would actually fail to compile by checking if there's a build output or error
# Also check ConfigureSSONavbar.tsx to confirm it properly imports React
head -15 packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsxRepository: clerk/javascript
Length of output: 699
Import PropsWithChildren from 'react' to fix TypeScript compilation error.
Lines 4 and 20 reference React.PropsWithChildren without importing the React namespace. The jsx: react-jsx setting in tsconfig only enables JSX syntax without importing React—it does not make React.* available as a namespace. This causes a TS2304: Cannot find name 'React' error.
🔧 Proposed fix
+import { type PropsWithChildren } from 'react';
import { descriptors, Flex } from '@/customizables';
import { common } from '@/styledSystem';
-type ProfileCardHeaderProps = React.PropsWithChildren;
+type ProfileCardHeaderProps = PropsWithChildren;
// ...
-type ProfileCardFooterProps = React.PropsWithChildren;
+type ProfileCardFooterProps = PropsWithChildren;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| type ProfileCardHeaderProps = React.PropsWithChildren; | |
| type ProfileCardHeaderProps = PropsWithChildren; |
🤖 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/ProfileCard.tsx` at line 4,
The type alias ProfileCardHeaderProps uses React.PropsWithChildren but the React
namespace isn't imported; import PropsWithChildren from 'react' and update the
type to use PropsWithChildren (or keep React.PropsWithChildren but ensure React
is imported) so the ProfileCardHeaderProps definition and any usages compile
without TS2304; search for ProfileCardHeaderProps and the ProfileCard component
in ProfileCard.tsx to apply the import and type fix.
LauraBeatris
reviewed
May 7, 2026
LauraBeatris
reviewed
May 7, 2026
LauraBeatris
approved these changes
May 7, 2026
Renames the wizard's step-indicator primitive to its conventional name (Stepper). Strips state derivation from the primitive so it's purely presentational: - elements/Breadcrumbs/* moves to elements/Stepper/*. Types are renamed accordingly; the BreadcrumbsActiveItem internal type is dropped. - The Stepper container no longer walks its children to extract descriptors — children-as-array is used only to insert the chevron separator between items. - Stepper.Item becomes a fully self-rendering component. It takes label, bullet (ReactNode — caller passes the number or check icon), isCurrent, isCompleted, isReachable, and onClick. The primitive doesn't compute reachability or pick the bullet shape. - ConfigureSSOHeader takes ownership of the wizard → stepper mapping: reads useWizard() for activeSteps + currentStep, computes per-item flags, decides whether to render the check or the index number in the bullet, and wires onClick to goToStep. Visual rendering is identical. Descriptor placement is left for the final descriptor sweep (todo comments preserved where Iago left them).
Extends the elements/ProfileCard.tsx primitive set: - ProfileCardBody: <main>-semantic scrollable container that sits between header and footer in the card layout. Adds flex sizing and overflowY:auto. - ProfileCardSection: titled-or-untitled content block. Optionally takes localized title + subtitle. Multiple sections can stack inside a single ProfileCardBody. Confirmation step uses the no-title shape per Figma. Refactors all five ConfigureSSO step files to render their body content via these primitives instead of inlining the Heading + subtitle + body Col chrome. Each step is now noticeably shorter and the visual chrome lives in one place. Per-step descriptor wrapping (configureSSOWizardBody) is left in place — descriptor placement migration is a separate cleanup pass.
Adds a compound Skeleton on the Stepper that renders a placeholder
stepper given a totalSteps count. Each placeholder item mirrors the
real Stepper.Item layout (bullet + label) with washed-out
neutralAlpha100 backgrounds, with a same-tone chevron separator
between items.
ConfigureSSOSkeleton drops its inline BreadcrumbItemSkeleton and
BreadcrumItemIconSkeleton helpers in favor of
<Stepper.Skeleton totalSteps={4} />. The two skeleton helpers were
internalized to the Stepper module — they're not exported.
…ining steps
- Renames steps/StepLayout.tsx to steps/Step.tsx and compounds the
four primitives under a single Step namespace: Step is the layout
wrapper, Step.Section is the padded content block, Step.Header is
the section variant with the bottom-border title row, Step.Body is
the section variant for the scrollable main area. Mirrors the
Stepper.Item / Stepper.Skeleton pattern.
- Fixes sx-merging in Step / Step.Section / Step.Body by adopting
the codebase's array-form pattern (sx={[default, userSx]}). The
previous spread-into-object approach broke when a function-form sx
was passed and Step.Body silently dropped user sx entirely.
- Refactors ProvideEmailStep, ConfigureCreateAppStep,
TestConfigurationStep, and ConfirmationStep to the same shape
VerifyDomainStep already uses: <Step><Step.Header /><Step.Body /></Step>
with the per-step descriptor on the outer Step wrapper.
Confirmation drops the header per Figma; Body provides its own
padding.
- Promotes the Step compound primitive to packages/ui/src/components/ ConfigureSSO/elements/Step.tsx — it lives alongside the other shared step-level primitives (Stepper, ProfileCard) instead of inside the steps/ folder. - Updates all five step files to import Step from ../elements/Step. - Drops ProfileCardBody and ProfileCardSection from elements/ProfileCard.tsx — those responsibilities now live on Step.Body and Step.Section, so the ProfileCard module is back to just Header and Footer chrome. - ConfigureSSOSkeleton calls Stepper.Skeleton without an explicit totalSteps; the default of 4 is used.
Replace flat `colorMutedForeground` background with the shared `common.mutedBackground` helper for visual consistency with other muted surfaces.
Each step now renders its own <Step.Footer />. The shared ConfigureSSOFooter and the FooterActionsContext registry that backed it (continueAction state, the deepest-mounted-wizard stack with push/pop/publishWizardValue, and useRegisterContinueAction) are all gone. The Wizard primitive simplifies accordingly: no more wrapping the outermost wizard in FooterActionsProvider, no more registering each wizard's value into a chrome stack. useWizard().goNext already handles nested fall-through via parentWizard?.goNext, so a step rendered inside a nested wizard has its <Step.Footer />'s useWizard() naturally point at the right wizard — no out-of-band ref needed. Step.Footer is added as a compound member of Step in elements/Step.tsx alongside Section/Header/Body. It reads useWizard for sane defaults (goNext, goPrev, isFirstStep, isLastStep) and accepts override props for the cases that need them (continueDisabled, continueLoading, onContinue, hidePrevious, etc.). All five step files updated. Confirmation uses <Step.Footer hideContinue /> since it's the last step. ConfigureSSOFooter and elements/Wizard/FooterActionsContext are deleted.
Keeps the footer at a consistent height even when its buttons are hidden or replaced — useful for step-specific footer compositions that may render different button sets per step.
Replaces the prop-heavy Step.Footer (with previousLabel / continueLabel / hidePrevious / hideContinue / *Disabled / *Loading / on*) with a compound primitive set: - Step.Footer is now a thin wrapper around ProfileCardFooter that accepts arbitrary children. - Step.Footer.Previous and Step.Footer.Continue are purely presentational buttons (no useWizard, no defaults). Each accepts onClick, isDisabled, isLoading, and optional label. Each step destructures useWizard at the top and wires goNext / goPrev / isFirstStep / isLastStep into the buttons explicitly. Confirmation drops the Continue button entirely. ConfigureSSOSkeleton also adopts Step.Footer with both buttons disabled — the skeleton now mirrors the live shell using the same primitives, with no wizard context required. The whole footer surface is reusable outside the wizard now and shrinks dramatically at the call site.
The verify-email-domain step now has a single outer wrapper that owns the Flow.Part + Step + Step.Header chrome. The two inner sub-steps (ProvideEmail and VerifyEmailAddress) are content-only (Step.Body + Step.Footer) and share the outer header through an inner Wizard. Step.Header sits inside the inner Wizard so its descendants — specifically the new Step.Counter — see the inner wizard's state. - VerifyDomainStep.tsx is renamed to VerifyEmailAddressStep.tsx to free the outer name and clarify what the inner content actually does (verify the user's email address as proof of domain ownership). Both inner files now render only the body + footer for their sub-screen. - New VerifyEmailDomainStep.tsx is the outer step. It reads the user's primary email address, conditionally renders the ProvideEmail sub-step, and always renders the VerifyEmailAddressStep sub-step. - ConfigureSSO.tsx drops its useUser read and the inline inner Wizard for verify-email-domain — the outer step encapsulates both. The Configure outer step keeps its inline inner Wizard for now (single sub-step there). Adds Step.Counter as a pure-UI compound member (takes total + current numbers, auto-hides when total <= 1). Step.Header now positions its children as the right-side slot of the title row, matching the original Laura layout.
Reorganizes the steps directory and rebalances responsibilities between Step.Body and Step.Section: - The verify-domain wrapper, ProvideEmailStep, and the inner email-verification screen all live in a single VerifyDomainStep.tsx file. The renamed inner screen is EnterVerificationCodeStep — its job is the actual code entry; the wrapper handles the shared header and provider routing. - The configure outer step is consolidated into a single ConfigureStep component (no inner wizard yet — it's a single screen for now). ConfigureCreateAppStep is gone. - Step.Body becomes a scrollable container with no padding — pure flex+scroll wrapper. Steps that want padded content add a Step.Section inside Body. ConfirmationStep and TestConfigurationStep adopt the new Step.Body + Step.Section shape. - ConfigureSSO.tsx updates the wizard tree: outer step ids are verify-domain / configure / test / confirmation. The verify-domain step renders the new VerifyDomainStep wrapper directly; configure step renders ConfigureStep directly (no inline inner wizard).
…ections Adds a separate Step.Section for the test SSO URL with a bottom border divider, and updates the placeholder text in the existing section to indicate test results.
Wrap wizard steps in a single Step.Body at the VerifyDomainStep level instead of duplicating Step.Body inside each inner step. Inner steps (ProvideEmail, EnterVerificationCode) now render Step.Section directly with flex/center alignment, matching the layout used in ConfirmationStep.
Adds the Select Provider step at the top of the ConfigureSSO wizard tree. The step is structurally a regular wizard step — same Step chrome, same goNext / goPrev mechanics, same per-step descriptor — but ConfigureSSOHeader filters it out of the breadcrumb by id so it doesn't appear in the Stepper. When the user is on Select Provider, no breadcrumb bullet is highlighted (currentIndex resolves to -1 against the filtered list, all items render muted) — matches the design intent. The step body is placeholder UI for now. The provider tile selection, the FlowProvider integration, and the initial-step derivation all land separately when we actually build the Select Provider screen.
The wizard now accepts an optional initialStepId prop. When passed, that becomes the active step on mount; when omitted, the existing "first registered step becomes default" behavior is preserved. This is the hook the host needs to land server-derived initial step logic later — e.g., ConfigureSSO computing the initial step from the user's enterprise connection state. Hosts that don't pass it work unchanged.
Removes the trailing period from the description text in the SelectProvider and VerifyDomain wizard steps for consistency.
Removes the ConfigureSSOSteps wrapper and renders the Wizard.Step children directly inside the Wizard. Also sets the initial step to `configure` so the wizard opens on the configuration step.
Adds a patch-level changeset for @clerk/ui covering the layered primitive refactor on <__experimental_ConfigureSSO />. Also reverts the sandbox template's local-dev publishable key back to the original value tracked in main.
Delete the wizard subdirectory under ConfigureSSO, including ConfigureSSOWizard, ConfigureSSOWizardContext, types, and index, now that the wizard steps have been inlined into the parent component.
Let the Wizard fall back to its default first step instead of forcing the `configure` step on mount.
Renames the 9 configureSSOWizard* element descriptors to match the post-refactor primitive layout (configureSSOHeader / configureSSOStepper* / configureSSOStep / configureSSOStepCounter / configureSSOFooter*), adds them at every site that previously had a TODO placeholder (Stepper Root + Item + Skeleton, Step.Counter, ProfileCardHeader), and drops the legacy entries from elementDescriptors.ts and the appearance.ts ElementsConfig type. Also aligns the ConfigureStep elementId from 'create-app' to 'configure' to match the wizard step id.
Stepper.Item now takes the label as children and a bullet number as a primitive prop (rather than a ReactNode the caller had to pre-build). The check-icon-vs-number switch moves inside Item, driven by the isCompleted prop — callers no longer pick which symbol to render in the bullet slot. ConfigureSSOHeader simplifies accordingly: it computes the bullet number from the index, resolves the step label via useLocalizations, and passes the rest as plain props. No more inline ternary picking between an Icon and a Text node for the bullet.
iagodahlem
force-pushed
the
iago/configure-sso-layers
branch
from
7dc3f44 to
94f83bd
Compare
Switch Stepper.Item to SimpleButton, align caret and skeleton colors with the muted foreground token, and tighten the active step typography. Simplify the header's step click handler now that disabled state is handled by the button itself.
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
2 participants
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
Refactors the
<__experimental_ConfigureSSO />UI surface into a layered architecture that separates the navigation primitive (Wizard) from the layout primitives (Step, Stepper, ProfileCard) from the per-step content. No public component API change — the<__experimental_ConfigureSSO />export keeps its current shape.Why
The wizard primitive that landed in #8468 ships a working declarative API plus an imperative
useRegisterContinueActionregistry, but it owns its own chrome (Header, Footer, Body), couples step gating to a wizard-wideFooterActionsContext, and runs URL routing throughSwitch/Route. That made the breadcrumb non-reusable, blocked per-step footer customization, and required adeepestWizardworkaround to dispatch correctly across nested wizards.This PR reshapes the surface so each layer has a single job:
Switch/Route, no URL coupling. Steps register themselves viauseLayoutEffectand render self when active.goNext/goPrevbubble through nested wizards naturally.<Stepper.Item>is a self-rendering button + bullet + label.<Stepper.Skeleton>mirrors it for the loading state.Step.Header,Step.Body,Step.Section,Step.Counter,Step.FooterwithFooter.Previous/Footer.Continue). All UI-only, no wizard coupling — the same primitives drive the live shell and the skeleton.<header>/<footer>chrome with the consistent border + padding the surface uses.The host (
ConfigureSSO.tsx) wires the layers together. Each step file is short, opinionated about its own behavior, and assembles the primitives from above.What changed
New primitives at
packages/ui/src/components/ConfigureSSO/elements/:Wizard/— state-driven, children-rendering wizard with an optionalinitialStepId+Wizard.Stepregistration viauseLayoutEffect. Drops the previous routing layer entirely.Stepper/— declarative<Stepper>+<Stepper.Item>+<Stepper.Skeleton>. The container only handles flex layout + separator insertion between items; current/completed/reachable computation moves to the host.Step.tsx— the<Step>layout wrapper plus the compound members listed above. The Footer button compounds (Step.Footer.Previous,Step.Footer.Continue) take their ownonClick/isDisabled/isLoadingprops — nouseWizardinside, which is why the same Footer primitives work inConfigureSSOSkeleton.ProfileCard.tsx— header / footer chrome.Surface-level wiring:
ConfigureSSO.tsxadopts the new shape end-to-end. The inline ProfileCard + NavBar layout collapses into composed primitives. The wizard's old internal chrome is gone.ConfigureSSOHeaderreadsuseWizard()and maps the active steps into<Stepper.Item>s; it also filtersselect-providerout of the breadcrumb by id.useWizard()directly, owns its own<Step.Footer>with explicitgoPrev/goNexthandlers, and renders its body viaStep.Body+Step.Section.SelectProviderStepboilerplate is added as the first wizard step. It's filtered out of the breadcrumb inConfigureSSOHeaderby id (nohiddenflag on the wizard primitive — kept the primitive clean). Real provider-tile UI lands separately.FooterActionsContextregistry (push / pop /deepestWizardplumbing) is gone — per-step footer rendering removes the need for it.Out of scope — planned follow-ups
FlowProvider.providerstatederiveInitialStep(connection)and wiring toWizard.initialStepId// TODO: add descriptorcomments mark the placementsPrevious/Continue/Step X / YTest plan
<__experimental_ConfigureSSO />end-to-end with the placeholder contentStep.Counterdoesn't render (single inner step → badge auto-hides)ConfigureSSOSkeletononce on cold start; subsequent re-fetches don't re-trigger the full skeletonType of change