From 6b2f5dde8068477a29f5fd65e5f119f998ce89ca Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Fri, 16 Sep 2022 09:32:31 +0200
Subject: [PATCH 1/2] fix: `TableCellActions` displays correctly inside
 `TableHeaderCell`

The button slot in `TableHeaderCell` did not have `position: relative`
so the absolute positioning of the actions made them appear incorrectly
when placed within a header cell
---
 .../src/stories/Table.stories.tsx             | 45 ++++++++++++++++++-
 .../useTableHeaderCellStyles.ts               |  1 +
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
index 77f34c603f4d48..ada66334395afe 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -118,6 +118,49 @@ storiesOf('Table - cell actions', module)
       </Table>
     ),
     { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
+  )
+  .addStory(
+    'in header cell',
+    () => (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map(column => (
+              <TableHeaderCell key={column.columnKey}>{column.label}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map(item => (
+            <TableRow key={item.file.label} className="row">
+              <TableHeaderCell>
+                <TableCellLayout media={item.file.icon}>
+                  {item.file.label}
+                  <TableCellActions>
+                    <Button icon={<EditRegular />} appearance="subtle" />
+                    <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                  </TableCellActions>
+                </TableCellLayout>
+              </TableHeaderCell>
+              <TableCell>
+                <TableCellLayout
+                  media={
+                    <Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />
+                  }
+                >
+                  {item.author.label}
+                </TableCellLayout>
+              </TableCell>
+              <TableCell>{item.lastUpdated.label}</TableCell>
+              <TableCell>
+                <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    ),
+    { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
   );
 
 storiesOf('Table', module)
@@ -247,7 +290,7 @@ storiesOf('Table', module)
         {items.map(item => (
           <TableRow key={item.file.label}>
             <TableCell>
-              <TableCellLayout media={item.file.icon} description="Your organization">
+              <TableCellLayout media={item.file.icon} description="Your organization" appearance="primary">
                 {item.file.label}
               </TableCellLayout>
             </TableCell>
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
index 5bd080863990df..fd11a8a146a996 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
@@ -35,6 +35,7 @@ const useStyles = makeStyles({
     textAlign: 'unset',
   },
   button: {
+    position: 'relative',
     width: '100%',
     display: 'flex',
     flexGrow: 1,

From a606985246c2e9c896efdbc94e5023c6178a7e8e Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Fri, 16 Sep 2022 09:34:19 +0200
Subject: [PATCH 2/2] changeifle

---
 ...i-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json

diff --git a/change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json b/change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json
new file mode 100644
index 00000000000000..b3ab6571b56238
--- /dev/null
+++ b/change/@fluentui-react-table-bc9b996e-76bf-44d5-b7a4-0f716a7a6276.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: `TableCellActions` displays correctly inside `TableHeaderCell`",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}