steroids/dev#771 Bug: GridColumn.sortable отсутсвуют иконки

src/icons/index.ts

@@ -17,6 +17,8 @@ export default (customIcons: Record<string, any>) => {
         'arrow_right_24x24',
         'arrow_up_18x18',
         'arrow_up_24x24',
+        'long-arrow-alt-down',
+        'long-arrow-alt-up',
         'blank',
         'calendar_check',
         'chart',

src/list/Grid/GridView.scss

@@ -6,6 +6,9 @@
 
     --grid-td-background-color: #FFFFFF;
     --grid-td-alternating-color: var(--additional-light-gray);
+
+    --sort-button-color: var(--graphite);
+    --sort-button-color-active: var(--graphite-dark);
 }
 
 html[data-theme="dark"] {
@@ -14,6 +17,10 @@ html[data-theme="dark"] {
 
     --grid-td-background-color: var(--graphite);
     --grid-td-alternating-color: var(--graphite-dark);
+
+
+    --sort-button-color: var(--secondary-dark);
+    --sort-button-color-active: var(--secondary);
 }
 
 $grid-header-background-color: var(--grid-header-background-color);
@@ -97,6 +104,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 24px 16px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 24px 30px 24px 16px;
+                }
+            }
         }
 
         &_md {
@@ -109,6 +123,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 21px 12px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 21px 30px 21px 12px;
+                }
+            }
         }
 
         &_sm {
@@ -121,6 +142,13 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             td:not(#{$root}__column_isDiagram) {
                 padding: 16px 8px;
             }
+
+            &:has(#{$root}__sort-buttons) {
+                th {
+                    position: relative;
+                    padding: 16px 30px 16px 8px;
+                }
+            }
         }
     }
 
@@ -171,4 +199,22 @@ $grid-td-alternating-color: var(--grid-td-alternating-color);
             width: 100%;
         }
     }
+
+    &__sort-buttons {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    &__sort-button {
+        path {
+            stroke: var(--sort-button-color);
+        }
+        &_is-active {
+            path {
+                stroke: var(--sort-button-color-active);
+                stroke-width: 2px;
+            }
+        }
+    }
 }

src/list/Grid/GridView.tsx

@@ -44,7 +44,7 @@ export default function GridView(props: IGridViewProps) {
 
     const renderSortButton = useCallback((attribute, direction) => {
         const sortKey = (direction === 'desc' ? '-' : '') + attribute;
-        const isActive = [].concat(props.list?.sort || []).includes(sortKey);
+        const isActive = [].concat(props?.sort || []).includes(sortKey);
         return (
             <Button
                 icon={direction === 'asc' ? 'long-arrow-alt-up' : 'long-arrow-alt-down'}
@@ -87,7 +87,7 @@ export default function GridView(props: IGridViewProps) {
                             >
                                 {column.label}
                                 {column.sortable && column.attribute && (
-                                    <span>
+                                    <span className={bem.element('sort-buttons')}>
                                         {column.label && <span>&nbsp;</span>}
                                         {renderSortButton(column.attribute, 'asc')}
                                         {renderSortButton(column.attribute, 'desc')}