(PC-33528)[PRO] feat: design adjustement

pass-culture · Jan 13, 2025 · e84a161 · e84a161
1 parent 9e8f561
commit e84a161
Show file tree

Hide file tree

Showing 6 changed files with 449 additions and 93 deletions.
diff --git a/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss b/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss
@@ -115,15 +115,18 @@
 }
 
 .panel {
-  max-height: rem.torem(340px);
   position: absolute;
   background-color: var(--color-white);
   left: 0;
   right: 0;
   top: rem.torem(60px);
   box-shadow: 0 rem.torem(3px) rem.torem(4px) var(--color-medium-shadow);
-  padding: rem.torem(24px) 0 rem.torem(16px);
+  padding: rem.torem(24px) 0 rem.torem(24px);
   border-radius: rem.torem(8px);
+}
+
+.panel-scrollable {
+  max-height: rem.torem(340px);
   overflow: auto;
 }
 
@@ -165,4 +168,4 @@
   height: rem.torem(1px);
   background: var(--color-grey-medium);
   margin: 0 rem.torem(24px);
-}
+}
diff --git a/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx b/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx
@@ -64,40 +64,42 @@ export const MultiSelectPanel = ({
         </div>
       )}
 
-      {filteredOptions.length > 0 ? (
-        <ul className={styles['container']} aria-label="Liste des options">
-          {hasSelectAllOptions && (
-            <li key={'all-options'} className={styles.item}>
-              <BaseCheckbox
-                label={'Tout sélectionner'}
-                checked={isAllChecked}
-                labelClassName={styles['label']}
-                inputClassName={styles['checkbox']}
-                onChange={onSelectAll}
-                tabIndex={0}
-              />
-              <div className={styles['separator']} />
-            </li>
-          )}
-          {filteredOptions.map((option) => (
-            <li key={option.id} className={styles.item}>
-              <BaseCheckbox
-                labelClassName={styles['label']}
-                inputClassName={styles['checkbox']}
-                label={option.label}
-                checked={option.checked}
-                onChange={() => onOptionSelect(option)}
-                onKeyDown={(e) => handleKeyDown(e, option)}
-                tabIndex={0}
-              />
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <span className={styles['empty-search']}>
-          {'Aucun résultat trouvé pour votre recherche.'}
-        </span>
-      )}
+      <div className={styles['panel-scrollable']}>
+        {filteredOptions.length > 0 ? (
+          <ul className={styles['container']} aria-label="Liste des options">
+            {hasSelectAllOptions && (
+              <li key={'all-options'} className={styles.item}>
+                <BaseCheckbox
+                  label={'Tout sélectionner'}
+                  checked={isAllChecked}
+                  labelClassName={styles['label']}
+                  inputClassName={styles['checkbox']}
+                  onChange={onSelectAll}
+                  tabIndex={0}
+                />
+                <div className={styles['separator']} />
+              </li>
+            )}
+            {filteredOptions.map((option) => (
+              <li key={option.id} className={styles.item}>
+                <BaseCheckbox
+                  labelClassName={styles['label']}
+                  inputClassName={styles['checkbox']}
+                  label={option.label}
+                  checked={option.checked}
+                  onChange={() => onOptionSelect(option)}
+                  onKeyDown={(e) => handleKeyDown(e, option)}
+                  tabIndex={0}
+                />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <span className={styles['empty-search']}>
+            {'Aucun résultat trouvé pour votre recherche.'}
+          </span>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/pro/src/ui-kit/MultiSelect/TODO.md b/pro/src/ui-kit/MultiSelect/TODO.md
@@ -8,7 +8,7 @@ Fonctionnel
 
 Design
 
-- [] gérer le responsive pour un titre long
+- [x] gérer le responsive pour un titre long
 - [x] centrer le aucun résultat
 - [x] Passer les selected tag en violet (refacto des tags dans un autre ticket PC-33762)
 - [x] utiliser les fonts du design system (devrait être pris en compte avec les nouvelles maj prévues)
@@ -17,4 +17,4 @@ Design
 
 Bonus
 
-- [] typage des props hasSearch et searchExample
+- [x] typage des props hasSearch et searchExample
diff --git a/pro/src/ui-kit/MultiSelect/__specs__/MultiSelect.spec.tsx b/pro/src/ui-kit/MultiSelect/__specs__/MultiSelect.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { axe } from 'vitest-axe'
 
@@ -66,10 +66,10 @@ describe('<MultiSelect />', () => {
       />
     )
     const toggleButton = screen.getByText('Select Options')
-    await userEvent.click(toggleButton) 
+    await userEvent.click(toggleButton)
     expect(screen.getByText(/Tout sélectionner/i)).toBeInTheDocument()
 
-    await userEvent.click(toggleButton) 
+    await userEvent.click(toggleButton)
     expect(screen.queryByText(/Tout sélectionner/i)).not.toBeInTheDocument()
   })
 
@@ -85,10 +85,10 @@ describe('<MultiSelect />', () => {
     )
 
     const toggleButton = screen.getByText('Select Options')
-    await userEvent.click(toggleButton) 
+    await userEvent.click(toggleButton)
 
     const selectAllCheckbox = screen.getByLabelText(/Tout sélectionner/i)
-    fireEvent.click(selectAllCheckbox) 
+    await userEvent.click(selectAllCheckbox)
 
     options.forEach((option) => {
       expect(screen.getByLabelText(option.label)).toBeChecked()
@@ -106,9 +106,8 @@ describe('<MultiSelect />', () => {
       />
     )
 
-    // Initially, Option 1 is selected
     const selectedTag = screen.getByText('Option 1')
-    await userEvent.click(selectedTag) 
+    await userEvent.click(selectedTag)
     expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
   })
 
@@ -124,16 +123,17 @@ describe('<MultiSelect />', () => {
 
     const toggleButton = screen.getByText('Select Options')
 
-    fireEvent.click(toggleButton) 
+    await userEvent.click(toggleButton)
     expect(screen.queryByText('Option 1')).toBeInTheDocument()
 
-    fireEvent.click(document.body)
+    await userEvent.click(document.body)
     await waitFor(() =>
       expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
     )
 
-    fireEvent.click(toggleButton) 
-    fireEvent.keyDown(toggleButton, { key: 'Escape' }) 
+    await userEvent.click(toggleButton)
+    await userEvent.keyboard('[Escape]')
+
     await waitFor(() =>
       expect(screen.queryByText('Option 1')).not.toBeInTheDocument()
     )
@@ -151,23 +151,14 @@ describe('<MultiSelect />', () => {
     )
 
     const toggleButton = screen.getByText('Select Options')
+    toggleButton.focus()
 
-    fireEvent.keyDown(toggleButton, { key: 'Enter' })
-    await waitFor(() =>
-      expect(screen.getByText(/Tout sélectionner/i)).toBeInTheDocument()
-    )
-
-    fireEvent.keyDown(toggleButton, { key: 'Escape' })
-    await waitFor(() =>
-      expect(screen.queryByText(/Tout sélectionner/i)).not.toBeInTheDocument()
-    )
-
-    fireEvent.keyDown(toggleButton, { key: ' ' })
+    await userEvent.keyboard('[Enter]')
     await waitFor(() =>
       expect(screen.getByText(/Tout sélectionner/i)).toBeInTheDocument()
     )
 
-    fireEvent.keyDown(toggleButton, { key: 'Escape' })
+    await userEvent.keyboard('[Escape]')
     await waitFor(() =>
       expect(screen.queryByText(/Tout sélectionner/i)).not.toBeInTheDocument()
     )