diff --git a/.changeset/twelve-games-provide.md b/.changeset/twelve-games-provide.md
new file mode 100644
index 00000000000..4e94d7cacd7
--- /dev/null
+++ b/.changeset/twelve-games-provide.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': patch
+---
+
+TDOPS-5409 - fix Link render below Password/Text field
diff --git a/packages/design-system/src/stories/form/Field/Input/Password.stories.tsx b/packages/design-system/src/stories/form/Field/Input/Password.stories.tsx
index b26060a75d1..944ce362e1f 100644
--- a/packages/design-system/src/stories/form/Field/Input/Password.stories.tsx
+++ b/packages/design-system/src/stories/form/Field/Input/Password.stories.tsx
@@ -47,5 +47,14 @@ export const Password = () => (
readOnly
defaultValue="TalendPassword2012"
/>
+
);
diff --git a/packages/forms/src/UIForm/fields/Text/PasswordWidget/index.js b/packages/forms/src/UIForm/fields/Text/PasswordWidget/index.js
deleted file mode 100644
index b0d5b2c3a3e..00000000000
--- a/packages/forms/src/UIForm/fields/Text/PasswordWidget/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Form } from '@talend/design-system';
-
-export default Form.Password;
diff --git a/packages/forms/src/UIForm/fields/Text/Text.component.js b/packages/forms/src/UIForm/fields/Text/Text.component.js
index 129b5503b7e..9c9e4706e09 100644
--- a/packages/forms/src/UIForm/fields/Text/Text.component.js
+++ b/packages/forms/src/UIForm/fields/Text/Text.component.js
@@ -1,10 +1,9 @@
/* eslint-disable jsx-a11y/no-autofocus */
import PropTypes from 'prop-types';
-import { get, omit } from 'lodash';
-import { Link } from '@talend/design-system';
+import get from 'lodash/get';
+import { Form } from '@talend/design-system';
import FieldTemplate from '../FieldTemplate';
import { generateDescriptionId, generateErrorId } from '../../Message/generateId';
-import PasswordWidget from './PasswordWidget';
import { convertValue, extractDataAttributes } from '../../utils/properties';
@@ -63,12 +62,12 @@ export default function Text(props) {
valueIsUpdating={valueIsUpdating}
>
{type === 'password' ? (
- {link.label} }
+ link={link}
/>
) : (
{
expect(screen.getByLabelText('My input title')).toHaveAttribute('autoComplete', 'off');
});
- it('should pass labelProps to FieldTemplate', () => {
+ it('should pass labelProps to Text field', () => {
// given
const labelProps = { className: 'hello' };
const props = {
@@ -249,4 +249,33 @@ describe('Text field', () => {
// then
expect(screen.getByText('My input title')).toHaveClass('hello');
});
+
+ it('should pass link props and password type to Text field', () => {
+ // given
+ const link = {
+ href: 'https://talend.com',
+ title: 'Helps to reset your password',
+ children: 'Need help to log in?',
+ 'aria-label': 'Need help to log in?',
+ };
+
+ const props = {
+ ...defaultProps,
+ schema: {
+ autoFocus: true,
+ placeholder: 'Enter your password',
+ required: true,
+ title: 'Password',
+ type: 'password',
+ link,
+ },
+ };
+
+ // when
+ render();
+
+ // then
+ expect(screen.getByTitle(link.title)).toHaveTextContent(link.children);
+ expect(screen.getByTestId('link.icon.external')).toBeVisible();
+ });
});
diff --git a/packages/forms/stories/json/fields/core-text.json b/packages/forms/stories/json/fields/core-text.json
index 02cf738ccab..800c92cd416 100644
--- a/packages/forms/stories/json/fields/core-text.json
+++ b/packages/forms/stories/json/fields/core-text.json
@@ -52,8 +52,9 @@
"type": "password",
"link": {
"href": "https://talend.com",
- "label": "Forget?",
- "aria-label": "Need help to log in?"
+ "title": "Forget?",
+ "aria-label": "Need help to log in?",
+ "children": "Need help to log in?"
}
}
],