diff --git a/.changeset/fifty-rocks-fly.md b/.changeset/fifty-rocks-fly.md new file mode 100644 index 00000000000..0d6adaeeaf3 --- /dev/null +++ b/.changeset/fifty-rocks-fly.md @@ -0,0 +1,5 @@ +--- +"@talend/design-system": minor +--- + +DS Field data-test attributes are now passed down to related description 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 282b2ddd284..9390862f085 100644 --- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx +++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx @@ -1,10 +1,10 @@ import { forwardRef, ReactElement, Ref } from 'react'; +import { InlineMessageDestructive, InlineMessageInformation } from '../../../InlineMessage'; import Link, { LinkProps } from '../../../Link/Link'; import { StackVertical } from '../../../Stack'; -import Label, { LabelPrimitiveProps } from '../Label/Label'; -import { InlineMessageDestructive, InlineMessageInformation } from '../../../InlineMessage'; import { VisuallyHidden } from '../../../VisuallyHidden'; +import Label, { LabelPrimitiveProps } from '../Label/Label'; export type FieldStatusProps = | { @@ -54,12 +54,18 @@ const Field = forwardRef( ); const Description = () => { + const inlineMessageProps = { + 'data-test': children?.props['data-test'] && children?.props['data-test'] + '-description', + 'data-testid': + children?.props['data-testid'] && children?.props['data-testid'] + '-description', + }; + if (description) { if (hasError) { - return ; + return ; } - return ; + return ; } return null; }; diff --git a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx index 34c70fb2be8..fc98688cce4 100644 --- a/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx +++ b/packages/design-system/src/components/InlineMessage/Primitive/InlineMessagePrimitive.tsx @@ -1,11 +1,15 @@ import { forwardRef, HTMLAttributes, Ref } from 'react'; + +import classnames from 'classnames'; +import { DataAttributes } from 'src/types'; + // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; -import classnames from 'classnames'; -import styles from './InlineMessagePrimitive.module.scss'; -import Link, { LinkProps } from '../../Link/Link'; import { SizedIcon } from '../../Icon'; +import Link, { LinkProps } from '../../Link/Link'; + +import styles from './InlineMessagePrimitive.module.scss'; export type AvailableVariantsTypes = 'destructive' | 'success' | 'information' | 'warning' | 'beta'; export type InlineMessageVariantType = { @@ -23,7 +27,8 @@ export type SharedInlineMessageTypes = { }; export type BaseInlineMessageProps = Omit, 'style'> & - SharedInlineMessageTypes; + SharedInlineMessageTypes & + Partial; const InlineMessagePrimitive = forwardRef( (