@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
79 lines • 3.09 kB
JavaScript
// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { FontWeights } from '../../../Styling';
import { useButtonState as state } from '../Button.state';
import { ButtonStyles as styles } from '../Button.styles';
import { ButtonSlots as slots, ButtonView as view } from '../Button.view';
/* eslint-disable deprecation/deprecation */
var baseTokens = function (props, theme) {
var palette = theme.palette, semanticColors = theme.semanticColors;
return {
backgroundColor: 'transparent',
backgroundColorHovered: palette.neutralLighter,
backgroundColorPressed: semanticColors.buttonBackgroundPressed,
borderColor: 'transparent',
borderColorHovered: 'transparent',
borderColorPressed: 'transparent',
borderRadius: '50%',
borderStyle: 'solid',
borderWidth: 1,
contentPadding: 0,
cursor: 'pointer',
highContrastBackgroundColor: 'WindowText',
highContrastBackgroundColorHovered: 'Highlight',
highContrastBackgroundColorPressed: 'Highlight',
highContrastBorderColor: 'transparent',
highContrastBorderColorHovered: 'transparent',
highContrastBorderColorPressed: 'transparent',
highContrastIconColor: 'Window',
highContrastIconColorHovered: 'Window',
highContrastIconColorPressed: 'Window',
iconColor: palette.themePrimary,
iconColorHovered: palette.themeDarkAlt,
iconColorPressed: palette.themeDark,
iconSize: 16,
lineHeight: 1,
minHeight: 32,
minWidth: 32,
msHighContrastAdjust: 'none',
outlineColor: 'transparent',
textFamily: 'inherit',
textSize: 14,
textWeight: FontWeights.semibold,
};
};
var disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.inputBackground,
backgroundColorHovered: semanticColors.inputBackground,
backgroundColorPressed: semanticColors.inputBackground,
cursor: 'default',
highContrastBackgroundColor: 'Window',
highContrastBackgroundColorHovered: 'Window',
highContrastBackgroundColorPressed: 'Window',
highContrastIconColor: 'GrayText',
highContrastIconColorHovered: 'GrayText',
highContrastIconColorPressed: 'GrayText',
iconColor: semanticColors.disabledText,
iconColorHovered: semanticColors.disabledText,
iconColorPressed: semanticColors.disabledText,
};
};
var IconButtonTokens = function (props, theme) { return [
baseTokens,
props.disabled && disabledTokens,
]; };
/**
* @deprecated This component was experimental and is not longer being developed on, nor will it be supported in the
* future.
*/
export var IconButton = composed({
displayName: 'IconButton',
slots: slots,
state: state,
styles: styles,
tokens: IconButtonTokens,
view: view,
});
//# sourceMappingURL=IconButton.js.map