@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
152 lines • 6.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
// Temporary import file to experiment with next version of foundation.
var composed_1 = require("@uifabric/foundation/lib-commonjs/next/composed");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var StackUtils_1 = require("office-ui-fabric-react/lib-commonjs/components/Stack/StackUtils");
var Styling_1 = require("../../../Styling");
var Button_state_1 = require("../Button.state");
var Button_styles_1 = require("../Button.styles");
var Button_view_1 = require("../Button.view");
var baseTokens = function (props, theme) {
var palette = theme.palette;
return {
childrenGap: 5,
contentPadding: '16px 12px',
iconColor: palette.neutralSecondary,
iconColorHovered: palette.neutralDark,
iconColorPressed: 'inherit',
minHeight: 72,
secondaryColor: palette.neutralSecondary,
secondaryColorHovered: palette.neutralDark,
secondaryColorPressed: 'inherit',
};
};
var primaryTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
iconColor: semanticColors.primaryButtonText,
iconColorHovered: semanticColors.primaryButtonTextHovered,
iconColorPressed: semanticColors.primaryButtonTextPressed,
secondaryColor: semanticColors.primaryButtonText,
secondaryColorHovered: semanticColors.primaryButtonTextHovered,
secondaryColorPressed: semanticColors.primaryButtonTextPressed,
};
};
var disabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
iconColor: semanticColors.buttonTextDisabled,
iconColorHovered: semanticColors.buttonTextDisabled,
iconColorPressed: semanticColors.buttonTextDisabled,
secondaryColor: semanticColors.buttonTextDisabled,
secondaryColorHovered: semanticColors.buttonTextDisabled,
secondaryColorPressed: semanticColors.buttonTextDisabled,
};
};
var CompoundButtonTokens = function (props, theme) {
var regularTokens = Button_styles_1.ButtonTokens(props, theme);
return [regularTokens, baseTokens, props.primary && primaryTokens, props.disabled && disabledTokens];
};
var CompoundButtonStyles = function (props, theme, tokens) {
var _a, _b, _c, _d, _e, _f;
var _g = StackUtils_1.parseGap(tokens.childrenGap, theme), rowGap = _g.rowGap, columnGap = _g.columnGap;
var regularStyles = Button_styles_1.ButtonStyles(props, theme, tokens);
return {
root: [
regularStyles.root,
{
alignItems: 'flex-start',
color: tokens.secondaryColor,
flexDirection: 'column',
lineHeight: '100%',
selectors: (_a = {
'> *': {
marginLeft: 0,
marginTop: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit,
textOverflow: 'ellipsis',
},
'> *:not(:first-child)': {
marginLeft: 0,
marginTop: "" + columnGap.value + columnGap.unit,
},
':hover': {
color: tokens.secondaryColorHovered,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
color: tokens.highContrastColorHovered,
},
_b),
},
':active': {
color: tokens.secondaryColorPressed,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
color: tokens.highContrastColorPressed,
},
_c),
}
},
_a[Styling_1.HighContrastSelector] = {
color: tokens.highContrastColor,
},
_a),
},
],
content: [
regularStyles.content,
{
color: tokens.color,
selectors: (_d = {
':hover': {
color: tokens.colorHovered,
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
color: tokens.highContrastColorHovered,
},
_e),
},
':active': {
color: tokens.colorPressed,
selectors: (_f = {},
_f[Styling_1.HighContrastSelector] = {
color: tokens.highContrastColorPressed,
},
_f),
}
},
_d[Styling_1.HighContrastSelector] = {
color: tokens.highContrastColor,
},
_d),
},
],
icon: regularStyles.icon,
};
};
var secondaryTextStyles = {
root: {
height: 12,
},
};
var CompoundButtonView = function (props, slots) {
var children = props.children, secondaryText = props.secondaryText, rest = tslib_1.__rest(props, ["children", "secondaryText"]);
var secondaryTextChild = (React.createElement(office_ui_fabric_react_1.Text, { variant: "small", styles: secondaryTextStyles }, secondaryText));
var compoundButtonProps = tslib_1.__assign(tslib_1.__assign({}, rest), { children: [secondaryTextChild, children] });
return Button_view_1.ButtonView(compoundButtonProps, slots);
};
/**
* @deprecated This component was experimental and is not longer being developed on, nor will it be supported in the
* future.
*/
exports.CompoundButton = composed_1.composed({
displayName: 'CompoundButton',
slots: Button_view_1.ButtonSlots,
state: Button_state_1.useButtonState,
styles: CompoundButtonStyles,
tokens: CompoundButtonTokens,
view: CompoundButtonView,
});
//# sourceMappingURL=CompoundButton.js.map