Corrections pour homogénéiser les champs des formulaires

incubateur-ademe · Jun 28, 2024 · 163344b · 163344b
1 parent 1ac5507
commit 163344b
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 36 deletions.
diff --git a/packages/ui/src/design-system/Field/Field.tsx b/packages/ui/src/design-system/Field/Field.tsx
@@ -38,7 +38,7 @@ export const Field = ({
 }: Props) => {
   return (
     <div className={classNames(`flex-grow flex flex-col gap-3`, className)}>
-      <label htmlFor={htmlFor}>
+      <label htmlFor={htmlFor} className="ml-0 mb-0">
         {/** Title */}
         <div
           className={classNames('font-medium text-grey-8', {

diff --git a/packages/ui/src/design-system/Field/__snapshots__/Field.stories.tsx.snap b/packages/ui/src/design-system/Field/__snapshots__/Field.stories.tsx.snap
@@ -3,7 +3,9 @@
 exports[`design-system/Field Default smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>
@@ -22,7 +24,9 @@ exports[`design-system/Field Default smoke-test 1`] = `
 exports[`design-system/Field DisabledWithHint smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8 text-grey-5">
         Description de l'action
       </div>
@@ -50,7 +54,9 @@ exports[`design-system/Field DisabledWithHint smoke-test 1`] = `
 exports[`design-system/Field WithError smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>
@@ -76,7 +82,9 @@ exports[`design-system/Field WithError smoke-test 1`] = `
 exports[`design-system/Field WithHint smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>
@@ -103,7 +111,9 @@ exports[`design-system/Field WithHint smoke-test 1`] = `
 exports[`design-system/Field WithInfo smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>
@@ -129,7 +139,9 @@ exports[`design-system/Field WithInfo smoke-test 1`] = `
 exports[`design-system/Field WithSuccess smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>
@@ -155,7 +167,9 @@ exports[`design-system/Field WithSuccess smoke-test 1`] = `
 exports[`design-system/Field WithWarning smoke-test 1`] = `
 <div class="flex">
   <div class="flex-grow flex flex-col gap-3">
-    <label for="un_nom">
+    <label for="un_nom"
+           class="ml-0 mb-0"
+    >
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>

diff --git a/packages/ui/src/design-system/FormSection/__snapshots__/FormSection.stories.tsx.snap b/packages/ui/src/design-system/FormSection/__snapshots__/FormSection.stories.tsx.snap
@@ -40,7 +40,7 @@ exports[`design-system/FormSection AvecFields smoke-test 1`] = `
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div class="flex-grow flex flex-col gap-3 md:col-span-2">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Titre du plan
           </div>
@@ -52,7 +52,7 @@ exports[`design-system/FormSection AvecFields smoke-test 1`] = `
         </div>
       </div>
       <div class="flex-grow flex flex-col gap-3">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Statut
           </div>
@@ -70,7 +70,7 @@ exports[`design-system/FormSection AvecFields smoke-test 1`] = `
         </div>
       </div>
       <div class="flex-grow flex flex-col gap-3">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Niveaude priorité
           </div>
@@ -152,7 +152,7 @@ exports[`design-system/FormSection PlusieursSections smoke-test 1`] = `
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div class="flex-grow flex flex-col gap-3 md:col-span-2">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Titre du plan
           </div>
@@ -164,7 +164,7 @@ exports[`design-system/FormSection PlusieursSections smoke-test 1`] = `
         </div>
       </div>
       <div class="flex-grow flex flex-col gap-3">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Statut
           </div>
@@ -182,7 +182,7 @@ exports[`design-system/FormSection PlusieursSections smoke-test 1`] = `
         </div>
       </div>
       <div class="flex-grow flex flex-col gap-3">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Niveaude priorité
           </div>
@@ -213,7 +213,7 @@ exports[`design-system/FormSection PlusieursSections smoke-test 1`] = `
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div class="flex-grow flex flex-col gap-3 md:col-span-2">
-        <label>
+        <label class="ml-0 mb-0">
           <div class="font-medium text-grey-8">
             Titre du plan
           </div>
@@ -233,7 +233,7 @@ exports[`design-system/FormSection SansHeader smoke-test 1`] = `
 <div class="w-full max-w-lg p-8">
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
     <div class="flex-grow flex flex-col gap-3 md:col-span-2">
-      <label>
+      <label class="ml-0 mb-0">
         <div class="font-medium text-grey-8">
           Titre du plan
         </div>
@@ -245,7 +245,7 @@ exports[`design-system/FormSection SansHeader smoke-test 1`] = `
       </div>
     </div>
     <div class="flex-grow flex flex-col gap-3 md:col-span-2">
-      <label>
+      <label class="ml-0 mb-0">
         <div class="font-medium text-grey-8">
           Statut
         </div>

diff --git a/packages/ui/src/design-system/Select/__snapshots__/Select.stories.tsx.snap b/packages/ui/src/design-system/Select/__snapshots__/Select.stories.tsx.snap
@@ -4,7 +4,7 @@ exports[`design-system/Select CreateOption smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -27,7 +27,7 @@ exports[`design-system/Select CustomItem smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -47,7 +47,7 @@ exports[`design-system/Select Default smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -67,7 +67,7 @@ exports[`design-system/Select Disabled smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           disabled
           type="button"
   >
@@ -88,7 +88,7 @@ exports[`design-system/Select DisabledOption smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -114,7 +114,7 @@ exports[`design-system/Select DisabledSearchableMultiSelectWithValue smoke-test
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           disabled
           type="button"
   >
@@ -149,7 +149,7 @@ exports[`design-system/Select Filter smoke-test 1`] = `
   <div class="flex flex-col gap-6">
     <button aria-expanded="false"
             aria-label="ouvrir le menu"
-            class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+            class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
             type="button"
     >
       <div class="flex px-4 min-h-[3rem] py-2">
@@ -164,7 +164,7 @@ exports[`design-system/Select Filter smoke-test 1`] = `
     </button>
     <button aria-expanded="false"
             aria-label="ouvrir le menu"
-            class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+            class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
             type="button"
     >
       <div class="flex px-4 min-h-[3rem] py-2">
@@ -179,7 +179,7 @@ exports[`design-system/Select Filter smoke-test 1`] = `
     </button>
     <button aria-expanded="false"
             aria-label="ouvrir le menu"
-            class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+            class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
             type="button"
     >
       <div class="flex px-4 min-h-[3rem] py-2">
@@ -200,7 +200,7 @@ exports[`design-system/Select MultiSelectWithSectionOptions smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -220,7 +220,7 @@ exports[`design-system/Select SearchableMultiSelect smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -243,7 +243,7 @@ exports[`design-system/Select SearchableSelectWithDebouncedApiCallOnTyping smoke
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[3rem] py-2">
@@ -266,7 +266,7 @@ exports[`design-system/Select SmallWithBadgeItems smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <button aria-expanded="false"
           aria-label="ouvrir le menu"
-          class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+          class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
           type="button"
   >
     <div class="flex px-4 min-h-[2.5rem] py-1">
@@ -285,7 +285,7 @@ exports[`design-system/Select SmallWithBadgeItems smoke-test 1`] = `
 exports[`design-system/Select WithField smoke-test 1`] = `
 <div class="w-full max-w-[24rem]">
   <div class="flex-grow flex flex-col gap-3">
-    <label>
+    <label class="ml-0 mb-0">
       <div class="font-medium text-grey-8">
         Description de l'action
       </div>
@@ -295,7 +295,7 @@ exports[`design-system/Select WithField smoke-test 1`] = `
     </label>
     <button aria-expanded="false"
             aria-label="ouvrir le menu"
-            class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+            class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
             type="button"
     >
       <div class="flex px-4 min-h-[3rem] py-2">
@@ -327,14 +327,14 @@ exports[`design-system/Select ZIndex smoke-test 1`] = `
            class="absolute inset-0 z-20 bg-pink-100"
       >
         <div class="flex-grow flex flex-col gap-3">
-          <label>
+          <label class="ml-0 mb-0">
             <div class="font-medium text-grey-8">
               Exemple
             </div>
           </label>
           <button aria-expanded="false"
                   aria-label="ouvrir le menu"
-                  class="w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
+                  class="w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden"
                   type="button"
           >
             <div class="flex px-4 min-h-[3rem] py-2">
@@ -349,7 +349,7 @@ exports[`design-system/Select ZIndex smoke-test 1`] = `
           </button>
         </div>
         <div class="flex-grow flex flex-col gap-3 relative mt-6">
-          <label>
+          <label class="ml-0 mb-0">
             <div class="font-medium text-grey-8">
               Devrait être sous les options du select
             </div>

diff --git a/packages/ui/src/design-system/Select/components/SelectBase.tsx b/packages/ui/src/design-system/Select/components/SelectBase.tsx
@@ -278,7 +278,7 @@ const SelectButton = forwardRef(
         aria-expanded={isOpen}
         aria-label="ouvrir le menu"
         className={classNames(
-          'w-full rounded-xl border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden',
+          'w-full rounded-lg border border-solid border-grey-4 disabled:border-grey-3 bg-grey-1 hover:!bg-primary-0 disabled:hover:!bg-grey-1 overflow-hidden',
           {'rounded-b-none': isOpen}
         )}
         disabled={disabled}