feat(ui): expose element descriptors for ResetConnectionDialog and inactive banner

Adds element descriptors so the reset dialog (card, confirmation input,
destructive submit, cancel) and the inactive footer banner on the confirmation
step can be targeted by appearance customizations. Surface-level only; no
behavior changes.

Author: iagodahlem

packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx

@@ -1,6 +1,6 @@
 import { useReverification } from '@clerk/shared/react';
 
-import { Col, localizationKeys } from '@/customizables';
+import { Col, descriptors, localizationKeys } from '@/customizables';
 import { Card } from '@/elements/Card';
 import { useCardState, withCardStateProvider } from '@/elements/contexts';
 import { Form } from '@/elements/Form';
@@ -81,7 +81,10 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti
   };
 
   return (
-    <Card.Root sx={t => ({ borderRadius: t.radii.$md })}>
+    <Card.Root
+      elementDescriptor={descriptors.configureSSOResetConnectionDialog}
+      sx={t => ({ borderRadius: t.radii.$md })}
+    >
       <Card.Content sx={t => ({ textAlign: 'start', padding: t.sizes.$5 })}>
         <FormContainer
           headerTitle={localizationKeys('configureSSO.resetConnectionDialog.title')}
@@ -93,17 +96,20 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti
               <Form.ControlRow elementId={confirmationField.id}>
                 <Form.PlainInput
                   {...confirmationField.props}
+                  elementDescriptor={descriptors.configureSSOResetConnectionDialogConfirmationInput}
                   ignorePasswordManager
                 />
               </Form.ControlRow>
               <FormButtonContainer>
                 <Form.SubmitButton
+                  elementDescriptor={descriptors.configureSSOResetConnectionDialogSubmitButton}
                   block={false}
                   colorScheme='danger'
                   isDisabled={!canSubmit}
                   localizationKey={localizationKeys('configureSSO.resetConnectionDialog.resetButton')}
                 />
                 <Form.ResetButton
+                  elementDescriptor={descriptors.configureSSOResetConnectionDialogCancelButton}
                   block={false}
                   localizationKey={localizationKeys('configureSSO.resetConnectionDialog.cancelButton')}
                   onClick={onClose}

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

@@ -50,6 +50,7 @@ export const ConfirmationStep = (): JSX.Element => {
         <Step.Footer>
           {!isActive && (
             <Flex
+              elementDescriptor={descriptors.configureSSOConfirmationInactiveBanner}
               sx={{ flex: 1 }}
               align='center'
             >

packages/ui/src/customizables/elementDescriptors.ts

@@ -603,9 +603,15 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'configureSSOConfirmationConfigDetailsLabel',
   'configureSSOConfirmationConfigDetailsValue',
   'configureSSOConfirmationConfigDetailsLink',
+  'configureSSOConfirmationInactiveBanner',
   'configureSSOConfirmationReconfigureButton',
   'configureSSOConfirmationResetButton',
 
+  'configureSSOResetConnectionDialog',
+  'configureSSOResetConnectionDialogCancelButton',
+  'configureSSOResetConnectionDialogConfirmationInput',
+  'configureSSOResetConnectionDialogSubmitButton',
+
   'web3SolanaWalletButtonsRoot',
   'web3SolanaWalletButtons',
   'web3SolanaWalletButtonsIconButton',

packages/ui/src/elements/FieldControl.tsx

@@ -255,14 +255,18 @@ const CheckboxLabel = (props: { description?: string | LocalizationKey }) => {
   );
 };
 
-const InputElement = forwardRef<HTMLInputElement>((_, ref) => {
+type InputElementProps = {
+  elementDescriptor?: ElementDescriptor;
+};
+
+const InputElement = forwardRef<HTMLInputElement, InputElementProps>(({ elementDescriptor }, ref) => {
   const { t } = useLocalizations();
   const formField = useFormField();
   const { placeholder, ...inputProps } = sanitizeInputProps(formField);
   return (
     <Input
       ref={ref}
-      elementDescriptor={descriptors.formFieldInput}
+      elementDescriptor={elementDescriptor || descriptors.formFieldInput}
       elementId={descriptors.formFieldInput.setId(formField.fieldId)}
       {...inputProps}
       placeholder={t(placeholder)}

packages/ui/src/elements/Form.tsx

@@ -5,6 +5,7 @@ import React, { forwardRef, useState } from 'react';
 
 import type { LocalizationKey } from '../customizables';
 import { Button, Col, descriptors, Flex, Form as FormPrim, localizationKeys } from '../customizables';
+import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import { useLoadingStatus } from '../hooks';
 import type { PropsOfComponent } from '../styledSystem';
 import { LastAuthenticationStrategyBadge } from './Badge';
@@ -180,10 +181,11 @@ const LastAuthenticationStrategyBadgeWithFormState = (
   );
 };
 
-const PlainInput = (props: CommonInputProps) => {
+const PlainInput = (props: CommonInputProps & { elementDescriptor?: ElementDescriptor }) => {
+  const { elementDescriptor, ...rest } = props;
   return (
-    <CommonInputWrapper {...props}>
-      <Field.Input />
+    <CommonInputWrapper {...rest}>
+      <Field.Input elementDescriptor={elementDescriptor} />
     </CommonInputWrapper>
   );
 };

packages/ui/src/internal/appearance.ts

@@ -739,9 +739,15 @@ export type ElementsConfig = {
   configureSSOConfirmationConfigDetailsLabel: WithOptions;
   configureSSOConfirmationConfigDetailsValue: WithOptions;
   configureSSOConfirmationConfigDetailsLink: WithOptions;
+  configureSSOConfirmationInactiveBanner: WithOptions;
   configureSSOConfirmationReconfigureButton: WithOptions;
   configureSSOConfirmationResetButton: WithOptions;
 
+  configureSSOResetConnectionDialog: WithOptions;
+  configureSSOResetConnectionDialogCancelButton: WithOptions;
+  configureSSOResetConnectionDialogConfirmationInput: WithOptions;
+  configureSSOResetConnectionDialogSubmitButton: WithOptions;
+
   web3SolanaWalletButtonsRoot: WithOptions;
   web3SolanaWalletButtons: WithOptions;
   web3SolanaWalletButtonsIconButton: WithOptions<string, LoadingState>;