From a6fa28eea8e3323bb5d390dc87799455841ed03b Mon Sep 17 00:00:00 2001 From: Peterl561 Date: Thu, 19 Dec 2024 21:56:18 -0800 Subject: [PATCH 1/8] fix(form): use native as default validation behavior --- packages/components/form/src/form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/form/src/form.tsx b/packages/components/form/src/form.tsx index bfa900f157..30b8c2e1e5 100644 --- a/packages/components/form/src/form.tsx +++ b/packages/components/form/src/form.tsx @@ -8,7 +8,7 @@ import {Form as AriaForm, FormProps} from "./base-form"; export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef) { const globalContext = useProviderContext(); const validationBehavior = - props.validationBehavior ?? globalContext?.validationBehavior ?? "aria"; + props.validationBehavior ?? globalContext?.validationBehavior ?? "native"; return ; }); From aaeafabf6b43fbd6202b3d8a0b51a8689c46762d Mon Sep 17 00:00:00 2001 From: Peterl561 Date: Sat, 21 Dec 2024 15:26:16 -0800 Subject: [PATCH 2/8] docs(form): delete explicit validationBehavior=native --- .../components/form/controlled.raw.jsx | 2 +- .../form/custom-error-messages.raw.jsx | 2 +- .../form/custom-validation-aria.raw.jsx | 30 +++++++++++++++++++ .../components/form/custom-validation-aria.ts | 9 ++++++ .../components/form/custom-validation.raw.jsx | 2 +- .../docs/content/components/form/demo.raw.jsx | 3 +- .../content/components/form/events.raw.jsx | 1 - .../components/form/form-usage.raw.jsx | 2 +- apps/docs/content/components/form/index.ts | 2 ++ .../components/form/native-validation.raw.jsx | 2 +- .../content/components/form/usage.raw.jsx | 2 +- .../input-otp/input-otp-required.raw.jsx | 2 -- .../components/input-otp/required.raw.jsx | 1 - .../input/built-in-validation.raw.jsx | 2 +- .../input/custom-validation.raw.jsx | 2 +- .../input/real-time-validation.raw.jsx | 2 +- .../input/server-validation.raw.jsx | 7 +---- .../docs/api-references/nextui-provider.mdx | 20 ++++++------- apps/docs/content/docs/components/form.mdx | 9 +++--- apps/docs/content/docs/components/input.mdx | 2 +- apps/docs/content/docs/guide/forms.mdx | 14 ++++----- 21 files changed, 75 insertions(+), 43 deletions(-) create mode 100644 apps/docs/content/components/form/custom-validation-aria.raw.jsx create mode 100644 apps/docs/content/components/form/custom-validation-aria.ts diff --git a/apps/docs/content/components/form/controlled.raw.jsx b/apps/docs/content/components/form/controlled.raw.jsx index 5e8efc9901..7160395070 100644 --- a/apps/docs/content/components/form/controlled.raw.jsx +++ b/apps/docs/content/components/form/controlled.raw.jsx @@ -13,7 +13,7 @@ export default function App() { }; return ( -
+ + { diff --git a/apps/docs/content/components/form/custom-validation-aria.raw.jsx b/apps/docs/content/components/form/custom-validation-aria.raw.jsx new file mode 100644 index 0000000000..0b02ae3fc4 --- /dev/null +++ b/apps/docs/content/components/form/custom-validation-aria.raw.jsx @@ -0,0 +1,30 @@ +import {Form, Input, Button} from "@nextui-org/react"; + +export default function App() { + const onSubmit = (e) => { + e.preventDefault(); + }; + + return ( + + { + if (value.length < 3) { + return "Username must be at least 3 characters long"; + } + + return value === "admin" ? "Nice try!" : null; + }} + /> + +
+ ); +} diff --git a/apps/docs/content/components/form/custom-validation-aria.ts b/apps/docs/content/components/form/custom-validation-aria.ts new file mode 100644 index 0000000000..f84220c7dd --- /dev/null +++ b/apps/docs/content/components/form/custom-validation-aria.ts @@ -0,0 +1,9 @@ +import App from "./custom-validation-aria.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/components/form/custom-validation.raw.jsx b/apps/docs/content/components/form/custom-validation.raw.jsx index 2d33795a0c..6c8dde5b1d 100644 --- a/apps/docs/content/components/form/custom-validation.raw.jsx +++ b/apps/docs/content/components/form/custom-validation.raw.jsx @@ -6,7 +6,7 @@ export default function App() { }; return ( -
+ setSubmitted(null)} onSubmit={onSubmit} diff --git a/apps/docs/content/components/form/events.raw.jsx b/apps/docs/content/components/form/events.raw.jsx index 798afc0753..3f4d184b58 100644 --- a/apps/docs/content/components/form/events.raw.jsx +++ b/apps/docs/content/components/form/events.raw.jsx @@ -6,7 +6,6 @@ export default function App() { return ( setAction("reset")} onSubmit={(e) => { e.preventDefault(); diff --git a/apps/docs/content/components/form/form-usage.raw.jsx b/apps/docs/content/components/form/form-usage.raw.jsx index f8af6d3de3..00ef545b21 100644 --- a/apps/docs/content/components/form/form-usage.raw.jsx +++ b/apps/docs/content/components/form/form-usage.raw.jsx @@ -12,7 +12,7 @@ export default function App() { }; return ( - + + + { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -21,7 +20,6 @@ export default function App() { length={4} name="otp" placeholder="Enter code" - validationBehavior="native" />
@@ -778,7 +778,7 @@ describe("Autocomplete", () => { it("supports server validation", async () => { const {getByTestId, getByRole} = render( - + , ); diff --git a/packages/components/checkbox/__tests__/checkbox-group.test.tsx b/packages/components/checkbox/__tests__/checkbox-group.test.tsx index 9e604b410b..7458893bac 100644 --- a/packages/components/checkbox/__tests__/checkbox-group.test.tsx +++ b/packages/components/checkbox/__tests__/checkbox-group.test.tsx @@ -294,12 +294,8 @@ describe("Checkbox.Group", () => { }; return ( -
- + + Terms and conditions Cookies Privacy policy diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx index 461aa8be3f..cd3fee249a 100644 --- a/packages/components/date-picker/__tests__/date-picker.test.tsx +++ b/packages/components/date-picker/__tests__/date-picker.test.tsx @@ -783,13 +783,12 @@ describe("DatePicker", () => { it("supports validate function", async () => { const {getByRole, getByTestId} = render( - + (v.year < 2022 ? "Invalid value" : null)} - validationBehavior="native" /> , ); @@ -831,8 +830,8 @@ describe("DatePicker", () => { }; return ( -
- + + @@ -871,7 +870,7 @@ describe("DatePicker", () => { describe("validationBehavior=aria", () => { it("supports minValue and maxValue", async () => { const {getByRole} = render( - + { it("supports validate function", async () => { const {getByRole} = render( - + { it("supports server validation", async () => { const {getByRole} = render( - + , ); diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index c3b57009ba..3f7f4d832f 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -310,8 +310,8 @@ describe("Input with React Hook Form", () => { describe("validationBehavior=native", () => { it("supports isRequired", async () => { const {getByTestId} = render( -
- + +
, ); @@ -344,13 +344,12 @@ describe("Input with React Hook Form", () => { it("supports validate function", async () => { const {getByTestId} = render( -
+ (v === "Foo" ? "Invalid name" : null)} - validationBehavior="native" />
, ); @@ -391,8 +390,13 @@ describe("Input with React Hook Form", () => { }; return ( -
- + + @@ -442,7 +446,7 @@ describe("Input with React Hook Form", () => { describe('validationBehavior="aria"', () => { it("supports validate function", async () => { const {getByTestId} = render( - + { it("supports server validation", async () => { const {getByTestId} = render( - +
, ); diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 13b90369a4..c634868957 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -1199,7 +1199,12 @@ describe("validation", () => { }; return ( -
+ Date: Sat, 21 Dec 2024 14:57:31 -0800 Subject: [PATCH 4/8] chore(form): adjusted stories with forms --- .../components/checkbox/stories/checkbox-group.stories.tsx | 7 +------ packages/components/checkbox/stories/checkbox.stories.tsx | 2 +- .../components/input-otp/stories/input-otp.stories.tsx | 1 - 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/checkbox/stories/checkbox-group.stories.tsx b/packages/components/checkbox/stories/checkbox-group.stories.tsx index 6182918020..d7453892b6 100644 --- a/packages/components/checkbox/stories/checkbox-group.stories.tsx +++ b/packages/components/checkbox/stories/checkbox-group.stories.tsx @@ -153,12 +153,7 @@ const ServerValidationTemplate = (args: CheckboxGroupProps) => { validationErrors={serverErrors} onSubmit={onSubmit} > - + Terms and conditions Cookies Privacy policy diff --git a/packages/components/checkbox/stories/checkbox.stories.tsx b/packages/components/checkbox/stories/checkbox.stories.tsx index 66824af903..69bccee121 100644 --- a/packages/components/checkbox/stories/checkbox.stories.tsx +++ b/packages/components/checkbox/stories/checkbox.stories.tsx @@ -180,7 +180,7 @@ const WithFormTemplate = (args: CheckboxProps) => { }; return ( - + { length={4} name="otp" placeholder="Enter code" - validationBehavior="native" {...args} />