feat(ui): add badge prop to ConfigureSSO step header

Lets a step render an inline badge next to the title without crowding the
right-aligned children slot. The SSO confirmation step now passes its active
status badge through this prop instead of layering its own header component
inside the body.

Author: iagodahlem

.changeset/sso-step-header-badge.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Add an optional badge prop to the ConfigureSSO step header and use it for the SSO status badge on the confirmation step.

packages/ui/src/components/ConfigureSSO/elements/Step.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, type ReactNode } from 'react';
 
 import {
   Badge,
@@ -47,9 +47,10 @@ const Section = ({ fill, sx, ...props }: StepSectionProps): JSX.Element => (
 type StepHeaderProps = PropsWithChildren<{
   title: LocalizationKey | string;
   description?: LocalizationKey | string;
+  badge?: ReactNode;
 }>;
 
-const Header = ({ title, description, children }: StepHeaderProps): JSX.Element => {
+const Header = ({ title, description, badge, children }: StepHeaderProps): JSX.Element => {
   const { t } = useLocalizations();
   const titleText = typeof title === 'string' ? title : t(title);
   const descriptionText = description ? (typeof description === 'string' ? description : t(description)) : null;
@@ -69,12 +70,18 @@ const Header = ({ title, description, children }: StepHeaderProps): JSX.Element
         sx={theme => ({ gap: theme.space.$4 })}
       >
         <Col sx={theme => ({ gap: theme.space.$2, minWidth: 0 })}>
-          <Heading
-            elementDescriptor={descriptors.configureSSOStepHeaderTitle}
-            textVariant='h2'
+          <Flex
+            align='center'
+            sx={t => ({ gap: t.space.$2, flexWrap: 'wrap' })}
           >
-            {titleText}
-          </Heading>
+            <Heading
+              elementDescriptor={descriptors.configureSSOStepHeaderTitle}
+              textVariant='h2'
+            >
+              {titleText}
+            </Heading>
+            {badge}
+          </Flex>
 
           {descriptionText && (
             <Text

packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx

@@ -1,22 +1,9 @@
 import { useOrganization, useReverification } from '@clerk/shared/react';
 import { useState } from 'react';
 
-import {
-  Badge,
-  Button,
-  Col,
-  descriptors,
-  Flex,
-  Flow,
-  Grid,
-  Heading,
-  Link,
-  localizationKeys,
-  Text,
-} from '@/customizables';
+import { Badge, Button, Col, descriptors, Flex, Flow, Grid, Link, localizationKeys, Text } from '@/customizables';
 import { useCardState } from '@/elements/contexts';
 import { Switch } from '@/elements/Switch';
-import { Alert } from '@/ui/elements/Alert';
 import { handleError } from '@/utils/errorHandler';
 
 import { useConfigureSSO } from '../ConfigureSSOContext';
@@ -34,59 +21,38 @@ export const ConfirmationStep = (): JSX.Element => {
         elementDescriptor={descriptors.configureSSOStep}
         elementId={descriptors.configureSSOStep.setId('confirmation')}
       >
+        <Step.Header
+          title={localizationKeys('configureSSO.confirmation.statusSection.title')}
+          badge={
+            <Badge
+              elementDescriptor={descriptors.configureSSOConfirmationStatusBadge}
+              elementId={descriptors.configureSSOConfirmationStatusBadge.setId(isActive ? 'active' : 'inactive')}
+              colorScheme={isActive ? 'success' : 'danger'}
+              localizationKey={
+                isActive
+                  ? localizationKeys('configureSSO.confirmation.statusSection.activeBadge')
+                  : localizationKeys('configureSSO.confirmation.statusSection.inactiveBadge')
+              }
+            />
+          }
+        />
+
         <Step.Body sx={t => ({ paddingInline: t.space.$6, paddingBlock: t.space.$5, gap: t.space.$5 })}>
-          <StatusHeader isActive={isActive} />
           <DetailsGrid />
         </Step.Body>
 
         <Step.Footer>
           {!isActive && (
-            <Alert
-              variant='info'
-              title={localizationKeys('configureSSO.confirmation.inactiveBanner.title')}
-              sx={{ flex: 1 }}
-            />
+            <Flex>
+              <Text title={localizationKeys('configureSSO.confirmation.inactiveBanner.title')} />
+            </Flex>
           )}
         </Step.Footer>
       </Step>
     </Flow.Part>
   );
 };
 
-type StatusHeaderProps = {
-  isActive: boolean;
-};
-
-const StatusHeader = ({ isActive }: StatusHeaderProps): JSX.Element => {
-  return (
-    <Flex
-      align='center'
-      sx={t => ({
-        gap: t.space.$3,
-        paddingBlockEnd: t.space.$4,
-        borderBottomWidth: t.borderWidths.$normal,
-        borderBottomStyle: t.borderStyles.$solid,
-        borderBottomColor: t.colors.$borderAlpha100,
-      })}
-    >
-      <Heading
-        textVariant='h2'
-        localizationKey={localizationKeys('configureSSO.confirmation.statusSection.title')}
-      />
-      <Badge
-        elementDescriptor={descriptors.configureSSOConfirmationStatusBadge}
-        elementId={descriptors.configureSSOConfirmationStatusBadge.setId(isActive ? 'active' : 'inactive')}
-        colorScheme={isActive ? 'success' : 'danger'}
-        localizationKey={
-          isActive
-            ? localizationKeys('configureSSO.confirmation.statusSection.activeBadge')
-            : localizationKeys('configureSSO.confirmation.statusSection.inactiveBadge')
-        }
-      />
-    </Flex>
-  );
-};
-
 const DetailsGrid = (): JSX.Element => {
   return (
     <Grid