Skip to content

refactor(*): Make error text generic for use outside of forms #1247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 4, 2025
Merged

refactor(*): Make error text generic for use outside of forms #1247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/angular/src/lib/auth/oauth/oauth-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { FirebaseUIError, signInWithProvider } from "@firebase-ui/core";
</button>

@if (error()) {
<div class="fui-form__error">{{ error() }}</div>
<div class="fui-error">{{ error() }}</div>
}
</div>
`,
Expand Down
4 changes: 2 additions & 2 deletions packages/angular/src/lib/components/form.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ describe("Form Components", () => {
const errorElement = screen.getByRole("alert");

expect(errorElement).toBeTruthy();
expect(errorElement).toHaveClass("fui-form__error");
expect(errorElement).toHaveClass("fui-error");
expect(errorElement).toHaveTextContent("Test error");
});

Expand Down Expand Up @@ -207,7 +207,7 @@ describe("Form Components", () => {
const errorElement = screen.getByText("Test error message");

expect(errorElement).toBeTruthy();
expect(errorElement).toHaveClass("fui-form__error");
expect(errorElement).toHaveClass("fui-error");
});

it("does not render error message when no onSubmit error", async () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/angular/src/lib/components/form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { ButtonComponent } from "./button";
template: `
@if (field().state.meta.isTouched && errors().length > 0) {
<div>
<div role="alert" aria-live="polite" class="fui-form__error">
<div role="alert" aria-live="polite" class="fui-error">
{{ errors() }}
</div>
</div>
Expand Down Expand Up @@ -93,7 +93,7 @@ export class FormSubmitComponent {
standalone: true,
template: `
@if (errorMessage()) {
<div class="fui-form__error">
<div class="fui-error">
{{ errorMessage() }}
</div>
}
Expand Down
12 changes: 6 additions & 6 deletions packages/angular/src/lib/components/redirect-error.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe("<fui-redirect-error>", () => {

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toBeDefined();
expect(errorElement).toHaveClass("fui-form__error");
expect(errorElement).toHaveClass("fui-error");
});

it("returns null when no redirectError exists", async () => {
Expand All @@ -43,7 +43,7 @@ describe("<fui-redirect-error>", () => {

const { container } = await render(TestHostComponent);

expect(container.querySelector(".fui-form__error")).toBeNull();
expect(container.querySelector(".fui-error")).toBeNull();
});

it("properly formats error messages for Error objects", async () => {
Expand All @@ -55,7 +55,7 @@ describe("<fui-redirect-error>", () => {

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toBeDefined();
expect(errorElement).toHaveClass("fui-form__error");
expect(errorElement).toHaveClass("fui-error");
});

it("properly formats error messages for string values", async () => {
Expand All @@ -67,7 +67,7 @@ describe("<fui-redirect-error>", () => {

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toBeDefined();
expect(errorElement).toHaveClass("fui-form__error");
expect(errorElement).toHaveClass("fui-error");
});

it("displays error with correct CSS class", async () => {
Expand All @@ -78,7 +78,7 @@ describe("<fui-redirect-error>", () => {
await render(TestHostComponent);

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toHaveClass("fui-form__error");
expect(errorElement).toHaveClass("fui-error");
});

it("handles undefined redirectError", async () => {
Expand All @@ -87,6 +87,6 @@ describe("<fui-redirect-error>", () => {

const { container } = await render(TestHostComponent);

expect(container.querySelector(".fui-form__error")).toBeNull();
expect(container.querySelector(".fui-error")).toBeNull();
});
});
2 changes: 1 addition & 1 deletion packages/angular/src/lib/components/redirect-error.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { injectRedirectError } from "../provider";
imports: [CommonModule],
template: `
@if (error()) {
<div class="fui-form__error">{{ error() }}</div>
<div class="fui-error">{{ error() }}</div>
}
`,
})
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/auth/oauth/oauth-button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ describe("<OAuthButton />", () => {

const errorMessage = screen.getByText("No account found with this email address");
expect(errorMessage).toBeDefined();
expect(errorMessage.className).toContain("fui-form__error");
expect(errorMessage.className).toContain("fui-error");
});

it("displays unknown error message when non-Firebase error occurs", async () => {
Expand Down Expand Up @@ -191,7 +191,7 @@ describe("<OAuthButton />", () => {

const errorMessage = screen.getByText("unknownError");
expect(errorMessage).toBeDefined();
expect(errorMessage.className).toContain("fui-form__error");
expect(errorMessage.className).toContain("fui-error");

// Restore console.error
consoleErrorSpy.mockRestore();
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/auth/oauth/oauth-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function OAuthButton({ provider, children, themed }: OAuthButtonProps) {
>
{children}
</Button>
{error && <div className="fui-form__error">{error}</div>}
{error && <div className="fui-error">{error}</div>}
</div>
);
}
4 changes: 2 additions & 2 deletions packages/react/src/components/form.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ describe("form export", () => {

const error = screen.getByRole("alert");
expect(error).toBeInTheDocument();
expect(error).toHaveClass("fui-form__error");
expect(error).toHaveClass("fui-error");
});
});

Expand Down Expand Up @@ -256,7 +256,7 @@ describe("form export", () => {
});

await waitFor(() => {
const error = container.querySelector(".fui-form__error");
const error = container.querySelector(".fui-error");
expect(error).toBeInTheDocument();
expect(error).toHaveTextContent("error!");
});
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function FieldMetadata({ className, ...props }: ComponentProps<"div"> & { field:

return (
<div>
<div role="alert" aria-live="polite" className={cn("fui-form__error", className)} {...props}>
<div role="alert" aria-live="polite" className={cn("fui-error", className)} {...props}>
{props.field.state.meta.errors.map((error) => error.message).join(", ")}
</div>
</div>
Expand Down Expand Up @@ -78,7 +78,7 @@ function ErrorMessage() {
{([errorMap]) => {
// We only care about errors thrown from the form submission, rather than validation errors
if (errorMap?.onSubmit && typeof errorMap.onSubmit === "string") {
return <div className="fui-form__error">{errorMap.onSubmit}</div>;
return <div className="fui-error">{errorMap.onSubmit}</div>;
}

return null;
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/components/redirect-error.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe("<RedirectError />", () => {

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toBeDefined();
expect(errorElement.className).toContain("fui-form__error");
expect(errorElement.className).toContain("fui-error");
});

it("returns null when no redirectError exists", () => {
Expand Down Expand Up @@ -65,7 +65,7 @@ describe("<RedirectError />", () => {

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toBeDefined();
expect(errorElement.className).toContain("fui-form__error");
expect(errorElement.className).toContain("fui-error");
});

it("properly formats error messages for string values", () => {
Expand All @@ -81,7 +81,7 @@ describe("<RedirectError />", () => {

const errorElement = screen.getByText(errorMessage);
expect(errorElement).toBeDefined();
expect(errorElement.className).toContain("fui-form__error");
expect(errorElement.className).toContain("fui-error");
});

it("displays error with correct CSS class", () => {
Expand All @@ -96,7 +96,7 @@ describe("<RedirectError />", () => {
);

const errorElement = screen.getByText(errorMessage);
expect(errorElement.className).toBe("fui-form__error");
expect(errorElement.className).toBe("fui-error");
});

it("handles undefined redirectError", () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/redirect-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ export function RedirectError() {
return null;
}

return <div className="fui-form__error">{error}</div>;
return <div className="fui-error">{error}</div>;
}
4 changes: 2 additions & 2 deletions packages/react/tests/email-link-auth.integration.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ describe.skip("TODO");
// }

// // Check for error messages
// const errorElements = container.querySelectorAll(".fui-form__error");
// const errorElements = container.querySelectorAll(".fui-error");

// // If there are error elements, check if they're just validation errors
// if (errorElements.length > 0) {
Expand Down Expand Up @@ -162,7 +162,7 @@ describe.skip("TODO");
// });

// await waitFor(() => {
// expect(container.querySelector(".fui-form__error")).not.toBeNull();
// expect(container.querySelector(".fui-error")).not.toBeNull();
// });
// });
// });
4 changes: 2 additions & 2 deletions packages/react/tests/email-password-auth.integration.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ describe.skip("TODO");

// await waitFor(
// () => {
// expect(container.querySelector(".fui-form__error")).not.toBeNull();
// expect(container.querySelector(".fui-error")).not.toBeNull();
// },
// { timeout: 5000 }
// );
Expand Down Expand Up @@ -186,7 +186,7 @@ describe.skip("TODO");

// await waitFor(
// () => {
// expect(container.querySelector(".fui-form__error")).not.toBeNull();
// expect(container.querySelector(".fui-error")).not.toBeNull();
// },
// { timeout: 5000 }
// );
Expand Down
4 changes: 2 additions & 2 deletions packages/react/tests/forgot-password.integration.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ describe.skip("TODO");
// }

// // Check for error messages
// const errorElements = container.querySelectorAll(".fui-form__error");
// const errorElements = container.querySelectorAll(".fui-error");

// // If there are error elements, check if they're just validation errors
// if (errorElements.length > 0) {
Expand Down Expand Up @@ -199,7 +199,7 @@ describe.skip("TODO");

// await waitFor(
// () => {
// const errorElement = container.querySelector(".fui-form__error");
// const errorElement = container.querySelector(".fui-error");
// expect(errorElement).not.toBeNull();
// if (errorElement) {
// expect(errorElement.textContent).toBe("Please enter a valid email address");
Expand Down
12 changes: 6 additions & 6 deletions packages/react/tests/register.integration.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ describe.skip("TODO");
// await waitFor(
// async () => {
// // Check for critical error messages first
// const errorElements = container.querySelectorAll(".fui-form__error");
// const errorElements = container.querySelectorAll(".fui-error");
// let hasCriticalError = false;

// errorElements.forEach((element) => {
Expand Down Expand Up @@ -329,7 +329,7 @@ describe.skip("TODO");
// // We'll be more flexible here - we'll handle any errors that might occur
// await waitFor(
// () => {
// const errorElement = container.querySelector(".fui-form__error");
// const errorElement = container.querySelector(".fui-error");
// if (errorElement) {
// // If there's an error, check if it's just a validation error or a real failure
// const errorText = errorElement.textContent?.toLowerCase() || "";
Expand Down Expand Up @@ -365,7 +365,7 @@ describe.skip("TODO");
// );

// // Check for error messages that would indicate failure
// const errorElements = container.querySelectorAll(".fui-form__error");
// const errorElements = container.querySelectorAll(".fui-error");
// let hasCriticalError = false;

// errorElements.forEach((element) => {
Expand Down Expand Up @@ -424,7 +424,7 @@ describe.skip("TODO");
// const firebaseError = _error as { code?: string; message: string };

// // Check if there's an error message in the UI that explains the issue
// const errorElements = container.querySelectorAll(".fui-form__error");
// const errorElements = container.querySelectorAll(".fui-error");

// const hasValidationError = Array.from(errorElements).some((el) => {
// const text = el.textContent?.toLowerCase() || "";
Expand All @@ -440,7 +440,7 @@ describe.skip("TODO");
// } else if (firebaseError.code === "auth/user-not-found") {
// // This suggests the user wasn't created successfully
// // Let's check if there are any error messages in the UI that might explain why
// const anyErrorElement = container.querySelector(".fui-form__error");
// const anyErrorElement = container.querySelector(".fui-error");

// if (anyErrorElement) {
// // There's an error message that might explain why registration failed
Expand Down Expand Up @@ -493,7 +493,7 @@ describe.skip("TODO");
// await waitFor(
// () => {
// // Check for error message
// const errorElement = newContainer.container.querySelector(".fui-form__error");
// const errorElement = newContainer.container.querySelector(".fui-error");
// expect(errorElement).not.toBeNull();

// if (errorElement) {
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/dist.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/styles/src/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
@apply flex items-center gap-2;
}

:where(.fui-form .fui-form__error) {
:where(.fui-error) {
@apply text-error text-left text-xs;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/styles/src/base.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ describe("Tailwind :where() pseudo-class", () => {
styleElement.textContent = `
/* Base component styles with :where() for zero specificity */
:where(.fui-form fieldset > label > input) { border: 1px solid rgb(209, 213, 219); padding: 0.5rem; }
:where(.fui-form .fui-form__error) { color: rgb(239, 68, 68); }
:where(.fui-error) { color: rgb(239, 68, 68); }

/* User Tailwind override classes */
.border-gray-300 { border-color: rgb(209, 213, 219) !important; }
Expand All @@ -268,7 +268,7 @@ describe("Tailwind :where() pseudo-class", () => {
`;

const inputElement = createTestElement("border-gray-300 px-3");
const errorElement = createTestElement("fui-form__error text-red-600");
const errorElement = createTestElement("fui-error text-red-600");

expect(getComputedStyleValue(inputElement, "border-color")).toBe("rgb(209, 213, 219)");
expect(getComputedStyleValue(errorElement, "color")).toBe("rgb(220, 38, 38)");
Expand Down