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" +} 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),