mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-03-21 18:58:04 +00:00
fix(ui): rename error text token to text-text-error-primary (#10285)
This commit is contained in:
@@ -176,7 +176,7 @@ export const RadioGroupProvider: FC<RadioGroupProviderProps> = ({
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -50,7 +50,7 @@ export const RadioGroupAlibabaCloudViaCredentialsTypeForm = <
|
||||
</WizardRadioCard>
|
||||
</RadioGroup>
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
@@ -43,7 +43,7 @@ export const RadioGroupAWSViaCredentialsTypeForm = ({
|
||||
</WizardRadioCard>
|
||||
</RadioGroup>
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
@@ -44,7 +44,7 @@ export const RadioGroupCloudflareViaCredentialsTypeForm = ({
|
||||
</WizardRadioCard>
|
||||
</RadioGroup>
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
@@ -47,7 +47,7 @@ export const RadioGroupGCPViaCredentialsTypeForm = ({
|
||||
</WizardRadioCard>
|
||||
</RadioGroup>
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
@@ -54,7 +54,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
|
||||
</WizardRadioCard>
|
||||
</RadioGroup>
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
@@ -44,7 +44,7 @@ export const RadioGroupM365ViaCredentialsTypeForm = ({
|
||||
</WizardRadioCard>
|
||||
</RadioGroup>
|
||||
{errorMessage && (
|
||||
<FormMessage className="text-text-error">
|
||||
<FormMessage className="text-text-error-primary">
|
||||
{errorMessage}
|
||||
</FormMessage>
|
||||
)}
|
||||
|
||||
65
ui/components/ui/form/Form.test.tsx
Normal file
65
ui/components/ui/form/Form.test.tsx
Normal 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");
|
||||
});
|
||||
});
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user