Skip to content
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

fix(form): use native as default validation behavior #4425

Open
wants to merge 7 commits into
base: canary
Choose a base branch
from
Open

fix(form): use native as default validation behavior #4425

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a6fa28e
fix(form): use native as default validation behavior
Peterl561 Dec 20, 2024
aaeafab
docs(form): delete explicit validationBehavior=native
Peterl561 Dec 21, 2024
9545bec
test(form): adjusted form test validation behaviors
Peterl561 Dec 21, 2024
75cc0ac
chore(form): adjusted stories with forms
Peterl561 Dec 21, 2024
4951b45
chore(changeset): changed form default validation behavior to native
Peterl561 Dec 21, 2024
f2e7135
chore(changeset): removed packages with only test changes
Peterl561 Dec 22, 2024
7b6c02c
Merge branch 'canary' into fix/form-validation-default-native
Peterl561 Dec 22, 2024
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
Prev Previous commit
Next Next commit
test(form): adjusted form test validation behaviors
  • Loading branch information
@Peterl561
Peterl561 committed Dec 21, 2024
commit 9545becdff641eb35969031ee274ef7dd9c0db1f
10 changes: 5 additions & 5 deletions packages/components/autocomplete/__tests__/autocomplete.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -653,8 +653,8 @@ describe("Autocomplete", () => {
describe("validationBehavior=native", () => {
it("supports isRequired", async () => {
const {getByTestId, getByRole, findByRole} = render(
<Form data-testid="form">
<AutocompleteExample isRequired validationBehavior="native" />
<Form data-testid="form" validationBehavior="native">
<AutocompleteExample isRequired />
</Form>,
);

Expand Down Expand Up @@ -695,8 +695,8 @@ describe("Autocomplete", () => {
};

return (
<Form validationErrors={serverErrors} onSubmit={onSubmit}>
<AutocompleteExample data-testid="input" name="value" validationBehavior="native" />
<Form validationBehavior="native" validationErrors={serverErrors} onSubmit={onSubmit}>
<AutocompleteExample data-testid="input" name="value" />
<button data-testid="submit" type="submit">
Submit
</button>
Expand Down Expand Up @@ -778,7 +778,7 @@ describe("Autocomplete", () => {

it("supports server validation", async () => {
const {getByTestId, getByRole} = render(
<Form validationErrors={{value: "Invalid value"}}>
<Form validationBehavior="aria" validationErrors={{value: "Invalid value"}}>
<AutocompleteExample data-testid="input" name="value" />
</Form>,
);
Expand Down
8 changes: 2 additions & 6 deletions packages/components/checkbox/__tests__/checkbox-group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,12 +294,8 @@ describe("Checkbox.Group", () => {
};

return (
<Form validationErrors={serverErrors} onSubmit={onSubmit}>
<CheckboxGroup
label="Agree to the following"
name="terms"
validationBehavior="native"
>
<Form validationBehavior="native" validationErrors={serverErrors} onSubmit={onSubmit}>
<CheckboxGroup label="Agree to the following" name="terms">
<Checkbox value="terms">Terms and conditions</Checkbox>
<Checkbox value="cookies">Cookies</Checkbox>
<Checkbox value="privacy">Privacy policy</Checkbox>
Expand Down
13 changes: 6 additions & 7 deletions packages/components/date-picker/__tests__/date-picker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -783,13 +783,12 @@ describe("DatePicker", () => {

it("supports validate function", async () => {
const {getByRole, getByTestId} = render(
<Form data-testid="form">
<Form data-testid="form" validationBehavior="native">
<DatePicker
defaultValue={new CalendarDate(2020, 2, 3)}
label="Value"
name="date"
validate={(v) => (v.year < 2022 ? "Invalid value" : null)}
validationBehavior="native"
/>
</Form>,
);
Expand Down Expand Up @@ -831,8 +830,8 @@ describe("DatePicker", () => {
};

return (
<Form validationErrors={serverErrors} onSubmit={onSubmit}>
<DatePicker label="Value" name="date" validationBehavior="native" />
<Form validationBehavior="native" validationErrors={serverErrors} onSubmit={onSubmit}>
<DatePicker label="Value" name="date" />
<button data-testid="submit" type="submit">
Submit
</button>
Expand Down Expand Up @@ -871,7 +870,7 @@ describe("DatePicker", () => {
describe("validationBehavior=aria", () => {
it("supports minValue and maxValue", async () => {
const {getByRole} = render(
<Form data-testid="form">
<Form data-testid="form" validationBehavior="aria">
<DatePicker
defaultValue={new CalendarDate(2019, 2, 3)}
label="Date"
Expand Down Expand Up @@ -904,7 +903,7 @@ describe("DatePicker", () => {

it("supports validate function", async () => {
const {getByRole} = render(
<Form data-testid="form">
<Form data-testid="form" validationBehavior="aria">
<DatePicker
defaultValue={new CalendarDate(2020, 2, 3)}
label="Value"
Expand All @@ -931,7 +930,7 @@ describe("DatePicker", () => {

it("supports server validation", async () => {
const {getByRole} = render(
<Form validationErrors={{value: "Invalid value"}}>
<Form validationBehavior="aria" validationErrors={{value: "Invalid value"}}>
<DatePicker defaultValue={new CalendarDate(2020, 2, 3)} label="Value" name="value" />
</Form>,
);
Expand Down
20 changes: 12 additions & 8 deletions packages/components/input/__tests__/input.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,8 +310,8 @@ describe("Input with React Hook Form", () => {
describe("validationBehavior=native", () => {
it("supports isRequired", async () => {
const {getByTestId} = render(
<Form data-testid="form">
<Input isRequired data-testid="input" label="Name" validationBehavior="native" />
<Form data-testid="form" validationBehavior="native">
<Input isRequired data-testid="input" label="Name" />
</Form>,
);

Expand Down Expand Up @@ -344,13 +344,12 @@ describe("Input with React Hook Form", () => {

it("supports validate function", async () => {
const {getByTestId} = render(
<Form data-testid="form">
<Form data-testid="form" validationBehavior="native">
<Input
data-testid="input"
defaultValue="Foo"
label="Name"
validate={(v) => (v === "Foo" ? "Invalid name" : null)}
validationBehavior="native"
/>
</Form>,
);
Expand Down Expand Up @@ -391,8 +390,13 @@ describe("Input with React Hook Form", () => {
};

return (
<Form data-testid="form" validationErrors={serverErrors} onSubmit={onSubmit}>
<Input data-testid="input" label="Name" name="name" validationBehavior="native" />
<Form
data-testid="form"
validationBehavior="native"
validationErrors={serverErrors}
onSubmit={onSubmit}
>
<Input data-testid="input" label="Name" name="name" />
<button data-testid="submit" type="submit">
Submit
</button>
Expand Down Expand Up @@ -442,7 +446,7 @@ describe("Input with React Hook Form", () => {
describe('validationBehavior="aria"', () => {
it("supports validate function", async () => {
const {getByTestId} = render(
<Form data-testid="form">
<Form data-testid="form" validationBehavior="aria">
<Input
data-testid="input"
defaultValue="Foo"
Expand Down Expand Up @@ -470,7 +474,7 @@ describe("Input with React Hook Form", () => {

it("supports server validation", async () => {
const {getByTestId} = render(
<Form validationErrors={{name: "Invalid name"}}>
<Form validationBehavior="aria" validationErrors={{name: "Invalid name"}}>
<Input data-testid="input" label="Name" name="name" />
</Form>,
);
Expand Down
9 changes: 7 additions & 2 deletions packages/components/select/__tests__/select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1199,7 +1199,12 @@ describe("validation", () => {
};

return (
<Form data-testid="form" validationErrors={serverErrors} onSubmit={onSubmit}>
<Form
data-testid="form"
validationBehavior="aria"
validationErrors={serverErrors}
onSubmit={onSubmit}
>
<Select
isRequired
aria-label="Favorite Animal"
Expand Down Expand Up @@ -1249,7 +1254,7 @@ describe("validation", () => {

it("supports validate function", async () => {
const {getByTestId} = render(
<Form data-testid="form">
<Form data-testid="form" validationBehavior="aria">
<Select
aria-label="Favorite Animal"
data-testid="select"
Expand Down