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

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

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
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;
     }