feat(Table): styled SortIndicator added

gravity-ui · Sep 17, 2024 · f9ac529 · f9ac529
1 parent ffd60ca
commit f9ac529
Show file tree

Hide file tree

Showing 34 changed files with 195 additions and 37 deletions.
diff --git a/src/components/BaseHeaderCell/BaseHeaderCell.tsx b/src/components/BaseHeaderCell/BaseHeaderCell.tsx
@@ -8,6 +8,7 @@ import {
     getCellStyles,
     getHeaderCellAriaColIndex,
     getHeaderCellClassModes,
+    getKeyDownToggleSortingHandler,
 } from '../../utils';
 import type {BaseResizeHandleProps} from '../BaseResizeHandle';
 import {BaseResizeHandle} from '../BaseResizeHandle';
@@ -24,6 +25,7 @@ export interface BaseHeaderCellProps<TData, TValue> {
     renderResizeHandle?: (props: BaseResizeHandleProps<TData, TValue>) => React.ReactNode;
     renderSortIndicator?: (props: BaseSortIndicatorProps<TData, TValue>) => React.ReactNode;
     resizeHandleClassName?: string;
+    sortClassName?: string;
     sortIndicatorClassName?: string;
     attributes?:
         | React.ThHTMLAttributes<HTMLTableCellElement>
@@ -40,6 +42,7 @@ export const BaseHeaderCell = <TData, TValue>({
     renderResizeHandle,
     renderSortIndicator,
     resizeHandleClassName,
+    sortClassName,
     sortIndicatorClassName,
     attributes: attributesProp,
 }: BaseHeaderCellProps<TData, TValue>) => {
@@ -58,25 +61,35 @@ export const BaseHeaderCell = <TData, TValue>({
             className={b('header-cell', getHeaderCellClassModes(header), className)}
             colSpan={header.colSpan > 1 ? header.colSpan : undefined}
             rowSpan={rowSpan > 1 ? rowSpan : undefined}
-            onClick={header.column.getToggleSortingHandler()}
             aria-sort={getAriaSort(header.column.getIsSorted())}
             aria-colindex={getHeaderCellAriaColIndex(header)}
             {...attributes}
             style={getCellStyles(header, attributes?.style)}
         >
-            {flexRender(header.column.columnDef.header, header.getContext())}{' '}
-            {header.column.getCanSort() &&
-                (renderSortIndicator ? (
-                    renderSortIndicator({
-                        className: b('sort-indicator', sortIndicatorClassName),
-                        header,
-                    })
-                ) : (
-                    <BaseSortIndicator
-                        className={b('sort-indicator', sortIndicatorClassName)}
-                        header={header}
-                    />
-                ))}
+            {header.column.getCanSort() ? (
+                <span
+                    className={b('sort', sortClassName)}
+                    role="button"
+                    tabIndex={0}
+                    onClick={header.column.getToggleSortingHandler()}
+                    onKeyDown={getKeyDownToggleSortingHandler(header)}
+                >
+                    {flexRender(header.column.columnDef.header, header.getContext())}{' '}
+                    {renderSortIndicator ? (
+                        renderSortIndicator({
+                            className: b('sort-indicator', sortIndicatorClassName),
+                            header,
+                        })
+                    ) : (
+                        <BaseSortIndicator
+                            className={b('sort-indicator', sortIndicatorClassName)}
+                            header={header}
+                        />
+                    )}
+                </span>
+            ) : (
+                flexRender(header.column.columnDef.header, header.getContext())
+            )}
             {header.column.getCanResize() &&
                 (renderResizeHandle ? (
                     renderResizeHandle({

diff --git a/src/components/BaseHeaderRow/BaseHeaderRow.tsx b/src/components/BaseHeaderRow/BaseHeaderRow.tsx
@@ -19,6 +19,7 @@ export interface BaseHeaderRowProps<TData, TValue = unknown>
     renderResizeHandle?: (props: BaseResizeHandleProps<TData, TValue>) => React.ReactNode;
     renderSortIndicator: BaseHeaderCellProps<TData, TValue>['renderSortIndicator'];
     resizeHandleClassName?: BaseHeaderCellProps<TData, TValue>['resizeHandleClassName'];
+    sortClassName: BaseHeaderCellProps<TData, TValue>['sortClassName'];
     sortIndicatorClassName: BaseHeaderCellProps<TData, TValue>['sortIndicatorClassName'];
     attributes?:
         | React.HTMLAttributes<HTMLTableRowElement>
@@ -37,6 +38,7 @@ export const BaseHeaderRow = <TData, TValue = unknown>({
     renderResizeHandle,
     renderSortIndicator,
     resizeHandleClassName,
+    sortClassName,
     sortIndicatorClassName,
     attributes: attributesProp,
     cellAttributes,
@@ -68,6 +70,7 @@ export const BaseHeaderRow = <TData, TValue = unknown>({
                         renderResizeHandle={renderResizeHandle}
                         renderSortIndicator={renderSortIndicator}
                         resizeHandleClassName={resizeHandleClassName}
+                        sortClassName={sortClassName}
                         sortIndicatorClassName={sortIndicatorClassName}
                         attributes={cellAttributes}
                     />

diff --git a/src/components/BaseSortIndicator/BaseSortIndicator.scss b/src/components/BaseSortIndicator/BaseSortIndicator.scss
@@ -6,7 +6,6 @@ $blockTable: '.#{variables.$ns}table';
 #{$block} {
     display: inline-flex;
     margin-inline-start: 4px;
-    vertical-align: middle;
     transform: rotate(0);
 
     color: var(--g-color-text-hint);

diff --git a/src/components/BaseTable/BaseTable.scss b/src/components/BaseTable/BaseTable.scss
@@ -41,11 +41,11 @@ $block: '.#{variables.$ns}table';
         font-weight: 500;
     }
 
-    &__header-cell {
-        &_sortable {
-            cursor: pointer;
-            user-select: none;
-        }
+    &__sort {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
     }
 
     &__cell,

diff --git a/src/components/BaseTable/BaseTable.tsx b/src/components/BaseTable/BaseTable.tsx
@@ -91,6 +91,8 @@ export interface BaseTableProps<TData, TScrollElement extends Element | Window =
     rowClassName?: BaseRowProps<TData>['className'];
     /** The row virtualizer instance returned from `useRowVirtualizer` or `useWindowRowVirtualizer` hooks */
     rowVirtualizer?: Virtualizer<TScrollElement, HTMLTableRowElement>;
+    /** CSS classes for the sort content wrapper inside `<th>` elements */
+    sortClassName?: BaseHeaderRowProps<TData>['sortClassName'];
     /** CSS classes for the sort indicator inside `<th>` elements */
     sortIndicatorClassName?: BaseHeaderRowProps<TData>['sortIndicatorClassName'];
     /** Makes the `<tfoot>` element sticky */
@@ -137,6 +139,7 @@ export const BaseTable = React.forwardRef(
             rowAttributes,
             rowClassName,
             rowVirtualizer,
+            sortClassName,
             sortIndicatorClassName,
             stickyFooter = false,
             stickyHeader = false,
@@ -243,6 +246,7 @@ export const BaseTable = React.forwardRef(
                                 renderResizeHandle={renderResizeHandle}
                                 renderSortIndicator={renderSortIndicator}
                                 resizeHandleClassName={resizeHandleClassName}
+                                sortClassName={sortClassName}
                                 sortIndicatorClassName={sortIndicatorClassName}
                                 attributes={headerRowAttributes}
                                 cellAttributes={headerCellAttributes}

diff --git a/src/components/BaseTable/__stories__/stories/DefaultStory.tsx b/src/components/BaseTable/__stories__/stories/DefaultStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

diff --git a/src/components/BaseTable/__stories__/stories/EmptyContentStory.tsx b/src/components/BaseTable/__stories__/stories/EmptyContentStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 
 import {cnEmptyContentStory} from './EmptyContentStory.classname';

diff --git a/src/components/BaseTable/__stories__/stories/GroupingStory.tsx b/src/components/BaseTable/__stories__/stories/GroupingStory.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import type {GroupOrItem} from '../constants/grouping';
 import {columns, data} from '../constants/grouping';
 

diff --git a/src/components/BaseTable/__stories__/stories/GroupingStory2.tsx b/src/components/BaseTable/__stories__/stories/GroupingStory2.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import type {Item} from '../types';
 import {generateData} from '../utils';

diff --git a/src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx b/src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx
@@ -4,7 +4,7 @@ import type {ColumnDef, ExpandedState, Row, RowSelectionState} from '@tanstack/r
 
 import {selectionColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import type {GroupOrItem} from '../constants/grouping';
 import {data, columns as originalColumns} from '../constants/grouping';
 

diff --git a/src/components/BaseTable/__stories__/stories/HeaderGroupsStory.tsx b/src/components/BaseTable/__stories__/stories/HeaderGroupsStory.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {ColumnDef} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns as nestedColumns} from '../constants/columns';
 import {data} from '../constants/data';
 import type {Item} from '../types';

diff --git a/src/components/BaseTable/__stories__/stories/ReorderingStory.tsx b/src/components/BaseTable/__stories__/stories/ReorderingStory.tsx
@@ -4,9 +4,9 @@ import type {ColumnDef} from '@tanstack/react-table';
 
 import {dragHandleColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
 import {ReorderingProvider} from '../../../ReorderingProvider';
 import type {ReorderingProviderProps} from '../../../ReorderingProvider';
+import {BaseTable} from '../../BaseTable';
 import {columns as originalColumns} from '../constants/columns';
 import {data as originalData} from '../constants/data';
 import type {Item} from '../types';

diff --git a/src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx b/src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx
@@ -5,9 +5,9 @@ import type {ColumnDef} from '@tanstack/react-table';
 import {dragHandleColumn} from '../../../../constants';
 import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
 import {getVirtualRowRangeExtractor} from '../../../../utils';
-import {BaseTable} from '../../../BaseTable';
 import {ReorderingProvider} from '../../../ReorderingProvider';
 import type {ReorderingProviderProps} from '../../../ReorderingProvider';
+import {BaseTable} from '../../BaseTable';
 import {columns as originalColumns} from '../constants/columns';
 import type {Item} from '../types';
 import {generateData} from '../utils';

diff --git a/src/components/BaseTable/__stories__/stories/ResizingStory.tsx b/src/components/BaseTable/__stories__/stories/ResizingStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

diff --git a/src/components/BaseTable/__stories__/stories/SortingStory.tsx b/src/components/BaseTable/__stories__/stories/SortingStory.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {SortingState} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

diff --git a/src/components/BaseTable/__stories__/stories/StickyHeaderStory.tsx b/src/components/BaseTable/__stories__/stories/StickyHeaderStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {generateData} from '../utils';
 

diff --git a/src/components/BaseTable/__stories__/stories/TreeStory.tsx b/src/components/BaseTable/__stories__/stories/TreeStory.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns, data} from '../constants/tree';
 
 export const TreeStory = () => {

diff --git a/src/components/BaseTable/__stories__/stories/TreeWithGroupsStory.tsx b/src/components/BaseTable/__stories__/stories/TreeWithGroupsStory.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import type {TreeGroupItem} from '../constants/tree';
 import {groupsColumns, groupsData} from '../constants/tree';
 

diff --git a/src/components/BaseTable/__stories__/stories/VirtualizationStory.tsx b/src/components/BaseTable/__stories__/stories/VirtualizationStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useRowVirtualizer, useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {generateData} from '../utils';
 

diff --git a/src/components/BaseTable/__stories__/stories/WindowVirtualizationStory.tsx b/src/components/BaseTable/__stories__/stories/WindowVirtualizationStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {generateData} from '../utils';
 

diff --git a/src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx b/src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx
@@ -4,7 +4,7 @@ import type {ColumnDef, RowSelectionState} from '@tanstack/react-table';
 
 import {selectionColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns as originalColumns} from '../constants/columns';
 import {data} from '../constants/data';
 import type {Item} from '../types';

diff --git a/src/components/BaseTable/__stories__/stories/WithoutHeaderStory.tsx b/src/components/BaseTable/__stories__/stories/WithoutHeaderStory.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

diff --git a/src/components/SortIndicator/SortIndicator.classname.ts b/src/components/SortIndicator/SortIndicator.classname.ts
@@ -0,0 +1,3 @@
+import {block} from '../../utils';
+
+export const b = block('styled-sort-indicator');
diff --git a/src/components/SortIndicator/SortIndicator.scss b/src/components/SortIndicator/SortIndicator.scss
@@ -0,0 +1,15 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}styled-sort-indicator';
+
+#{$block} {
+    display: inline-flex;
+    padding-block: 1px;
+
+    color: var(--g-color-text-hint);
+
+    &_order_asc,
+    &_order_desc {
+        color: var(--g-color-text-primary);
+    }
+}
diff --git a/src/components/SortIndicator/SortIndicator.tsx b/src/components/SortIndicator/SortIndicator.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import {
+    ArrowDown as ArrowDownIcon,
+    ArrowUpArrowDown as ArrowUpArrowDownIcon,
+    ArrowUp as ArrowUpIcon,
+} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
+
+import type {BaseSortIndicatorProps} from '../BaseSortIndicator';
+
+import {b} from './SortIndicator.classname';
+
+import './SortIndicator.scss';
+
+export interface SortIndicatorProps<TData, TValue> extends BaseSortIndicatorProps<TData, TValue> {}
+
+export const SortIndicator = <TData, TValue>({
+    className,
+    header,
+}: SortIndicatorProps<TData, TValue>) => {
+    const order = header.column.getIsSorted();
+
+    let icon;
+    switch (order) {
+        case 'asc':
+            icon = ArrowUpIcon;
+            break;
+        case 'desc':
+            icon = ArrowDownIcon;
+            break;
+        default:
+            icon = ArrowUpArrowDownIcon;
+    }
+
+    return (
+        <span className={b({order}, className)}>
+            <Icon data={icon} size={16} />
+        </span>
+    );
+};
diff --git a/src/components/SortIndicator/index.ts b/src/components/SortIndicator/index.ts
@@ -0,0 +1 @@
+export * from './SortIndicator';
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -16,6 +16,15 @@ $block: '.#{variables.$ns}styled-table';
         @include mixins.text-subheader-1();
     }
 
+    &__sort {
+        gap: var(--g-spacing-1);
+        border-radius: var(--g-border-radius-xs);
+
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+        }
+    }
+
     &__cell,
     &__header-cell,
     &__footer-cell {