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 <[email protected]>
Talend · May 29, 2024 · 5b7240e · 5b7240e
1 parent bcb24b1
commit 5b7240e
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 13 deletions.
diff --git a/.changeset/weak-boats-destroy.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",