diff --git a/change/@fluentui-react-nav-preview-e527160e-a839-4161-ac09-6370599fbe0f.json b/change/@fluentui-react-nav-preview-e527160e-a839-4161-ac09-6370599fbe0f.json new file mode 100644 index 0000000000000..f5c617d109561 --- /dev/null +++ b/change/@fluentui-react-nav-preview-e527160e-a839-4161-ac09-6370599fbe0f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: SubNavItems secondary actions revealed on hover", + "packageName": "@fluentui/react-nav-preview", + "email": "matejera@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts index 8faf6d435386c..52ada06bfa5f9 100644 --- a/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts +++ b/packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts @@ -34,6 +34,19 @@ const useSplitNaveItemStyles = makeStyles({ backgroundColor: navItemTokens.backgroundColor, ...navItemTokens.transitionTokens, + ':focus-within': { + opacity: '1', + }, + ':hover .fui-SplitNavItem__toggleButton': { + opacity: '1', + }, + ':hover .fui-SplitNavItem__menuButton': { + opacity: '1', + }, + ':hover .fui-SplitNavItem__menuButtonTooltip': { + opacity: '1', + }, + ':hover': { backgroundColor: navItemTokens.backgroundColorHover, }, @@ -58,6 +71,10 @@ const useSplitNaveItemStyles = makeStyles({ paddingInlineStart: '5px', paddingBlockStart: '5px', alignItems: 'start', + opacity: '0', + ':focus': { + opacity: '1', + }, }, baseMedium: { paddingBlockStart: '9px',