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 ? (
-
+
) : (
-
+
);
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 = (
);
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 => {
) : (
{
+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: (
-
- {title}
+
+ {title}
{
),
...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",