From 0cb50f3d30d7c785a19c72a2d34e4fa738f9cf01 Mon Sep 17 00:00:00 2001
From: Martin Stievenart <stievenart.m@gmail.com>
Date: Wed, 18 Sep 2024 14:47:26 +0200
Subject: [PATCH] fix(form): field required indication based on the label
 instead of the group

---
 packages/Form/core/src/Field.tsx | 9 ++++++++-
 packages/Form/core/src/form.scss | 4 +---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/Form/core/src/Field.tsx b/packages/Form/core/src/Field.tsx
index df4e2e194..1eb34d574 100644
--- 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
index 90a14f20e..579f0b6a6 100644
--- 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;
     }