feat(Form, Select, MenuItem): support dataAttributes (#1387)

WEB-2253

Author: atabel

src/form.tsx

@@ -7,7 +7,9 @@ import * as styles from './form.css';
 import * as tokens from './text-tokens';
 import ScreenReaderOnly from './screen-reader-only';
 import {isIos} from './utils/platform';
+import {getPrefixedDataAttributes} from './utils/dom';
 
+import type {DataAttributes} from './utils/types';
 import type {FormStatus, FormErrors, FieldRegistration} from './form-context';
 
 if (
@@ -33,6 +35,7 @@ type FormProps = {
     onValidationErrors?: (errors: FormErrors) => void;
     getErrorMessageForScreenReader?: (errors: FormErrors) => string;
     className?: string;
+    dataAttributes?: DataAttributes;
 };
 
 const Form = ({
@@ -44,6 +47,7 @@ const Form = ({
     onValidationErrors,
     getErrorMessageForScreenReader,
     id: idProp,
+    dataAttributes,
 }: FormProps): JSX.Element => {
     const isMountedRef = React.useRef(true); // https://github.com/facebook/react/issues/14369#issuecomment-468305796
     const [values, setValues] = React.useState(initialValues);
@@ -260,6 +264,7 @@ const Form = ({
                 ref={formRef}
                 className={classnames(styles.form, className)}
                 noValidate
+                {...getPrefixedDataAttributes(dataAttributes, 'Form')}
             >
                 {hasMultipleFormErrors ? (
                     <ScreenReaderOnly>

src/menu.tsx

@@ -57,6 +57,7 @@ interface MenuItemBaseProps {
     destructive?: boolean;
     disabled?: boolean;
     onPress: (item: number) => void;
+    dataAttributes?: DataAttributes;
 }
 
 interface MenuItemWithoutControlProps extends MenuItemBaseProps {
@@ -79,6 +80,7 @@ export const MenuItem = ({
     onPress,
     controlType,
     checked,
+    dataAttributes,
 }: MenuItemProps): JSX.Element => {
     const {focusedItem, setFocusedItem, closeMenu, isMenuOpen} = useMenuContext();
     const itemRef = React.useRef<HTMLDivElement | null>(null);
@@ -89,6 +91,8 @@ export const MenuItem = ({
     const menu: HTMLElement | null = item?.closest('[role=menu]') || null;
     const itemIndex = getItemIndexInMenu(menu, item);
 
+    const menuItemDataAttributes = {testid: 'MenuItem', ...dataAttributes};
+
     const renderContent = () =>
         controlType === 'checkbox' ? (
             <Checkbox
@@ -103,6 +107,7 @@ export const MenuItem = ({
                 }}
                 disabled={disabled}
                 role="menuitemcheckbox"
+                dataAttributes={menuItemDataAttributes}
                 render={({controlElement}) => (
                     <Box paddingX={8} paddingY={12}>
                         <Inline space="between" alignItems="center">
@@ -132,6 +137,7 @@ export const MenuItem = ({
                 }}
                 disabled={disabled}
                 role="menuitem"
+                dataAttributes={menuItemDataAttributes}
             >
                 <Box paddingX={8} paddingY={12}>
                     <div className={styles.itemContent}>

src/select.tsx

@@ -18,6 +18,8 @@ import {applyCssVars, pxToRem} from './utils/css';
 import {ThemeVariant} from './theme-variant-context';
 import {vars} from './skins/skin-contract.css';
 
+import type {DataAttributes} from './utils/types';
+
 export type SelectProps = {
     disabled?: boolean;
     error?: boolean;
@@ -40,6 +42,7 @@ export type SelectProps = {
     fullWidth?: boolean;
     native?: boolean;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 
 const Select = ({
@@ -59,6 +62,7 @@ const Select = ({
     onBlur,
     autoFocus = false,
     native,
+    dataAttributes,
 }: SelectProps): JSX.Element => {
     const inputRef = React.useRef<HTMLSelectElement | HTMLInputElement>(null);
     const focusableRef = React.useRef<HTMLSelectElement | HTMLDivElement>(null);
@@ -309,13 +313,14 @@ const Select = ({
     const selectedValue = valueState ?? value;
 
     return (
-        <ThemeVariant isInverse={false}>
+        <ThemeVariant variant="default">
             {shouldUseNative || isServerSide ? (
                 <FieldContainer
                     disabled={disabled}
                     helperText={<HelperText error={error} leftText={helperText} />}
                     fieldRef={fieldRef}
                     fullWidth={fullWidth}
+                    dataAttributes={{testid: 'Select', ...dataAttributes}}
                 >
                     {label && (
                         <Label
@@ -422,6 +427,7 @@ const Select = ({
                             error={error}
                             inputRef={inputRef}
                             fieldRef={fieldRef}
+                            dataAttributes={{testid: 'Select', ...dataAttributes}}
                         />
 
                         <div