refactor: Met en commun le style du Select et du Combobox (#3264)

* 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
DNUM-SocialGouv · Sep 12, 2024 · 19adcf7 · 19adcf7
1 parent 96dd612
commit 19adcf7
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 165 deletions.
diff --git a/...t/components/features/ContratEngagementJeune/Accompagnement/Formulaires/AutresBesoins.tsx b/...t/components/features/ContratEngagementJeune/Accompagnement/Formulaires/AutresBesoins.tsx
@@ -39,27 +39,21 @@ export default function AutresBesoins26ans(
 					<legend className={styles.question}>Rencontrez-vous d’autres besoins ?</legend>
 					<div className={styles.autresBesoinsReponsesWrapper}>
 						<Checkbox
-							className={styles.reponse}
 							name={NAME_CHECKBOX}
 							label="Logement" />
 						<Checkbox
-							className={styles.reponse}
 							name={NAME_CHECKBOX}
 							label="Santé" />
 						<Checkbox
-							className={styles.reponse}
 							name={NAME_CHECKBOX}
 							label="Difficultés administratives ou juridiques" />
 						<Checkbox
-							className={styles.reponse}
 							name={NAME_CHECKBOX}
 							label="Problématique d‘accès aux droits" />
 						<Checkbox
-							className={styles.reponse}
 							name={NAME_CHECKBOX}
 							label="Maîtrise de français" />
 						<Checkbox
-							className={styles.reponse}
 							name={NAME_CHECKBOX}
 							label="Contraintes familiales" />
 					</div>

diff --git 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
@@ -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
@@ -105,6 +105,7 @@ export const optionAvecValue: Story = {
 export const validation: Story = {
 	args: {
 		requireValidOption: true,
+		required: true,
 	},
 	render: ({ children, ...args }) => (
 		<form onSubmit={(event) => {

diff --git 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<HTMLInputElement, ComboboxProps>(functi
 					onInput={(event) => onInputProps(event, event.currentTarget.value)}
 					required={required}
 					{...inputProps} />
-				<Input
-					type="hidden"
-					name={valueName ?? (name && `${name}.value`)}
-					value={matchingOptionValue}
-					required={requireValidOption} />
 				<button
 					onClick={() => {
 						dispatch(new Actions.ToggleList());
@@ -239,6 +234,11 @@ export const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(functi
 					aria-label={optionsAriaLabel}>
 					{children}
 				</ul>
+				<Input
+					type="hidden"
+					name={valueName ?? (name && `${name}.value`)}
+					value={matchingOptionValue}
+					required={requireValidOption} />
 			</div>
 		</ComboboxProvider>
 	);

diff --git a/src/client/components/ui/Form/Select/Select.module.scss b/src/client/components/ui/Form/Select/Select.module.scss
@@ -5,92 +5,61 @@
 @use "src/client/components/ui/Checkbox/Checkbox.module";
 @use "src/client/components/ui/Radio/Radio.module";
 
-$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;
-
 .container {
-  position: relative;
-  border-radius: $border-radius;
+  @extend %comboboxes;
 
   & [role="combobox"] {
     width: 100%;
     text-align: left;
     cursor: pointer;
     @extend %outlined;
-    @include utilities.text-interactive-medium;
+    font-size: inherit;
+    line-height: inherit;
     display: grid;
-    grid-template-columns: 1fr auto;
-    border: $border-width solid $color-border;
-    border-radius: $border-radius;
-    padding: 0.5rem 1rem;
-    background-color: transparent;
 
-    &[aria-expanded="true"] svg {
-      transform: rotate(-180deg);
-      transition: transform 200ms linear;
+    grid-template-columns: 1fr auto;
+    & > svg {
+      @extend %chevron;
+    }
+    &[aria-expanded="true"] > svg {
+      @extend %chevron-expanded;
     }
   }
 
+  input:valid + [role="combobox"],
+  [role="combobox"]:not([data-touched="true"]) {
+    @extend %border-no-error;
+  }
   input:invalid + [role="combobox"][data-touched="true"] {
-    border-color: $color-error;
-    border-width: $error-border-width;
+    @extend %error;
   }
 
-  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: 1px;
-    max-height: 10em;
-    overflow-y: scroll;
+  [role="option"]:hover,
+  [role="option"].optionVisuallyFocus {
+    @extend %hovered-option;
+  }
 
-    li[role="option"] {
+  ul[role="listbox"] {
+    [role="option"] {
       display: grid;
       grid-template-columns: auto 1fr;
+      gap: .5rem;
       align-items: center;
-      padding: .5rem 1ch;
-      cursor: pointer;
-
-      &:hover,
-      &.optionVisuallyFocus {
-        background-color: $color-option-hover;
-        font-weight: bold;
-      }
     }
 
     &:not([aria-multiselectable="true"]) {
-      li[role="option"]::before {
+      [role="option"]::before {
         @extend %radio;
-        margin-right: 0.5rem;
       }
-
-      li[role="option"][aria-selected="true"]::before {
+      [role="option"][aria-selected="true"]::before {
         @extend %radio-checked;
       }
     }
-
-
     &[aria-multiselectable="true"] {
-      li[role="option"]::before {
+      [role="option"]::before {
         @extend %checkbox;
       }
-
-      li[role="option"][aria-selected="true"]::before {
+      [role="option"][aria-selected="true"]::before {
         @extend %checkbox-checked;
       }
     }

diff --git a/src/client/components/ui/Form/Select/SelectSimple/SelectSimple.stories.tsx b/src/client/components/ui/Form/Select/SelectSimple/SelectSimple.stories.tsx
@@ -23,6 +23,7 @@ export const exemple: Story = {
 		<>
 			<label htmlFor="pays">Pays</label>
 			<SelectSimple id="pays" {...args}>
+				<SelectSimple.Option value="">Aucun</SelectSimple.Option>
 				{children.map((child) => <SelectSimple.Option value={child} key={child}>{child}</SelectSimple.Option>)}
 			</SelectSimple>
 		</>
@@ -36,6 +37,7 @@ export const disabled: Story = {
 		<>
 			<label htmlFor="pays">Pays</label>
 			<SelectSimple id="pays" {...args}>
+				<SelectSimple.Option value="">Aucun</SelectSimple.Option>
 				{children.map((child) => <SelectSimple.Option value={child} key={child}>{child}</SelectSimple.Option>)}
 			</SelectSimple>
 		</>