fix: groups inputs to display danger when on error (#4502)

scaleway · Dec 2, 2024 · 36f3b03 · 36f3b03
1 parent 37823d5
commit 36f3b03
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 55 deletions.
diff --git a/.changeset/early-geese-exist.md b/.changeset/early-geese-exist.md
@@ -0,0 +1,6 @@
+---
+"@ultraviolet/form": patch
+"@ultraviolet/ui": patch
+---
+
+Fix `<RadioGroup />`, `<ToggleGroup />`, `<CheckboxGroup />` and `<SelectableCardGroup />` to have children in error state when parent is in error
diff --git a/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/RadioGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -314,6 +314,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                   aria-disabled="false"
                   class="emotion-14 emotion-15"
                   data-checked="false"
+                  data-error="false"
                 >
                   <input
                     aria-disabled="false"
@@ -364,6 +365,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                   aria-disabled="false"
                   class="emotion-14 emotion-15"
                   data-checked="true"
+                  data-error="false"
                 >
                   <input
                     aria-disabled="false"
@@ -730,6 +732,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                   aria-disabled="false"
                   class="emotion-14 emotion-15"
                   data-checked="true"
+                  data-error="false"
                 >
                   <input
                     aria-disabled="false"
@@ -780,6 +783,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                   aria-disabled="false"
                   class="emotion-14 emotion-15"
                   data-checked="false"
+                  data-error="false"
                 >
                   <input
                     aria-disabled="false"

diff --git a/.../form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap b/.../form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap
@@ -375,6 +375,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                 class="emotion-10 emotion-11"
                 data-checked="false"
                 data-disabled="false"
+                data-error="false"
                 data-has-label="true"
                 data-image="none"
                 data-type="radio"
@@ -388,6 +389,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                     aria-disabled="false"
                     class="emotion-14 emotion-15 emotion-16"
                     data-checked="false"
+                    data-error="false"
                   >
                     <input
                       aria-disabled="false"
@@ -437,6 +439,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                 class="emotion-10 emotion-11"
                 data-checked="false"
                 data-disabled="false"
+                data-error="false"
                 data-has-label="true"
                 data-image="none"
                 data-type="radio"
@@ -450,6 +453,7 @@ exports[`SelectableCardField > should render correctly 1`] = `
                     aria-disabled="false"
                     class="emotion-14 emotion-15 emotion-16"
                     data-checked="false"
+                    data-error="false"
                   >
                     <input
                       aria-disabled="false"
@@ -1004,6 +1008,7 @@ exports[`SelectableCardField > should render correctly checked as a checkbox 1`]
                 class="emotion-10 emotion-11"
                 data-checked="true"
                 data-disabled="false"
+                data-error="false"
                 data-has-label="true"
                 data-image="none"
                 data-testid="checked"
@@ -1454,6 +1459,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
                 class="emotion-10 emotion-11"
                 data-checked="true"
                 data-disabled="false"
+                data-error="false"
                 data-has-label="true"
                 data-image="none"
                 data-testid="checked"
@@ -1468,6 +1474,7 @@ exports[`SelectableCardField > should render correctly checked as radiofield 1`]
                     aria-disabled="false"
                     class="emotion-14 emotion-15 emotion-16"
                     data-checked="true"
+                    data-error="false"
                   >
                     <input
                       aria-disabled="false"
@@ -2023,6 +2030,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
                 class="emotion-10 emotion-11"
                 data-checked="false"
                 data-disabled="false"
+                data-error="false"
                 data-has-label="true"
                 data-image="none"
                 data-type="checkbox"
@@ -2091,6 +2099,7 @@ exports[`SelectableCardField > should trigger events correctly 1`] = `
                 class="emotion-10 emotion-11"
                 data-checked="false"
                 data-disabled="false"
+                data-error="false"
                 data-has-label="true"
                 data-image="none"
                 data-type="checkbox"

diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx
@@ -452,7 +452,7 @@ export const Checkbox = forwardRef(
               </Text>
             ) : null}
 
-            {error ? (
+            {error && typeof error !== 'boolean' ? (
               <ErrorText variant="caption" as="span" sentiment="danger">
                 {error}
               </ErrorText>

diff --git a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -1504,11 +1504,12 @@ exports[`CheckboxGroup > renders correctly with error content 1`] = `
               aria-disabled="false"
               class="emotion-12 emotion-13 emotion-14"
               data-checked="false"
-              data-error="false"
+              data-error="true"
             >
               <input
                 aria-checked="false"
-                aria-invalid="false"
+                aria-describedby=":ru:-hint"
+                aria-invalid="true"
                 class="emotion-15 emotion-16"
                 id=":ru:"
                 name="Checkbox.value-1"
@@ -1561,11 +1562,12 @@ exports[`CheckboxGroup > renders correctly with error content 1`] = `
               aria-disabled="false"
               class="emotion-12 emotion-13 emotion-14"
               data-checked="false"
-              data-error="false"
+              data-error="true"
             >
               <input
                 aria-checked="false"
-                aria-invalid="false"
+                aria-describedby=":r11:-hint"
+                aria-invalid="true"
                 class="emotion-15 emotion-16"
                 id=":r11:"
                 name="Checkbox.value-2"

diff --git a/packages/ui/src/components/CheckboxGroup/index.tsx b/packages/ui/src/components/CheckboxGroup/index.tsx
@@ -15,6 +15,7 @@ import { Text } from '../Text'
 type CheckboxGroupContextType = {
   groupName: string
   groupValues: string[]
+  error: boolean
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
   Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>
 
@@ -57,7 +58,7 @@ export const CheckboxGroupCheckbox = ({
     )
   }
 
-  const { groupName, onChange, groupValues } = context
+  const { groupName, onChange, groupValues, error: errorContext } = context
 
   const checkboxName = `${groupName}.${name ?? ''}`
   const checkboxValue = `${value}`
@@ -69,7 +70,7 @@ export const CheckboxGroupCheckbox = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
-      error={error}
+      error={error || errorContext}
       name={checkboxName}
       value={checkboxValue}
       helper={helper}
@@ -128,8 +129,9 @@ export const CheckboxGroup = ({
       groupValues: value ?? [],
       onChange,
       required,
+      error: !!error,
     }),
-    [name, value, onChange, required],
+    [name, value, onChange, required, error],
   )
 
   return (

diff --git a/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/RadioGroup/__tests__/__snapshots__/index.test.tsx.snap
@@ -311,6 +311,7 @@ exports[`RadioGroup > renders correctly 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="true"
+                data-error="false"
               >
                 <input
                   aria-disabled="false"
@@ -362,6 +363,7 @@ exports[`RadioGroup > renders correctly 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="false"
+                data-error="false"
               >
                 <input
                   aria-disabled="false"
@@ -724,6 +726,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="true"
+                data-error="false"
               >
                 <input
                   aria-disabled="false"
@@ -775,6 +778,7 @@ exports[`RadioGroup > renders correctly with direction row 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="false"
+                data-error="false"
               >
                 <input
                   aria-disabled="false"
@@ -1149,10 +1153,11 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="true"
+                data-error="true"
               >
                 <input
                   aria-disabled="false"
-                  aria-invalid="false"
+                  aria-invalid="true"
                   checked=""
                   class="emotion-16 emotion-17"
                   id="radio-value-1"
@@ -1200,10 +1205,11 @@ exports[`RadioGroup > renders correctly with error content 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="false"
+                data-error="true"
               >
                 <input
                   aria-disabled="false"
-                  aria-invalid="false"
+                  aria-invalid="true"
                   class="emotion-16 emotion-17"
                   id="radio-value-2"
                   name="radio"
@@ -1579,6 +1585,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="true"
+                data-error="false"
               >
                 <input
                   aria-disabled="false"
@@ -1630,6 +1637,7 @@ exports[`RadioGroup > renders correctly with helper content 1`] = `
                 aria-disabled="false"
                 class="emotion-14 emotion-15"
                 data-checked="false"
+                data-error="false"
               >
                 <input
                   aria-disabled="false"

diff --git a/packages/ui/src/components/RadioGroup/index.tsx b/packages/ui/src/components/RadioGroup/index.tsx
@@ -15,6 +15,7 @@ import { Text } from '../Text'
 type RadioGroupContextType = {
   groupName: string
   groupValue: string | number
+  error: boolean
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> &
   Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>
 
@@ -53,7 +54,7 @@ const RadioGroupRadio = ({
     throw new Error('RadioGroup.Radio can only be used inside a RadioGroup')
   }
 
-  const { groupName, onChange, groupValue } = context
+  const { groupName, onChange, groupValue, error: errorContext } = context
 
   return (
     <Radio
@@ -62,7 +63,7 @@ const RadioGroupRadio = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
-      error={error}
+      error={error || errorContext}
       name={groupName ?? name}
       value={value}
       label={label}
@@ -120,8 +121,9 @@ export const RadioGroup = ({
       groupValue: value,
       onChange,
       required,
+      error: !!error,
     }),
-    [name, value, onChange, required],
+    [name, value, onChange, required, error],
   )
 
   return (