From 4fb1d8f29e6df60ead7bfd7a68d94dc6737ecf77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Myl=C3=A8ne?= <187286904+mleroy-pass@users.noreply.github.com> Date: Fri, 3 Jan 2025 15:43:58 +0100 Subject: [PATCH] (PC-33528)[PRO] feat: design corrections --- .../MultiSelect/MultiSelect.module.scss | 74 ++++++----- .../MultiSelect/MultiSelect.stories.tsx | 118 ++++++++++++++++-- .../ui-kit/MultiSelect/MultiSelectPanel.tsx | 11 +- pro/src/ui-kit/MultiSelect/TODO.md | 10 +- .../OptionsList/OptionsList.module.scss | 10 +- .../OptionsList/OptionsList.tsx | 6 +- 6 files changed, 174 insertions(+), 55 deletions(-) diff --git a/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss b/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss index 72908199f50..709024a212b 100644 --- a/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss +++ b/pro/src/ui-kit/MultiSelect/MultiSelect.module.scss @@ -8,28 +8,27 @@ display: flex; flex-direction: column; width: 100%; - max-width: 400px; + max-width: rem.torem(542px); position: relative; } .legend { - // @include fonts-design-system.body; - @include fonts.body; + @include fonts-design-system.body; color: var(--color-black); - margin-bottom: 8px; + margin-bottom: rem.torem(8px); } .trigger { - @include fonts.body; + @include fonts-design-system.body; display: flex; align-items: center; justify-content: space-between; - padding: 12px; + padding: rem.torem(12px); background-color: var(--color-white); border: 1px solid var(--color-grey-dark); - border-radius: 10px; + border-radius:rem.torem(10px); width: 100%; cursor: pointer; @@ -44,7 +43,7 @@ } &:focus { - border: 1px solid var(--color-black); + border: 2px solid var(--color-black); } &:focus-visible { @@ -55,7 +54,7 @@ } &-selected { - border: 2px solid var(--color-black); + border: 1px solid var(--color-black); } } @@ -63,7 +62,7 @@ display: flex; align-items: center; justify-content: center; - gap: 8px; + gap: rem.torem(8px); max-width: 500px; } @@ -74,22 +73,21 @@ } .badge { - // @include fonts-design-system.body-semi-bold-xs; - @include fonts.caption; + @include fonts-design-system.body-semi-bold-xs; display: flex; align-items: center; justify-content: center; - width: 20px; - height: 20px; - background-color: var(--color-primary); + width: rem.torem(24px); + height: rem.torem(24px); + background-color: var(--color-secondary-light); color: var(--color-white); border-radius: 50%; } .chevron { - width: 16px; - height: 16px; + width: rem.torem(16px); + height: rem.torem(16px); color: var(--color-black); } @@ -101,41 +99,57 @@ display: block; width: 100%; text-align: left; - font-size: 14px; + font-size: rem.torem(14px); background: none; border: none; cursor: pointer; -} - -.checkbox { - padding-top: rem.torem(16px); + + &:hover { + background: var(--color-grey-light); + } } .tags { display: flex; flex-wrap: wrap; - gap: 8px; + gap: rem.torem(8px); } .panel { + max-height: rem.torem(340px); position: absolute; background-color: var(--color-white); left: 0; right: 0; - top: rem.torem(48px); + top: rem.torem(60px); box-shadow: 0 rem.torem(3px) rem.torem(4px) var(--color-medium-shadow); - padding: rem.torem(24px); + padding: rem.torem(24px) 0 rem.torem(16px); + border-radius: rem.torem(8px); + overflow: auto; +} + +.label { + @include fonts-design-system.body; + + padding: rem.torem(11.2px) rem.torem(16px) rem.torem(11.2px) 0; +} + +.checkbox { + margin-left: rem.torem(24px); +} + +.search-input { + margin: 0 rem.torem(24px); } .search-example { - // @include fonts-design-system.body-semi-bold-xs; - @include fonts.caption; + @include fonts-design-system.body-semi-bold-xs; display: block; min-height: rem.torem(16px); color: var(--color-grey-dark); - padding-top: 8px; - padding-bottom: 24px; + padding-top: rem.torem(8px); + padding-bottom: rem.torem(24px); } .visually-hidden { @@ -145,5 +159,5 @@ .separator { height: rem.torem(1px); background: var(--color-grey-medium); - margin-top: rem.torem(12px); + margin: 0 rem.torem(24px); } diff --git a/pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx b/pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx index 2dcd9948586..466d05ba616 100644 --- a/pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx +++ b/pro/src/ui-kit/MultiSelect/MultiSelect.stories.tsx @@ -18,17 +18,109 @@ export default { } const defaultOptions = [ - { id: '1', label: '78 - Yvelines' }, - { id: '2', label: '75 - Paris' }, - { id: '3', label: '44 - Nantes' }, - { id: '4', label: '76 - Rouen' }, - { id: '5', label: '77 - Seine et Marne' }, + { id: '1', label: '01 - Ain' }, + { id: '2', label: '02 - Aisne' }, + { id: '3', label: '03 - Allier' }, + { id: '4', label: '04 - Alpes-de-Haute-Provence' }, + { id: '5', label: '05 - Hautes-Alpes' }, + { id: '6', label: '06 - Alpes-Maritimes' }, + { id: '7', label: '07 - Ardèche' }, + { id: '8', label: '08 - Ardennes' }, + { id: '9', label: '09 - Ariège' }, + { id: '10', label: '10 - Aube' }, + { id: '11', label: '11 - Aude' }, + { id: '12', label: '12 - Aveyron' }, + { id: '13', label: '13 - Bouches-du-Rhône' }, + { id: '14', label: '14 - Calvados' }, + { id: '15', label: '15 - Cantal' }, + { id: '16', label: '16 - Charente' }, + { id: '17', label: '17 - Charente-Maritime' }, + { id: '18', label: '18 - Cher' }, + { id: '19', label: '19 - Corrèze' }, + { id: '20', label: '20 - Corse-du-Sud' }, + { id: '21', label: "21 - Côte-d'Or" }, + { id: '22', label: "22 - Côtes-d'Armor" }, + { id: '23', label: '23 - Creuse' }, + { id: '24', label: '24 - Dordogne' }, + { id: '25', label: '25 - Doubs' }, + { id: '26', label: '26 - Drôme' }, + { id: '27', label: '27 - Eure' }, + { id: '28', label: '28 - Eure-et-Loir' }, + { id: '29', label: '29 - Finistère' }, + { id: '30', label: '30 - Gard' }, + { id: '31', label: '31 - Haute-Garonne' }, + { id: '32', label: '32 - Gers' }, + { id: '33', label: '33 - Gironde' }, + { id: '34', label: '34 - Hérault' }, + { id: '35', label: '35 - Ille-et-Vilaine' }, + { id: '36', label: '36 - Indre' }, + { id: '37', label: '37 - Indre-et-Loire' }, + { id: '38', label: '38 - Isère' }, + { id: '39', label: '39 - Jura' }, + { id: '40', label: '40 - Landes' }, + { id: '41', label: '41 - Loir-et-Cher' }, + { id: '42', label: '42 - Loire' }, + { id: '43', label: '43 - Haute-Loire' }, + { id: '44', label: '44 - Loire-Atlantique' }, + { id: '45', label: '45 - Loiret' }, + { id: '46', label: '46 - Lot' }, + { id: '47', label: '47 - Lot-et-Garonne' }, + { id: '48', label: '48 - Lozère' }, + { id: '49', label: '49 - Maine-et-Loire' }, + { id: '50', label: '50 - Manche' }, + { id: '51', label: '51 - Marne' }, + { id: '52', label: '52 - Haute-Marne' }, + { id: '53', label: '53 - Mayenne' }, + { id: '54', label: '54 - Meurthe-et-Moselle' }, + { id: '55', label: '55 - Meuse' }, + { id: '56', label: '56 - Morbihan' }, + { id: '57', label: '57 - Moselle' }, + { id: '58', label: '58 - Nièvre' }, + { id: '59', label: '59 - Nord' }, + { id: '60', label: '60 - Oise' }, + { id: '61', label: '61 - Orne' }, + { id: '62', label: '62 - Pas-de-Calais' }, + { id: '63', label: '63 - Puy-de-Dôme' }, + { id: '64', label: '64 - Pyrénées-Atlantiques' }, + { id: '65', label: '65 - Hautes-Pyrénées' }, + { id: '66', label: '66 - Pyrénées-Orientales' }, + { id: '67', label: '67 - Bas-Rhin' }, + { id: '68', label: '68 - Haut-Rhin' }, + { id: '69', label: '69 - Rhône' }, + { id: '70', label: '70 - Haute-Saône' }, + { id: '71', label: '71 - Saône-et-Loire' }, + { id: '72', label: '72 - Sarthe' }, + { id: '73', label: '73 - Savoie' }, + { id: '74', label: '74 - Haute-Savoie' }, + { id: '75', label: '75 - Paris' }, + { id: '76', label: '76 - Seine-Maritime' }, + { id: '77', label: '77 - Seine-et-Marne' }, + { id: '78', label: '78 - Yvelines' }, + { id: '79', label: '79 - Deux-Sèvres' }, + { id: '80', label: '80 - Somme' }, + { id: '81', label: '81 - Tarn' }, + { id: '82', label: '82 - Tarn-et-Garonne' }, + { id: '83', label: '83 - Var' }, + { id: '84', label: '84 - Vaucluse' }, + { id: '85', label: '85 - Vendée' }, + { id: '86', label: '86 - Vienne' }, + { id: '87', label: '87 - Haute-Vienne' }, + { id: '88', label: '88 - Vosges' }, + { id: '89', label: '89 - Yonne' }, + { id: '90', label: '90 - Territoire de Belfort' }, + { id: '91', label: '91 - Essonne' }, + { id: '92', label: '92 - Hauts-de-Seine' }, + { id: '93', label: '93 - Seine-Saint-Denis' }, + { id: '94', label: '94 - Val-de-Marne' }, + { id: '95', label: "95 - Val-d'Oise" }, + { id: '2A', label: '2A - Corse-du-Sud' }, + { id: '2B', label: '2B - Haute-Corse' }, ] const defaultProps = { options: defaultOptions, legend: 'Département', - label: 'Selectionner un département', + label: 'Sélectionner un département', } export const Default: StoryObj = { @@ -54,7 +146,7 @@ export const WithSearchInput: StoryObj = { searchExample: 'Ex : 44 - Nantes', searchLabel: 'Rechercher des départements', legend: 'Départements', - label: 'Selectionner des départements', + label: 'Sélectionner des départements', }, } @@ -62,9 +154,19 @@ export const WithSelectAllOption: StoryObj = { args: { ...defaultProps, hasSelectAllOptions: true, + legend: 'Départements', + label: 'Sélectionner des départements', + }, +} + +export const WithSearchInputAndSelectAllOption: StoryObj = { + args: { + ...defaultProps, + hasSearch: true, searchExample: 'Ex : 44 - Nantes', searchLabel: 'Rechercher des départements', + hasSelectAllOptions: true, legend: 'Départements', - label: 'Selectionner des départements', + label: 'Sélectionner des départements', }, } diff --git a/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx b/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx index b2558bf13f0..6ba431b6865 100644 --- a/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx +++ b/pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx @@ -55,7 +55,7 @@ export const MultiSelectPanel = ({ return (
{hasSearch && ( - <> +
@@ -67,16 +67,18 @@ export const MultiSelectPanel = ({ onChange={(e) => setSearchValue(e.target.value)} /> {searchExample} - +
)} {searchedValues.length > 0 ? (
    {hasSelectAllOptions && ( -
  • +
  • onToggleAllOptions(isSelectAllChecked)} />
    @@ -85,7 +87,8 @@ export const MultiSelectPanel = ({ {searchedValues.map((option) => (
  • onToggleOption(option, option.checked)} diff --git a/pro/src/ui-kit/MultiSelect/TODO.md b/pro/src/ui-kit/MultiSelect/TODO.md index 007015a3f7d..b25d8bbfe34 100644 --- a/pro/src/ui-kit/MultiSelect/TODO.md +++ b/pro/src/ui-kit/MultiSelect/TODO.md @@ -1,16 +1,16 @@ Fonctionnel - [] gérer la navigation clavier +- [] Corriger le all selected - [] jsdoc -- [] ne pas afficher plus de 3 lignes de tags +- [] ne pas afficher plus de 3 lignes de tags (refacto des tags dans un autre ticket PC-33762) +- [x] corriger la zone de clic sur BaseCheckbox (refacto des tags dans un autre ticket PC-33749) Design -- [] corriger la zone de clic sur BaseCheckbox -- [] Passer les selected tag en violet +- [] Passer les selected tag en violet (refacto des tags dans un autre ticket PC-33762) - [] corriger le curseur de BaseCheckbox -- [] ajuster la hauteur des checkbox -- [] utiliser les fonts du design system +- [] utiliser les fonts du design system (devrait être pris en compte avec les nouvelles maj prévues) - [] gérer le responsive Bonus diff --git a/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.module.scss b/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.module.scss index 6db4c46cf61..40e992d7acb 100644 --- a/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.module.scss +++ b/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.module.scss @@ -25,6 +25,12 @@ padding: rem.torem(11.2px) rem.torem(16px); } + .options-item-hover { + &:hover { + background: var(--color-grey-light); + } + } + .label { padding: rem.torem(11.2px) rem.torem(16px) rem.torem(11.2px) 0; } @@ -38,8 +44,4 @@ .input { margin-left: rem.torem(16px); } - - .option-hovered { - background: var(--color-grey-light); - } } diff --git a/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.tsx b/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.tsx index 7b7344d89a9..e91ab6f6b31 100644 --- a/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.tsx +++ b/pro/src/ui-kit/form/SelectAutoComplete/OptionsList/OptionsList.tsx @@ -55,9 +55,6 @@ export const OptionsList = ({ aria-selected={isSelected} aria-posinset={index + 1} aria-setsize={displayedOptions.length} - className={ - hoveredOptionIndex === index ? styles['option-hovered'] : '' - } data-value={value} data-selected={isSelected} id={`option-display-${value}`} @@ -74,6 +71,7 @@ export const OptionsList = ({ onChange={() => { selectOption(String(value)) }} + className={styles['options-item-hover']} labelClassName={styles['label']} inputClassName={styles['input']} /> @@ -82,7 +80,7 @@ export const OptionsList = ({ onClick={() => { selectOption(String(value)) }} - className={cx(styles['options-item'])} + className={styles['options-item-hover']} > {label}