@fluentui/react-button 9.0.0-alpha.10 → 9.0.0-alpha.100

package/lib-amd/components/Button/useButtonStyles.js

@@ -1,385 +0,0 @@
-define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    // TODO: These are named in design specs but not hoisted to global/alias yet.
-    //       We're tracking these here to determine how we can hoist them.
-    var buttonSpacing = {
-        smallest: '2px',
-        smaller: '4px',
-        small: '6px',
-        medium: '8px',
-        large: '12px',
-        larger: '16px',
-    };
-    // We do not want a combinatorial explosion of component variables for variants (bg, bgPrimary, etc)
-    // We want a fixed interface of variables for a given component and to alter those between variants
-    exports.makeButtonTokens = function (theme) { return ({
-        base: {
-            // TODO: these are not in the global/alias theme currently
-            // When they are shown in the token UI, we need to make it clear there is no global/alias mapping support
-            height: '32px',
-            paddingX: buttonSpacing.large,
-            paddingY: '0',
-            minWidth: '96px',
-            maxWidth: '280px',
-            color: theme.alias.color.neutral.neutralForeground1,
-            content2Color: theme.alias.color.neutral.neutralForeground2,
-            background: theme.alias.color.neutral.neutralBackground1,
-            backgroundPressed: theme.alias.color.neutral.neutralBackground1,
-            borderRadius: theme.global.borderRadius.medium,
-            borderWidth: theme.global.strokeWidth.thin,
-            borderColor: theme.alias.color.neutral.neutralStroke1,
-            backgroundHover: theme.alias.color.neutral.neutralBackground1Hover,
-            borderColorHover: theme.alias.color.neutral.neutralStroke1Hover,
-            backgroundActive: theme.alias.color.neutral.neutralBackground1Pressed,
-            borderColorActive: theme.alias.color.neutral.neutralStroke1Pressed,
-            fontWeight: theme.global.type.fontWeights.semibold,
-            fontSize: theme.global.type.fontSizes.base[300],
-            lineHeight: theme.global.type.lineHeights.base[300],
-            iconSpacing: buttonSpacing.small,
-            iconWidth: '20px',
-            iconHeight: '20px',
-        },
-        disabled: {
-            background: theme.alias.color.neutral.neutralBackgroundDisabled,
-            borderColor: theme.alias.color.neutral.neutralStrokeDisabled,
-            color: theme.alias.color.neutral.neutralForegroundDisabled,
-            content2Color: theme.alias.color.neutral.neutralForegroundDisabled,
-        },
-        small: {
-            paddingX: buttonSpacing.medium,
-            borderRadius: theme.global.borderRadius.small,
-            // TODO: design spec says minWidth "can be toggled off", consider prop like compact?
-            minWidth: '64px',
-            height: '24px',
-            fontSize: theme.global.type.fontSizes.base[200],
-            lineHeight: theme.global.type.fontSizes.base[200],
-            fontWeight: theme.global.type.fontWeights.regular,
-        },
-        large: {
-            paddingX: buttonSpacing.larger,
-            height: '40px',
-            borderRadius: theme.global.borderRadius.medium,
-            fontSize: theme.global.type.fontSizes.base[400],
-            // TODO: 24px is not on the global ramp of line heights
-            //       22px = theme.global.type.lineHeights.base[400]
-            //       28px = theme.global.type.lineHeights.base[500]
-            lineHeight: '24px',
-            iconWidth: '24px',
-            iconHeight: '24px',
-            iconSpacing: buttonSpacing.small,
-        },
-        // TODO: Would be ideal to automate a check to ensure when a variant is accessed, all the tokens are accessed as well.
-        //       If not, it means there is cruft in the variant tokens definition.
-        //       All tokens in a variant should be mapped to some style property.
-        iconOnly: {
-            paddingX: buttonSpacing.small,
-            paddingY: buttonSpacing.small,
-            minWidth: '32px',
-            maxWidth: '32px',
-        },
-        // TODO: combinatorial "variants" is wrong, we already have iconOnly and small.
-        //       we essentially need to update component token mappings based on variant matchers.
-        //       fow the sake of progress for now, we're extending variants to have combinations.
-        iconOnlySmall: {
-            paddingX: buttonSpacing.smallest,
-            paddingY: buttonSpacing.smallest,
-            borderRadius: theme.global.borderRadius.small,
-            minWidth: '24px',
-            maxWidth: '24px',
-        },
-        iconOnlyLarge: {
-            paddingX: buttonSpacing.small,
-            paddingY: buttonSpacing.small,
-            borderRadius: theme.global.borderRadius.medium,
-            minWidth: '40px',
-            maxWidth: '40px',
-        },
-        primary: {
-            color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
-            background: theme.alias.color.brand.brandBackground,
-            borderColor: 'transparent',
-            borderColorHover: 'transparent',
-            borderColorActive: 'transparent',
-            backgroundHover: theme.alias.color.brand.brandBackgroundHover,
-            backgroundPressed: theme.alias.color.brand.brandBackgroundPressed,
-            // TODO: spec calls out "shadow 4 __brand__", are we missing tokens?
-            shadow: theme.alias.shadow.shadow4,
-            // TODO: spec calls out "shadow 2 __darker__", are we missing tokens?
-            shadowPressed: theme.alias.shadow.shadow2,
-        },
-        primaryDisabled: {
-            background: theme.alias.color.neutral.neutralBackgroundDisabled,
-            // borderColor: theme.alias.color.neutral.neutralStrokeDisabled,
-            color: theme.alias.color.neutral.neutralForegroundDisabled,
-            content2Color: theme.alias.color.neutral.neutralForegroundDisabled,
-            shadow: 'none',
-            shadowPressed: 'none',
-        },
-    }); };
-    var useRootStyles = react_make_styles_1.makeStylesCompat([
-        [
-            null,
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    // TODO: remove unsafe property: https://caniuse.com/?search=gap
-                    gap: buttonTokens.base.iconSpacing,
-                    // // TODO: 1) ask designers what our vertical align strategy is
-                    // //       2) enforce with conformance for inline elements
-                    verticalAlign: 'text-bottom',
-                    margin: 0,
-                    padding: buttonTokens.base.paddingY + " " + buttonTokens.base.paddingX,
-                    height: buttonTokens.base.height,
-                    minWidth: buttonTokens.base.minWidth,
-                    maxWidth: buttonTokens.base.maxWidth,
-                    color: buttonTokens.base.color,
-                    borderStyle: 'solid',
-                    borderRadius: buttonTokens.base.borderRadius,
-                    borderWidth: buttonTokens.base.borderWidth,
-                    borderColor: buttonTokens.base.borderColor,
-                    background: buttonTokens.base.background,
-                    outline: 'none',
-                    ':hover': {
-                        background: buttonTokens.base.backgroundHover,
-                        borderColor: buttonTokens.base.borderColorHover,
-                        cursor: 'pointer',
-                    },
-                    ':active': {
-                        background: buttonTokens.base.backgroundActive,
-                        borderColor: buttonTokens.base.borderColorActive,
-                        outline: 'none',
-                    },
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var size = _a.size;
-                return size === 'small';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    padding: buttonTokens.small.paddingX + " " + buttonTokens.small.paddingY,
-                    minWidth: buttonTokens.small.minWidth,
-                    height: buttonTokens.small.height,
-                    borderRadius: buttonTokens.small.borderRadius,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var size = _a.size;
-                return size === 'large';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    gap: buttonTokens.large.iconSpacing,
-                    padding: buttonTokens.large.paddingX + " " + buttonTokens.large.paddingY,
-                    height: buttonTokens.large.height,
-                    borderRadius: buttonTokens.large.borderRadius,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var disabled = _a.disabled;
-                return disabled;
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    background: buttonTokens.disabled.background,
-                    borderColor: buttonTokens.disabled.borderColor,
-                    color: buttonTokens.disabled.color,
-                    ':hover': {
-                        background: buttonTokens.disabled.background,
-                        borderColor: buttonTokens.disabled.borderColor,
-                        cursor: 'default',
-                    },
-                    ':active': {
-                        background: buttonTokens.disabled.background,
-                        borderColor: buttonTokens.disabled.borderColor,
-                    },
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var primary = _a.primary;
-                return primary;
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    background: buttonTokens.primary.background,
-                    color: buttonTokens.primary.color,
-                    borderColor: buttonTokens.primary.borderColor,
-                    // TODO: spec calls out "shadow 4 __darker__", are we missing tokens?
-                    boxShadow: buttonTokens.primary.shadow,
-                    ':hover': {
-                        background: buttonTokens.primary.backgroundHover,
-                        borderColor: buttonTokens.primary.borderColorHover,
-                    },
-                    ':active': {
-                        background: buttonTokens.primary.backgroundPressed,
-                        // TODO: spec calls out "shadow 2 __darker__", are we missing tokens?
-                        boxShadow: buttonTokens.primary.shadow,
-                        borderColor: buttonTokens.primary.borderColorActive,
-                    },
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var primary = _a.primary, disabled = _a.disabled;
-                return primary && disabled;
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    background: buttonTokens.primaryDisabled.background,
-                    color: buttonTokens.primaryDisabled.color,
-                    boxShadow: buttonTokens.primaryDisabled.shadow,
-                    ':hover': {
-                        background: buttonTokens.primaryDisabled.background,
-                        cursor: 'default',
-                    },
-                    ':active': {
-                        boxShadow: buttonTokens.primaryDisabled.shadowPressed,
-                    },
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var iconOnly = _a.iconOnly;
-                return iconOnly;
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    padding: buttonTokens.iconOnly.paddingX,
-                    minWidth: buttonTokens.iconOnly.minWidth,
-                    maxWidth: buttonTokens.iconOnly.maxWidth,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var iconOnly = _a.iconOnly, size = _a.size;
-                return iconOnly && size === 'small';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    padding: buttonTokens.iconOnlySmall.paddingX + " " + buttonTokens.iconOnlySmall.paddingY,
-                    minWidth: buttonTokens.iconOnlySmall.minWidth,
-                    maxWidth: buttonTokens.iconOnlySmall.maxWidth,
-                    borderRadius: buttonTokens.iconOnlySmall.borderRadius,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var iconOnly = _a.iconOnly, size = _a.size;
-                return iconOnly && size === 'large';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    padding: buttonTokens.iconOnlyLarge.paddingX + " " + buttonTokens.iconOnlyLarge.paddingY,
-                    minWidth: buttonTokens.iconOnlyLarge.minWidth,
-                    maxWidth: buttonTokens.iconOnlyLarge.maxWidth,
-                    borderRadius: buttonTokens.iconOnlyLarge.borderRadius,
-                };
-            },
-        ],
-    ]);
-    var useChildrenStyles = react_make_styles_1.makeStylesCompat([
-        [
-            null,
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    textOverflow: 'ellipsis',
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                    // TODO: This is "Body, Strong (?)" token in the design spec (14px size, 20px line, semibold weight)
-                    //      There are some type aliases in the figma not in our theme as well, not sure if this maps to alias or not
-                    fontWeight: buttonTokens.base.fontWeight,
-                    fontSize: buttonTokens.base.fontSize,
-                    lineHeight: buttonTokens.base.lineHeight,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var size = _a.size;
-                return size === 'small';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    fontSize: buttonTokens.small.fontSize,
-                    fontWeight: buttonTokens.small.fontWeight,
-                    lineHeight: buttonTokens.small.lineHeight,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var size = _a.size;
-                return size === 'large';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    fontSize: buttonTokens.large.fontSize,
-                    lineHeight: buttonTokens.large.lineHeight,
-                };
-            },
-        ],
-    ]);
-    var useIconStyles = react_make_styles_1.makeStylesCompat([
-        [
-            null,
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: buttonTokens.base.iconHeight,
-                    width: buttonTokens.base.iconWidth,
-                };
-            },
-        ],
-        [
-            function (_a) {
-                var size = _a.size;
-                return size === 'large';
-            },
-            function (theme) {
-                var buttonTokens = exports.makeButtonTokens(theme);
-                return {
-                    width: buttonTokens.large.iconWidth,
-                    height: buttonTokens.large.iconHeight,
-                };
-            },
-        ],
-    ]);
-    exports.useButtonStyles = function (state, selectors) {
-        state.className = react_make_styles_1.ax(state.className, useRootStyles(selectors));
-        state.children = state.children || { className: '' };
-        state.icon = state.icon || { className: '' };
-        state.children.className = react_make_styles_1.ax(state.children.className, useChildrenStyles(selectors));
-        state.icon.className = react_make_styles_1.ax(state.icon.className, useIconStyles(selectors));
-    };
-});
-//# sourceMappingURL=useButtonStyles.js.map

package/lib-amd/components/Button/useButtonStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonStyles.js","sourceRoot":"../src/","sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ButtonState, ButtonStyleSelectors, ButtonVariantTokens } from './Button.types';\nimport { ax, makeStylesCompat } from '@fluentui/react-make-styles';\nimport { Theme } from '@fluentui/react-theme';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nconst buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\n// We do not want a combinatorial explosion of component variables for variants (bg, bgPrimary, etc)\n// We want a fixed interface of variables for a given component and to alter those between variants\nexport const makeButtonTokens = (theme: Theme): ButtonVariantTokens => ({\n  base: {\n    // TODO: these are not in the global/alias theme currently\n    // When they are shown in the token UI, we need to make it clear there is no global/alias mapping support\n    height: '32px',\n    paddingX: buttonSpacing.large,\n    paddingY: '0',\n    minWidth: '96px',\n    maxWidth: '280px',\n\n    color: theme.alias.color.neutral.neutralForeground1,\n    content2Color: theme.alias.color.neutral.neutralForeground2,\n    background: theme.alias.color.neutral.neutralBackground1,\n    backgroundPressed: theme.alias.color.neutral.neutralBackground1,\n\n    borderRadius: theme.global.borderRadius.medium,\n    borderWidth: theme.global.strokeWidth.thin,\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n\n    backgroundHover: theme.alias.color.neutral.neutralBackground1Hover,\n    borderColorHover: theme.alias.color.neutral.neutralStroke1Hover,\n\n    backgroundActive: theme.alias.color.neutral.neutralBackground1Pressed,\n    borderColorActive: theme.alias.color.neutral.neutralStroke1Pressed,\n\n    fontWeight: theme.global.type.fontWeights.semibold,\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n\n    iconSpacing: buttonSpacing.small,\n    iconWidth: '20px',\n    iconHeight: '20px',\n  },\n  disabled: {\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n    content2Color: theme.alias.color.neutral.neutralForegroundDisabled,\n  },\n  small: {\n    paddingX: buttonSpacing.medium,\n    borderRadius: theme.global.borderRadius.small,\n    // TODO: design spec says minWidth \"can be toggled off\", consider prop like compact?\n    minWidth: '64px',\n    height: '24px',\n    fontSize: theme.global.type.fontSizes.base[200],\n    lineHeight: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n  },\n  large: {\n    paddingX: buttonSpacing.larger,\n    height: '40px',\n    borderRadius: theme.global.borderRadius.medium,\n    fontSize: theme.global.type.fontSizes.base[400],\n    // TODO: 24px is not on the global ramp of line heights\n    //       22px = theme.global.type.lineHeights.base[400]\n    //       28px = theme.global.type.lineHeights.base[500]\n    lineHeight: '24px',\n    iconWidth: '24px',\n    iconHeight: '24px',\n    iconSpacing: buttonSpacing.small,\n  },\n  // TODO: Would be ideal to automate a check to ensure when a variant is accessed, all the tokens are accessed as well.\n  //       If not, it means there is cruft in the variant tokens definition.\n  //       All tokens in a variant should be mapped to some style property.\n  iconOnly: {\n    paddingX: buttonSpacing.small,\n    paddingY: buttonSpacing.small,\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  // TODO: combinatorial \"variants\" is wrong, we already have iconOnly and small.\n  //       we essentially need to update component token mappings based on variant matchers.\n  //       fow the sake of progress for now, we're extending variants to have combinations.\n  iconOnlySmall: {\n    paddingX: buttonSpacing.smallest,\n    paddingY: buttonSpacing.smallest,\n    borderRadius: theme.global.borderRadius.small,\n    minWidth: '24px',\n    maxWidth: '24px',\n  },\n  iconOnlyLarge: {\n    paddingX: buttonSpacing.small,\n    paddingY: buttonSpacing.small,\n    borderRadius: theme.global.borderRadius.medium,\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n  primary: {\n    color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,\n\n    background: theme.alias.color.brand.brandBackground,\n    borderColor: 'transparent',\n    borderColorHover: 'transparent',\n    borderColorActive: 'transparent',\n\n    backgroundHover: theme.alias.color.brand.brandBackgroundHover,\n    backgroundPressed: theme.alias.color.brand.brandBackgroundPressed,\n\n    // TODO: spec calls out \"shadow 4 __brand__\", are we missing tokens?\n    shadow: theme.alias.shadow.shadow4,\n\n    // TODO: spec calls out \"shadow 2 __darker__\", are we missing tokens?\n    shadowPressed: theme.alias.shadow.shadow2,\n  },\n  primaryDisabled: {\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    // borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n    content2Color: theme.alias.color.neutral.neutralForegroundDisabled,\n    shadow: 'none',\n    shadowPressed: 'none',\n  },\n});\n\nconst useRootStyles = makeStylesCompat<ButtonStyleSelectors>([\n  [\n    null,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        // TODO: remove unsafe property: https://caniuse.com/?search=gap\n        gap: buttonTokens.base.iconSpacing,\n        // // TODO: 1) ask designers what our vertical align strategy is\n        // //       2) enforce with conformance for inline elements\n        verticalAlign: 'text-bottom',\n        margin: 0,\n\n        padding: `${buttonTokens.base.paddingY} ${buttonTokens.base.paddingX}`,\n        height: buttonTokens.base.height,\n\n        minWidth: buttonTokens.base.minWidth,\n        maxWidth: buttonTokens.base.maxWidth,\n\n        color: buttonTokens.base.color,\n        borderStyle: 'solid',\n        borderRadius: buttonTokens.base.borderRadius,\n        borderWidth: buttonTokens.base.borderWidth,\n        borderColor: buttonTokens.base.borderColor,\n        background: buttonTokens.base.background,\n\n        outline: 'none',\n        ':hover': {\n          background: buttonTokens.base.backgroundHover,\n          borderColor: buttonTokens.base.borderColorHover,\n          cursor: 'pointer',\n        },\n        ':active': {\n          background: buttonTokens.base.backgroundActive,\n          borderColor: buttonTokens.base.borderColorActive,\n          outline: 'none',\n        },\n        // TODO: this is for toggle button only. Use here in regular button?\n        // '.active': theme.alias.color.neutral.neutralStroke1Pressed,\n      };\n    },\n  ],\n  [\n    ({ size }) => size === 'small',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        padding: `${buttonTokens.small.paddingX} ${buttonTokens.small.paddingY}`,\n        minWidth: buttonTokens.small.minWidth,\n        height: buttonTokens.small.height,\n        borderRadius: buttonTokens.small.borderRadius,\n      };\n    },\n  ],\n  [\n    ({ size }) => size === 'large',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        gap: buttonTokens.large.iconSpacing,\n        padding: `${buttonTokens.large.paddingX} ${buttonTokens.large.paddingY}`,\n        height: buttonTokens.large.height,\n        borderRadius: buttonTokens.large.borderRadius,\n      };\n    },\n  ],\n  [\n    ({ disabled }) => disabled,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        background: buttonTokens.disabled.background,\n        borderColor: buttonTokens.disabled.borderColor,\n        color: buttonTokens.disabled.color,\n        ':hover': {\n          background: buttonTokens.disabled.background,\n          borderColor: buttonTokens.disabled.borderColor,\n          cursor: 'default',\n        },\n        ':active': {\n          background: buttonTokens.disabled.background,\n          borderColor: buttonTokens.disabled.borderColor,\n        },\n      };\n    },\n  ],\n  [\n    ({ primary }) => primary,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        background: buttonTokens.primary.background,\n        color: buttonTokens.primary.color,\n        borderColor: buttonTokens.primary.borderColor,\n        // TODO: spec calls out \"shadow 4 __darker__\", are we missing tokens?\n        boxShadow: buttonTokens.primary.shadow,\n\n        ':hover': {\n          background: buttonTokens.primary.backgroundHover,\n          borderColor: buttonTokens.primary.borderColorHover,\n        },\n\n        ':active': {\n          background: buttonTokens.primary.backgroundPressed,\n          // TODO: spec calls out \"shadow 2 __darker__\", are we missing tokens?\n          boxShadow: buttonTokens.primary.shadow,\n          borderColor: buttonTokens.primary.borderColorActive,\n        },\n\n        // TODO: focus\n      };\n    },\n  ],\n  [\n    ({ primary, disabled }) => primary && disabled,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        background: buttonTokens.primaryDisabled.background,\n        color: buttonTokens.primaryDisabled.color,\n        boxShadow: buttonTokens.primaryDisabled.shadow,\n        ':hover': {\n          background: buttonTokens.primaryDisabled.background,\n          cursor: 'default',\n        },\n        ':active': {\n          boxShadow: buttonTokens.primaryDisabled.shadowPressed,\n        },\n      };\n    },\n  ],\n  [\n    ({ iconOnly }) => iconOnly,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        padding: buttonTokens.iconOnly.paddingX,\n        minWidth: buttonTokens.iconOnly.minWidth,\n        maxWidth: buttonTokens.iconOnly.maxWidth,\n      };\n    },\n  ],\n  [\n    ({ iconOnly, size }) => iconOnly && size === 'small',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        padding: `${buttonTokens.iconOnlySmall.paddingX} ${buttonTokens.iconOnlySmall.paddingY}`,\n        minWidth: buttonTokens.iconOnlySmall.minWidth,\n        maxWidth: buttonTokens.iconOnlySmall.maxWidth,\n        borderRadius: buttonTokens.iconOnlySmall.borderRadius,\n      };\n    },\n  ],\n  [\n    ({ iconOnly, size }) => iconOnly && size === 'large',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        padding: `${buttonTokens.iconOnlyLarge.paddingX} ${buttonTokens.iconOnlyLarge.paddingY}`,\n        minWidth: buttonTokens.iconOnlyLarge.minWidth,\n        maxWidth: buttonTokens.iconOnlyLarge.maxWidth,\n        borderRadius: buttonTokens.iconOnlyLarge.borderRadius,\n      };\n    },\n  ],\n  // TODO: add disabled before ship prerelease\n]);\n\nconst useChildrenStyles = makeStylesCompat<ButtonStyleSelectors>([\n  [\n    null,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        // TODO: This is \"Body, Strong (?)\" token in the design spec (14px size, 20px line, semibold weight)\n        //      There are some type aliases in the figma not in our theme as well, not sure if this maps to alias or not\n        fontWeight: buttonTokens.base.fontWeight,\n        fontSize: buttonTokens.base.fontSize,\n        lineHeight: buttonTokens.base.lineHeight,\n      };\n    },\n  ],\n  [\n    ({ size }) => size === 'small',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        fontSize: buttonTokens.small.fontSize,\n        fontWeight: buttonTokens.small.fontWeight,\n        lineHeight: buttonTokens.small.lineHeight,\n      };\n    },\n  ],\n  [\n    ({ size }) => size === 'large',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        fontSize: buttonTokens.large.fontSize,\n        lineHeight: buttonTokens.large.lineHeight,\n      };\n    },\n  ],\n]);\n\nconst useIconStyles = makeStylesCompat<ButtonStyleSelectors>([\n  [\n    null,\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: buttonTokens.base.iconHeight,\n        width: buttonTokens.base.iconWidth,\n      };\n    },\n  ],\n  [\n    ({ size }) => size === 'large',\n    theme => {\n      const buttonTokens = makeButtonTokens(theme);\n\n      return {\n        width: buttonTokens.large.iconWidth,\n        height: buttonTokens.large.iconHeight,\n      };\n    },\n  ],\n]);\n\nexport const useButtonStyles = (state: ButtonState, selectors: ButtonStyleSelectors) => {\n  state.className = ax(state.className, useRootStyles(selectors));\n\n  state.children = state.children || { className: '' };\n  state.icon = state.icon || { className: '' };\n\n  state.children.className = ax(state.children.className, useChildrenStyles(selectors));\n  state.icon.className = ax(state.icon.className, useIconStyles(selectors));\n};\n"]}

package/lib-amd/index.d.ts

@@ -1 +0,0 @@
-export * from './Button';

package/lib-amd/index.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./Button"], function (require, exports, tslib_1, Button_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Button_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB","sourcesContent":["export * from './Button';\n"]}

package/lib-commonjs/components/Button/useButtonState.d.ts

@@ -1,6 +0,0 @@
-import { ButtonState } from './Button.types';
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-export declare const useButtonState: (draftState: ButtonState) => void;

package/lib-commonjs/components/Button/useButtonState.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var keyboard_key_1 = require("@fluentui/keyboard-key");
-/**
- * The useButton hook processes the Button draft state.
- * @param draftState - Button draft state to mutate.
- */
-exports.useButtonState = function (draftState) {
-    if (draftState.as !== 'button') {
-        draftState.role = 'button';
-        if (draftState.as !== 'a') {
-            var onClickCallback_1 = draftState.onClick, onKeyDownCallback_1 = draftState.onKeyDown;
-            draftState.tabIndex = 0;
-            draftState.onKeyDown = function (ev) {
-                if (onKeyDownCallback_1) {
-                    onKeyDownCallback_1(ev);
-                }
-                var keyCode = keyboard_key_1.getCode(ev);
-                if (!ev.defaultPrevented && onClickCallback_1 && (keyCode === keyboard_key_1.EnterKey || keyCode === keyboard_key_1.SpacebarKey)) {
-                    // Translate the keydown enter/space to a click.
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ev.target.click();
-                }
-            };
-        }
-    }
-    // Disallow click and keyboard events when component is disabled and eat events when disabledFocusable is set to true.
-    var disabled = draftState.disabled, /* disabledFocusable, */ onKeyDown = draftState.onKeyDown;
-    if (disabled) {
-        draftState.onClick = undefined;
-    }
-    draftState.onKeyDown = function (ev) {
-        var _a;
-        var keyCode = keyboard_key_1.getCode(ev);
-        if (disabled && (keyCode === keyboard_key_1.EnterKey || keyCode === keyboard_key_1.SpacebarKey)) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-        else {
-            (_a = onKeyDown) === null || _a === void 0 ? void 0 : _a(ev);
-        }
-    };
-    draftState['aria-disabled'] = disabled /* || disabledFocusable*/;
-    draftState.disabled = draftState.as === 'button' ? disabled /* && !disabledFocusable */ : undefined;
-};
-//# sourceMappingURL=useButtonState.js.map

package/lib-commonjs/components/Button/useButtonState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useButtonState.js","sourceRoot":"../src/","sources":["components/Button/useButtonState.ts"],"names":[],"mappings":";;AACA,uDAAwE;AAGxE;;;GAGG;AACU,QAAA,cAAc,GAAG,UAAC,UAAuB;IACpD,IAAI,UAAU,CAAC,EAAE,KAAK,QAAQ,EAAE;QAC9B,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;QAE3B,IAAI,UAAU,CAAC,EAAE,KAAK,GAAG,EAAE;YACjB,IAAA,sCAAwB,EAAE,0CAA4B,CAAgB;YAE9E,UAAU,CAAC,QAAQ,GAAG,CAAC,CAAC;YAExB,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;gBAC1D,IAAI,mBAAiB,EAAE;oBACrB,mBAAiB,CAAC,EAAE,CAAC,CAAC;iBACvB;gBAED,IAAM,OAAO,GAAG,sBAAO,CAAC,EAAE,CAAC,CAAC;gBAC5B,IAAI,CAAC,EAAE,CAAC,gBAAgB,IAAI,iBAAe,IAAI,CAAC,OAAO,KAAK,uBAAQ,IAAI,OAAO,KAAK,0BAAW,CAAC,EAAE;oBAChG,gDAAgD;oBAChD,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;oBAEpB,EAAE,CAAC,MAAsB,CAAC,KAAK,EAAE,CAAC;iBACpC;YACH,CAAC,CAAC;SACH;KACF;IAED,sHAAsH;IAC9G,IAAA,8BAAQ,EAAE,wBAAwB,CAAC,gCAAS,CAAgB;IACpE,IAAI,QAAQ,EAAE;QACZ,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;KAChC;IACD,UAAU,CAAC,SAAS,GAAG,UAAC,EAAoC;;QAC1D,IAAM,OAAO,GAAG,sBAAO,CAAC,EAAE,CAAC,CAAC;QAC5B,IAAI,QAAQ,IAAI,CAAC,OAAO,KAAK,uBAAQ,IAAI,OAAO,KAAK,0BAAW,CAAC,EAAE;YACjE,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;SACtB;aAAM;YACL,MAAA,SAAS,0CAAG,EAAE,EAAE;SACjB;IACH,CAAC,CAAC;IAEF,UAAU,CAAC,eAAe,CAAC,GAAG,QAAQ,CAAC,yBAAyB,CAAC;IACjE,UAAU,CAAC,QAAQ,GAAG,UAAU,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS,CAAC;AACtG,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getCode, EnterKey, SpacebarKey } from '@fluentui/keyboard-key';\nimport { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param draftState - Button draft state to mutate.\n */\nexport const useButtonState = (draftState: ButtonState) => {\n  if (draftState.as !== 'button') {\n    draftState.role = 'button';\n\n    if (draftState.as !== 'a') {\n      const { onClick: onClickCallback, onKeyDown: onKeyDownCallback } = draftState;\n\n      draftState.tabIndex = 0;\n\n      draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n        if (onKeyDownCallback) {\n          onKeyDownCallback(ev);\n        }\n\n        const keyCode = getCode(ev);\n        if (!ev.defaultPrevented && onClickCallback && (keyCode === EnterKey || keyCode === SpacebarKey)) {\n          // Translate the keydown enter/space to a click.\n          ev.preventDefault();\n          ev.stopPropagation();\n\n          (ev.target as HTMLElement).click();\n        }\n      };\n    }\n  }\n\n  // Disallow click and keyboard events when component is disabled and eat events when disabledFocusable is set to true.\n  const { disabled, /* disabledFocusable, */ onKeyDown } = draftState;\n  if (disabled) {\n    draftState.onClick = undefined;\n  }\n  draftState.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const keyCode = getCode(ev);\n    if (disabled && (keyCode === EnterKey || keyCode === SpacebarKey)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  draftState['aria-disabled'] = disabled /* || disabledFocusable*/;\n  draftState.disabled = draftState.as === 'button' ? disabled /* && !disabledFocusable */ : undefined;\n};\n"]}

package/src/components/Button/Button.types.ts

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
-
-export type ButtonProps = ComponentProps &
-  React.ButtonHTMLAttributes<HTMLElement> & {
-    /**
-     * Shorthand icon. A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
-     */
-    icon?: ShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-
-    // TODO: children needs a new typing to handle render functions along with hook updates for children functionality
-    // children?: ???;
-
-    // /** A button can appear circular. */
-    // circular?: boolean;
-
-    /** A button can show that it cannot be interacted with. */
-    disabled?: boolean;
-
-    // /**
-    // eslint-disable-next-line @fluentui/max-len
-    //  * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is
-    //  * important to keep a consistent tab order for screen reader and keyboard users.
-    //  * @defaultvalue false
-    //  */
-    // disabledFocusable?: boolean;
-
-    // /** A button can fill the width of its container. */
-    // block?: boolean;
-
-    /** A button can contain only an icon. */
-    iconOnly?: boolean;
-
-    /** An icon button can format its icon to appear before or after its content. */
-    iconPosition?: 'before' | 'after';
-
-    // /** A button can show a loading indicator. */
-    // loading?: boolean;
-
-    /** A button can emphasize that it represents the primary action. */
-    primary?: boolean;
-
-    // /** A button can blend into its background to become less emphasized. */
-    // subtle?: boolean;
-
-    // /** A button can have no background styling and just be emphasized through its content styling. */
-    // transparent?: boolean;
-
-    /** A button can be sized. */
-    size?: 'small' | 'large';
-  };
-
-/**
- * {@docCategory Button}
- */
-export interface ButtonState extends ButtonProps {
-  ref: React.RefObject<HTMLButtonElement>;
-
-  icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-  children?: ObjectShorthandProps<React.HTMLAttributes<HTMLSpanElement>>;
-}
-
-export type ButtonStyleSelectors = {
-  disabled?: boolean;
-  iconOnly?: boolean;
-  primary?: boolean;
-  size?: string;
-};
-
-export type ButtonVariants =
-  | 'base'
-  | 'disabled'
-  | 'iconOnly'
-  | 'primary'
-  | 'small'
-  | 'large'
-  // TODO: get rid of these combinations, use individual variants in matchers
-  | 'primaryDisabled'
-  | 'iconOnlySmall'
-  | 'iconOnlyLarge';
-
-export type ButtonTokens = {
-  height: string;
-  paddingX: string;
-  paddingY: string;
-  minWidth: string;
-  maxWidth: string;
-
-  fontSize: string;
-  fontWeight: number;
-  lineHeight: string;
-
-  iconWidth: string;
-  iconHeight: string;
-  iconSpacing: string;
-
-  color: string;
-  content2Color: string;
-
-  background: string;
-  backgroundHover: string;
-  backgroundPressed: string;
-  backgroundActive: string;
-
-  borderColor: string;
-  borderColorHover: string;
-  borderColorActive: string;
-  borderWidth: string;
-  borderRadius: string;
-
-  shadow: string;
-  shadowPressed: string;
-};
-
-export type ButtonVariantTokens = {
-  [variant in ButtonVariants]: Partial<ButtonTokens>;
-};