feat(DFD-632): AffixSelect data-testid (#5186)

.changeset/lovely-bulldogs-accept.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+data-testid on select suffix and input primitive

packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx

@@ -1,20 +1,23 @@
 import { forwardRef } from 'react';
 import type { MouseEvent, Ref } from 'react';
+
 import classnames from 'classnames';
+
 // eslint-disable-next-line @talend/import-depth
 import { IconNameWithSize } from '@talend/icons/dist/typeUtils';
 
+import { mergeRefs } from '../../../../mergeRef';
 import { DeprecatedIconNames } from '../../../../types';
-import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip';
-import { StackHorizontal } from '../../../Stack';
 import { Clickable, ClickableProps } from '../../../Clickable';
-import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper';
 import { SizedIcon } from '../../../Icon';
+import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper';
+import { StackHorizontal } from '../../../Stack';
+import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip';
 
 import styles from '../AffixStyles.module.scss';
-import { mergeRefs } from '../../../../mergeRef';
 
 type CommonAffixButtonPropsType = {
+	dataTestid?: string;
 	children: string;
 	isDropdown?: boolean;
 	onClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;

packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx

@@ -1,12 +1,15 @@
 import { forwardRef, Ref } from 'react';
+
+import { DataAttributes } from 'src/types';
+
+import { useId } from '../../../../useId';
 import FieldPrimitive, { FieldPropsPrimitive } from '../../Primitives/Field/Field';
 import SelectNoWrapper, { SelectNoWrapperProps } from '../../Primitives/Select/SelectNoWrapper';
-import { useId } from '../../../../useId';
 
 export type AffixSelectPropsType = Omit<FieldPropsPrimitive, 'hasError' | 'description'> &
 	Omit<SelectNoWrapperProps, 'isAffix' | 'className' | 'style'> & {
 		isSuffix: boolean;
-	};
+	} & Partial<DataAttributes>;
 
 const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelectElement>) => {
 	const { label, children, name, id, isSuffix, ...rest } = props;

packages/design-system/src/components/Form/Primitives/Input/Input.tsx

@@ -1,22 +1,26 @@
 import {
+	FocusEvent,
 	forwardRef,
 	InputHTMLAttributes,
 	Ref,
 	useImperativeHandle,
 	useRef,
-	FocusEvent,
 } from 'react';
+
 import classnames from 'classnames';
-import InputWrapper, { AffixesProps } from '../InputWrapper/InputWrapper';
-import { FieldStatusProps } from '../Field/Field';
+import { DataAttributes } from 'src/types';
+
 import useRevealPassword from '../../../Form/Field/Input/hooks/useRevealPassword';
 import { SizedIcon } from '../../../Icon';
+import { FieldStatusProps } from '../Field/Field';
+import InputWrapper, { AffixesProps } from '../InputWrapper/InputWrapper';
 
 import styles from './Input.module.scss';
 
 export type InputPrimitiveProps = Omit<InputHTMLAttributes<any>, 'prefix' | 'suffix'> &
 	AffixesProps &
-	Omit<FieldStatusProps, 'errorMessage'>;
+	Omit<FieldStatusProps, 'errorMessage'> &
+	Partial<DataAttributes>;
 
 const Input = forwardRef((props: InputPrimitiveProps, ref: Ref<HTMLInputElement | null>) => {
 	const {

packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, ReactElement, Ref } from 'react';
 import { isElement } from 'react-is';
+
 import classnames from 'classnames';
+
 import AffixButton, { AffixButtonPropsType } from '../../../Form/Affix/variations/AffixButton';
 import AffixReadOnly, {
 	AffixReadOnlyPropsType,

packages/design-system/src/components/Form/Primitives/Select/SelectNoWrapper.tsx

@@ -12,6 +12,7 @@ export type SelectNoWrapperProps = Omit<SelectHTMLAttributes<any>, 'prefix'> & {
 	hasError?: boolean;
 	isAffix?: boolean;
 	isSuffix?: boolean;
+	dataTestid?: string;
 };
 
 const SelectNoWrapper = forwardRef((props: SelectNoWrapperProps, ref: Ref<HTMLSelectElement>) => {
@@ -25,12 +26,14 @@ const SelectNoWrapper = forwardRef((props: SelectNoWrapperProps, ref: Ref<HTMLSe
 		isAffix = false,
 		isSuffix = false,
 		id,
+		dataTestid,
 		...rest
 	} = props;
 	return (
 		<div className={styles.select__wrapper}>
 			<select
 				{...rest}
+				data-testid={dataTestid}
 				disabled={disabled}
 				ref={ref}
 				id={id}