feat: disable field validation when the field is disabled (#564)

Author: DorianMaliszewski

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { SCWUITheme, normalize, lightTheme } from '@scaleway/ui'
+import { SCWUITheme, normalize, theme } from '@scaleway/ui'
 
 import { css, ThemeProvider, Global, Theme } from '@emotion/react'
 
@@ -51,19 +51,19 @@ export const parameters =
 const adjustedTheme = ancestorTheme =>
   ({
     ...ancestorTheme,
-    ...Object.keys(lightTheme).reduce(
+    ...Object.keys(theme).reduce(
       (acc, themeItem) => ({
         ...acc,
         [themeItem]: {
           ...(acc[themeItem] ?? {}),
-          ...lightTheme[themeItem],
+          ...theme[themeItem],
         },
       }),
       ancestorTheme,
     ),
   } as SCWUITheme)
 
-export const globalStyles = (theme: Theme) => css`
+export const globalStyles = (_: Theme) => css`
   ${normalize()}
 `
 

src/components/CheckboxField/index.tsx

@@ -49,6 +49,7 @@ export const CheckboxField = forwardRef(
     const { getError } = useErrors()
 
     const { input, meta } = useFormField(name, {
+      disabled,
       required,
       type: 'checkbox',
       validate,

src/components/DateField/index.tsx

@@ -58,6 +58,7 @@ export const DateField = ({
   const { getError } = useErrors()
 
   const { input, meta } = useFormField<Date>(name, {
+    disabled,
     formatOnBlur,
     initialValue,
     maxDate,

src/components/Form/__stories__/Playground.stories.tsx

@@ -1,5 +1,6 @@
-import { Stack } from '@scaleway/ui'
+import { Checkbox, Stack } from '@scaleway/ui'
 import { ComponentStory } from '@storybook/react'
+import { ChangeEvent, useState } from 'react'
 import {
   CheckboxField,
   Form,
@@ -10,45 +11,58 @@ import {
 } from '../..'
 import { emailRegex, mockErrors } from '../../../mocks/mockErrors'
 
-export const Playground: ComponentStory<typeof Form> = args => (
-  <Form {...args}>
-    <Stack gap={2}>
-      <TextBoxField
-        name="name"
-        label="Name"
-        placeholder="John"
-        required
-        autoComplete="given-name"
-      />
-      <TextBoxField
-        name="email"
-        label="Email"
-        type="email"
-        placeholder="john.smith@email.com"
-        required
-        regex={[emailRegex]}
-      />
-      <RichSelectField
-        multiple
-        noTopLabel
-        name="topics"
-        label="Topics "
-        placeholder="Select topics you're interested in"
-        options={[
-          { label: 'React', value: 'react' },
-          { label: 'Webdev', value: 'web' },
-          { label: 'Cloud', value: 'cloud' },
-          { label: 'Devops', value: 'devops' },
-        ]}
-      />
-      <CheckboxField name="receiveEmailUpdates">
-        I&apos;d like to receive news updates
-      </CheckboxField>
-      <SubmitErrorAlert />
-      <Submit>Submit</Submit>
-    </Stack>
-  </Form>
-)
+export const Playground: ComponentStory<typeof Form> = args => {
+  const [state, setState] = useState(false)
+
+  return (
+    <Form {...args}>
+      <Stack gap={2}>
+        <Checkbox
+          checked={state}
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            setState(event.target.checked)
+          }
+        >
+          I&apos;m disabling the field name to remove validation
+        </Checkbox>
+        <TextBoxField
+          name="name"
+          label="Name"
+          placeholder="John"
+          required
+          autoComplete="given-name"
+          disabled={state}
+        />
+        <TextBoxField
+          name="email"
+          label="Email"
+          type="email"
+          placeholder="john.smith@email.com"
+          required
+          regex={[emailRegex]}
+        />
+        <RichSelectField
+          multiple
+          noTopLabel
+          name="topics"
+          label="Topics "
+          placeholder="Select topics you're interested in"
+          options={[
+            { label: 'React', value: 'react' },
+            { label: 'Webdev', value: 'web' },
+            { label: 'Cloud', value: 'cloud' },
+            { label: 'Devops', value: 'devops' },
+          ]}
+        />
+        <CheckboxField name="receiveEmailUpdates">
+          I&apos;d like to receive news updates
+        </CheckboxField>
+        <SubmitErrorAlert />
+        <Submit>Submit</Submit>
+      </Stack>
+    </Form>
+  )
+}
 
 Playground.args = {
   errors: mockErrors,

src/components/RadioField/index.tsx

@@ -46,6 +46,7 @@ export const RadioField = ({
   })
 
   const error = getError({
+    disabled,
     label,
     meta: meta as FieldState<unknown>,
     name,

src/components/RichSelectField/index.tsx

@@ -158,6 +158,7 @@ export const RichSelectField = <
   )
 
   const { input, meta } = useFormField<T, HTMLElement, RichSelectOption>(name, {
+    disabled,
     format,
     formatOnBlur,
     maxLength,

src/components/SelectNumberField/index.tsx

@@ -52,6 +52,7 @@ export const SelectNumberField = ({
   className,
 }: SelectNumberValueFieldProps) => {
   const { input } = useFormField(name, {
+    disabled,
     required,
     type: 'number',
     validate,

src/components/SelectableCardField/index.tsx

@@ -55,6 +55,7 @@ export const SelectableCardField = ({
   const { getError } = useErrors()
 
   const { input, meta } = useFormField(name, {
+    disabled,
     required,
     type: type ?? 'radio',
     validate,

src/components/TagsField/index.tsx

@@ -28,6 +28,7 @@ export const TagsField = ({
   variant,
 }: TagsFieldProps): JSX.Element => {
   const { input } = useFormField(name, {
+    disabled,
     required,
     type: 'text',
     validate,

src/components/TextBoxField/index.tsx

@@ -113,6 +113,7 @@ export const TextBoxField = forwardRef(
       allowNull,
       beforeSubmit,
       defaultValue,
+      disabled,
       format,
       formatOnBlur,
       initialValue,