fix(react): Add descriptiont to SMS MFA verification

Author: Ehesp

packages/react/src/auth/forms/mfa/sms-multi-factor-enrollment-form.test.tsx

@@ -217,6 +217,9 @@ describe("<MultiFactorEnrollmentVerifyPhoneNumberForm />", () => {
           verificationCode: "verificationCode",
           verifyCode: "verifyCode",
         },
+        prompts: {
+          mfaSmsEnrollmentVerificationPrompt: "mfaSmsEnrollmentVerificationPrompt",
+        },
       }),
     });
 
@@ -238,6 +241,10 @@ describe("<MultiFactorEnrollmentVerifyPhoneNumberForm />", () => {
 
     expect(screen.getByRole("textbox", { name: /verificationCode/i })).toBeInTheDocument();
 
+    const description = container.querySelector("[data-input-description]");
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveTextContent("mfaSmsEnrollmentVerificationPrompt");
+
     const verifyCodeButton = screen.getByRole("button", { name: "verifyCode" });
     expect(verifyCodeButton).toBeInTheDocument();
     expect(verifyCodeButton).toHaveAttribute("type", "submit");

packages/react/src/auth/forms/mfa/sms-multi-factor-enrollment-form.tsx

@@ -193,7 +193,13 @@ export function MultiFactorEnrollmentVerifyPhoneNumberForm(props: MultiFactorEnr
       <form.AppForm>
         <fieldset>
           <form.AppField name="verificationCode">
-            {(field) => <field.Input label={getTranslation(ui, "labels", "verificationCode")} type="text" />}
+            {(field) => (
+              <field.Input
+                description={getTranslation(ui, "prompts", "mfaSmsEnrollmentVerificationPrompt")}
+                label={getTranslation(ui, "labels", "verificationCode")}
+                type="text"
+              />
+            )}
           </form.AppField>
         </fieldset>
         <fieldset>

packages/react/src/components/form.test.tsx

@@ -120,6 +120,47 @@ describe("form export", () => {
       expect(screen.getByTestId("test-action")).toHaveTextContent("Action");
     });
 
+    it("should render the Input description prop when provided", () => {
+      const { result } = renderHook(() => {
+        return form.useAppForm({
+          defaultValues: { foo: "bar" },
+        });
+      });
+
+      const hook = result.current;
+
+      const { container } = render(
+        <hook.AppForm>
+          <hook.AppField name="foo">
+            {(field) => <field.Input label="Foo" description="This is a description" />}
+          </hook.AppField>
+        </hook.AppForm>
+      );
+
+      const description = container.querySelector("[data-input-description]");
+      expect(description).toBeInTheDocument();
+      expect(description).toHaveTextContent("This is a description");
+    });
+
+    it("should not render the Input description when not provided", () => {
+      const { result } = renderHook(() => {
+        return form.useAppForm({
+          defaultValues: { foo: "bar" },
+        });
+      });
+
+      const hook = result.current;
+
+      const { container } = render(
+        <hook.AppForm>
+          <hook.AppField name="foo">{(field) => <field.Input label="Foo" />}</hook.AppField>
+        </hook.AppForm>
+      );
+
+      const description = container.querySelector("[data-input-description]");
+      expect(description).not.toBeInTheDocument();
+    });
+
     it("should render the Input metadata when available", async () => {
       const { result } = renderHook(() => {
         return form.useAppForm({

packages/react/src/components/form.tsx

@@ -24,8 +24,11 @@ function Input({
   before,
   label,
   action,
+  description,
   ...props
-}: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode; action?: ReactNode }>) {
+}: PropsWithChildren<
+  ComponentProps<"input"> & { label: string; before?: ReactNode; action?: ReactNode; description?: ReactNode }
+>) {
   const field = useFieldContext<string>();
 
   return (
@@ -34,6 +37,7 @@ function Input({
         <div>{label}</div>
         {action ? <div>{action}</div> : null}
       </div>
+      {description ? <div data-input-description>{description}</div> : null}
       <div data-input-group>
         {before}
         <input

packages/styles/src/base.css

@@ -120,6 +120,10 @@
     @apply grow;
   }
 
+  :where(.fui-form fieldset label div[data-input-description]) {
+    @apply text-xs text-text-muted;
+  }
+
   :where(.fui-form .fui-form__action) {
     @apply px-1 hover:underline text-xs text-text-muted;
   }