feat(DS): transmit DS Field data-test attributes to related descripti…

…on (#5235)
Talend · Mar 21, 2024 · 8a25fb3 · 8a25fb3
1 parent 6a69c4c
commit 8a25fb3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/.changeset/fifty-rocks-fly.md 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
@@ -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 <InlineMessageDestructive description={description} />;
+					return <InlineMessageDestructive description={description} {...inlineMessageProps} />;
 				}
 
-				return <InlineMessageInformation description={description} />;
+				return <InlineMessageInformation description={description} {...inlineMessageProps} />;
 			}
 			return null;
 		};

diff --git 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<T extends AvailableVariantsTypes, P extends object> = {
@@ -23,7 +27,8 @@ export type SharedInlineMessageTypes = {
 };
 
 export type BaseInlineMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> &
-	SharedInlineMessageTypes;
+	SharedInlineMessageTypes &
+	Partial<DataAttributes>;
 
 const InlineMessagePrimitive = forwardRef(
 	(