fix(ui): show active sorting indicator in Table component

The Table component wasn't showing a visual indicator when a column
was actively sorted. The sort button was only visible on hover.

This fix uses React Aria's `data-sort-direction` attribute to keep
the indicator visible when sorting is active, and rotates the arrow
icon via CSS for descending order.

Affected components: Table, Column

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/eight-aliens-warn.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Table sorting indicator not being visible when a column is actively sorted.
+
+Affected components: Table, Column

packages/ui/src/components/Table/Table.module.css

@@ -39,12 +39,6 @@
     padding: var(--bui-space-3);
     font-size: var(--bui-font-size-3);
     color: var(--bui-fg-primary);
-
-    &:hover {
-      .bui-TableHeadSortButton {
-        opacity: 1;
-      }
-    }
   }
 
   .bui-TableHeadSelection {
@@ -68,17 +62,16 @@
     transition: opacity 0.1s ease-in-out;
     color: var(--bui-fg-secondary);
 
+    .bui-TableHead:hover &,
+    [data-sort-direction='ascending'] &,
+    [data-sort-direction='descending'] & {
+      opacity: 1;
+    }
+
     & svg {
       transition: transform 0.1s ease-in-out;
     }
-
-    &[data-sort-order='asc'] svg {
-      opacity: 1;
-      transform: rotate(0);
-    }
-
-    &[data-sort-order='desc'] svg {
-      opacity: 1;
+    [data-sort-direction='descending'] & svg {
       transform: rotate(180deg);
     }
   }

packages/ui/src/components/Table/components/Column.tsx

@@ -20,7 +20,7 @@ import { TableDefinition } from '../definition';
 import styles from '../Table.module.css';
 import clsx from 'clsx';
 import { ColumnProps } from '../types';
-import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
+import { RiArrowUpLine } from '@remixicon/react';
 
 /** @public */
 export const Column = (props: ColumnProps) => {
@@ -32,7 +32,7 @@ export const Column = (props: ColumnProps) => {
       className={clsx(classNames.head, styles[classNames.head], className)}
       {...rest}
     >
-      {({ allowsSorting, sortDirection }) => (
+      {({ allowsSorting }) => (
         <div
           className={clsx(
             classNames.headContent,
@@ -48,11 +48,7 @@ export const Column = (props: ColumnProps) => {
                 styles[classNames.headSortButton],
               )}
             >
-              {sortDirection === 'descending' ? (
-                <RiArrowDownLine size={16} />
-              ) : (
-                <RiArrowUpLine size={16} />
-              )}
+              <RiArrowUpLine size={16} />
             </span>
           )}
         </div>