feat(clerk-js): Last authentication strategy badge (#6732)

Author: alexcarpenter

packages/clerk-js/src/ui/elements/Badge.tsx

@@ -1,47 +1,38 @@
-import { Badge, descriptors, localizationKeys } from '../customizables';
-import type { InternalTheme, PropsOfComponent, ThemableCssProp } from '../styledSystem';
+import { descriptors, localizationKeys, Span } from '../customizables';
+import { common, type PropsOfComponent } from '../styledSystem';
 
-const overlayStyles = (t: InternalTheme): ThemableCssProp => [
-  {
-    background: `linear-gradient(${t.colors.$borderAlpha25}, ${t.colors.$borderAlpha25}),${t.colors.$colorBackground}`,
-    borderColor: t.colors.$colorForeground,
-    boxShadow: 'none',
-    outline: `${t.space.$px} solid ${t.colors.$colorBackground}`,
-    pointerEvents: 'none',
-    position: 'absolute',
-    right: `calc(${t.space.$2x5} * -1)`,
-    top: '-35%',
-    ':after': {
-      border: `${t.space.$px} solid ${t.colors.$borderAlpha150}`,
-      borderRadius: t.radii.$lg,
-      content: '""',
-      display: 'block',
-      height: '100%',
-      inset: 0,
-      padding: t.space.$px,
-      position: 'absolute',
-      width: '100%',
-    },
-  },
-];
-
-export type LastAuthenticationStrategyBadgeProps = PropsOfComponent<typeof Badge> & { overlay?: boolean };
+export type LastAuthenticationStrategyBadgeProps = PropsOfComponent<typeof Span> & { overlay?: boolean };
 export const LastAuthenticationStrategyBadge = ({
   sx,
   overlay,
   ...props
-}: LastAuthenticationStrategyBadgeProps): JSX.Element => (
-  <Badge
-    {...props}
-    elementDescriptor={descriptors.lastAuthenticationStrategyBadge}
-    localizationKey={localizationKeys('lastAuthenticationStrategy')}
-    sx={[
-      t => ({
-        background: t.colors.$borderAlpha25,
-        borderRadius: t.radii.$lg,
-      }),
-      overlay && overlayStyles,
-      ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-    ]}
-  />
-);
+}: LastAuthenticationStrategyBadgeProps): JSX.Element => {
+  return (
+    <Span
+      {...props}
+      elementDescriptor={descriptors.lastAuthenticationStrategyBadge}
+      localizationKey={localizationKeys('lastAuthenticationStrategy')}
+      sx={[
+        t => ({
+          ...common.textVariants(t).caption,
+          background: `linear-gradient(${t.colors.$borderAlpha25}, transparent), ${t.colors.$colorBackground}`,
+          border: `${t.space.$px} solid ${t.colors.$borderAlpha150}`,
+          borderRadius: t.radii.$lg,
+          color: t.colors.$colorMutedForeground,
+          height: t.space.$4x5,
+          paddingInline: t.space.$1x5,
+          whiteSpace: 'nowrap',
+          boxShadow: `0 0 0 1px ${t.colors.$colorBackground}`,
+          ...(overlay && {
+            position: 'absolute',
+            right: -1,
+            top: -1,
+            transform: `translate(${t.space.$2x5}, -50%)`,
+            pointerEvents: 'none',
+          }),
+        }),
+        sx,
+      ]}
+    />
+  );
+};

packages/clerk-js/src/ui/elements/Form.tsx

@@ -151,7 +151,9 @@ const CommonInputWrapper = (props: PropsWithChildren<CommonInputProps>) => {
                 onClick={onActionClicked}
               />
             )}
-            {isLastAuthenticationStrategy && !actionLabel && !isOptional && <LastAuthenticationStrategyBadge />}
+            {isLastAuthenticationStrategy && !actionLabel && !isOptional && (
+              <LastAuthenticationStrategyBadgeWithFormState />
+            )}
             <Field.Action />
           </Field.LabelRow>
 
@@ -164,6 +166,20 @@ const CommonInputWrapper = (props: PropsWithChildren<CommonInputProps>) => {
   );
 };
 
+const LastAuthenticationStrategyBadgeWithFormState = (
+  props: PropsOfComponent<typeof LastAuthenticationStrategyBadge>,
+) => {
+  const { isLoading, isDisabled } = useFormState();
+  return (
+    <LastAuthenticationStrategyBadge
+      {...props}
+      sx={t => ({
+        opacity: isDisabled || isLoading ? t.opacity.$disabled : 1,
+      })}
+    />
+  );
+};
+
 const PlainInput = (props: CommonInputProps) => {
   return (
     <CommonInputWrapper {...props}>

packages/clerk-js/src/ui/foundations/sizes.ts

@@ -25,6 +25,7 @@ const spacingScale = Object.freeze({
   '3x5': { rem: '0.875rem', multiplier: 3.5 },
   '4': { rem: '1rem', multiplier: 4 },
   '4x25': { rem: '1.0625rem', multiplier: 4.25 },
+  '4x5': { rem: '1.125rem', multiplier: 4.5 },
   '5': { rem: '1.25rem', multiplier: 5 },
   '5x5': { rem: '1.375rem', multiplier: 5.5 },
   '6': { rem: '1.5rem', multiplier: 6 },
@@ -102,6 +103,7 @@ const spaceUnits = Object.freeze({
   '3x5': spacingScale['3x5'].rem,
   '4': spacingScale['4'].rem,
   '4x25': spacingScale['4x25'].rem,
+  '4x5': spacingScale['4x5'].rem,
   '5': spacingScale['5'].rem,
   '5x5': spacingScale['5x5'].rem,
   '6': spacingScale['6'].rem,