chore<Table>: Header layout (#1685)

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);
         }