From 483bc3da2d0e2c5673b020fbd5140f698a7b819f Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 16 Sep 2022 10:36:31 +0200 Subject: [PATCH 1/3] feat: Adds `visible` prop to `TableCellActions` Adds a `visible` prop to `TableCellActions` to make it easier for users to keep the actions visible instead of manually adding a css classname. --- .../src/stories/Table.stories.tsx | 43 +++++++++++++++++++ .../TableCellActions.types.ts | 11 ++++- .../TableCellActions/useTableCellActions.ts | 1 + .../useTableCellActionsStyles.ts | 13 ++++-- .../components/TableRow/useTableRowStyles.ts | 2 + 5 files changed, 65 insertions(+), 5 deletions(-) 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..d59978d23a2f85 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) ), { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, + ) + .addStory( + 'always visible', + () => ( + + + + {columns.map(column => ( + {column.label} + ))} + + + + {items.map(item => ( + + + + {item.file.label} + +
+ ), + { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, ); storiesOf('Table', module) diff --git a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts index 66a8611567bf8e..7523f628c2d2d4 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts +++ b/packages/react-components/react-table/src/components/TableCellActions/TableCellActions.types.ts @@ -7,9 +7,16 @@ export type TableCellActionsSlots = { /** * TableCellActions Props */ -export type TableCellActionsProps = ComponentProps & {}; +export type TableCellActionsProps = ComponentProps & { + /** + * 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; +export type TableCellActionsState = ComponentState & + Pick, 'visible'>; diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts index edad8db4e0a576..a37db7b444d68c 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts +++ b/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, }; }; diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts index c4e77441cb50bb..7f194415f60771 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts +++ b/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,6 +26,10 @@ const useStyles = makeStyles({ { selector: 'focus-within' }, ), }, + + visible: { + opacity: 1, + }, }); /** @@ -35,7 +37,12 @@ const useStyles = makeStyles({ */ 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; }; diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts index 8ddf4e50a82d3b..bc46615dfb0ff9 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts +++ b/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, }, }, From c6263525cd28e835ba554c13551bc75fe17b3e21 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 16 Sep 2022 10:38:49 +0200 Subject: [PATCH 2/3] changefile --- ...i-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json diff --git a/change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json b/change/@fluentui-react-table-d3a482b6-52de-46b3-9dee-14bff160bbe6.json new file mode 100644 index 00000000000000..72b1ee6c5f24e5 --- /dev/null +++ b/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": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} From b25e7170dd1e0b0df08ec013b181e3672040f653 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 16 Sep 2022 11:12:57 +0200 Subject: [PATCH 3/3] update md --- .../react-components/react-table/etc/react-table.api.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index a049e92436d115..32023ee3e96a1b 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -99,7 +99,9 @@ export const TableCellActions: ForwardRefComponent; export const tableCellActionsClassNames: SlotClassNames; // @public -export type TableCellActionsProps = ComponentProps & {}; +export type TableCellActionsProps = ComponentProps & { + visible?: boolean; +}; // @public (undocumented) export type TableCellActionsSlots = { @@ -107,7 +109,7 @@ export type TableCellActionsSlots = { }; // @public -export type TableCellActionsState = ComponentState; +export type TableCellActionsState = ComponentState & Pick, 'visible'>; // @public (undocumented) export const tableCellClassName = "fui-TableCell";