fix(form): field required indication based on the label instead of th…

…e group
AxaFrance · Sep 18, 2024 · 525acc1 · 525acc1
1 parent 40fc9a0
commit 525acc1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/Form/Input/choice/src/__tests__/__snapshots__/Choice.spec.tsx.snap b/packages/Form/Input/choice/src/__tests__/__snapshots__/Choice.spec.tsx.snap
@@ -204,7 +204,7 @@ exports[`<ChoiceInput> renders ChoiceInput correctly with required 1`] = `
       class="col-md-2"
     >
       <label
-        class="af-form__group-label"
+        class="af-form__group-label--required af-form__group-label"
         for="oui"
       >
         Some label

diff --git a/packages/Form/core/src/Field.tsx b/packages/Form/core/src/Field.tsx
@@ -1,5 +1,6 @@
 import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import classNames from 'classnames';
 import FieldError from './FieldError';
 import FieldForm from './FieldForm';
 import MessageTypes from './MessageTypes';
@@ -53,7 +54,13 @@ const Field = ({
       aria-label={ariaLabelContainer}>
       <div className={classNameContainerLabel}>
         <label
-          className="af-form__group-label"
+          className={classNames(
+            {
+              'af-form__group-label--required':
+                classModifier.includes('required'),
+            },
+            'af-form__group-label'
+          )}
           htmlFor={isLabelContainerLinkedToInput ? id : null}>
           {label}
         </label>

diff --git a/packages/Form/core/src/form.scss b/packages/Form/core/src/form.scss
@@ -18,10 +18,8 @@
   &__group-label {
     font-weight: normal;
     margin: 0;
-  }
 
-  &__group--required &__group-label {
-    &:after {
+    &--required::after {
       content: ' *';
       color: $color-red-error;
     }