fix: TableHeaderCell design fixes (microsoft#25712)

* fix: TableHeaderCell design fixes

- Sort arrow is 12px
- Sort arrow has a xxs top padding for alignment
- Gap between header text and sort icon is xs

* changefile

* revert unnecessary

change/@fluentui-react-table-2aee4734-8599-4e6b-9a20-c53aa74b71b3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: TableHeaderCell design fixes",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx

@@ -6,8 +6,8 @@ import { useTableContext } from '../../contexts/tableContext';
 import { useARIAButtonShorthand } from '@fluentui/react-aria';
 
 const sortIcons = {
-  ascending: <ArrowUpRegular />,
-  descending: <ArrowDownRegular />,
+  ascending: <ArrowUpRegular fontSize={12} />,
+  descending: <ArrowDownRegular fontSize={12} />,
 };
 
 /**

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts

@@ -63,7 +63,7 @@ const useStyles = makeStyles({
     flexGrow: 1,
     height: '100%',
     alignItems: 'center',
-    ...shorthands.gap(tokens.spacingHorizontalS),
+    ...shorthands.gap(tokens.spacingHorizontalXS),
     minHeight: '32px',
     ...shorthands.flex(1, 1, '0px'),
   },
@@ -74,6 +74,7 @@ const useStyles = makeStyles({
   sortIcon: {
     display: 'flex',
     alignItems: 'center',
+    paddingTop: tokens.spacingVerticalXXS,
   },
 });