Skip to content

Commit 2d70269

Browse files
paulpopuspaulpopus
authored
templates: form fields will now respect 'required' flag from config on website template (#10681)
There wasn't a required * indicator previously present in field labels if required: true was set.
1 parent f18ca9c commit 2d70269

File tree

18 files changed

+172
-82
lines changed

18 files changed

+172
-82
lines changed

‎templates/website/src/app/(frontend)/globals.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
--destructive: 0 84.2% 60.2%;
3939
--destructive-foreground: 210 40% 98%;
4040

41-
--border: 240 6% 90%;
41+
--border: 240 6% 80%;
4242
--input: 214.3 31.8% 91.4%;
4343
--ring: 222.2 84% 4.9%;
4444

@@ -74,7 +74,7 @@
7474
--destructive: 0 62.8% 30.6%;
7575
--destructive-foreground: 210 40% 98%;
7676

77-
--border: 0, 0%, 15%, 0.5;
77+
--border: 0, 0%, 15%, 0.8;
7878
--input: 217.2 32.6% 17.5%;
7979
--ring: 212.7 26.8% 83.9%;
8080

‎templates/website/src/blocks/Form/Checkbox/index.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export const Checkbox: React.FC<
2121
register: UseFormRegister<FieldValues>
2222
setValue: any
2323
}
24-
> = ({ name, defaultValue, errors, label, register, required: requiredFromProps, width }) => {
25-
const props = register(name, { required: requiredFromProps })
24+
> = ({ name, defaultValue, errors, label, register, required, width }) => {
25+
const props = register(name, { required: required })
2626
const { setValue } = useFormContext()
2727

2828
return (
@@ -36,9 +36,16 @@ export const Checkbox: React.FC<
3636
setValue(props.name, checked)
3737
}}
3838
/>
39-
<Label htmlFor={name}>{label}</Label>
39+
<Label htmlFor={name}>
40+
{required && (
41+
<span className="required">
42+
* <span className="sr-only">(required)</span>
43+
</span>
44+
)}
45+
{label}
46+
</Label>
4047
</div>
41-
{requiredFromProps && errors[name] && <Error />}
48+
{errors[name] && <Error />}
4249
</Width>
4350
)
4451
}

‎templates/website/src/blocks/Form/Country/index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ export const Country: React.FC<
3030
<Width width={width}>
3131
<Label className="" htmlFor={name}>
3232
{label}
33+
34+
{required && (
35+
<span className="required">
36+
* <span className="sr-only">(required)</span>
37+
</span>
38+
)}
3339
</Label>
3440
<Controller
3541
control={control}
@@ -57,7 +63,7 @@ export const Country: React.FC<
5763
}}
5864
rules={{ required }}
5965
/>
60-
{required && errors[name] && <Error />}
66+
{errors[name] && <Error />}
6167
</Width>
6268
)
6369
}

‎templates/website/src/blocks/Form/Email/index.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,26 @@ export const Email: React.FC<
1717
>
1818
register: UseFormRegister<FieldValues>
1919
}
20-
> = ({ name, defaultValue, errors, label, register, required: requiredFromProps, width }) => {
20+
> = ({ name, defaultValue, errors, label, register, required, width }) => {
2121
return (
2222
<Width width={width}>
23-
<Label htmlFor={name}>{label}</Label>
23+
<Label htmlFor={name}>
24+
{label}
25+
26+
{required && (
27+
<span className="required">
28+
* <span className="sr-only">(required)</span>
29+
</span>
30+
)}
31+
</Label>
2432
<Input
2533
defaultValue={defaultValue}
2634
id={name}
2735
type="text"
28-
{...register(name, { pattern: /^\S[^\s@]*@\S+$/, required: requiredFromProps })}
36+
{...register(name, { pattern: /^\S[^\s@]*@\S+$/, required })}
2937
/>
3038

31-
{requiredFromProps && errors[name] && <Error />}
39+
{errors[name] && <Error />}
3240
</Width>
3341
)
3442
}

‎templates/website/src/blocks/Form/Number/index.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,25 @@ export const Number: React.FC<
1616
>
1717
register: UseFormRegister<FieldValues>
1818
}
19-
> = ({ name, defaultValue, errors, label, register, required: requiredFromProps, width }) => {
19+
> = ({ name, defaultValue, errors, label, register, required, width }) => {
2020
return (
2121
<Width width={width}>
22-
<Label htmlFor={name}>{label}</Label>
22+
<Label htmlFor={name}>
23+
{label}
24+
25+
{required && (
26+
<span className="required">
27+
* <span className="sr-only">(required)</span>
28+
</span>
29+
)}
30+
</Label>
2331
<Input
2432
defaultValue={defaultValue}
2533
id={name}
2634
type="number"
27-
{...register(name, { required: requiredFromProps })}
35+
{...register(name, { required })}
2836
/>
29-
{requiredFromProps && errors[name] && <Error />}
37+
{errors[name] && <Error />}
3038
</Width>
3139
)
3240
}

‎templates/website/src/blocks/Form/Select/index.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,14 @@ export const Select: React.FC<
2727
> = ({ name, control, errors, label, options, required, width }) => {
2828
return (
2929
<Width width={width}>
30-
<Label htmlFor={name}>{label}</Label>
30+
<Label htmlFor={name}>
31+
{label}
32+
{required && (
33+
<span className="required">
34+
* <span className="sr-only">(required)</span>
35+
</span>
36+
)}
37+
</Label>
3138
<Controller
3239
control={control}
3340
defaultValue=""
@@ -54,7 +61,7 @@ export const Select: React.FC<
5461
}}
5562
rules={{ required }}
5663
/>
57-
{required && errors[name] && <Error />}
64+
{errors[name] && <Error />}
5865
</Width>
5966
)
6067
}

‎templates/website/src/blocks/Form/State/index.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ export const State: React.FC<
2828
> = ({ name, control, errors, label, required, width }) => {
2929
return (
3030
<Width width={width}>
31-
<Label htmlFor={name}>{label}</Label>
31+
<Label htmlFor={name}>
32+
{label}
33+
{required && (
34+
<span className="required">
35+
* <span className="sr-only">(required)</span>
36+
</span>
37+
)}
38+
</Label>
3239
<Controller
3340
control={control}
3441
defaultValue=""
@@ -55,7 +62,7 @@ export const State: React.FC<
5562
}}
5663
rules={{ required }}
5764
/>
58-
{required && errors[name] && <Error />}
65+
{errors[name] && <Error />}
5966
</Width>
6067
)
6168
}

‎templates/website/src/blocks/Form/Text/index.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,20 @@ export const Text: React.FC<
1717
>
1818
register: UseFormRegister<FieldValues>
1919
}
20-
> = ({ name, defaultValue, errors, label, register, required: requiredFromProps, width }) => {
20+
> = ({ name, defaultValue, errors, label, register, required, width }) => {
2121
return (
2222
<Width width={width}>
23-
<Label htmlFor={name}>{label}</Label>
24-
<Input
25-
defaultValue={defaultValue}
26-
id={name}
27-
type="text"
28-
{...register(name, { required: requiredFromProps })}
29-
/>
30-
{requiredFromProps && errors[name] && <Error />}
23+
<Label htmlFor={name}>
24+
{label}
25+
26+
{required && (
27+
<span className="required">
28+
* <span className="sr-only">(required)</span>
29+
</span>
30+
)}
31+
</Label>
32+
<Input defaultValue={defaultValue} id={name} type="text" {...register(name, { required })} />
33+
{errors[name] && <Error />}
3134
</Width>
3235
)
3336
}

‎templates/website/src/blocks/Form/Textarea/index.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,27 @@ export const Textarea: React.FC<
1818
register: UseFormRegister<FieldValues>
1919
rows?: number
2020
}
21-
> = ({
22-
name,
23-
defaultValue,
24-
errors,
25-
label,
26-
register,
27-
required: requiredFromProps,
28-
rows = 3,
29-
width,
30-
}) => {
21+
> = ({ name, defaultValue, errors, label, register, required, rows = 3, width }) => {
3122
return (
3223
<Width width={width}>
33-
<Label htmlFor={name}>{label}</Label>
24+
<Label htmlFor={name}>
25+
{label}
26+
27+
{required && (
28+
<span className="required">
29+
* <span className="sr-only">(required)</span>
30+
</span>
31+
)}
32+
</Label>
3433

3534
<TextAreaComponent
3635
defaultValue={defaultValue}
3736
id={name}
3837
rows={rows}
39-
{...register(name, { required: requiredFromProps })}
38+
{...register(name, { required: required })}
4039
/>
4140

42-
{requiredFromProps && errors[name] && <Error />}
41+
{errors[name] && <Error />}
4342
</Width>
4443
)
4544
}

‎templates/with-vercel-website/src/app/(frontend)/globals.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
--destructive: 0 84.2% 60.2%;
3939
--destructive-foreground: 210 40% 98%;
4040

41-
--border: 240 6% 90%;
41+
--border: 240 6% 80%;
4242
--input: 214.3 31.8% 91.4%;
4343
--ring: 222.2 84% 4.9%;
4444

@@ -74,7 +74,7 @@
7474
--destructive: 0 62.8% 30.6%;
7575
--destructive-foreground: 210 40% 98%;
7676

77-
--border: 0, 0%, 15%, 0.5;
77+
--border: 0, 0%, 15%, 0.8;
7878
--input: 217.2 32.6% 17.5%;
7979
--ring: 212.7 26.8% 83.9%;
8080

0 commit comments

Comments
 (0)