feat: new component SelectableCardOptionGroup (#4798)

* chore(devdeps): update dependency @eslint/compat to v1.2.7 (#4804) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @types/node to v22.13.5 (#4805) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.15.12 (#4806) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency publint to v0.3.6 (#4808) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix: unit input styling (#4809) * chore: release (#4803) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(devdeps): update dependency postcss to v8.5.3 (#4807) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @scaleway/regex to v5.2.2 (#4811) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update actions/setup-node action to v4.2.0 (#4813) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update node.js to v22.14.0 (#4814) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update pnpm/action-setup action to v4.1.0 (#4815) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency react-router-dom to v7.2.0 (#4816) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency happy-dom to v17 (#4819) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * docs: fix code editor in storybook (#4812) * docs: fix code editor in storybook * fix: failing test * chore(devdeps): update dependency @scaleway/eslint-config-react to v5.2.7 (#4769) * chore(devdeps): update dependency @scaleway/eslint-config-react to v5.2.7 * fix: remove duplicate type --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Matthias <[email protected]> * fix: lockfile (#4825) * fix(deps): update dependency jsdom to v26 (#4821) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency react-toastify to v11 (#4613) * fix(deps): update dependency react-toastify to v11 * chore: add changeset renovate-8950968 * fix: new version of react toastify --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Scaleway Bot <[email protected]> Co-authored-by: Matthias Prost <[email protected]> * fix(deps): update code editor to v4.23.8 (#4751) * fix(deps): update code editor to v4.23.8 * chore: add changeset renovate-28121ac --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Scaleway Bot <[email protected]> * refactor(Icon): remove fixed size by using normal one (#4810) * chore(devdeps): update pnpm to v10 (#4820) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency react-select to v5.10.0 (#4817) * fix(deps): update dependency react-select to v5.10.0 * chore: add changeset renovate-e0b54b9 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Scaleway Bot <[email protected]> Co-authored-by: Matthias Prost <[email protected]> * chore(devdeps): update dependency happy-dom to v17.1.8 (#4829) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency turbo to v2.4.4 (#4831) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency vite to v6.2.0 (#4832) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @changesets/cli to v2.28.1 (#4834) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @eslint/eslintrc to v3.3.0 (#4835) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @size-limit/file to v11.2.0 (#4836) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat: new component for options * feat: add more features * fix: unit tests * fix: feedback alex * fix: feedback mathieu --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: lisalupi <[email protected]> Co-authored-by: Scaleway Bot <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
scaleway · Mar 4, 2025 · 63f9b91 · 63f9b91
1 parent e2b112c
commit 63f9b91
Show file tree

Hide file tree

Showing 73 changed files with 21,242 additions and 4,216 deletions.
diff --git a/.changeset/bright-weeks-wonder.md b/.changeset/bright-weeks-wonder.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": minor
+---
+
+- New component `<SelectableCardOptionGroupField />`
diff --git a/.changeset/sweet-cycles-mate.md b/.changeset/sweet-cycles-mate.md
@@ -0,0 +1,9 @@
+---
+"@ultraviolet/ui": minor
+---
+
+- `<Popup />`: fix when there is no animation to not add a `setTimeout` to close the popup. This will improve the behavior of `<SelectInputV2 />` and make the testing less random.
+- `<SelectableCard />`: remove pointer events on the radio. We were already doing it with the checkbox version. Also improved tabulation to be more accessible.
+- `<Label />`: improve component to accept `as` prop that can take either `label` or `legend`. It also accept `sentiment` and `disabled` props now. The mouse pointer will be a pointer as well when `htmlFor` is passed.
+- `<SelectInputV2 />`: improve the focusable elements and fix a visual bug to double click to open the dropdown. Also when there is no space in the input the text will be ellipsis.
+- New component `<SelectableCardOptionGroup />`
diff --git a/packages/form/src/components/RadioField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/RadioField/__tests__/__snapshots__/index.test.tsx.snap
@@ -188,7 +188,7 @@ exports[`RadioField > should render correctly 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             class="emotion-4 emotion-5"
-            id="test-test"
+            id=":r0:"
             name="test"
             type="radio"
             value="test"
@@ -220,7 +220,7 @@ exports[`RadioField > should render correctly 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-test"
+            for=":r0:"
           >
             Radio field
           </label>
@@ -420,7 +420,7 @@ exports[`RadioField > should render correctly checked 1`] = `
             aria-invalid="false"
             checked=""
             class="emotion-4 emotion-5"
-            id="test-checked"
+            id=":r8:"
             name="test"
             type="radio"
             value="checked"
@@ -452,7 +452,7 @@ exports[`RadioField > should render correctly checked 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-checked"
+            for=":r8:"
           >
             Radio field checked
           </label>
@@ -652,7 +652,7 @@ exports[`RadioField > should render correctly disabled 1`] = `
             aria-invalid="false"
             class="emotion-4 emotion-5"
             disabled=""
-            id="test-disabled"
+            id=":r5:"
             name="test"
             type="radio"
             value="disabled"
@@ -684,7 +684,7 @@ exports[`RadioField > should render correctly disabled 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-disabled"
+            for=":r5:"
           >
             Radio field disabled
           </label>
@@ -869,7 +869,7 @@ exports[`RadioField > should render correctly with aria-label 1`] = `
             aria-invalid="false"
             aria-label="Radio field"
             class="emotion-4 emotion-5"
-            id="test-test"
+            id=":r3:"
             name="test"
             type="radio"
             value="test"
@@ -1094,7 +1094,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             class="emotion-4 emotion-5"
-            id="test-events"
+            id=":rb:"
             name="test"
             type="radio"
             value="events"
@@ -1126,7 +1126,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
           </svg>
           <label
             class="emotion-12 emotion-13 emotion-14"
-            for="test-events"
+            for=":rb:"
           >
             Radio field events
           </label>

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
@@ -320,7 +320,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="radio-value-1"
+                    id=":r1:"
                     name="radio"
                     type="radio"
                     value="value-1"
@@ -352,7 +352,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="radio-value-1"
+                    for=":r1:"
                   >
                     Radio 1
                   </label>
@@ -371,7 +371,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="radio-value-2"
+                    id=":r4:"
                     name="radio"
                     type="radio"
                     value="value-2"
@@ -403,7 +403,7 @@ exports[`RadioField > should render correctly checked 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="radio-value-2"
+                    for=":r4:"
                   >
                     Radio 2
                   </label>
@@ -738,7 +738,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="test-value-1"
+                    id=":r8:"
                     name="test"
                     type="radio"
                     value="value-1"
@@ -770,7 +770,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="test-value-1"
+                    for=":r8:"
                   >
                     Radio 1
                   </label>
@@ -789,7 +789,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                     aria-disabled="false"
                     aria-invalid="false"
                     class="emotion-16 emotion-17"
-                    id="test-value-2"
+                    id=":rb:"
                     name="test"
                     type="radio"
                     value="value-2"
@@ -821,7 +821,7 @@ exports[`RadioField > should trigger events correctly 1`] = `
                   </svg>
                   <label
                     class="emotion-24 emotion-25 emotion-9"
-                    for="test-value-2"
+                    for=":rb:"
                   >
                     Radio 2
                   </label>

diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -112,12 +112,16 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -176,6 +180,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .emotion-11 {
@@ -519,7 +524,7 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
           aria-describedby=":rh:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -976,12 +981,16 @@ exports[`SelectInputField > should render correctly 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1101,7 +1110,7 @@ exports[`SelectInputField > should render correctly 1`] = `
           aria-describedby=":r1:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -1244,12 +1253,16 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1369,7 +1382,7 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
           aria-describedby=":r5:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -1512,12 +1525,16 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1637,7 +1654,7 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
           aria-describedby=":rd:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -1780,12 +1797,16 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -1905,7 +1926,7 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
           aria-describedby=":r9:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -2048,12 +2069,16 @@ exports[`SelectInputField > should trigger events 1`] = `
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-6[data-state='neutral']:not([data-disabled='true']):hover,
-.emotion-6[data-state='neutral']:not([data-disabled='true']):focus {
+.emotion-6[data-state='neutral']:not([data-disabled='true']):hover {
   border-color: #792dd4;
   outline: none;
 }
 
+.emotion-6[data-state='neutral']:not([data-disabled='true']):focus-visible {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
 .emotion-6[data-state='neutral'][data-dropdownvisible='true'] {
   border-color: #792dd4;
 }
@@ -2112,6 +2137,7 @@ exports[`SelectInputField > should trigger events 1`] = `
   text-decoration: none;
   text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 
 .emotion-11 {
@@ -2167,11 +2193,11 @@ exports[`SelectInputField > should trigger events 1`] = `
         class="emotion-0 emotion-1"
       >
         <div
-          aria-controls=":r1d:"
-          aria-describedby=":r1d:"
+          aria-controls=":r24:"
+          aria-describedby=":r24:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="emotion-4 emotion-5"
@@ -2187,7 +2213,7 @@ exports[`SelectInputField > should trigger events 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-input-test"
-              id=":r1c:"
+              id=":r23:"
               role="combobox"
               tabindex="0"
             >

diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
@@ -46,7 +46,7 @@ describe('SelectInputField', () => {
     act(() => mercury.click())
     act(() => select.click())
     await waitFor(() => {
-      expect(mercury).toBeVisible()
+      expect(screen.getByTestId(`option-stack-mercury`)).toBeVisible()
     })
     expect(asFragment()).toMatchSnapshot()
   })