243 lines
8.3 KiB
JavaScript
243 lines
8.3 KiB
JavaScript
'use client';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { mergeClasses, makeStyles } from '@griffel/react';
|
|
import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
|
|
export const compoundButtonClassNames = {
|
|
root: 'fui-CompoundButton',
|
|
icon: 'fui-CompoundButton__icon',
|
|
contentContainer: 'fui-CompoundButton__contentContainer',
|
|
secondaryContent: 'fui-CompoundButton__secondaryContent'
|
|
};
|
|
const useRootStyles = makeStyles({
|
|
// Base styles
|
|
base: {
|
|
height: 'auto',
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2
|
|
},
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2Hover
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2Pressed
|
|
}
|
|
}
|
|
},
|
|
// High contrast styles
|
|
highContrast: {
|
|
'@media (forced-colors: active)': {
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'Highlight'
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'Highlight'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// Appearance variations
|
|
outline: {
|
|
},
|
|
primary: {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForegroundOnBrand
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForegroundOnBrand
|
|
}
|
|
},
|
|
'@media (forced-colors: active)': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'HighlightText'
|
|
}
|
|
}
|
|
},
|
|
secondary: {
|
|
},
|
|
subtle: {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2
|
|
},
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2Hover
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2Pressed
|
|
}
|
|
},
|
|
'@media (forced-colors: active)': {
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'Canvas'
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'Canvas'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
transparent: {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2
|
|
},
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2BrandHover
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForeground2BrandPressed
|
|
}
|
|
}
|
|
},
|
|
// Size variations
|
|
small: {
|
|
padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,
|
|
fontSize: tokens.fontSizeBase300,
|
|
lineHeight: tokens.lineHeightBase300
|
|
},
|
|
medium: {
|
|
padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,
|
|
fontSize: tokens.fontSizeBase300,
|
|
lineHeight: tokens.lineHeightBase300
|
|
},
|
|
large: {
|
|
padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,
|
|
fontSize: tokens.fontSizeBase400,
|
|
lineHeight: tokens.lineHeightBase400
|
|
},
|
|
// Disabled styles
|
|
disabled: {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForegroundDisabled
|
|
},
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForegroundDisabled
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: tokens.colorNeutralForegroundDisabled
|
|
}
|
|
}
|
|
},
|
|
// Disabled high contrast styles
|
|
disabledHighContrast: {
|
|
'@media (forced-colors: active)': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'GrayText'
|
|
},
|
|
':hover': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'GrayText'
|
|
}
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
|
color: 'GrayText'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const useRootIconOnlyStyles = makeStyles({
|
|
// Size variations
|
|
small: {
|
|
padding: tokens.spacingHorizontalXS,
|
|
maxWidth: '48px',
|
|
minWidth: '48px'
|
|
},
|
|
medium: {
|
|
padding: tokens.spacingHorizontalSNudge,
|
|
maxWidth: '52px',
|
|
minWidth: '52px'
|
|
},
|
|
large: {
|
|
padding: tokens.spacingHorizontalS,
|
|
maxWidth: '56px',
|
|
minWidth: '56px'
|
|
}
|
|
});
|
|
const useIconStyles = makeStyles({
|
|
// Base styles
|
|
base: {
|
|
fontSize: '40px',
|
|
height: '40px',
|
|
width: '40px'
|
|
},
|
|
// Icon position variations
|
|
before: {
|
|
marginRight: tokens.spacingHorizontalM
|
|
},
|
|
after: {
|
|
marginLeft: tokens.spacingHorizontalM
|
|
}
|
|
});
|
|
const useContentContainerStyles = makeStyles({
|
|
// Base styles
|
|
base: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
textAlign: 'left'
|
|
}
|
|
});
|
|
const useSecondaryContentStyles = makeStyles({
|
|
// Base styles
|
|
base: {
|
|
lineHeight: '100%',
|
|
fontWeight: tokens.fontWeightRegular
|
|
},
|
|
// Size variations
|
|
small: {
|
|
fontSize: tokens.fontSizeBase200
|
|
},
|
|
medium: {
|
|
fontSize: tokens.fontSizeBase200
|
|
},
|
|
large: {
|
|
fontSize: tokens.fontSizeBase300
|
|
}
|
|
});
|
|
export const useCompoundButtonStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const rootStyles = useRootStyles();
|
|
const rootIconOnlyStyles = useRootIconOnlyStyles();
|
|
const iconStyles = useIconStyles();
|
|
const contentContainerStyles = useContentContainerStyles();
|
|
const secondaryContentStyles = useSecondaryContentStyles();
|
|
const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
|
|
state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles
|
|
rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
|
|
(disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
|
|
iconOnly && rootIconOnlyStyles[size], // User provided class name
|
|
state.root.className);
|
|
state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
|
|
if (state.icon) {
|
|
state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
|
|
}
|
|
if (state.secondaryContent) {
|
|
state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
|
|
}
|
|
useButtonStyles_unstable(state);
|
|
return state;
|
|
};
|