fix(look&feel): description spacing in CheckboxSelect

AxaFrance · Jan 15, 2025 · 9fb017f · 9fb017f
1 parent ee8e905
commit 9fb017f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/client/look-and-feel/css/src/Form/Checkbox/Checkbox.scss b/client/look-and-feel/css/src/Form/Checkbox/Checkbox.scss
@@ -13,6 +13,12 @@
     gap: 1rem;
   }
 
+  &__label-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(4 / var(--font-size-base) * 1rem);
+  }
+
   &__label {
     font-size: common.rem(18);
     font-weight: 600;

diff --git a/client/look-and-feel/css/src/Form/Radio/Radio.scss b/client/look-and-feel/css/src/Form/Radio/Radio.scss
@@ -14,11 +14,9 @@
   }
 
   &__label-container {
-    --row-gap: calc(4 / var(--font-size-base) * 1rem);
-
     display: flex;
     flex-direction: column;
-    row-gap: var(--row-gap);
+    row-gap: calc(4 / var(--font-size-base) * 1rem);
   }
 
   &__label {

diff --git a/client/look-and-feel/react/src/Form/Checkbox/CheckboxSelect.tsx b/client/look-and-feel/react/src/Form/Checkbox/CheckboxSelect.tsx
@@ -32,15 +32,17 @@ export const CheckboxSelect = ({
   const optionId = useId();
   return (
     <div className="af-checkbox__container">
-      {labelGroup && (
-        <span className="af-checkbox__label" id={optionId}>
-          {labelGroup}
-          {isRequired && <span aria-hidden="true">&nbsp;*</span>}
-        </span>
-      )}
-      {descriptionGroup && (
-        <span className="af-checkbox__description">{descriptionGroup}</span>
-      )}
+      <div className="af-checkbox__label-container">
+        {labelGroup && (
+          <span className="af-checkbox__label" id={optionId}>
+            {labelGroup}
+            {isRequired && <span aria-hidden="true">&nbsp;*</span>}
+          </span>
+        )}
+        {descriptionGroup && (
+          <span className="af-checkbox__description">{descriptionGroup}</span>
+        )}
+      </div>
       <div
         role="group"
         className={`af-checkbox af-checkbox-select af-checkbox-select--${type}`}