fix: groups inputs to display danger when on error

scaleway · Nov 26, 2024 · 3c8b098 · 3c8b098
1 parent e49711a
commit 3c8b098
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 55 deletions.
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 (

diff --git a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -2238,20 +2238,7 @@ exports[`SelectableCard > renders correctly with checkbox type and isError prop
   cursor: pointer;
 }
 
-.emotion-19 {
-  color: #b3144d;
-  font-size: 0.75rem;
-  font-family: Inter,Asap,sans-serif;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 1rem;
-  text-transform: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding-top: 0.25rem;
-}
-
-.emotion-21 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2275,11 +2262,11 @@ exports[`SelectableCard > renders correctly with checkbox type and isError prop
   width: 100%;
 }
 
-.emotion-21[data-has-label='true'] {
+.emotion-18[data-has-label='true'] {
   padding-left: 2rem;
 }
 
-.emotion-21[data-has-label='false'] {
+.emotion-18[data-has-label='false'] {
   display: contents;
 }
 
@@ -2353,13 +2340,10 @@ exports[`SelectableCard > renders correctly with checkbox type and isError prop
               test
             </label>
           </div>
-          <span
-            class="emotion-18 emotion-19 emotion-17"
-          />
         </div>
       </div>
       <div
-        class="emotion-21 emotion-22"
+        class="emotion-18 emotion-19"
         data-has-label="false"
       >
         Radio card
@@ -2838,8 +2822,8 @@ exports[`SelectableCard > renders correctly with checkbox type and tooltip prop
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r19:"
-        aria-describedby=":r19:"
+        aria-controls=":r18:"
+        aria-describedby=":r18:"
         class="emotion-2 emotion-3"
         tabindex="0"
       >
@@ -2863,7 +2847,7 @@ exports[`SelectableCard > renders correctly with checkbox type and tooltip prop
               aria-checked="false"
               aria-invalid="false"
               class="emotion-9 emotion-10"
-              id=":r1a:"
+              id=":r19:"
               name="checkbox"
               type="checkbox"
               value="choice"
@@ -2903,7 +2887,7 @@ exports[`SelectableCard > renders correctly with checkbox type and tooltip prop
               >
                 <label
                   class="emotion-19 emotion-20 emotion-21"
-                  for=":r1a:"
+                  for=":r19:"
                 >
                   test
                 </label>
@@ -3374,7 +3358,7 @@ exports[`SelectableCard > renders correctly with complex children 1`] = `
           aria-invalid="false"
           class="emotion-5 emotion-6"
           disabled=""
-          id=":r1e:"
+          id=":r1d:"
           name="radio"
           type="checkbox"
           value="choice"
@@ -3414,7 +3398,7 @@ exports[`SelectableCard > renders correctly with complex children 1`] = `
           >
             <label
               class="emotion-15 emotion-16 emotion-17"
-              for=":r1e:"
+              for=":r1d:"
             >
               test
             </label>
@@ -6736,8 +6720,8 @@ exports[`SelectableCard > renders correctly with radio type and tooltip prop 1`]
       class="emotion-0 emotion-1"
     >
       <div
-        aria-controls=":r15:"
-        aria-describedby=":r15:"
+        aria-controls=":r14:"
+        aria-describedby=":r14:"
         class="emotion-2 emotion-3"
         tabindex="0"
       >