Fix sorting icon position in table

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/moody-pants-sing.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Fix table sorting icon position in Backstage UI.

packages/ui/css/styles.css

@@ -817,6 +817,19 @@
     padding: var(--bui-space-3);
     font-size: var(--bui-font-size-3);
     color: var(--bui-fg-primary);
+
+    &:hover {
+      & .bui-TableHeadSortButton {
+        opacity: 1;
+      }
+    }
+  }
+
+  .bui-TableHeadContent {
+    align-items: center;
+    gap: var(--bui-space-1);
+    flex-direction: row;
+    display: flex;
   }
 
   .bui-TableHeadSortButton {
@@ -824,15 +837,13 @@
     user-select: none;
     align-items: center;
     gap: var(--bui-space-1);
+    opacity: 0;
+    color: var(--bui-fg-secondary);
+    transition: opacity .1s ease-in-out;
     display: inline-flex;
 
-    &:hover svg {
-      opacity: .5;
-    }
-
     & svg {
-      opacity: 0;
-      transition: opacity .1s ease-in-out, transform .1s ease-in-out;
+      transition: transform .1s ease-in-out;
     }
 
     &[data-sort-order="asc"] svg {

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

@@ -169,6 +169,41 @@ export const WithPaginationControlled: Story = {
   },
 };
 
+export const Sorting: Story = {
+  render: () => {
+    return (
+      <Table>
+        <TableHeader>
+          <Column isRowHeader allowsSorting>
+            Name
+          </Column>
+          <Column allowsSorting>Owner</Column>
+          <Column allowsSorting>Type</Column>
+          <Column allowsSorting>Lifecycle</Column>
+        </TableHeader>
+        <TableBody>
+          {data1.map(item => (
+            <Row key={item.name}>
+              <Cell
+                title={item.name}
+                leadingIcon={<RiCactusLine />}
+                description={item.description}
+              />
+              <CellProfileBUI
+                name={item.owner.name}
+                src={item.owner.profilePicture}
+                href={item.owner.link}
+              />
+              <Cell title={item.type} />
+              <Cell title={item.lifecycle} />
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
 export const TableRockBand: Story = {
   render: () => {
     const { data, paginationProps } = useTable({

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

@@ -31,6 +31,19 @@
     padding: var(--bui-space-3);
     font-size: var(--bui-font-size-3);
     color: var(--bui-fg-primary);
+
+    &:hover {
+      .bui-TableHeadSortButton {
+        opacity: 1;
+      }
+    }
+  }
+
+  .bui-TableHeadContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--bui-space-1);
   }
 
   .bui-TableHeadSortButton {
@@ -39,14 +52,12 @@
     display: inline-flex;
     align-items: center;
     gap: var(--bui-space-1);
-
-    &:hover svg {
-      opacity: 0.5;
-    }
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    color: var(--bui-fg-secondary);
 
     & svg {
-      opacity: 0;
-      transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+      transition: transform 0.1s ease-in-out;
     }
 
     &[data-sort-order='asc'] svg {

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

@@ -30,7 +30,7 @@ export const Column = (
   return (
     <ReactAriaColumn className={classNames.head} {...props}>
       {({ allowsSorting, sortDirection }) => (
-        <>
+        <div className={classNames.headContent}>
           {props.children}
           {allowsSorting && (
             <span aria-hidden="true" className={classNames.headSortButton}>
@@ -41,7 +41,7 @@ export const Column = (
               )}
             </span>
           )}
-        </>
+        </div>
       )}
     </ReactAriaColumn>
   );

packages/ui/src/utils/componentDefinitions.ts

@@ -243,6 +243,7 @@ export const componentDefinitions = {
       body: 'bui-TableBody',
       row: 'bui-TableRow',
       head: 'bui-TableHead',
+      headContent: 'bui-TableHeadContent',
       headSortButton: 'bui-TableHeadSortButton',
       caption: 'bui-TableCaption',
       cell: 'bui-TableCell',