chore(clerk-js): Cleanup Form related deprecations in ClerkJS (#2213)

* chore(clerk-js): Cleanup Form related deprecations in ClerkJS * chore(clerk-js): Add changeset * chore(clerk-js): Sync with ui.retheme * chore(clerk-js): Address PR comments
clerk · Nov 27, 2023 · 929215f · 929215f
1 parent 572cfec
commit 929215f
Show file tree

Hide file tree

Showing 25 changed files with 158 additions and 1,128 deletions.
diff --git a/.changeset/fuzzy-horses-fix.md b/.changeset/fuzzy-horses-fix.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/customizables/index.ts b/packages/clerk-js/src/ui.retheme/customizables/index.ts
@@ -25,13 +25,11 @@ export const SimpleButton = makeCustomizable(makeLocalizable(sanitizeDomProps(Pr
 export const Heading = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Heading)));
 export const Link = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Link)));
 export const Text = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.Text)));
-
 export const Image = makeCustomizable(sanitizeDomProps(makeResponsive(Primitives.Image)));
 
 export const Alert = makeCustomizable(sanitizeDomProps(Primitives.Alert));
 export const AlertIcon = makeCustomizable(sanitizeDomProps(Primitives.AlertIcon));
 export const Input = makeCustomizable(sanitizeDomProps(Primitives.Input));
-export const FormControl = makeCustomizable(sanitizeDomProps(Primitives.FormControl));
 export const FormLabel = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormLabel)));
 export const FormErrorText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormErrorText)));
 export const FormSuccessText = makeCustomizable(makeLocalizable(sanitizeDomProps(Primitives.FormSuccessText)));

diff --git a/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx b/packages/clerk-js/src/ui.retheme/elements/FieldControl.tsx
@@ -6,7 +6,6 @@ import type { LocalizationKey } from '../customizables';
 import {
   descriptors,
   Flex,
-  FormControl as FormControlPrim,
   FormLabel,
   Icon as IconCustomizable,
   Input,
@@ -33,46 +32,23 @@ type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placehol
 
 const Root = (props: PropsWithChildren<FormControlProps>) => {
   const card = useCardState();
-  const {
-    id,
-    isRequired,
-    sx,
-    setError,
-    setInfo,
-    setSuccess,
-    setWarning,
-    clearFeedback,
-    feedbackType,
-    feedback,
-    isFocused,
-  } = props;
+  const { children, feedbackType, feedback, isFocused, isDisabled: isDisabledProp, ...restProps } = props;
 
+  /**
+   * Debounce the feedback before passing it inside the provider.
+   */
   const { debounced: debouncedState } = useFormControlFeedback({ feedback, feedbackType, isFocused });
 
-  const isDisabled = props.isDisabled || card.isLoading;
+  const isDisabled = isDisabledProp || card.isLoading;
 
-  return (
-    <FormFieldContextProvider {...{ ...props, isDisabled }}>
-      {/*Most of our primitives still depend on this provider.*/}
-      {/*TODO: In follow-up PRs these will be removed*/}
-      <FormControlPrim
-        elementDescriptor={descriptors.formField}
-        elementId={descriptors.formField.setId(id)}
-        id={id}
-        hasError={debouncedState.feedbackType === 'error'}
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        setError={setError}
-        setSuccess={setSuccess}
-        setWarning={setWarning}
-        setInfo={setInfo}
-        clearFeedback={clearFeedback}
-        sx={sx}
-      >
-        {props.children}
-      </FormControlPrim>
-    </FormFieldContextProvider>
-  );
+  const ctxProps = {
+    ...restProps,
+    isDisabled,
+    isFocused,
+    ...debouncedState,
+  };
+
+  return <FormFieldContextProvider {...ctxProps}>{children}</FormFieldContextProvider>;
 };
 
 const FieldAction = (
@@ -230,7 +206,7 @@ const PasswordInputElement = forwardRef<HTMLInputElement>((_, ref) => {
   ]);
 
   return (
-    // @ts-expect-error
+    // @ts-expect-error Typescript is complaining that `setError`, `setWarning` and the rest of feedback setters are not passed. We are clearly passing them from above.
     <PasswordInput
       ref={ref}
       elementDescriptor={descriptors.formFieldInput}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Form.tsx b/packages/clerk-js/src/ui.retheme/elements/Form.tsx
@@ -10,7 +10,6 @@ import type { PropsOfComponent } from '../styledSystem';
 import type { OTPInputProps } from './CodeControl';
 import { useCardState } from './contexts';
 import { Field } from './FieldControl';
-import { FormControl } from './FormControl';
 
 const [FormState, useFormState] = createContextAndHook<{
   isLoading: boolean;
@@ -80,8 +79,7 @@ const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
     <Button
       elementDescriptor={descriptors.formButtonPrimary}
       block
-      hasArrow
-      textVariant='buttonSmallRegular'
+      textVariant='buttonExtraSmallBold'
       isLoading={isLoading}
       isDisabled={isDisabled}
       type='submit'
@@ -119,7 +117,7 @@ const FormControlRow = (props: Omit<PropsOfComponent<typeof Flex>, 'elementId'>
   );
 };
 
-type CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children'>;
+type CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children' | 'elementDescriptor' | 'elementId'>;
 
 type CommonInputProps = CommonFieldRootProps & {
   isOptional?: boolean;
@@ -132,20 +130,27 @@ const CommonInputWrapper = (props: PropsWithChildren<CommonInputProps>) => {
   const { isOptional, icon, actionLabel, children, onActionClicked, ...fieldProps } = props;
   return (
     <Field.Root {...fieldProps}>
-      <Field.LabelRow>
-        <Field.Label />
-        <Field.LabelIcon icon={icon} />
-        {!actionLabel && isOptional && <Field.AsOptional />}
-        {actionLabel && (
-          <Field.Action
-            localizationKey={actionLabel}
-            onClick={onActionClicked}
-          />
-        )}
-        <Field.Action />
-      </Field.LabelRow>
-      {children}
-      <Field.Feedback />
+      <Flex
+        direction='col'
+        elementDescriptor={descriptors.formField}
+        elementId={descriptors.formField.setId(fieldProps.id)}
+        sx={{ position: 'relative', flex: '1 1 auto' }}
+      >
+        <Field.LabelRow>
+          <Field.Label />
+          <Field.LabelIcon icon={icon} />
+          {!actionLabel && isOptional && <Field.AsOptional />}
+          {actionLabel && (
+            <Field.Action
+              localizationKey={actionLabel}
+              onClick={onActionClicked}
+            />
+          )}
+          <Field.Action />
+        </Field.LabelRow>
+        {children}
+        <Field.Feedback />
+      </Flex>
     </Field.Root>
   );
 };
@@ -195,6 +200,7 @@ const Checkbox = (
 ) => {
   return (
     <Field.Root {...props}>
+      {/*TODO: Create a descriptor for Checkbox wrapper*/}
       <Flex align='start'>
         <Field.CheckboxIndicator />
         <Field.CheckboxLabel description={props.description} />
@@ -235,6 +241,7 @@ const OTPInput = (props: OTPInputProps) => {
     // @ts-ignore
     <Field.Root {...restInputProps}>
       <Field.OTPRoot {...props}>
+        {/*TODO: Create a descriptor for OTP wrapper*/}
         <Col
           elementDescriptor={descriptors.form}
           gap={2}
@@ -264,10 +271,6 @@ const OTPInput = (props: OTPInputProps) => {
 export const Form = {
   Root: FormRoot,
   ControlRow: FormControlRow,
-  /**
-   * @deprecated Use Form.PlainInput
-   */
-  Control: FormControl,
   PlainInput,
   PasswordInput,
   PhoneInput,