From 19adcf7379a12479eeac9b1bf763d1b3c5f3a2f4 Mon Sep 17 00:00:00 2001 From: Gauthier Fiorentino Date: Thu, 12 Sep 2024 12:11:42 +0200 Subject: [PATCH] refactor: Met en commun le style du Select et du Combobox (#3264) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: Extrait le style simple * refactor: Extrait la gestion de l'option hovered * refactor: Met en commun la gestion des catégories * refactor: Met en commun la gestion de la police * refactor: Met en commun la couleur du texte * refactor: Utilise les styles des inputs dans les comboboxes * refactor: Clean code mort * fix: Fix la transition du chevron à la fermeture * refactor: Met en commun la gestion du chevron * refactor: Supprime content redondant dans les checkboxes * refactor: Déplace le détail technique du combobox à la fin du composant * refactor: Extrait le padding dans les inputs * refactor: Fix border-radius sur l'outline du combobox * refactor: Extrait la gestion des bordures en erreur * refactor: Extrait la gestion de la bordure en erreur plus épaisse * refactor: Migre la gestion des chevrons dans les composants avec une mixin * refactor: Met en commun le padding pour les options * refactor: Harmonise la gestion du padding entre la checkbox/radio et le label * refactor: Renomme une mixin pour simplifier l'utilisation --- .../Formulaires/AutresBesoins.tsx | 6 - .../ui/Checkbox/Checkbox.module.scss | 4 +- .../ui/Form/Combobox/Combobox.module.scss | 111 +++++------------- .../ui/Form/Combobox/Combobox.stories.tsx | 1 + .../components/ui/Form/Combobox/Combobox.tsx | 10 +- .../ui/Form/Select/Select.module.scss | 81 ++++--------- .../SelectSimple/SelectSimple.stories.tsx | 2 + .../ui/Form/TextboxShared.module.scss | 92 +++++++++++++-- 8 files changed, 142 insertions(+), 165 deletions(-) diff --git a/src/client/components/features/ContratEngagementJeune/Accompagnement/Formulaires/AutresBesoins.tsx b/src/client/components/features/ContratEngagementJeune/Accompagnement/Formulaires/AutresBesoins.tsx index 9ed49c9cbc..f115fd00c0 100644 --- a/src/client/components/features/ContratEngagementJeune/Accompagnement/Formulaires/AutresBesoins.tsx +++ b/src/client/components/features/ContratEngagementJeune/Accompagnement/Formulaires/AutresBesoins.tsx @@ -39,27 +39,21 @@ export default function AutresBesoins26ans( Rencontrez-vous d’autres besoins ?
diff --git a/src/client/components/ui/Checkbox/Checkbox.module.scss b/src/client/components/ui/Checkbox/Checkbox.module.scss index 716d83b05b..50c6239bfc 100644 --- a/src/client/components/ui/Checkbox/Checkbox.module.scss +++ b/src/client/components/ui/Checkbox/Checkbox.module.scss @@ -6,7 +6,6 @@ content: ""; width: 1rem; height: 1rem; - margin-right: 0.5rem; background-size: 1rem; background-position: center; background-repeat: no-repeat; @@ -53,13 +52,12 @@ } input[type=checkbox] + label::before { - content: ""; + @extend %checkbox; display: block; position: absolute; top: 0; left: 0.5rem; margin-top: 1rem; - @extend %checkbox; } input[type=checkbox]:checked + label::before { diff --git a/src/client/components/ui/Form/Combobox/Combobox.module.scss b/src/client/components/ui/Form/Combobox/Combobox.module.scss index 8ba632f410..2b15797ced 100644 --- a/src/client/components/ui/Form/Combobox/Combobox.module.scss +++ b/src/client/components/ui/Form/Combobox/Combobox.module.scss @@ -2,119 +2,62 @@ @use "../TextboxShared.module" as inputStyles; .combobox { - $color-text: inputStyles.$color-text; - $color-border: inputStyles.$color-border; - $color-text-disabled: inputStyles.$color-text-disabled; - $error-border-width: inputStyles.$error-border-width; - $color-background-disabled: inputStyles.$color-background-disabled; - $color-error: inputStyles.$color-error; - $border-width-compensation: inputStyles.$border-width-compensation; - $color-list-border: $color-border; - $color-list-background: utilities.$color-background-primary; - $color-option-hover: utilities.$color-background-primary-alternative; - $color-category-separator: $color-border; - $border-radius: inputStyles.$border-radius; - $border-width: inputStyles.$border-width; + @extend %comboboxes; + & > button { + font-size: inherit; + line-height: 1; + } - position: relative; display: grid; grid-template-columns: 1fr auto; - color: $color-text; - - & input { - @include utilities.text-interactive-medium; - background-color: transparent; - padding: 0.5rem 1rem; + & > button svg { + @extend %chevron; } - - & button { - vertical-align: middle; - & svg { - vertical-align: bottom; - transition: transform 75ms ease-in-out; - } - &[aria-expanded="true"] svg { - transform: rotate(-180deg); - } + & > [aria-expanded="true"] + button > svg { + @extend %chevron-expanded; } - border-radius: $border-radius; @extend %outlined; + border-radius: inputStyles.$border-radius; & input, & button { - @extend %no-outline + @extend %no-outline; } // NOTE (GAFI 27-06-2023): Impossible de changer la couleur de la bordure quand disabled si elle est sur la div parent - & input { - border: $border-width solid $color-border; + & input[role="combobox"] { border-right: none; - border-radius: $border-radius 0 0 $border-radius; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + padding-right: 0; } - & button { - border: $border-width solid $color-border; + & input[role="combobox"] + button { + @extend %bordered; border-left: none; - border-radius: 0 $border-radius $border-radius 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; } - & input:disabled, - & input:read-only, & button:disabled { - color: $color-text-disabled; - background-color: $color-background-disabled; - cursor: not-allowed; + @extend %disabled; } & input[role="combobox"][data-touched="true"]:invalid, & input[role="combobox"][data-touched="true"]:invalid ~ button { - border-color: $color-error; - border-width: $error-border-width; + @extend %error; } & input[role="combobox"]:valid, & input[role="combobox"]:not([data-touched="true"]) { - // NOTE (GAFI 06-07-2023): Compense la bordure plus épaisse quand en erreur + @extend %border-no-error; margin-right: 0; & ~ button { - margin: - $border-width-compensation - $border-width-compensation - $border-width-compensation - 0; + @extend %border-no-error; + margin-left: 0; } } - & ul[role="listbox"] { - z-index: 1; - position: absolute; - top: 100%; - width: 100%; - border: 1px solid $color-list-border; - border-radius: $border-radius; - background-color: $color-list-background; - margin-top: 4px; - - max-height: 10em; - overflow-y: scroll; - - & li { - padding: .25rem 1ch; - - &[role="option"] { - cursor: pointer; - } - &[role="option"]:hover, - &[role="option"][aria-selected="true"] { - background-color: $color-option-hover; - font-weight: bold; - } - } - - & li[role="none"] { - font-weight: bold; - - & * { - font-weight: initial; - } - } + & [role="option"]:hover, + & [role="option"][aria-selected="true"] { + @extend %hovered-option; } } diff --git a/src/client/components/ui/Form/Combobox/Combobox.stories.tsx b/src/client/components/ui/Form/Combobox/Combobox.stories.tsx index 252e52aaba..35ecb2f83b 100644 --- a/src/client/components/ui/Form/Combobox/Combobox.stories.tsx +++ b/src/client/components/ui/Form/Combobox/Combobox.stories.tsx @@ -105,6 +105,7 @@ export const optionAvecValue: Story = { export const validation: Story = { args: { requireValidOption: true, + required: true, }, render: ({ children, ...args }) => (
{ diff --git a/src/client/components/ui/Form/Combobox/Combobox.tsx b/src/client/components/ui/Form/Combobox/Combobox.tsx index 3b079fe550..eb43bb097c 100644 --- a/src/client/components/ui/Form/Combobox/Combobox.tsx +++ b/src/client/components/ui/Form/Combobox/Combobox.tsx @@ -212,11 +212,6 @@ export const Combobox = React.forwardRef(functi onInput={(event) => onInputProps(event, event.currentTarget.value)} required={required} {...inputProps} /> -