fix(react-nav): Inset focus outlines to fix focus borders being cut off. (#34603)

Author: emmayjiang

change/@fluentui-react-nav-preview-386d75e9-e200-487e-8d69-03ff4dc5ffe4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-nav): Inset focus outlines to fix focus borders being cut off",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts

@@ -20,7 +20,6 @@ export const useAppItemStyles = makeStyles({
     gap: '10px',
     marginInlineStart: '-6px',
     marginInlineEnd: '0px',
-    marginTop: '2px',
     padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,
     ...typographyStyles.subtitle2,
   },

packages/react-components/react-nav-preview/library/src/components/NavDrawerHeader/useNavDrawerHeaderStyles.styles.ts

@@ -4,8 +4,6 @@ import { useDrawerHeaderStyles_unstable } from '@fluentui/react-drawer';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { NavDrawerHeaderSlots, NavDrawerHeaderState } from './NavDrawerHeader.types';
 
-import { navDrawerBodyClassNames } from '../NavDrawerBody/useNavDrawerBodyStyles.styles';
-
 export const navDrawerHeaderClassNames: SlotClassNames<NavDrawerHeaderSlots> = {
   root: 'fui-NavDrawerHeader',
 };
@@ -19,10 +17,6 @@ const useStyles = makeStyles({
     paddingInlineStart: '14px',
     paddingBlock: '5px',
   },
-
-  [`${navDrawerBodyClassNames.root} + ${navDrawerHeaderClassNames.root}`]: {
-    marginTop: '-2px',
-  },
 });
 
 /**

packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts

@@ -56,12 +56,11 @@ export const useRootDefaultClassName = makeResetStyles({
   ':hover': {
     backgroundColor: navItemTokens.backgroundColorHover,
   },
-  ':active': {
-    zIndex: 1,
-    backgroundColor: navItemTokens.backgroundColorPressed,
-  },
-  ':focus': {
-    zIndex: 1,
+
+  // Use custom insert focus indicator
+  '&:focus-visible': {
+    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,
   },
 });