fix: add qa property for some components

src/components/ActionTooltip/ActionTooltip.tsx

@@ -13,7 +13,7 @@ const b = block('action-tooltip');
 export interface ActionTooltipProps
     extends Pick<
         TooltipProps,
-        'children' | 'disabled' | 'placement' | 'openDelay' | 'closeDelay' | 'className'
+        'children' | 'disabled' | 'placement' | 'openDelay' | 'closeDelay' | 'className' | 'qa'
     > {
     title: string;
     hotkey?: HotkeyProps['value'];

src/components/Alert/Alert.tsx

@@ -25,6 +25,7 @@ export const Alert = (props: AlertProps) => {
         style,
         onClose,
         align,
+        qa,
     } = props;
 
     const icon = props.icon || <Alert.Icon theme={theme} view={view} />;
@@ -42,6 +43,7 @@ export const Alert = (props: AlertProps) => {
             className={bAlert({corners}, spacing({py: 4, px: 5}, className))}
             theme={theme}
             view={view}
+            qa={qa}
         >
             <Flex gap="3" alignItems={align}>
                 {icon}

src/components/Alert/README.md

@@ -235,3 +235,4 @@ LANDING_BLOCK-->
 | style     | HTML style attribute                                                        |                       `React.CSSProperties`                        |              |
 | className | Name of alert class                                                         |                              `string`                              |              |
 | icon      | Override default icon                                                       |                         `React.ReactNode`                          |              |
+| qa        | HTML `data-qa` attribute, used in tests.                                    |                              `string`                              |              |

src/components/Alert/types.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type {QAProps} from '../types';
+
 export type AlertTheme =
     | 'normal'
     | 'info'
@@ -11,7 +13,7 @@ export type AlertTheme =
 export type AlertView = 'filled' | 'outlined';
 export type AlertCorners = 'rounded' | 'square';
 
-export interface AlertProps {
+export interface AlertProps extends QAProps {
     title?: React.ReactNode;
     message?: React.ReactNode;
     theme?: AlertTheme;

src/components/ArrowToggle/ArrowToggle.tsx

@@ -3,21 +3,26 @@ import React from 'react';
 import {ChevronDown} from '@gravity-ui/icons';
 
 import {Icon} from '../Icon';
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './ArrowToggle.scss';
 
-export interface ArrowToggleProps {
+export interface ArrowToggleProps extends QAProps {
     size?: number;
     direction?: 'top' | 'left' | 'bottom' | 'right';
     className?: string;
 }
 
 const b = block('arrow-toggle');
 
-export function ArrowToggle({size = 16, direction = 'bottom', className}: ArrowToggleProps) {
+export function ArrowToggle({size = 16, direction = 'bottom', className, qa}: ArrowToggleProps) {
     return (
-        <span style={{width: size, height: size}} className={b({direction}, className)}>
+        <span
+            style={{width: size, height: size}}
+            className={b({direction}, className)}
+            data-qa={qa}
+        >
             <Icon data={ChevronDown} size={size} />
         </span>
     );

src/components/ArrowToggle/README.md

@@ -120,3 +120,4 @@ return (
 | className | HTML `class` attribute                   | `string` |            |
 | direction | Used to set the direction of arrowToggle | `string` | `"bottom"` |
 | size      | Size of arrowToggle in px                | `number` |    `16`    |
+| qa        | HTML `data-qa` attribute, used in tests  | `string` |            |

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import _throttle from 'lodash/throttle';
 
 import type {PopupPlacement} from '../Popup';
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import {BreadcrumbsItem as Item} from './BreadcrumbsItem';
@@ -19,7 +20,7 @@ export interface BreadcrumbsItem {
     title?: string;
 }
 
-export interface BreadcrumbsProps<T extends BreadcrumbsItem = BreadcrumbsItem> {
+export interface BreadcrumbsProps<T extends BreadcrumbsItem = BreadcrumbsItem> extends QAProps {
     items: T[];
     className?: string;
     renderRootContent?: (item: T, isCurrent: boolean) => React.ReactNode;
@@ -114,13 +115,13 @@ export class Breadcrumbs<T extends BreadcrumbsItem = BreadcrumbsItem> extends Re
     }
 
     render() {
-        const {className} = this.props;
+        const {className, qa} = this.props;
         const {calculated} = this.state;
 
         const rootItem = this.renderRootItem();
 
         return (
-            <div className={b({calculated: calculated ? 'yes' : 'no'}, className)}>
+            <div className={b({calculated: calculated ? 'yes' : 'no'}, className)} data-qa={qa}>
                 <div className={b('inner')} ref={this.container}>
                     {rootItem}
                     {this.renderMoreItem()}

src/components/Breadcrumbs/README.md

@@ -343,6 +343,7 @@ return (
 | firstDisplayedItemsCount | Number of items to display before item collapse control | `FirstDisplayedItemsCount.Zero \| FirstDisplayedItemsCount.One`                                         |         |
 | lastDisplayedItemsCount  | Number of items to display after item collapse control  | `LastDisplayedItemsCount.One \| LastDisplayedItemsCount.Two`                                            |         |
 | popupStyle               | Style of collapsed item popup                           | `"staircase" \| undefined`                                                                              |         |
+| qa                       | HTML `data-qa` attribute, used in tests                 | `string`                                                                                                |         |
 
 ### BreadcrumbsItem
 

src/components/Card/README.md

@@ -144,3 +144,4 @@ LANDING_BLOCK-->
 | onClick   | Card click handler. Available for `type`: `"selection"`, `"action"` | `Function`  |               |
 | selected  | Selected card. Available for type: `"selection"`                    |  `Boolean`  |               |
 | disabled  | Disabled card. Available for type: `"selection"`, `"action"`        |  `Boolean`  |               |
+| qa        | HTML `data-qa` attribute, used in tests                             |  `string`   |               |

src/components/Label/Label.tsx

@@ -8,6 +8,7 @@ import type {ButtonProps, ButtonSize} from '../Button';
 import {ClipboardIcon} from '../ClipboardIcon';
 import {CopyToClipboard, CopyToClipboardStatus} from '../CopyToClipboard';
 import {Icon} from '../Icon';
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './Label.scss';
@@ -30,7 +31,7 @@ const commonActionButtonProps: ButtonProps = {
     }),
 };
 
-interface LabelOwnProps {
+interface LabelOwnProps extends QAProps {
     /** Label icon (at left) */
     icon?: React.ReactNode;
     /** Disabled state */
@@ -85,6 +86,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
         value,
         onCopy,
         onClick,
+        qa,
     } = props;
 
     const actionButtonRef = React.useRef<HTMLButtonElement>(null);
@@ -189,6 +191,7 @@ export const Label = React.forwardRef<HTMLDivElement, LabelProps>(function Label
                     },
                     className,
                 )}
+                data-qa={qa}
             >
                 {leftIcon}
                 {content}

src/components/Label/README.md

@@ -268,3 +268,4 @@ LANDING_BLOCK-->
 | theme            | Label theme                                   |            `string`            | `"normal"`  |
 | type             | Label type                                    | `"default"` `"copy"` `"close"` | `"default"` |
 | value            | Label value (displayed as "children : value") |            `string`            |             |
+| qa               | HTML `data-qa` attribute, used in tests       |            `string`            |             |

src/components/Loader/Loader.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './Loader.scss';
@@ -8,14 +9,14 @@ const b = block('loader');
 
 export type LoaderSize = 's' | 'm' | 'l';
 
-export interface LoaderProps {
+export interface LoaderProps extends QAProps {
     className?: string;
     size?: LoaderSize;
 }
 
-export function Loader({size = 's', className}: LoaderProps) {
+export function Loader({size = 's', className, qa}: LoaderProps) {
     return (
-        <div className={b({size}, className)}>
+        <div className={b({size}, className)} data-qa={qa}>
             <div className={b('left')} />
             <div className={b('center')} />
             <div className={b('right')} />

src/components/Pagination/Pagination.tsx

@@ -28,6 +28,7 @@ export const Pagination = ({
     showPages = true,
     showInput = false,
     className,
+    qa,
 }: PaginationProps) => {
     const [mobile] = useMobile();
 
@@ -92,7 +93,7 @@ export const Pagination = ({
         .filter(Boolean);
 
     return (
-        <div className={b(null, className)}>
+        <div className={b(null, className)} data-qa={qa}>
             {pagination}
             {showInput && (
                 <PaginationInput

src/components/Pagination/README.md

@@ -36,3 +36,4 @@ const pagination = <Pagination page={1} pageSize={100} total={1000} onUpdate={ha
 | total           | Total number of data items                                                                               |  `number`  |         |
 | showInput       | Shows input to navigate to pages directly                                                                | `boolean`  | `false` |
 | showPages       | Shows pages numbering                                                                                    | `boolean`  | `true`  |
+| qa              | HTML `data-qa` attribute, used in tests                                                                  |  `string`  |         |

src/components/Pagination/types.ts

@@ -1,3 +1,5 @@
+import type {QAProps} from '../types';
+
 export type ActionName = 'previous' | 'next' | 'first';
 
 export type PaginationSize = 'm' | 'l';
@@ -42,7 +44,7 @@ export type PaginationProps = {
      * ClassName of element
      */
     className?: string;
-};
+} & QAProps;
 
 type EllipsisItem = {
     type: 'ellipsis';

src/components/Persona/Persona.tsx

@@ -20,6 +20,7 @@ export function Persona({
     image,
     className,
     style,
+    qa,
 }: PersonaProps) {
     const textValue = extractTextValue(text);
     const textView = extractTextView(text);
@@ -59,6 +60,7 @@ export function Persona({
             className={className}
             style={style}
             closeButtonAriaAttributes={closeButtonAriaAttributes}
+            qa={qa}
         >
             {textView}
         </PersonaWrap>

src/components/Persona/README.md

@@ -117,3 +117,4 @@ LANDING_BLOCK-->
 | onClose   | Handles click on button with cross `(text: string) => void` |           `Function`           |            |
 | onClick   | Handles click on component itself `(text: string) => void`  |           `Function`           |            |
 | className | Custom CSS class for root element                           |            `string`            |            |
+| qa        | HTML `data-qa` attribute, used in tests                     |            `string`            |            |

src/components/Persona/types.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type {QAProps} from '../types';
+
 export type PersonaText = string | {value: string; content: React.ReactNode};
 
 export type PersonaProps = {
@@ -25,4 +27,4 @@ export type PersonaProps = {
     /** Custom CSS class for root element */
     className?: string;
     style?: React.CSSProperties;
-};
+} & QAProps;

src/components/PersonaWrap/PersonaWrap.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 import {Xmark} from '@gravity-ui/icons';
 
 import {Icon} from '../Icon';
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './PersonaWrap.scss';
 
 const b = block('persona');
 
-export interface PersonaWrapProps {
+export interface PersonaWrapProps extends QAProps {
     avatar: React.ReactNode;
     children?: React.ReactNode;
     isEmpty?: boolean;
@@ -33,6 +34,7 @@ export function PersonaWrap({
     children,
     style,
     closeButtonAriaAttributes,
+    qa,
 }: PersonaWrapProps) {
     const clickable = Boolean(onClick);
     const closeable = Boolean(onClose);
@@ -42,6 +44,7 @@ export function PersonaWrap({
         <div
             className={b({size, theme, clickable, closeable, empty: isEmpty}, className)}
             style={style}
+            data-qa={qa}
         >
             <MainComponent onClick={onClick} className={b('main')}>
                 {avatar && <div className={b('avatar')}>{avatar}</div>}

src/components/Progress/Progress.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import _sumBy from 'lodash/sumBy';
 
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './Progress.scss';
@@ -27,7 +28,7 @@ export interface ProgressColorStops {
     stop: number;
 }
 
-interface ProgressGeneralProps {
+interface ProgressGeneralProps extends QAProps {
     /** ClassName of element */
     className?: string;
 }
@@ -91,10 +92,10 @@ export class Progress extends React.Component<ProgressProps> {
     }
 
     render() {
-        const {size, className} = this.props;
+        const {size, className, qa} = this.props;
 
         return (
-            <div className={b({size}, className)}>
+            <div className={b({size}, className)} data-qa={qa}>
                 {this.renderText()}
                 {this.renderContent()}
             </div>

src/components/Progress/README.md

@@ -255,3 +255,4 @@ LANDING_BLOCK-->
 | title     | HTML `title` attribute                                                                                                              |  `string`   |             |
 | theme     | Sets the stack element color                                                                                                        |  `string`   | `"default"` |
 | value     | Current progress value. The available range is from 0 to 100. Using the `stack` property value is optional and is used as maxValue. |  `number`   |             |
+| qa        | HTML `data-qa` attribute, used in tests                                                                                             |  `string`   |             |

src/components/Skeleton/README.md

@@ -12,7 +12,8 @@ The Skeleton component displays a placeholder preview of your content before the
 
 ## Properties
 
-| Name      | Description                            |         Type          | Default |
-| :-------- | :------------------------------------- | :-------------------: | :-----: |
-| style     | Custom CSS properties for root element | `React.CSSProperties` |         |
-| className | Custom CSS class for root element      |       `string`        |         |
+| Name      | Description                             |         Type          | Default |
+| :-------- | :-------------------------------------- | :-------------------: | :-----: |
+| style     | Custom CSS properties for root element  | `React.CSSProperties` |         |
+| className | Custom CSS class for root element       |       `string`        |         |
+| qa        | HTML `data-qa` attribute, used in tests |       `string`        |         |

src/components/Skeleton/Skeleton.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
+import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
 import './Skeleton.scss';
 
 const b = block('skeleton');
 
 export interface SkeletonProps
-    extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {}
+    extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
+        QAProps {}
 
-export function Skeleton({className, style}: SkeletonProps) {
-    return <div className={b(null, className)} style={style} />;
+export function Skeleton({className, style, qa}: SkeletonProps) {
+    return <div className={b(null, className)} style={style} data-qa={qa} />;
 }

src/components/Text/README.md

@@ -175,3 +175,4 @@ LANDING_BLOCK-->
 | wordBreak  | The word-break css property                             |              `"break-all"`               |            |
 | color      | Color of the text                                       | `string` (see values in "Color" section) |            |
 | ref        |                                                         |                  `any`                   |            |
+| qa         | HTML `data-qa` attribute, used in tests                 |                 `string`                 |            |

src/components/Text/Text.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import type {QAProps} from '../types';
+
 import {colorText} from './colorText/colorText';
 import type {ColorTextBaseProps} from './colorText/colorText';
 import {text} from './text/text';
 import type {TextBaseProps} from './text/text';
 
-export interface TextProps extends TextBaseProps, ColorTextBaseProps {
+export interface TextProps extends TextBaseProps, ColorTextBaseProps, QAProps {
     /**
      * Ability to override default html tag
      */
@@ -57,6 +59,7 @@ export const Text = React.forwardRef(
             color,
             whiteSpace,
             wordBreak,
+            qa,
             ...rest
         }: TextPropsWithoutRef<C>,
         ref?: TextRef<C>,
@@ -70,6 +73,7 @@ export const Text = React.forwardRef(
                     {variant, ellipsis, whiteSpace, wordBreak},
                     color ? colorText({color}, className) : className,
                 )}
+                data-qa={qa}
                 {...rest}
             >
                 {children}