Merge pull request #1236 from firebase/@invertase/bb-7

Author: Ehesp

packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts

@@ -74,7 +74,7 @@ describe("<fui-sign-in-auth-form />", () => {
     });
 
     expect(screen.getByLabelText("Email Address")).toBeInTheDocument();
-    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password", { selector: "input" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Sign In" })).toBeInTheDocument();
     expect(screen.getByText("By continuing, you agree to our")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Forgot Password" })).toBeInTheDocument();

packages/angular/src/lib/auth/forms/sign-in-auth-form.ts

@@ -61,7 +61,7 @@ import {
           type="password"
         >
           @if (forgotPassword) {
-            <button fui-form-action (click)="forgotPassword.emit()">
+            <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword.emit()">
               {{ forgotPasswordLabel() }}
             </button>
           }

packages/angular/src/lib/components/form.spec.ts

@@ -16,8 +16,15 @@
 
 import { render, screen } from "@testing-library/angular";
 import { Component, signal } from "@angular/core";
-
-import { FormMetadataComponent, FormActionComponent, FormSubmitComponent, FormErrorMessageComponent } from "./form";
+import { injectForm, TanStackAppField } from "@tanstack/angular-form";
+
+import {
+  FormMetadataComponent,
+  FormActionComponent,
+  FormSubmitComponent,
+  FormErrorMessageComponent,
+  FormInputComponent,
+} from "./form";
 import { ButtonComponent } from "./button";
 
 @Component({
@@ -164,6 +171,35 @@ describe("Form Components", () => {
     });
   });
 
+  describe("<fui-form-input>", () => {
+    @Component({
+      template: `
+        <fui-form-input name="test" tanstack-app-field [tanstackField]="form" label="Test Label">
+          <button ngProjectAs="input-action" fui-form-action data-testid="test-action">Action</button>
+        </fui-form-input>
+      `,
+      standalone: true,
+      imports: [FormInputComponent, TanStackAppField, FormActionComponent],
+    })
+    class TestFormInputHostComponent {
+      form = injectForm({
+        defaultValues: {
+          test: "",
+        },
+      });
+    }
+
+    it("renders action content when provided", async () => {
+      await render(TestFormInputHostComponent, {
+        imports: [TestFormInputHostComponent],
+      });
+
+      const actionButton = screen.getByTestId("test-action");
+      expect(actionButton).toBeTruthy();
+      expect(actionButton).toHaveTextContent("Action");
+    });
+  });
+
   describe("<fui-form-error-message>", () => {
     it("renders error message when onSubmit error exists", async () => {
       await render(TestFormErrorMessageHostComponent);

packages/angular/src/lib/components/form.ts

@@ -30,16 +30,22 @@ export class FormMetadataComponent {
   imports: [FormMetadataComponent],
   template: `
     <label [for]="field.api.name">
-      <span>{{ label() }}</span>
-      <input
-        [attr.aria-invalid]="field.api.state.meta.isTouched && field.api.state.meta.errors.length > 0"
-        [type]="type()"
-        [id]="field.api.name"
-        [name]="field.api.name"
-        [value]="field.api.state.value"
-        (blur)="field.api.handleBlur()"
-        (input)="field.api.handleChange($any($event).target.value)"
-      />
+      <div data-input-label>
+        <div>{{ label() }}</div>
+        <div><ng-content select="input-action" /></div>
+      </div>
+      <div data-input-group>
+        <ng-content select="input-before" />
+        <input
+          [attr.aria-invalid]="field.api.state.meta.isTouched && field.api.state.meta.errors.length > 0"
+          [id]="field.api.name"
+          [name]="field.api.name"
+          [value]="field.api.state.value"
+          (blur)="field.api.handleBlur()"
+          (input)="field.api.handleChange($any($event).target.value)"
+          [type]="type()"
+        />
+      </div>
       <ng-content></ng-content>
       <fui-form-metadata [field]="field.api"></fui-form-metadata>
     </label>

packages/react/src/auth/forms/sign-in-auth-form.tsx

@@ -95,13 +95,17 @@ export function SignInAuthForm({ onSignIn, onForgotPasswordClick, onSignUpClick
         <fieldset>
           <form.AppField name="password">
             {(field) => (
-              <field.Input label={getTranslation(ui, "labels", "password")} type="password">
-                {onForgotPasswordClick ? (
-                  <form.Action onClick={onForgotPasswordClick}>
-                    {getTranslation(ui, "labels", "forgotPassword")}
-                  </form.Action>
-                ) : null}
-              </field.Input>
+              <field.Input
+                label={getTranslation(ui, "labels", "password")}
+                type="password"
+                action={
+                  onForgotPasswordClick ? (
+                    <form.Action onClick={onForgotPasswordClick}>
+                      {getTranslation(ui, "labels", "forgotPassword")}
+                    </form.Action>
+                  ) : null
+                }
+              />
             )}
           </form.AppField>
         </fieldset>

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

@@ -90,6 +90,36 @@ describe("form export", () => {
       expect(screen.getByTestId("test-child")).toBeInTheDocument();
     });
 
+    it("should render the Input action prop when provided", () => {
+      const { result } = renderHook(() => {
+        return form.useAppForm({
+          defaultValues: { foo: "bar" },
+        });
+      });
+
+      const hook = result.current;
+
+      render(
+        <hook.AppForm>
+          <hook.AppField name="foo">
+            {(field) => (
+              <field.Input
+                label="Foo"
+                action={
+                  <button type="button" data-testid="test-action">
+                    Action
+                  </button>
+                }
+              />
+            )}
+          </hook.AppField>
+        </hook.AppForm>
+      );
+
+      expect(screen.getByTestId("test-action")).toBeInTheDocument();
+      expect(screen.getByTestId("test-action")).toHaveTextContent("Action");
+    });
+
     it("should render the Input metadata when available", async () => {
       const { result } = renderHook(() => {
         return form.useAppForm({

packages/react/src/components/form.tsx

@@ -23,13 +23,17 @@ function Input({
   children,
   before,
   label,
+  action,
   ...props
-}: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode }>) {
+}: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode; action?: ReactNode }>) {
   const field = useFieldContext<string>();
 
   return (
     <label htmlFor={field.name}>
-      <span>{label}</span>
+      <div data-input-label>
+        <div>{label}</div>
+        {action ? <div>{action}</div> : null}
+      </div>
       <div data-input-group>
         {before}
         <input

packages/styles/src/base.css

@@ -113,16 +113,20 @@
     @apply flex flex-col gap-2 text-text;
   }
 
-  :where(.fui-form fieldset label span) {
-    @apply inline-flex gap-3 text-sm font-medium;
+  :where(.fui-form fieldset label div[data-input-label]) {
+    @apply flex gap-3 text-sm font-medium;
+  }
+
+  :where(.fui-form fieldset label div[data-input-label] > div:first-child) {
+    @apply grow;
   }
 
   :where(.fui-form .fui-form__action) {
     @apply px-1 hover:underline text-xs text-text-muted;
   }
 
   :where(.fui-form fieldset label input) {
-    @apply w-full border-1 border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent;
+    @apply w-full border border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent;
   }
 
   :where(.fui-form fieldset label input[aria-invalid="true"]) {