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

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);
-}
+}

pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx

@@ -64,40 +64,43 @@ 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 className={styles['toto']}></div> */}
     </div>
   )
 }

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

pro/src/ui-kit/MultiSelect/__specs__/MultiSelectTrigger.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react'
+import { axe } from 'vitest-axe'
+
+import { MultiSelectTrigger } from '../MultiSelectTrigger'
+
+describe('<MultiSelectTrigger />', () => {
+  const mockToggleDropdown = vi.fn()
+
+  const props = {
+    isOpen: false,
+    selectedCount: 2,
+    toggleDropdown: mockToggleDropdown,
+    legend: 'Select Options',
+    label: 'Options Label',
+  }
+
+  it('should render correctly', () => {
+    render(<MultiSelectTrigger {...props} />)
+
+    expect(screen.getByText('Options Label')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument() // This is the selectedCount badge
+  })
+
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<MultiSelectTrigger {...props} />)
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it('should disable the button when disabled prop is passed', () => {
+    render(<MultiSelectTrigger {...props} disabled />)
+
+    const button = screen.getByRole('button')
+
+    expect(button).toBeDisabled()
+  })
+
+  it('should display the chevron open icon if panel is opened', () => {
+    const { container } = render(
+      <MultiSelectTrigger {...props} isOpen={true} />
+    )
+
+    let chevronIcon = container.querySelector('svg')
+
+    expect(chevronIcon).toHaveClass('chevron chevronOpen')
+  })
+
+  it('should not display the chevron icon open if panel is closed', () => {
+    const { container } = render(
+      <MultiSelectTrigger {...props} isOpen={false} />
+    )
+
+    let chevronIcon = container.querySelector('svg')
+
+    chevronIcon = container.querySelector('svg')
+
+    expect(chevronIcon).not.toHaveClass('chevron chevronOpen')
+  })
+})