115 lines
3.6 KiB
JavaScript
115 lines
3.6 KiB
JavaScript
'use client';
|
|
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
/**
|
|
* Static CSS class names used internally for the component slots.
|
|
*/ export const breadcrumbButtonClassNames = {
|
|
root: 'fui-BreadcrumbButton',
|
|
icon: 'fui-BreadcrumbButton__icon'
|
|
};
|
|
/**
|
|
* CSS variable names used internally for styling in the Breadcrumb.
|
|
*/ const breadcrumbCSSVars = {
|
|
breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',
|
|
breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height'
|
|
};
|
|
const useIconStyles = makeStyles({
|
|
base: {
|
|
fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
|
|
height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
|
|
lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`,
|
|
width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
|
|
marginRight: tokens.spacingHorizontalXS
|
|
},
|
|
small: {
|
|
[breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px',
|
|
[breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase200
|
|
},
|
|
medium: {
|
|
[breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px',
|
|
[breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase400
|
|
},
|
|
large: {
|
|
[breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px',
|
|
[breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase600
|
|
}
|
|
});
|
|
const defaultButtonStyles = {
|
|
backgroundColor: tokens.colorTransparentBackground,
|
|
color: tokens.colorNeutralForeground2,
|
|
cursor: 'auto'
|
|
};
|
|
const currentIconStyles = {
|
|
...defaultButtonStyles,
|
|
[`& .${buttonClassNames.icon}`]: {
|
|
color: 'unset'
|
|
},
|
|
[`& .${iconFilledClassName}`]: {
|
|
display: 'none'
|
|
},
|
|
[`& .${iconRegularClassName}`]: {
|
|
display: 'inline'
|
|
}
|
|
};
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
minWidth: 'unset',
|
|
textWrap: 'nowrap'
|
|
},
|
|
small: {
|
|
height: '24px',
|
|
...typographyStyles.caption1,
|
|
padding: tokens.spacingHorizontalSNudge
|
|
},
|
|
medium: {
|
|
height: '32px',
|
|
...typographyStyles.body1,
|
|
padding: tokens.spacingHorizontalSNudge
|
|
},
|
|
large: {
|
|
height: '40px',
|
|
...typographyStyles.body2,
|
|
padding: tokens.spacingHorizontalS
|
|
},
|
|
current: {
|
|
':hover': {
|
|
...currentIconStyles
|
|
},
|
|
':hover:active': {
|
|
...currentIconStyles
|
|
},
|
|
':disabled': {
|
|
...currentIconStyles
|
|
}
|
|
},
|
|
currentSmall: {
|
|
...typographyStyles.caption1Strong
|
|
},
|
|
currentMedium: {
|
|
...typographyStyles.body1Strong
|
|
},
|
|
currentLarge: {
|
|
...typographyStyles.subtitle2
|
|
}
|
|
});
|
|
/**
|
|
* Apply styling to the BreadcrumbButton slots based on the state
|
|
*/ export const useBreadcrumbButtonStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const styles = useStyles();
|
|
const iconStyles = useIconStyles();
|
|
const currentSizeMap = {
|
|
small: styles.currentSmall,
|
|
medium: styles.currentMedium,
|
|
large: styles.currentLarge
|
|
};
|
|
state.root.className = mergeClasses(breadcrumbButtonClassNames.root, styles[state.size], styles.root, state.current && currentSizeMap[state.size], state.current && styles.current, state.root.className);
|
|
if (state.icon) {
|
|
state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
|
|
}
|
|
useButtonStyles_unstable(state);
|
|
return state;
|
|
};
|