@workday/canvas-kit-react 6.0.0-alpha.0-next.26 → 6.0.0-alpha.0-next.30

package/dist/es6/button/lib/PrimaryButton.js

@@ -21,8 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useTheme, createComponent, } from '@workday/canvas-kit-react/common';
+import { useTheme, createComponent, focusRing, } from '@workday/canvas-kit-react/common';
+import { colors } from '@workday/canvas-kit-react/tokens';
 import { ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon } from './parts';
+// Button sizes where data labels are enabled
+var dataLabelSizes = ['medium', 'large'];
+// All disabled buttons are set to 40% opacity.
+// This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
+var disabledButtonOpacity = {
+    '&:disabled, &:disabled:active': {
+        opacity: 0.4,
+    },
+};
 export var PrimaryButton = createComponent('button')({
     displayName: 'PrimaryButton',
     Component: function (_a, ref, Element) {
@@ -32,33 +42,77 @@ export var PrimaryButton = createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
-        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getPrimaryButtonColors(theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+        theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
+        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getPrimaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
+            icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(ButtonLabel, null, children),
-            dataLabel && size !== 'small' && React.createElement(ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+            dataLabel && dataLabelSizes.includes(size) && React.createElement(ButtonLabelData, null, dataLabel),
+            icon && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
-export var getPrimaryButtonColors = function (_a) {
-    var themePrimary = _a.canvas.palette.primary;
-    return ({
-        default: {
-            background: themePrimary.main,
-            icon: themePrimary.contrast,
-            label: themePrimary.contrast,
-        },
-        hover: {
-            background: themePrimary.dark,
-        },
-        active: {
-            background: themePrimary.darkest,
-        },
-        focus: {
-            background: themePrimary.main,
-        },
-        disabled: {
-            background: themePrimary.light,
-        },
-    });
+export var getPrimaryButtonColors = function (variant, theme) {
+    var themePrimary = theme.canvas.palette.primary;
+    switch (variant) {
+        case undefined:
+        default:
+            return {
+                default: {
+                    background: themePrimary.main,
+                    icon: themePrimary.contrast,
+                    label: themePrimary.contrast,
+                },
+                hover: {
+                    background: themePrimary.dark,
+                },
+                active: {
+                    background: themePrimary.darkest,
+                },
+                focus: {
+                    background: themePrimary.main,
+                },
+                disabled: {
+                    background: themePrimary.main,
+                },
+            };
+        case 'inverse':
+            return {
+                default: {
+                    background: colors.frenchVanilla100,
+                    icon: colors.blackPepper400,
+                    label: colors.blackPepper400,
+                    labelData: colors.blackPepper400,
+                },
+                hover: {
+                    background: colors.soap300,
+                    icon: colors.blackPepper500,
+                    label: colors.blackPepper500,
+                    labelData: colors.blackPepper500,
+                },
+                active: {
+                    background: colors.soap300,
+                    icon: colors.blackPepper500,
+                    label: colors.blackPepper500,
+                    labelData: colors.blackPepper500,
+                },
+                focus: {
+                    background: colors.frenchVanilla100,
+                    border: colors.blackPepper400,
+                    icon: colors.blackPepper400,
+                    label: colors.blackPepper400,
+                    labelData: colors.blackPepper400,
+                    focusRing: focusRing({
+                        separation: 1,
+                        innerColor: colors.blackPepper500,
+                        outerColor: colors.frenchVanilla100,
+                    }, theme),
+                },
+                // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
+                disabled: {
+                    background: colors.frenchVanilla100,
+                    icon: colors.blackPepper400,
+                    label: colors.blackPepper400,
+                    labelData: colors.blackPepper400,
+                },
+            };
+    }
 };

package/dist/es6/button/lib/SecondaryButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonColors } from './types';
+import { ButtonColors, ButtonSizes, IconPositions } from './types';
 export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
     /**
      * The variant of the SecondaryButton.
@@ -9,10 +9,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
      */
     variant?: 'inverse' | undefined;
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The data label of the Button.
      * Note: not displayed at `small` size
@@ -24,10 +26,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
      */
     icon?: CanvasSystemIcon;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false

package/dist/es6/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA8C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA+FpC,CAAC"}

package/dist/es6/button/lib/SecondaryButton.js

@@ -24,6 +24,15 @@ import * as React from 'react';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { useTheme, createComponent, focusRing, } from '@workday/canvas-kit-react/common';
 import { ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon } from './parts';
+// Button sizes where data labels are enabled
+var dataLabelSizes = ['medium', 'large'];
+// All disabled buttons are set to 40% opacity.
+// This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
+var disabledButtonOpacity = {
+    '&:disabled, &:disabled:active': {
+        opacity: 0.4,
+    },
+};
 export var SecondaryButton = createComponent('button')({
     displayName: 'SecondaryButton',
     Component: function (_a, ref, Element) {
@@ -34,11 +43,11 @@ export var SecondaryButton = createComponent('button')({
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
         theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
-        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getSecondaryButtonColors(variant, theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getSecondaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
+            icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(ButtonLabel, null, children),
-            dataLabel && size !== 'small' && React.createElement(ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+            dataLabel && dataLabelSizes.includes(size) && React.createElement(ButtonLabelData, null, dataLabel),
+            icon && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
 export var getSecondaryButtonColors = function (variant, theme) {
@@ -74,12 +83,13 @@ export var getSecondaryButtonColors = function (variant, theme) {
                     label: colors.blackPepper400,
                     labelData: colors.blackPepper400,
                 },
+                // Identical to 'default' styles. ButtonContainer will set opacity to 40%
                 disabled: {
                     background: 'transparent',
-                    border: 'rgba(30, 30, 30, 0.4)',
-                    icon: 'rgba(30, 30, 30, 0.4)',
-                    label: 'rgba(30, 30, 30, 0.4)',
-                    labelData: 'rgba(30, 30, 30, 0.4)',
+                    border: colors.blackPepper400,
+                    icon: colors.blackPepper400,
+                    label: colors.blackPepper400,
+                    labelData: colors.blackPepper400,
                 },
             };
         case 'inverse':
@@ -115,12 +125,12 @@ export var getSecondaryButtonColors = function (variant, theme) {
                         outerColor: colors.frenchVanilla100,
                     }, theme),
                 },
+                // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
                 disabled: {
                     background: 'transparent',
-                    border: 'rgba(255, 255, 255, 0.4)',
-                    icon: 'rgba(255, 255, 255, 0.4)',
-                    label: 'rgba(255, 255, 255, 0.4)',
-                    labelData: 'rgba(255, 255, 255, 0.4)',
+                    border: colors.frenchVanilla100,
+                    icon: colors.frenchVanilla100,
+                    label: colors.frenchVanilla100,
                 },
             };
     }

package/dist/es6/button/lib/parts/ButtonContainer.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { CSSObject } from '@emotion/core';
 import { GrowthBehavior, EmotionCanvasTheme, StyledType } from '@workday/canvas-kit-react/common';
-import { ButtonColors } from '../types';
+import { ButtonColors, ButtonSizes } from '../types';
 export interface ButtonContainerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, GrowthBehavior {
     colors?: ButtonColors;
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The ref to the button that the styled component renders.
      */

package/dist/es6/button/lib/parts/ButtonContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMAqK3B,CAAC"}
+{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAGnD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMA8K3B,CAAC"}

package/dist/es6/button/lib/parts/ButtonContainer.js

@@ -45,15 +45,9 @@ export var ButtonContainer = styled('button', {
     var size = _a.size;
     switch (size) {
         case 'large':
-            return {
-                fontSize: type.properties.fontSizes[16],
-                minWidth: '112px',
-                height: '48px',
-                padding: "0 " + space.l,
-                '& > * ': {
-                    margin: "0 " + spaceNumbers.xs / 2 + "px",
-                },
-            };
+            return __assign(__assign({}, type.levels.body.small), { fontWeight: type.properties.fontWeights.bold, minWidth: '112px', height: '48px', padding: "0 " + space.l, '& > * ': {
+                    margin: "0 " + spaceNumbers.xxs / 2 + "px",
+                } });
         case 'medium':
         default:
             return {
@@ -73,6 +67,14 @@ export var ButtonContainer = styled('button', {
                     margin: "0 " + spaceNumbers.xxxs / 2 + "px",
                 },
             };
+        case 'extraSmall':
+            return {
+                height: space.m,
+                padding: "0 " + space.xs,
+                '& > * ': {
+                    margin: "0 " + spaceNumbers.xxxs / 2 + "px",
+                },
+            };
     }
 }, function (_a) {
     var grow = _a.grow;

package/dist/es6/button/lib/parts/ButtonLabel.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="@emotion/core" />
-export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "hidden" | "color" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, import("../../../common").EmotionCanvasTheme>;
+export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "hidden" | "color" | "style" | "title" | "children" | "css" | "dir" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, import("../../../common").EmotionCanvasTheme>;
 //# sourceMappingURL=ButtonLabel.d.ts.map

package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts

@@ -1,20 +1,23 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { ButtonSizes, IconPositions } from '../types';
 export interface ButtonLabelIconProps {
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The icon of the Button.
      * Note: not displayed at `small` size
      */
     icon?: CanvasSystemIcon;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false

package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAqBD,eAAO,MAAM,eAAe,4GAmB3B,CAAC"}
+{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,UAAU,CAAC;AACpD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAuCD,eAAO,MAAM,eAAe,4GAkB3B,CAAC"}

package/dist/es6/button/lib/parts/ButtonLabelIcon.js

@@ -25,8 +25,30 @@ import { space } from '@workday/canvas-kit-react/tokens';
 import isPropValid from '@emotion/is-prop-valid';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { styled } from '@workday/canvas-kit-react/common';
-var ICON_SIZE = 24;
-var SMALL_ICON_SIZE = 20;
+var iconSizes = {
+    extraSmall: 18,
+    small: 20,
+    medium: 20,
+    large: 24,
+};
+var getIconPositionStyles = function (_a) {
+    var iconPosition = _a.iconPosition, size = _a.size;
+    // Adjust margin values for visual balance, large buttons require 8px
+    var balancingMargin = size === 'large' ? space.xxs : space.xxxs;
+    // iconPosition can only be "right", "left", or undefined (defaults to "left")
+    if (iconPosition === 'right') {
+        return {
+            marginLeft: undefined,
+            marginRight: "-" + balancingMargin + " !important",
+        };
+    }
+    else {
+        return {
+            marginLeft: "-" + balancingMargin + " !important",
+            marginRight: undefined,
+        };
+    }
+};
 var ButtonLabelIconStyled = styled('span', {
     shouldForwardProp: function (prop) { return isPropValid(prop) && prop !== 'size'; },
 })({
@@ -34,23 +56,16 @@ var ButtonLabelIconStyled = styled('span', {
 }, function (_a) {
     var size = _a.size;
     return ({
-        width: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
-        height: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
-    });
-}, function (_a) {
-    var iconPosition = _a.iconPosition;
-    return ({
-        marginLeft: iconPosition === 'right' ? undefined : "-" + space.xxxs + " !important",
-        marginRight: iconPosition === 'right' ? "-" + space.xxxs + " !important" : undefined,
+        width: size ? iconSizes[size] : iconSizes.medium,
+        height: size ? iconSizes[size] : iconSizes.medium,
     });
-});
+}, getIconPositionStyles);
 export var ButtonLabelIcon = function (_a) {
     var icon = _a.icon, size = _a.size, iconPosition = _a.iconPosition, _b = _a.shouldMirrorIcon, shouldMirrorIcon = _b === void 0 ? false : _b, elemProps = __rest(_a, ["icon", "size", "iconPosition", "shouldMirrorIcon"]);
-    /* istanbul ignore next line for coverage */
     if (icon === undefined) {
         return null;
     }
-    var iconSize = size === 'small' ? SMALL_ICON_SIZE : undefined;
+    var iconSize = size ? iconSizes[size] : undefined;
     return (React.createElement(ButtonLabelIconStyled, __assign({ iconPosition: iconPosition, size: size }, elemProps),
         React.createElement(SystemIcon, { size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon })));
 };

package/dist/es6/button/lib/types.d.ts

@@ -19,4 +19,12 @@ export interface ButtonColors {
     };
     disabled: ButtonStateColors;
 }
+/**
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+ * If no size is provided, it will default to `medium`.
+ *
+ * @default 'medium'
+ */
+export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
+export declare type IconPositions = 'left' | 'right';
 //# sourceMappingURL=types.d.ts.map

package/dist/es6/button/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}