Merge branch 'main' into textArea-size

.github/workflows/pr-title.yml

@@ -0,0 +1,27 @@
+name: PR Title
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - edited
+
+jobs:
+  verify_title:
+    name: Verify Title
+    runs-on: ubuntu-latest
+    if: ${{github.event.action != 'edited' || github.event.changes.title}}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install Packages
+        run: npm ci
+      - name: Run Commitlint
+        run: echo "${{github.event.pull_request.title}}" | npx commitlint

src/components/Dialog/Dialog.tsx

@@ -17,7 +17,7 @@ import './Dialog.scss';
 
 const b = block('dialog');
 
-interface DialogOwnProps {
+interface DialogOwnProps extends QAProps {
     open: boolean;
     children: React.ReactNode;
     onEscapeKeyDown?: ModalProps['onEscapeKeyDown'];
@@ -52,7 +52,7 @@ interface DialogDefaultProps {
 }
 
 export type DialogProps = DialogOwnProps & Partial<DialogDefaultProps>;
-type DialogInnerProps = DialogOwnProps & DialogDefaultProps & QAProps;
+type DialogInnerProps = DialogOwnProps & DialogDefaultProps;
 
 export class Dialog extends React.Component<DialogInnerProps> {
     static defaultProps: DialogDefaultProps = {

src/components/Dialog/__stories__/DialogShowcase.tsx

@@ -67,6 +67,7 @@ function OtherDialog() {
                 hasCloseButton
                 keepMounted
                 onEnterKeyDown={handleApply}
+                qa="darthVader"
                 onTransitionEntered={() => {
                     selectRef?.current?.focus();
                     setTimeout(() => setOpenSelect(true), 0);

src/components/Table/__tests__/Table.visual.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {TableStories} from './helpersPlaywright';
+
+test.describe('Table', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <HOCWithTableSorting>', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.HOCWithTableSorting />);
+
+        await expectScreenshot();
+    });
+});

src/components/Table/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultTableStories from '../__stories__/Table.stories';
+
+export const TableStories = composeStories(DefaultTableStories);

src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.tsx

@@ -3,16 +3,11 @@ import React from 'react';
 import {ArrowDown, ArrowUp, ArrowUpArrowDown} from '@gravity-ui/icons';
 
 import {Icon} from '../../../../Icon';
-import {block} from '../../../../utils/cn';
-
-import './SortIndicator.scss';
 
 export interface SortIndicatorProps {
     order?: 'asc' | 'desc';
 }
 
-const b = block('sort-indicator');
-
 export function SortIndicator({order}: SortIndicatorProps) {
     let icon;
     switch (order) {
@@ -26,9 +21,5 @@ export function SortIndicator({order}: SortIndicatorProps) {
             icon = ArrowUpArrowDown;
     }
 
-    return (
-        <div className={b()}>
-            <Icon data={icon} size={14} className={b('icon')} />
-        </div>
-    );
+    return <Icon data={icon} size={14} />;
 }

src/components/Table/hoc/withTableSorting/withTableSorting.scss

@@ -5,7 +5,7 @@ $block: '.#{variables.$ns}table';
 #{$block} {
     &__sort {
         display: inline-flex;
-        align-items: baseline;
+        align-items: center;
         gap: var(--g-spacing-1);
         // `top` to avoid redundant height to appear
         vertical-align: top;
@@ -14,6 +14,7 @@ $block: '.#{variables.$ns}table';
         border-radius: var(--g-border-radius-xs);
 
         &-indicator {
+            display: flex;
             flex-shrink: 0;
             color: var(--g-color-text-hint);
         }