307 lines
11 KiB
JavaScript
307 lines
11 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
badgeClassNames: function() {
|
|
return badgeClassNames;
|
|
},
|
|
useBadgeStyles_unstable: function() {
|
|
return useBadgeStyles_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _react1 = require("@griffel/react");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const badgeClassNames = {
|
|
root: 'fui-Badge',
|
|
icon: 'fui-Badge__icon'
|
|
};
|
|
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
|
|
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
|
|
const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
|
|
const useRootClassName = (0, _react1.makeResetStyles)({
|
|
display: 'inline-flex',
|
|
boxSizing: 'border-box',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
..._reacttheme.typographyStyles.caption1Strong,
|
|
height: '20px',
|
|
minWidth: '20px',
|
|
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`,
|
|
borderRadius: _reacttheme.tokens.borderRadiusCircular,
|
|
// Use a transparent stroke (rather than no border) so the border is visible in high contrast
|
|
borderColor: _reacttheme.tokens.colorTransparentStroke,
|
|
'::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
borderStyle: 'solid',
|
|
borderColor: 'inherit',
|
|
borderWidth: _reacttheme.tokens.strokeWidthThin,
|
|
borderRadius: 'inherit'
|
|
}
|
|
});
|
|
const useRootStyles = (0, _react1.makeStyles)({
|
|
fontSmallToTiny: {
|
|
..._reacttheme.typographyStyles.caption2Strong
|
|
},
|
|
// size
|
|
tiny: {
|
|
width: '6px',
|
|
height: '6px',
|
|
fontSize: '4px',
|
|
lineHeight: '4px',
|
|
minWidth: 'unset',
|
|
padding: 'unset'
|
|
},
|
|
'extra-small': {
|
|
width: '10px',
|
|
height: '10px',
|
|
fontSize: '6px',
|
|
lineHeight: '6px',
|
|
minWidth: 'unset',
|
|
padding: 'unset'
|
|
},
|
|
small: {
|
|
minWidth: '16px',
|
|
height: '16px',
|
|
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
|
|
},
|
|
medium: {},
|
|
large: {
|
|
minWidth: '24px',
|
|
height: '24px',
|
|
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
|
|
},
|
|
'extra-large': {
|
|
minWidth: '32px',
|
|
height: '32px',
|
|
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${textPadding})`
|
|
},
|
|
// shape
|
|
square: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusNone
|
|
},
|
|
rounded: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
},
|
|
roundedSmallToTiny: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusSmall
|
|
},
|
|
circular: {},
|
|
// hide the boder when appearance is "ghost"
|
|
borderGhost: {
|
|
// The border is applied in an ::after pseudo-element because it should not affect layout.
|
|
// The padding and size of the badge should be the same regardless of whether or not it has a border.
|
|
'::after': {
|
|
display: 'none'
|
|
}
|
|
},
|
|
// appearance: filled
|
|
filled: {},
|
|
'filled-brand': {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackground,
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
'filled-danger': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3,
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
'filled-important': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralForeground1,
|
|
color: _reacttheme.tokens.colorNeutralBackground1
|
|
},
|
|
'filled-informative': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground5,
|
|
color: _reacttheme.tokens.colorNeutralForeground3
|
|
},
|
|
'filled-severe': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3,
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
'filled-subtle': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
color: _reacttheme.tokens.colorNeutralForeground1
|
|
},
|
|
'filled-success': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3,
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
'filled-warning': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground3,
|
|
color: _reacttheme.tokens.colorNeutralForeground1Static
|
|
},
|
|
// appearance: ghost
|
|
ghost: {},
|
|
'ghost-brand': {
|
|
color: _reacttheme.tokens.colorBrandForeground1
|
|
},
|
|
'ghost-danger': {
|
|
color: _reacttheme.tokens.colorPaletteRedForeground3
|
|
},
|
|
'ghost-important': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1
|
|
},
|
|
'ghost-informative': {
|
|
color: _reacttheme.tokens.colorNeutralForeground3
|
|
},
|
|
'ghost-severe': {
|
|
color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
|
|
},
|
|
'ghost-subtle': {
|
|
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
|
|
},
|
|
'ghost-success': {
|
|
color: _reacttheme.tokens.colorPaletteGreenForeground3
|
|
},
|
|
'ghost-warning': {
|
|
color: _reacttheme.tokens.colorPaletteYellowForeground2
|
|
},
|
|
// appearance: outline
|
|
outline: {
|
|
..._react1.shorthands.borderColor('currentColor')
|
|
},
|
|
'outline-brand': {
|
|
color: _reacttheme.tokens.colorBrandForeground1
|
|
},
|
|
'outline-danger': {
|
|
color: _reacttheme.tokens.colorPaletteRedForeground3,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
|
|
},
|
|
'outline-important': {
|
|
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
|
|
},
|
|
'outline-informative': {
|
|
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
|
|
},
|
|
'outline-severe': {
|
|
color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
|
|
},
|
|
'outline-subtle': {
|
|
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
|
|
},
|
|
'outline-success': {
|
|
color: _reacttheme.tokens.colorPaletteGreenForeground3,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
|
|
},
|
|
'outline-warning': {
|
|
color: _reacttheme.tokens.colorPaletteYellowForeground2
|
|
},
|
|
// appearance: tint
|
|
tint: {},
|
|
'tint-brand': {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackground2,
|
|
color: _reacttheme.tokens.colorBrandForeground2,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
|
|
},
|
|
'tint-danger': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground1,
|
|
color: _reacttheme.tokens.colorPaletteRedForeground1,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
|
|
},
|
|
'tint-important': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralForeground3,
|
|
color: _reacttheme.tokens.colorNeutralBackground1,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
},
|
|
'tint-informative': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
|
|
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
|
|
},
|
|
'tint-severe': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground1,
|
|
color: _reacttheme.tokens.colorPaletteDarkOrangeForeground1,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
|
|
},
|
|
'tint-subtle': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
|
|
},
|
|
'tint-success': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground1,
|
|
color: _reacttheme.tokens.colorPaletteGreenForeground1,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
|
|
},
|
|
'tint-warning': {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground1,
|
|
color: _reacttheme.tokens.colorPaletteYellowForeground1,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
|
|
}
|
|
});
|
|
const useIconRootClassName = (0, _react1.makeResetStyles)({
|
|
display: 'flex',
|
|
lineHeight: '1',
|
|
margin: `0 calc(-1 * ${textPadding})`,
|
|
fontSize: '12px'
|
|
});
|
|
const useIconStyles = (0, _react1.makeStyles)({
|
|
beforeText: {
|
|
marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
|
|
},
|
|
afterText: {
|
|
marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
|
|
},
|
|
beforeTextXL: {
|
|
marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
|
|
},
|
|
afterTextXL: {
|
|
marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
|
|
},
|
|
// size
|
|
tiny: {
|
|
fontSize: '6px'
|
|
},
|
|
'extra-small': {
|
|
fontSize: '10px'
|
|
},
|
|
small: {
|
|
fontSize: '12px'
|
|
},
|
|
medium: {},
|
|
large: {
|
|
fontSize: '16px'
|
|
},
|
|
'extra-large': {
|
|
fontSize: '20px'
|
|
}
|
|
});
|
|
const useBadgeStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const rootClassName = useRootClassName();
|
|
const rootStyles = useRootStyles();
|
|
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
|
|
state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
|
|
const iconRootClassName = useIconRootClassName();
|
|
const iconStyles = useIconStyles();
|
|
if (state.icon) {
|
|
let iconPositionClass;
|
|
// Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
|
|
if (_react.Children.toArray(state.root.children).length > 0) {
|
|
if (state.size === 'extra-large') {
|
|
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
|
|
} else {
|
|
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
|
|
}
|
|
}
|
|
state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
|
|
}
|
|
return state;
|
|
};
|