feat(Table)!: update SortIndicator view

gravity-ui · Dec 22, 2023 · f7146dd · f7146dd
1 parent 84f8c97
commit f7146dd
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 40 deletions.
diff --git a/src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.scss b/src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.scss
@@ -3,11 +3,7 @@
 $block: '.#{variables.$ns}sort-indicator';
 
 #{$block} {
-    &__caret {
-        padding: 1px 0;
-
-        & > svg {
-            display: block;
-        }
+    &__icon {
+        vertical-align: -2px;
     }
 }
diff --git a/src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.tsx b/src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
+import {ArrowDown, ArrowUp} from '@gravity-ui/icons';
+
+import {Icon} from '../../../../Icon';
 import {block} from '../../../../utils/cn';
-import {a11yHiddenSvgProps} from '../../../../utils/svg';
 
 import './SortIndicator.scss';
 
@@ -14,20 +16,7 @@ const b = block('sort-indicator');
 export function SortIndicator({order = 'asc'}: SortIndicatorProps) {
     return (
         <div className={b()}>
-            <div
-                className={b('caret')}
-                style={{transform: order === 'asc' ? 'scale(1, -1)' : undefined}}
-            >
-                <svg
-                    width="6"
-                    height="3"
-                    viewBox="0 0 6 3"
-                    fill="currentColor"
-                    {...a11yHiddenSvgProps}
-                >
-                    <path d="M0.404698 0C0.223319 0 0.102399 0.0887574 0.0419396 0.230769C-0.0386733 0.372781 0.00163315 0.497041 0.122552 0.60355L2.72232 2.89349C2.80293 2.9645 2.88354 3 3.00446 3C3.10523 3 3.20599 2.9645 3.28661 2.89349L5.88637 0.60355C6.00729 0.497041 6.02745 0.372781 5.96699 0.230769C5.88637 0.0887574 5.76545 0 5.60423 0H0.404698Z" />
-                </svg>
-            </div>
+            <Icon data={order === 'asc' ? ArrowUp : ArrowDown} size={14} className={b('icon')} />
         </div>
     );
 }
diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.scss b/src/components/Table/hoc/withTableSorting/withTableSorting.scss
@@ -5,28 +5,27 @@ $block: '.#{variables.$ns}table';
 #{$block} {
     &__sort {
         display: inline-flex;
-        align-items: center;
+        align-items: baseline;
         // `top` to avoid redundant height to appear
         vertical-align: top;
         cursor: pointer;
         user-select: none;
+        border-radius: var(--g-border-radius-xs);
 
         &-spacer {
             width: 5px;
         }
 
         &-indicator {
             color: var(--g-color-text-hint);
-            opacity: 0;
         }
 
         &_active &-indicator {
             color: var(--g-color-text-primary);
-            opacity: 1;
         }
 
-        &:hover &-indicator {
-            opacity: 1;
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
         }
     }
 }
diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import _memoize from 'lodash/memoize';
 
+import {createOnKeyDownHandler} from '../../../../hooks/useActionHandlers/useActionHandlers';
 import {block} from '../../../utils/cn';
 import {getComponentName} from '../../../utils/getComponentName';
 import {Table} from '../../Table';
@@ -147,11 +148,16 @@ export function withTableSorting<I extends TableDataItem, E extends {} = {}>(
                                 content.reverse();
                             }
 
+                            const onClick = this.handleColumnSortClick.bind(this, column);
+                            const onKeyDown = createOnKeyDownHandler(onClick);
+
                             return (
-                                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                                 <div
+                                    role="button"
+                                    tabIndex={0}
                                     className={b('sort', {active: Boolean(sortOrder)})}
-                                    onClick={this.handleColumnSortClick.bind(this, column)}
+                                    onClick={onClick}
+                                    onKeyDown={onKeyDown}
                                 >
                                     {content}
                                 </div>

diff --git a/src/hooks/useActionHandlers/useActionHandlers.ts b/src/hooks/useActionHandlers/useActionHandlers.ts
@@ -11,6 +11,18 @@ export interface UseActionHandlersResult<T> {
     onKeyDown: React.KeyboardEventHandler<T>;
 }
 
+export function createOnKeyDownHandler<T>(callback?: AnyFunction) {
+    return (event: React.KeyboardEvent<T>) => {
+        if (
+            callback &&
+            [KeyCode.ENTER, KeyCode.SPACEBAR, KeyCode.SPACEBAR_OLD].includes(event.key)
+        ) {
+            // eslint-disable-next-line callback-return
+            callback(event);
+        }
+    };
+}
+
 /**
  * Emulates behaviour of system controls, that respond to Enter and Spacebar
  * @param callback
@@ -19,18 +31,7 @@ export interface UseActionHandlersResult<T> {
 export function useActionHandlers<T>(
     callback?: UseActionHandlersProps,
 ): UseActionHandlersResult<T> {
-    const onKeyDown = React.useCallback(
-        (event: React.KeyboardEvent<T>) => {
-            if (
-                callback &&
-                [KeyCode.ENTER, KeyCode.SPACEBAR, KeyCode.SPACEBAR_OLD].includes(event.key)
-            ) {
-                // eslint-disable-next-line callback-return
-                callback(event);
-            }
-        },
-        [callback],
-    );
+    const onKeyDown = React.useMemo(() => createOnKeyDownHandler<T>(callback), [callback]);
 
     return {onKeyDown};
 }