From 5b7240ed9301f9a677a88bb5a87d18be2b1b2584 Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Wed, 29 May 2024 15:02:13 +0200
Subject: [PATCH] fix(TMC-28581): UI Form display fix with hint and required
 asterisk (#5319)

* fix(TMC-28581): UI Form display fix with hint and required asterisk

* change required * to css

---------

Co-authored-by: Geoffroy Baccarini <gbaccarini@talend.com>
---
 .changeset/weak-boats-destroy.md                      |  5 +++++
 .changeset/wet-sloths-talk.md                         |  5 +++++
 .../src/components/Form/Primitives/Field/Field.tsx    |  4 ++--
 .../fields/FieldTemplate/FieldTemplate.component.js   |  2 +-
 .../forms/src/UIForm/fields/File/File.component.js    |  2 +-
 .../src/UIForm/fields/Select/Select.component.js      |  2 +-
 .../forms/src/UIForm/fields/Text/Text.component.js    |  2 +-
 .../src/UIForm/fields/TextArea/TextArea.component.js  |  2 +-
 packages/forms/src/UIForm/utils/labels.js             | 11 ++++++++---
 packages/forms/src/UIForm/utils/labels.module.scss    |  4 ++++
 packages/forms/stories/json/fields/core-text.json     |  9 ++++++---
 11 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/weak-boats-destroy.md
 create mode 100644 .changeset/wet-sloths-talk.md
 create mode 100644 packages/forms/src/UIForm/utils/labels.module.scss

diff --git a/.changeset/weak-boats-destroy.md b/.changeset/weak-boats-destroy.md
new file mode 100644
index 0000000000..26e9b4c8bf
--- /dev/null
+++ b/.changeset/weak-boats-destroy.md
@@ -0,0 +1,5 @@
+---
+"@talend/design-system": patch
+---
+
+Form field label property "required" can now be overriden by passing props
diff --git a/.changeset/wet-sloths-talk.md b/.changeset/wet-sloths-talk.md
new file mode 100644
index 0000000000..fdaba236cb
--- /dev/null
+++ b/.changeset/wet-sloths-talk.md
@@ -0,0 +1,5 @@
+---
+"@talend/react-forms": patch
+---
+
+UI Form fields with both hint and required asterisk are now displayed correctly
diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
index 9390862f08..0155e9a6bf 100644
--- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
+++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx
@@ -47,10 +47,10 @@ const Field = forwardRef(
 
 		const LabelComponent = hideLabel ? (
 			<VisuallyHidden>
-				<Label {...labelProps} htmlFor={fieldId} required={required} />
+				<Label htmlFor={fieldId} required={required} {...labelProps} />
 			</VisuallyHidden>
 		) : (
-			<Label {...labelProps} htmlFor={fieldId} required={required} />
+			<Label htmlFor={fieldId} required={required} {...labelProps} />
 		);
 
 		const Description = () => {
diff --git a/packages/forms/src/UIForm/fields/FieldTemplate/FieldTemplate.component.js b/packages/forms/src/UIForm/fields/FieldTemplate/FieldTemplate.component.js
index c626dbf379..8c29449551 100644
--- a/packages/forms/src/UIForm/fields/FieldTemplate/FieldTemplate.component.js
+++ b/packages/forms/src/UIForm/fields/FieldTemplate/FieldTemplate.component.js
@@ -10,7 +10,7 @@ function FieldTemplate(props) {
 	const title = (
 		<Form.Label
 			htmlFor={props.id}
-			{...getLabelProps(props.label, props.labelProps, props.hint)}
+			{...getLabelProps(props.label, props.labelProps, props.hint, props.required)}
 			required={props.required}
 		/>
 	);
diff --git a/packages/forms/src/UIForm/fields/File/File.component.js b/packages/forms/src/UIForm/fields/File/File.component.js
index eeb40e8c69..45d45058f5 100644
--- a/packages/forms/src/UIForm/fields/File/File.component.js
+++ b/packages/forms/src/UIForm/fields/File/File.component.js
@@ -139,7 +139,7 @@ const FileWidget = props => {
 				<SkeletonInput />
 			) : (
 				<Form.File
-					label={getLabelProps(title, labelProps, schema.hint)}
+					label={getLabelProps(title, labelProps, schema.hint, required)}
 					required={required}
 					accept={accept}
 					autoFocus={autoFocus}
diff --git a/packages/forms/src/UIForm/fields/Select/Select.component.js b/packages/forms/src/UIForm/fields/Select/Select.component.js
index d5c6141362..f8cc939d8a 100644
--- a/packages/forms/src/UIForm/fields/Select/Select.component.js
+++ b/packages/forms/src/UIForm/fields/Select/Select.component.js
@@ -54,7 +54,7 @@ export default function Select({
 			readOnly={readOnly}
 			value={value}
 			required={schema.required}
-			label={getLabelProps(title, labelProps, schema.hint)}
+			label={getLabelProps(title, labelProps, schema.hint, schema.required)}
 			description={errorMessage || description}
 			hasError={!isValid}
 			aria-invalid={!isValid}
diff --git a/packages/forms/src/UIForm/fields/Text/Text.component.js b/packages/forms/src/UIForm/fields/Text/Text.component.js
index 333d442fcb..f73c0632cb 100644
--- a/packages/forms/src/UIForm/fields/Text/Text.component.js
+++ b/packages/forms/src/UIForm/fields/Text/Text.component.js
@@ -50,7 +50,7 @@ export default function Text(props) {
 		readOnly,
 		type,
 		value,
-		label: getLabelProps(title, labelProps, schema.hint),
+		label: getLabelProps(title, labelProps, schema.hint, schema.required),
 		required: schema.required,
 		description: errorMessage || description,
 		hasError: !isValid,
diff --git a/packages/forms/src/UIForm/fields/TextArea/TextArea.component.js b/packages/forms/src/UIForm/fields/TextArea/TextArea.component.js
index 54364236da..4661249d67 100644
--- a/packages/forms/src/UIForm/fields/TextArea/TextArea.component.js
+++ b/packages/forms/src/UIForm/fields/TextArea/TextArea.component.js
@@ -30,7 +30,7 @@ export default function TextArea({
 		<Form.Textarea
 			id={id}
 			autoFocus={autoFocus}
-			label={getLabelProps(title, labelProps, schema.hint)}
+			label={getLabelProps(title, labelProps, schema.hint, schema.required)}
 			required={schema.required}
 			disabled={disabled || valueIsUpdating}
 			placeholder={placeholder}
diff --git a/packages/forms/src/UIForm/utils/labels.js b/packages/forms/src/UIForm/utils/labels.js
index b31d0ce187..aac501193b 100644
--- a/packages/forms/src/UIForm/utils/labels.js
+++ b/packages/forms/src/UIForm/utils/labels.js
@@ -1,6 +1,10 @@
+import classnames from 'classnames';
+
 import { ButtonIcon, Popover, StackHorizontal } from '@talend/design-system';
 
-export const getLabelProps = (title, labelProps, hint) => {
+import styles from './labels.module.scss';
+
+export const getLabelProps = (title, labelProps, hint, required) => {
 	if (!hint) {
 		return {
 			children: title,
@@ -9,8 +13,8 @@ export const getLabelProps = (title, labelProps, hint) => {
 	}
 	return {
 		children: (
-			<StackHorizontal gap="XS" align="center">
-				{title}
+			<StackHorizontal gap="XXS" align="center">
+				<span className={classnames({ [styles.required]: required })}>{title}</span>
 				<Popover
 					position={hint.overlayPlacement || 'auto'}
 					data-test={hint['data-test']}
@@ -28,5 +32,6 @@ export const getLabelProps = (title, labelProps, hint) => {
 			</StackHorizontal>
 		),
 		...labelProps,
+		required: false,
 	};
 };
diff --git a/packages/forms/src/UIForm/utils/labels.module.scss b/packages/forms/src/UIForm/utils/labels.module.scss
new file mode 100644
index 0000000000..fd4ac18579
--- /dev/null
+++ b/packages/forms/src/UIForm/utils/labels.module.scss
@@ -0,0 +1,4 @@
+.required:after {
+	content: '*';
+	display: inline;
+}
diff --git a/packages/forms/stories/json/fields/core-text.json b/packages/forms/stories/json/fields/core-text.json
index 800c92cd41..b715a17d3d 100644
--- a/packages/forms/stories/json/fields/core-text.json
+++ b/packages/forms/stories/json/fields/core-text.json
@@ -23,7 +23,8 @@
       "password": {
         "type": "string"
       }
-    }
+    },
+    "required": ["text", "numberMinMax"]
   },
   "uiSchema": [
     {
@@ -32,11 +33,13 @@
       "data-test": "simple.text",
       "labelProps": {
         "data-test": "simple.text.label"
-      }
+      },
+      "hint": { "overlayComponent": "This is a simple text input" }
     },
     {
       "key": "number",
-      "title": "Number"
+      "title": "Number",
+      "hint": { "overlayComponent": "This is a simple text input" }
     },
     {
       "key": "numberMinMax",