feat: Adds visible prop to TableCellActions

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(
+    'always visible',
+    () => (
+      <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">
+              <TableCell>
+                <TableCellLayout media={item.file.icon}>
+                  {item.file.label}
+                  <TableCellActions visible>
+                    <Button icon={<EditRegular />} appearance="subtle" />
+                    <Button icon={<MoreHorizontalRegular />} appearance="subtle" />
+                  </TableCellActions>
+                </TableCellLayout>
+              </TableCell>
+              <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)

change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Adds `visible` prop to `TableCellActions`",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/etc/react-table.api.md

@@ -99,15 +99,17 @@ export const TableCellActions: ForwardRefComponent<TableCellActionsProps>;
 export const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots>;
 
 // @public
-export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {};
+export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
+    visible?: boolean;
+};
 
 // @public (undocumented)
 export type TableCellActionsSlots = {
     root: Slot<'div'>;
 };
 
 // @public
-export type TableCellActionsState = ComponentState<TableCellActionsSlots>;
+export type TableCellActionsState = ComponentState<TableCellActionsSlots> & Pick<Required<TableCellActionsProps>, 'visible'>;
 
 // @public (undocumented)
 export const tableCellClassName = "fui-TableCell";

packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts

@@ -7,9 +7,16 @@ export type TableCellActionsSlots = {
 /**
  * TableCellActions Props
  */
-export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {};
+export type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {
+  /**
+   * When true, the actions are always visible regardless of row hover.
+   * Can be useful keeping the actions visible when a popout surface is opened.
+   */
+  visible?: boolean;
+};
 
 /**
  * State used in rendering TableCellActions
  */
-export type TableCellActionsState = ComponentState<TableCellActionsSlots>;
+export type TableCellActionsState = ComponentState<TableCellActionsSlots> &
+  Pick<Required<TableCellActionsProps>, 'visible'>;

packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts

@@ -24,5 +24,6 @@ export const useTableCellActions_unstable = (
       ref: useMergedRefs(ref, useFocusWithin()),
       ...props,
     }),
+    visible: props.visible ?? false,
   };
 };

packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts

@@ -1,5 +1,4 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
 import type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
@@ -19,7 +18,6 @@ const useStyles = makeStyles({
     transform: 'translateY(-50%)',
     opacity: 0,
     marginLeft: 'auto',
-    backgroundColor: tokens.colorNeutralBackground1Hover,
 
     ...createCustomFocusIndicatorStyle(
       {
@@ -28,14 +26,23 @@ const useStyles = makeStyles({
       { selector: 'focus-within' },
     ),
   },
+
+  visible: {
+    opacity: 1,
+  },
 });
 
 /**
  * Apply styling to the TableCellActions slots based on the state
  */
 export const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    tableCellActionsClassNames.root,
+    styles.root,
+    state.visible && styles.visible,
+    state.root.className,
+  );
 
   return state;
 };

packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts

@@ -18,7 +18,9 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForeground1,
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover,
       [`& .${tableCellActionsClassNames.root}`]: {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
         opacity: 1,
       },
     },