From e6f1b15257d73705b28a7f299ded51e1e4fed29e Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 1 Aug 2023 13:55:47 +0200 Subject: [PATCH 1/2] Revert "fix(react-menu): use outline for menuItem focus ring (#28685)" This reverts commit 9250428d00e7e2909a0e3bae667c6ef0044ea67e. --- .../MenuItem/useMenuItemStyles.styles.ts | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts index 09512b27d8d31c..8e9f4cf3540490 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts +++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts @@ -1,6 +1,6 @@ import { mergeClasses, makeStyles, shorthands } from '@griffel/react'; import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; -import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; import { useCheckmarkStyles_unstable } from '../../selectable/index'; import type { MenuItemCheckboxState } from '../MenuItemCheckbox/index'; @@ -17,18 +17,7 @@ export const menuItemClassNames: SlotClassNames = { }; const useStyles = makeStyles({ - focusIndicator: { - ':focus': { - outlineStyle: 'none', - }, - ':focus-visible': { - outlineStyle: 'none', - }, - ...createCustomFocusIndicatorStyle({ - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), - }), - }, + focusIndicator: createFocusOutlineStyle(), // TODO: this should be extracted to another package root: { ...shorthands.borderRadius(tokens.borderRadiusMedium), From 77bc5d354ff7f6ee90467bcbca52658f7cfaba9a Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 1 Aug 2023 13:56:24 +0200 Subject: [PATCH 2/2] chg --- ...ui-react-menu-93b6b74a-3721-45f9-ab96-6f9be236abf9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-menu-93b6b74a-3721-45f9-ab96-6f9be236abf9.json diff --git a/change/@fluentui-react-menu-93b6b74a-3721-45f9-ab96-6f9be236abf9.json b/change/@fluentui-react-menu-93b6b74a-3721-45f9-ab96-6f9be236abf9.json new file mode 100644 index 00000000000000..d22a3b169222aa --- /dev/null +++ b/change/@fluentui-react-menu-93b6b74a-3721-45f9-ab96-6f9be236abf9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: revert menuItem focus ring back to border", + "packageName": "@fluentui/react-menu", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +}