@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
87 lines • 3.73 kB
JavaScript
define(["require", "exports", "@uifabric/foundation/lib/next/composed", "../../../Styling", "../Button.state", "../Button.styles", "../Button.view"], function (require, exports, composed_1, Styling_1, Button_state_1, Button_styles_1, Button_view_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable deprecation/deprecation */
var baseTokens = function (props, theme) {
var effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;
return {
backgroundColor: 'transparent',
backgroundColorHovered: 'transparent',
backgroundColorPressed: 'transparent',
borderColor: 'transparent',
borderColorHovered: 'transparent',
borderColorPressed: 'transparent',
borderRadius: effects.roundedCorner2,
borderStyle: 'solid',
borderWidth: 1,
childrenGap: 8,
color: semanticColors.buttonText,
colorHovered: palette.themePrimary,
colorPressed: palette.black,
contentPadding: '0px 8px',
cursor: 'pointer',
height: '40px',
highContrastBorderColor: 'transparent',
highContrastBorderColorHovered: 'transparent',
highContrastBorderColorPressed: 'transparent',
highContrastColorHovered: 'Highlight',
highContrastColorPressed: 'Highlight',
highContrastIconColorHovered: 'Highlight',
highContrastIconColorPressed: 'Highlight',
iconColor: semanticColors.buttonText,
iconColorHovered: palette.themePrimary,
iconColorPressed: palette.black,
iconSize: 16,
minWidth: 100,
textWeight: Styling_1.FontWeights.regular,
};
};
var disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
color: semanticColors.buttonTextDisabled,
colorHovered: semanticColors.buttonTextDisabled,
colorPressed: semanticColors.buttonTextDisabled,
cursor: 'default',
highContrastColor: 'GrayText',
highContrastColorHovered: 'GrayText',
highContrastColorPressed: 'GrayText',
highContrastIconColor: 'GrayText',
highContrastIconColorHovered: 'GrayText',
highContrastIconColorPressed: 'GrayText',
iconColor: semanticColors.buttonTextDisabled,
iconColorHovered: semanticColors.buttonTextDisabled,
iconColorPressed: semanticColors.buttonTextDisabled,
};
};
var ActionButtonTokens = function (props, theme) { return [
baseTokens,
props.disabled && disabledTokens,
]; };
var ActionButtonStyles = function (props, theme, tokens) {
var regularStyles = Button_styles_1.ButtonStyles(props, theme, tokens);
return {
root: [
regularStyles.root,
{
justifyContent: 'flex-start',
},
],
content: regularStyles.content,
icon: regularStyles.icon,
};
};
/**
* @deprecated This component was experimental and is not longer being developed on, nor will it be supported in the
* future.
*/
exports.ActionButton = composed_1.composed({
displayName: 'ActionButton',
slots: Button_view_1.ButtonSlots,
state: Button_state_1.useButtonState,
styles: ActionButtonStyles,
tokens: ActionButtonTokens,
view: Button_view_1.ButtonView,
});
});
//# sourceMappingURL=ActionButton.js.map