100 lines
3.9 KiB
JavaScript
100 lines
3.9 KiB
JavaScript
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
/**
|
|
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
*/ export const infoButtonClassNames = {
|
|
root: 'fui-InfoButton',
|
|
// this className won't be used, but it's needed to satisfy the type checker
|
|
popover: 'fui-InfoButton__popover',
|
|
info: 'fui-InfoButton__info'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*
|
|
* @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
|
|
*/ const useButtonStyles = makeStyles({
|
|
base: {
|
|
alignItems: 'center',
|
|
boxSizing: 'border-box',
|
|
display: 'inline-flex',
|
|
justifyContent: 'center',
|
|
textDecorationLine: 'none',
|
|
verticalAlign: 'middle',
|
|
position: 'relative',
|
|
backgroundColor: tokens.colorTransparentBackground,
|
|
color: tokens.colorNeutralForeground2,
|
|
...shorthands.borderStyle('none'),
|
|
...shorthands.borderRadius(tokens.borderRadiusMedium),
|
|
...shorthands.margin(0),
|
|
...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
|
|
[`& .${iconFilledClassName}`]: {
|
|
display: 'none'
|
|
},
|
|
[`& .${iconRegularClassName}`]: {
|
|
display: 'inline-flex'
|
|
},
|
|
':hover': {
|
|
backgroundColor: tokens.colorTransparentBackgroundHover,
|
|
color: tokens.colorNeutralForeground2BrandHover,
|
|
cursor: 'pointer',
|
|
[`& .${iconFilledClassName}`]: {
|
|
display: 'inline-flex'
|
|
},
|
|
[`& .${iconRegularClassName}`]: {
|
|
display: 'none'
|
|
}
|
|
},
|
|
':hover:active': {
|
|
backgroundColor: tokens.colorTransparentBackgroundPressed,
|
|
color: tokens.colorNeutralForeground2BrandPressed
|
|
}
|
|
},
|
|
selected: {
|
|
backgroundColor: tokens.colorTransparentBackgroundSelected,
|
|
color: tokens.colorNeutralForeground2BrandSelected,
|
|
[`& .${iconFilledClassName}`]: {
|
|
display: 'inline-flex'
|
|
},
|
|
[`& .${iconRegularClassName}`]: {
|
|
display: 'none'
|
|
},
|
|
'@media (forced-colors: active)': {
|
|
backgroundColor: 'Highlight',
|
|
color: 'Canvas'
|
|
}
|
|
},
|
|
highContrast: {
|
|
'@media (forced-colors: active)': {
|
|
color: 'CanvasText',
|
|
':hover,:hover:active': {
|
|
forcedColorAdjust: 'none',
|
|
backgroundColor: 'Highlight',
|
|
color: 'Canvas'
|
|
}
|
|
}
|
|
},
|
|
focusIndicator: createFocusOutlineStyle(),
|
|
large: {
|
|
...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)
|
|
}
|
|
});
|
|
const usePopoverSurfaceStyles = makeStyles({
|
|
smallMedium: typographyStyles.caption1,
|
|
large: typographyStyles.body1
|
|
});
|
|
/**
|
|
* Apply styling to the InfoButton slots based on the state
|
|
*/ export const useInfoButtonStyles_unstable = (state)=>{
|
|
const { size } = state;
|
|
const { open } = state.popover;
|
|
const buttonStyles = useButtonStyles();
|
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
// eslint-disable-next-line react-compiler/react-compiler
|
|
state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
|
|
state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
return state;
|
|
};
|