Fix sortable table header alignment

src/components/Table/Table.browser.test.tsx

@@ -0,0 +1,125 @@
+import {render, screen, within} from '@testing-library/react';
+import {describe, expect, it} from 'vitest';
+import {Table} from 'components/Table/Table';
+import {
+  useTableSortable,
+  type TableSortState,
+} from 'components/Table/plugins/sortable';
+import type {TableColumn, TableColumnAlign} from 'components/Table/types';
+
+type SortState = 'unsorted' | 'ascending' | 'descending' | 'multi-sort';
+
+interface Row extends Record<string, unknown> {
+  amount: number;
+  name: string;
+}
+
+function SortableTable({
+  align,
+  direction,
+  state,
+}: {
+  align: TableColumnAlign | undefined;
+  direction: 'ltr' | 'rtl';
+  state: SortState;
+}): React.JSX.Element {
+  const columns: TableColumn<Row>[] = [
+    {align, header: 'Amount', key: 'amount', sortable: true},
+    {header: 'Name', key: 'name', sortable: true},
+  ];
+  const sort: TableSortState =
+    state === 'unsorted'
+      ? []
+      : state === 'multi-sort'
+        ? [
+            {direction: 'ascending', sortKey: 'amount'},
+            {direction: 'descending', sortKey: 'name'},
+          ]
+        : [{direction: state, sortKey: 'amount'}];
+  const sortPlugin = useTableSortable<Row>({
+    isMultiSortEnabled: true,
+    onSortChange: () => {},
+    sort,
+  });
+
+  return (
+    <div dir={direction} style={{width: 480}}>
+      <Table
+        columns={columns}
+        data={[{amount: 123, name: 'Ada'}]}
+        plugins={{sortPlugin}}
+      />
+    </div>
+  );
+}
+
+describe.each(['ltr', 'rtl'] as const)(
+  'sortable header alignment in %s',
+  direction => {
+    describe.each([undefined, 'start', 'center', 'end'] as const)(
+      'align=%s',
+      align => {
+        it.each(['unsorted', 'ascending', 'descending', 'multi-sort'] as const)(
+          'aligns the label, icon and rank as a group when %s',
+          state => {
+            render(
+              <SortableTable
+                align={align}
+                direction={direction}
+                state={state}
+              />,
+            );
+
+            const button = screen.getByRole('button', {
+              name: /^Sort by Amount/,
+            });
+            const label = within(button)
+              .getByText('Amount')
+              .getBoundingClientRect();
+            const icon = within(button).getByTestId('table-sort-icon-amount');
+            const iconBox = icon.getBoundingClientRect();
+            const boxes = [label, iconBox];
+            if (state === 'multi-sort') {
+              boxes.push(within(button).getByText('1').getBoundingClientRect());
+            }
+            const groupLeft = Math.min(...boxes.map(box => box.left));
+            const groupRight = Math.max(...boxes.map(box => box.right));
+            const buttonBox = button.getBoundingClientRect();
+
+            // Leave enough free space for a misplaced group to be detectable.
+            expect(buttonBox.width - (groupRight - groupLeft)).toBeGreaterThan(
+              100,
+            );
+            const isLeftAligned =
+              (align !== 'end' && direction === 'ltr') ||
+              (align === 'end' && direction === 'rtl');
+            const groupAnchor =
+              align === 'center'
+                ? (groupLeft + groupRight) / 2
+                : isLeftAligned
+                  ? groupLeft
+                  : groupRight;
+            const buttonAnchor =
+              align === 'center'
+                ? (buttonBox.left + buttonBox.right) / 2
+                : isLeftAligned
+                  ? buttonBox.left
+                  : buttonBox.right;
+            expect(Math.abs(groupAnchor - buttonAnchor)).toBeLessThan(1);
+
+            // The icon follows the label in the logical inline direction.
+            const iconGap =
+              direction === 'ltr'
+                ? iconBox.left - label.right
+                : label.left - iconBox.right;
+            expect(iconGap).toBeGreaterThan(0);
+            expect(icon).toHaveAttribute(
+              'data-table-sort-icon-state',
+              state === 'unsorted' ? 'inactive' : 'active',
+            );
+          },
+        );
+      },
+    );
+  },
+);

src/components/Table/Table.stories.tsx

@@ -502,6 +502,40 @@ function SortableStory() {
   );
 }
 
+const alignedSortableColumns: TableColumn<TaskRow>[] = [
+  {align: 'start', header: 'Task (start)', key: 'task', sortable: true},
+  {
+    align: 'center',
+    header: 'Progress (center)',
+    key: 'progress',
+    sortable: true,
+  },
+  {align: 'end', header: 'Budget (end)', key: 'budget', sortable: true},
+];
+
+function SortableAlignmentStory({
+  direction,
+}: {
+  direction: 'ltr' | 'rtl';
+}): React.JSX.Element {
+  const sortable = useTableSortableState<TaskRow, string>({
+    data,
+    defaultSort: [{direction: 'descending', sortKey: 'budget'}],
+    isMultiSortEnabled: true,
+  });
+  const sortPlugin = useTableSortable<TaskRow>(sortable.sortConfig);
+  return (
+    <div dir={direction}>
+      <Table
+        columns={alignedSortableColumns}
+        data={sortable.sortedData}
+        idKey="id"
+        plugins={{sortPlugin}}
+      />
+    </div>
+  );
+}
+
 function SelectionStory() {
   const [selectedKeys, setSelectedKeys] = useState(
     () => new Set<string>(['design']),
@@ -1088,6 +1122,16 @@ export const Sortable: Story = {
   render: () => <SortableStory />,
 };
 
+export const SortableAlignment: Story = {
+  name: 'Sortable / Alignment',
+  render: () => <SortableAlignmentStory direction="ltr" />,
+};
+
+export const SortableAlignmentRTL: Story = {
+  name: 'Sortable / Alignment RTL',
+  render: () => <SortableAlignmentStory direction="rtl" />,
+};
+
 export const Selection: Story = {
   render: () => <SelectionStory />,
 };

src/components/Table/plugins/sortable/useTableSortable.tsx

@@ -8,7 +8,7 @@ import type {
   TableColumn,
   TablePlugin,
 } from 'components/Table/types';
-import {css} from 'styled-system/css';
+import {css, cva} from 'styled-system/css';
 
 export type TableSortDirection = 'ascending' | 'descending';
 
@@ -27,8 +27,8 @@ export interface UseTableSortableConfig<TSortKey extends string = string> {
   sort: TableSortState<TSortKey>;
 }
 
-const styles = {
-  button: css({
+const sortHeaderButtonRecipe = cva({
+  base: {
     display: 'flex',
     alignItems: 'center',
     gap: '1',
@@ -53,7 +53,18 @@ const styles = {
       {
         opacity: 1,
       },
-  }),
+  },
+  variants: {
+    align: {
+      start: {justifyContent: 'start'},
+      center: {justifyContent: 'center'},
+      end: {justifyContent: 'end'},
+    },
+  },
+  defaultVariants: {align: 'start'},
+});
+
+const styles = {
   icon: css({
     display: 'inline-flex',
     flexShrink: 0,
@@ -182,7 +193,7 @@ function SortHeaderButton<T extends Record<string, unknown>>({
   return (
     <button
       aria-label={ariaLabel}
-      className={styles.button}
+      className={sortHeaderButtonRecipe({align: column.align})}
       onClick={handleClick}
       type="button">
       <span className={styles.label}>{children}</span>