From 0b58c989c8a06d2cf78b7fccfb7c90be5bdf27f7 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 25 Nov 2022 18:30:42 +0100 Subject: [PATCH 1/2] fix: Cell actions should have correct background when row focused within The table cell actions should appear when any focus is within the row and not just within the cell actions container. Also apply the hover background colour when the row has focus within. Now when the cell actions overlap the cell content, it will 'cover' the content just like in hover scenarios. --- .../TableCellActions/useTableCellActions.ts | 5 ++--- .../useTableCellActionsStyles.ts | 8 -------- .../src/components/TableRow/useTableRow.ts | 5 +++-- .../components/TableRow/useTableRowStyles.ts | 20 +++++++++++++++++++ .../react-tabster/src/focus/constants.ts | 2 +- 5 files changed, 26 insertions(+), 14 deletions(-) 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 a37db7b444d68..4cd0fc69b2cec 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts +++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts @@ -1,6 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'; -import { useFocusWithin } from '@fluentui/react-tabster'; +import { getNativeElementProps } from '@fluentui/react-utilities'; import type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types'; /** @@ -21,7 +20,7 @@ export const useTableCellActions_unstable = ( root: 'div', }, root: getNativeElementProps('div', { - ref: useMergedRefs(ref, useFocusWithin()), + ref, ...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 7f194415f6077..ad6377c4483b3 100644 --- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts +++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts @@ -1,7 +1,6 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; export const tableCellActionsClassNames: SlotClassNames = { root: 'fui-TableCellActions', @@ -18,13 +17,6 @@ const useStyles = makeStyles({ transform: 'translateY(-50%)', opacity: 0, marginLeft: 'auto', - - ...createCustomFocusIndicatorStyle( - { - opacity: 1, - }, - { selector: 'focus-within' }, - ), }, visible: { diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts index 35ffa820aecd5..2707d66c523ee 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'; import type { TableRowProps, TableRowState } from './TableRow.types'; import { useTableContext } from '../../contexts/tableContext'; -import { useFocusVisible } from '@fluentui/react-tabster'; +import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster'; /** * Create the state required to render TableRow. @@ -17,13 +17,14 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref Date: Fri, 25 Nov 2022 18:33:42 +0100 Subject: [PATCH 2/2] changefiles --- ...i-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json | 7 +++++++ ...react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json create mode 100644 change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json diff --git a/change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json b/change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json new file mode 100644 index 0000000000000..4af0cf8c8459c --- /dev/null +++ b/change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: Cell actions should have correct background when row focused within", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json b/change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json new file mode 100644 index 0000000000000..d0fd5d3750836 --- /dev/null +++ b/change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: focus-within attribute no longer the same as focus-visible", + "packageName": "@fluentui/react-tabster", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +}