From fbc301fe5b31b8a01209392e5dd4ccc78dda661b Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 3 Sep 2024 15:23:08 +0200
Subject: [PATCH 1/2] fix(Field): pass qa prop (#498)

---
 .changeset/proud-emus-speak.md                     | 5 +++++
 src/components/forms/FieldWrapper/FieldWrapper.tsx | 2 ++
 src/components/forms/FieldWrapper/types.ts         | 1 +
 src/components/forms/wrapper.tsx                   | 2 ++
 4 files changed, 10 insertions(+)
 create mode 100644 .changeset/proud-emus-speak.md

diff --git a/.changeset/proud-emus-speak.md b/.changeset/proud-emus-speak.md
new file mode 100644
index 000000000..2efff232e
--- /dev/null
+++ b/.changeset/proud-emus-speak.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Pass `qa` prop for fields.
diff --git a/src/components/forms/FieldWrapper/FieldWrapper.tsx b/src/components/forms/FieldWrapper/FieldWrapper.tsx
index 5998913c4..be678d6c9 100644
--- a/src/components/forms/FieldWrapper/FieldWrapper.tsx
+++ b/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}
diff --git a/src/components/forms/FieldWrapper/types.ts b/src/components/forms/FieldWrapper/types.ts
index d2df80ab8..dd0d42646 100644
--- a/src/components/forms/FieldWrapper/types.ts
+++ b/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;
diff --git a/src/components/forms/wrapper.tsx b/src/components/forms/wrapper.tsx
index bef1ced65..135cdc617 100644
--- a/src/components/forms/wrapper.tsx
+++ b/src/components/forms/wrapper.tsx
@@ -15,6 +15,7 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   props: T,
 ) {
   let {
+    qa,
     label,
     extra,
     labelPosition = 'top',
@@ -38,6 +39,7 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   return (
     <FieldWrapper
       {...{
+        qa,
         labelPosition,
         label,
         extra,

From 0b3be74c8a457acce6660f453cc803fe6e3dd4ca Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Fri, 18 Oct 2024 15:47:26 +0200
Subject: [PATCH 2/2] fix(Input): qa prop assignment

---
 src/components/forms/Checkbox/Checkbox.tsx       | 3 ++-
 src/components/forms/TextInput/TextInputBase.tsx | 2 +-
 src/components/pickers/ComboBox/ComboBox.tsx     | 8 ++++++--
 src/components/pickers/Select/Select.tsx         | 6 +++++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx
index 40525829e..f1f6b241d 100644
--- a/src/components/forms/Checkbox/Checkbox.tsx
+++ b/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>}
diff --git a/src/components/forms/TextInput/TextInputBase.tsx b/src/components/forms/TextInput/TextInputBase.tsx
index 2e73cd4b8..6eba092ea 100644
--- a/src/components/forms/TextInput/TextInputBase.tsx
+++ b/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}
diff --git a/src/components/pickers/ComboBox/ComboBox.tsx b/src/components/pickers/ComboBox/ComboBox.tsx
index 9db14be61..693947281 100644
--- a/src/components/pickers/ComboBox/ComboBox.tsx
+++ b/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}
diff --git a/src/components/pickers/Select/Select.tsx b/src/components/pickers/Select/Select.tsx
index 2abbb9eb6..f647d5ed9 100644
--- a/src/components/pickers/Select/Select.tsx
+++ b/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}