@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
150 lines • 6.29 kB
JavaScript
import { __assign, __rest } from "tslib";
import * as React from 'react';
// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { Text } from 'office-ui-fabric-react';
import { parseGap } from 'office-ui-fabric-react/lib/components/Stack/StackUtils';
import { HighContrastSelector } from '../../../Styling';
import { useButtonState as state } from '../Button.state';
import { ButtonStyles, ButtonTokens } from '../Button.styles';
import { ButtonSlots, ButtonView } from '../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 = 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 = parseGap(tokens.childrenGap, theme), rowGap = _g.rowGap, columnGap = _g.columnGap;
var regularStyles = 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[HighContrastSelector] = {
color: tokens.highContrastColorHovered,
},
_b),
},
':active': {
color: tokens.secondaryColorPressed,
selectors: (_c = {},
_c[HighContrastSelector] = {
color: tokens.highContrastColorPressed,
},
_c),
}
},
_a[HighContrastSelector] = {
color: tokens.highContrastColor,
},
_a),
},
],
content: [
regularStyles.content,
{
color: tokens.color,
selectors: (_d = {
':hover': {
color: tokens.colorHovered,
selectors: (_e = {},
_e[HighContrastSelector] = {
color: tokens.highContrastColorHovered,
},
_e),
},
':active': {
color: tokens.colorPressed,
selectors: (_f = {},
_f[HighContrastSelector] = {
color: tokens.highContrastColorPressed,
},
_f),
}
},
_d[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 = __rest(props, ["children", "secondaryText"]);
var secondaryTextChild = (React.createElement(Text, { variant: "small", styles: secondaryTextStyles }, secondaryText));
var compoundButtonProps = __assign(__assign({}, rest), { children: [secondaryTextChild, children] });
return ButtonView(compoundButtonProps, slots);
};
/**
* @deprecated This component was experimental and is not longer being developed on, nor will it be supported in the
* future.
*/
export var CompoundButton = composed({
displayName: 'CompoundButton',
slots: ButtonSlots,
state: state,
styles: CompoundButtonStyles,
tokens: CompoundButtonTokens,
view: CompoundButtonView,
});
//# sourceMappingURL=CompoundButton.js.map