fix(Field): pass qa prop (#498)

.changeset/proud-emus-speak.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Pass `qa` prop for fields.

src/components/forms/Checkbox/Checkbox.tsx

@@ -228,13 +228,14 @@ function Checkbox(
       isHidden={isHidden}
       mods={mods}
       styles={{ position: 'relative' }}
+      qa="CheckboxWrapper"
     >
       <HiddenInput
         data-qa="HiddenInput"
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
       />
-      <CheckboxElement qa={qa || 'Checkbox'} mods={mods} styles={inputStyles}>
+      <CheckboxElement qa="Checkbox" mods={mods} styles={inputStyles}>
         {markIcon}
       </CheckboxElement>
       {children && <Text nowrap>{children}</Text>}

src/components/forms/FieldWrapper/FieldWrapper.tsx

@@ -77,6 +77,7 @@ export const FieldWrapper = forwardRef(function FieldWrapper(
 ) {
   const {
     as,
+    qa,
     labelPosition = 'top',
     label,
     extra,
@@ -157,6 +158,7 @@ export const FieldWrapper = forwardRef(function FieldWrapper(
     <>
       <FieldElement
         ref={ref}
+        qa={qa}
         as={as ?? 'div'}
         mods={mods}
         isHidden={isHidden}

src/components/forms/FieldWrapper/types.ts

@@ -10,6 +10,7 @@ import { Props, Styles } from '../../../tasty';
 // ADDING NEW PROPS TO THIS INTERFACE REQUIRES ADDING THEM TO createFieldWrapperPropsKeys FUNCTION
 
 export type CubeFieldWrapperProps = {
+  qa?: string;
   as?: string;
   validationState?: ValidationState;
   styles?: Styles;

src/components/forms/TextInput/TextInputBase.tsx

@@ -341,7 +341,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
   const textField = (
     <InputWrapperElement
       ref={wrapperRef}
-      qa={qa || 'TextInput'}
+      qa="TextInput"
       mods={modifiers}
       data-size={size}
       styles={wrapperStyles}

src/components/forms/wrapper.tsx

@@ -16,6 +16,7 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   props: T,
 ) {
   let {
+    qa,
     label,
     extra,
     labelPosition = 'top',
@@ -40,8 +41,9 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   return (
     <FieldWrapper
       {...{
-        label,
+        qa,
         extra,
+        label,
         labelPosition,
         labelStyles,
         isRequired,

src/components/pickers/ComboBox/ComboBox.tsx

@@ -21,6 +21,7 @@ import {
   BLOCK_STYLES,
   extractStyles,
   OUTER_STYLES,
+  Props,
   tasty,
 } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
@@ -116,6 +117,7 @@ export interface CubeComboBoxProps<T>
   /** An optional keyboard delegate implementation, to override the default. */
   keyboardDelegate?: KeyboardDelegate;
   loadingState?: LoadingState;
+  wrapperProps?: Props;
   /**
    * The filter function used to determine if a option should be included in the combo box list.
    * Has no effect when `items` is provided.
@@ -179,6 +181,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     filter,
     styles,
     labelSuffix,
+    wrapperProps,
     ...otherProps
   } = props;
 
@@ -333,16 +336,17 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
   let comboBoxField = (
     <ComboBoxWrapperElement
       ref={wrapperRef}
-      qa={qa || 'ComboBox'}
+      qa="ComboBoxWrapper"
       {...modAttrs(mods)}
       styles={outerStyles}
       style={{
         zIndex: isFocused ? 1 : 'initial',
       }}
       data-size={size}
+      wrapperProps={wrapperProps}
     >
       <InputElement
-        qa="Input"
+        qa="ComboBoxInput"
         {...mergeProps(inputProps, hoverProps, focusProps)}
         ref={inputRef}
         autoComplete={autoComplete}

src/components/pickers/Select/Select.tsx

@@ -267,6 +267,7 @@ export interface CubeSelectBaseProps<T>
   inputProps?: Props;
   type?: 'secondary' | 'clear' | 'primary' | (string & {});
   suffixPosition?: 'before' | 'after';
+  wrapperProps?: Props;
 }
 
 export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
@@ -328,6 +329,7 @@ function Select<T extends object>(
     labelSuffix,
     ellipsis,
     suffixPosition = 'before',
+    wrapperProps,
     ...otherProps
   } = props;
   let state = useSelectState(props);
@@ -414,12 +416,13 @@ function Select<T extends object>(
 
   let selectField = (
     <SelectWrapperElement
-      qa={qa || 'Select'}
+      qa="SelectWrapper"
       mods={modifiers}
       styles={outerStyles}
       data-size={size}
       data-type={type}
       data-theme={theme}
+      wrapperProps={wrapperProps}
     >
       <HiddenSelect
         state={state}
@@ -430,6 +433,7 @@ function Select<T extends object>(
       <SelectElement
         {...mergeProps(buttonProps, hoverProps, focusProps)}
         ref={triggerRef}
+        qa="Select"
         styles={inputStyles}
         data-theme={theme}
         data-size={size}