fix(ui): rename error text token to text-text-error-primary (#10285)

This commit is contained in:
Alejandro Bailo
2026-03-09 13:36:31 +01:00
committed by GitHub
parent 5a062b19dc
commit 1e95b48c86
11 changed files with 79 additions and 11 deletions

View File

@@ -176,7 +176,7 @@ export const RadioGroupProvider: FC<RadioGroupProviderProps> = ({
</div>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -163,7 +163,7 @@ export const WizardInputField = <T extends FieldValues>({
)}
</div>
</FormControl>
<FormMessage className="text-text-error max-w-full text-xs" />
<FormMessage className="text-text-error-primary max-w-full text-xs" />
</div>
);
}}

View File

@@ -87,7 +87,7 @@ export const WizardTextareaField = <T extends FieldValues>({
{description}
</p>
)}
<FormMessage className="text-text-error max-w-full text-xs" />
<FormMessage className="text-text-error-primary max-w-full text-xs" />
</div>
);
}}

View File

@@ -50,7 +50,7 @@ export const RadioGroupAlibabaCloudViaCredentialsTypeForm = <
</WizardRadioCard>
</RadioGroup>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -43,7 +43,7 @@ export const RadioGroupAWSViaCredentialsTypeForm = ({
</WizardRadioCard>
</RadioGroup>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -44,7 +44,7 @@ export const RadioGroupCloudflareViaCredentialsTypeForm = ({
</WizardRadioCard>
</RadioGroup>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -47,7 +47,7 @@ export const RadioGroupGCPViaCredentialsTypeForm = ({
</WizardRadioCard>
</RadioGroup>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -54,7 +54,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
</WizardRadioCard>
</RadioGroup>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -44,7 +44,7 @@ export const RadioGroupM365ViaCredentialsTypeForm = ({
</WizardRadioCard>
</RadioGroup>
{errorMessage && (
<FormMessage className="text-text-error">
<FormMessage className="text-text-error-primary">
{errorMessage}
</FormMessage>
)}

View File

@@ -0,0 +1,65 @@
import { render, screen } from "@testing-library/react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { describe, expect, it } from "vitest";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "./Form";
interface TestValues {
providerUid: string;
}
function TestFormWithError() {
const form = useForm<TestValues>({
defaultValues: {
providerUid: "",
},
});
useEffect(() => {
form.setError("providerUid", {
type: "manual",
message: "Provider ID is required",
});
}, [form]);
return (
<Form {...form}>
<FormField
control={form.control}
name="providerUid"
render={({ field }) => (
<FormItem>
<FormLabel>Provider UID</FormLabel>
<FormControl>
<input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</Form>
);
}
describe("Form", () => {
it("should use the existing error text token for labels and messages", async () => {
// Given
render(<TestFormWithError />);
// When
const label = await screen.findByText("Provider UID");
const message = await screen.findByText("Provider ID is required");
// Then
expect(label).toHaveClass("text-text-error-primary");
expect(message).toHaveClass("text-text-error-primary");
});
});

View File

@@ -100,7 +100,10 @@ const FormLabel = React.forwardRef<
return (
<Label
ref={ref}
className={cn(error && "text-text-error max-w-full text-xs", className)}
className={cn(
error && "text-text-error-primary max-w-full text-xs",
className,
)}
htmlFor={formItemId}
{...props}
/>
@@ -164,7 +167,7 @@ const FormMessage = React.forwardRef<
ref={ref}
id={formMessageId}
className={cn(
"text-text-error max-w-full text-xs font-medium",
"text-text-error-primary max-w-full text-xs font-medium",
className,
)}
{...props}