100 lines
4.1 KiB
JavaScript
100 lines
4.1 KiB
JavaScript
'use client';
|
|
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { motionTokens } from '@fluentui/react-motion';
|
|
import { navItemTokens, useRootDefaultClassName } from '../sharedNavStyles.styles';
|
|
export const splitNavItemClassNames = {
|
|
root: 'fui-SplitNavItem',
|
|
navItem: 'fui-SplitNavItem__navItem',
|
|
actionButton: 'fui-SplitNavItem__actionButton',
|
|
toggleButton: 'fui-SplitNavItem__toggleButton',
|
|
menuButton: 'fui-SplitNavItem__menuButton',
|
|
/**
|
|
* Tooltips don't have a class name prop, so this is just to satisfy the linter.
|
|
*/ actionButtonTooltip: 'fui-SplitNavItem__actionButtonTooltip',
|
|
toggleButtonTooltip: 'fui-SplitNavItem__toggleButtonTooltip',
|
|
menuButtonTooltip: 'fui-SplitNavItem__menuButtonTooltip'
|
|
};
|
|
// Don't use makeResetStyles here because the sub components call it once and
|
|
// This links says that makeResetStyles should only be called once per element
|
|
// https://griffel.js.org/react/api/make-reset-styles/#limitations
|
|
const { actionButton, toggleButton, menuButton } = splitNavItemClassNames;
|
|
const buttonHoverStyles = {
|
|
[`& .${actionButton}, & .${toggleButton}, & .${menuButton}`]: {
|
|
opacity: 1,
|
|
pointerEvents: 'auto'
|
|
}
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/ const useSplitNaveItemStyles = makeStyles({
|
|
baseRoot: {
|
|
display: 'flex',
|
|
gap: 'unset',
|
|
alignItems: 'stretch',
|
|
padding: 'unset',
|
|
textAlign: 'unset',
|
|
backgroundColor: navItemTokens.backgroundColor,
|
|
...navItemTokens.transitionTokens,
|
|
':hover': {
|
|
backgroundColor: navItemTokens.backgroundColorHover,
|
|
...buttonHoverStyles
|
|
},
|
|
':focus-within': buttonHoverStyles,
|
|
':active': {
|
|
backgroundColor: navItemTokens.backgroundColorPressed
|
|
}
|
|
},
|
|
baseNavItem: {
|
|
// styles that we want to disagree with the default on
|
|
display: 'flex',
|
|
textTransform: 'none',
|
|
alignSelf: 'stretch',
|
|
textAlign: 'left',
|
|
position: 'relative',
|
|
justifyContent: 'start',
|
|
gap: tokens.spacingVerticalL,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
baseSecondary: {
|
|
minWidth: '28px',
|
|
paddingInlineEnd: '12px',
|
|
paddingInlineStart: '5px',
|
|
paddingBlockStart: '5px',
|
|
alignItems: 'start'
|
|
},
|
|
baseMedium: {
|
|
paddingBlockStart: '9px'
|
|
},
|
|
baseLarge: {
|
|
paddingBlockStart: '12px'
|
|
},
|
|
hoverAction: {
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
transition: `opacity ${motionTokens.durationFast}ms ${motionTokens.curveEasyEase}`,
|
|
willChange: 'opacity'
|
|
}
|
|
});
|
|
/**
|
|
* Apply styling to the SplitNavItem slots based on the state
|
|
*/ export const useSplitNavItemStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const splitNavItemStyles = useSplitNaveItemStyles();
|
|
const sharedRootClassNames = useRootDefaultClassName();
|
|
state.root.className = mergeClasses(splitNavItemClassNames.root, sharedRootClassNames, splitNavItemStyles.baseRoot, state.root.className);
|
|
if (state.navItem) {
|
|
state.navItem.className = mergeClasses(splitNavItemClassNames.navItem, splitNavItemStyles.baseNavItem, state.navItem.className);
|
|
}
|
|
if (state.actionButton) {
|
|
state.actionButton.className = mergeClasses(splitNavItemClassNames.actionButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.actionButton.className);
|
|
}
|
|
if (state.toggleButton) {
|
|
state.toggleButton.className = mergeClasses(splitNavItemClassNames.toggleButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.toggleButton.className);
|
|
}
|
|
if (state.menuButton) {
|
|
state.menuButton.className = mergeClasses(splitNavItemClassNames.menuButton, splitNavItemStyles.baseSecondary, splitNavItemStyles.hoverAction, state.density === 'medium' && splitNavItemStyles.baseMedium, state.menuButton.className);
|
|
}
|
|
return state;
|
|
};
|