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?" } } ],