@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.78-next.6

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

@@ -21,10 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { focusRing, useTheme, createComponent, } from '@workday/canvas-kit-react/common';
-import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { ButtonContainer, ButtonLabelIcon, ButtonLabel } from './parts';
-var getTertiaryButtonColors = function (variant, theme) {
+import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
+import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
+import { BaseButton } from './BaseButton';
+var getTertiaryButtonColors = function (variant, theme, children) {
     var themePrimary = theme.canvas.palette.primary;
     if (variant === 'inverse') {
         return {
@@ -64,66 +64,94 @@ var getTertiaryButtonColors = function (variant, theme) {
     else {
         return {
             default: {
-                icon: themePrimary.main,
+                icon: children ? themePrimary.main : colors.blackPepper400,
                 label: themePrimary.main,
             },
             hover: {
                 background: colors.soap200,
-                icon: themePrimary.dark,
+                icon: children ? themePrimary.dark : colors.blackPepper500,
                 label: themePrimary.dark,
             },
             active: {
                 background: colors.soap300,
-                icon: themePrimary.dark,
+                icon: children ? themePrimary.dark : colors.blackPepper500,
                 label: themePrimary.dark,
             },
             focus: {
-                icon: themePrimary.dark,
-                label: themePrimary.dark,
-                focusRing: focusRing({}, theme),
+                icon: children ? themePrimary.main : colors.blackPepper500,
+                label: themePrimary.main,
+                focusRing: focusRing({ innerColor: colors.blueberry400 }, theme),
             },
             disabled: {
-                icon: themePrimary.main,
+                icon: children ? themePrimary.main : colors.blackPepper400,
                 label: themePrimary.main,
             },
         };
     }
 };
-var getPaddingStyles = function (icon, iconPosition) {
-    // if there is an icon on the left, add 4px extra padding to the right for visual balance
-    if (icon && iconPosition === 'left') {
-        return "0 " + space.xs + " 0 " + space.xxs;
+var StyledButtonLabel = styled(BaseButton.Label)({
+    textDecoration: 'underline',
+});
+var StyledTertiaryButtonContainer = styled(BaseButton)({
+    border: '0',
+}, function (_a) {
+    var allCaps = _a.allCaps;
+    return ({
+        textTransform: allCaps ? 'uppercase' : undefined,
+    });
+});
+var getPaddingStyles = function (icon, iconPosition, children, size) {
+    if (children) {
+        // if there is an icon on the left, add 4px extra padding to the right for visual balance
+        if (icon && iconPosition === 'start') {
+            if (size === 'extraSmall') {
+                return "0 " + space.xxs + " 0 " + space.xxxs;
+            }
+            return "0 " + space.xs + " 0 " + space.xxs;
+        }
+        // if there is an icon on the right, add 4px extra padding to the left for visual balance
+        if (icon && iconPosition === 'end') {
+            if (size === 'extraSmall') {
+                return "0 " + space.xxxs + " 0 " + space.xxs;
+            }
+            return "0 " + space.xxs + " 0 " + space.xs;
+        }
+        // if there is no icon, return the default padding
+        return "0 " + space.xxs;
     }
-    // if there is an icon on the right, add 4px extra padding to the left for visual balance
-    if (icon && iconPosition === 'right') {
-        return "0 " + space.xxs + " 0 " + space.xs;
+    else {
+        return '0';
     }
-    // if there is no icon, return the default padding
-    return "0 " + space.xxs;
 };
-// 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,
-    },
+var getMinWidthStyles = function (children, size) {
+    var minWidthNum;
+    switch (size) {
+        case 'large':
+            minWidthNum = '48px';
+            break;
+        case 'medium':
+            minWidthNum = space.xl;
+            break;
+        case 'small':
+            minWidthNum = space.l;
+            break;
+        case 'extraSmall':
+            minWidthNum = space.m;
+            break;
+        default:
+            minWidthNum = space.xl;
+            break;
+    }
+    return children ? 'auto' : minWidthNum;
 };
 export var TertiaryButton = createComponent('button')({
     displayName: 'TertiaryButton',
     Component: function (_a, ref, Element) {
-        var 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _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, variant = _a.variant, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
-        var allContainerStyles = __assign({ borderRadius: borderRadius.m, border: '0', padding: getPaddingStyles(icon, iconPosition), minWidth: 'auto', textTransform: allCaps ? 'uppercase' : undefined, '.wdc-text-button-label': {
-                textDecoration: 'underline',
-            } }, disabledButtonOpacity);
-        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme), size: size, extraStyles: allContainerStyles }, elemProps),
-            icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
-            React.createElement(ButtonLabel, { className: "wdc-text-button-label" }, children),
-            icon && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, children = _a.children, icon = _a.icon, _d = _a.shouldMirrorIcon, shouldMirrorIcon = _d === void 0 ? false : _d, allCaps = _a.allCaps, elemProps = __rest(_a, ["size", "iconPosition", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
+        var theme = useTheme();
+        return (React.createElement(StyledTertiaryButtonContainer, __assign({ ref: ref, as: Element, allCaps: allCaps, colors: getTertiaryButtonColors(variant, theme, children), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), style: { borderRadius: children ? borderRadius.m : borderRadius.circle } }, elemProps),
+            icon && iconPosition === 'start' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+            children && React.createElement(StyledButtonLabel, null, children),
+            icon && iconPosition === 'end' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAK1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,+EAwChC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,+EAuChC,CAAC"}

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

@@ -22,11 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { focusRing, useTheme, createComponent, } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { ButtonContainer } from './parts';
+import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
+import { BaseButton } from './BaseButton';
 import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
-var containerStyles = {
+var StyledToolbarDropdownButton = styled(BaseButton)({
     padding: space.zero,
     minWidth: space.l,
     width: 'auto',
@@ -46,7 +45,7 @@ var containerStyles = {
         marginRight: 0,
         width: 18,
     },
-};
+});
 export var ToolbarDropdownButton = createComponent('button')({
     displayName: 'ToolbarDropdownButton',
     Component: function (_a, ref, Element) {
@@ -57,9 +56,9 @@ export var ToolbarDropdownButton = 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, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "shouldMirrorIcon", "children"]);
-        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme), extraStyles: containerStyles }, elemProps),
-            icon ? (React.createElement(SystemIcon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirror: shouldMirrorIcon })) : (children),
-            React.createElement(SystemIcon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: chevronDownSmallIcon, shouldMirror: shouldMirrorIcon })));
+        return (React.createElement(StyledToolbarDropdownButton, __assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme) }, elemProps),
+            icon ? (React.createElement(BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children),
+            React.createElement(BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon })));
     },
 });
 var getToolbarDropdownButtonColors = function (theme) {
@@ -83,6 +82,7 @@ var getToolbarDropdownButtonColors = function (theme) {
         disabled: {
             icon: colors.soap600,
             background: 'transparent',
+            opacity: '1',
         },
     };
 };

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

@@ -1,6 +1,9 @@
 import { Themeable } from '@workday/canvas-kit-react/common';
-import { IconButtonProps } from './IconButton';
-export interface ToolbarIconButtonProps extends Omit<IconButtonProps, 'size' | 'variant'>, Themeable {
+import { TertiaryButtonProps } from './TertiaryButton';
+export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size' | 'variant'>, Themeable {
+    onToggleChange?: (toggled: boolean | undefined) => void;
+    toggled?: boolean;
+    shouldMirrorIcon?: boolean;
 }
 export declare const ToolbarIconButton: import("../../common").ElementComponent<"button", ToolbarIconButtonProps>;
 //# sourceMappingURL=ToolbarIconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,SAAS;CAAG;AAgBhB,eAAO,MAAM,iBAAiB,2EA6C5B,CAAC"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,iBAAiB,2EAiD5B,CAAC"}

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

@@ -22,24 +22,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 var _a;
 import * as React from 'react';
-import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { focusRing, useTheme, createComponent, } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { ButtonContainer } from './parts';
-var containerStyles = (_a = {
-        padding: 0,
-        minWidth: space.l,
-        width: space.l,
-        height: space.l,
-        borderRadius: borderRadius.m
-    },
+import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
+import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
+import { BaseButton } from './BaseButton';
+var StyledToolbarIconButton = styled(BaseButton)((_a = {},
     _a['& .wd-icon'] = {
         display: 'inline-block',
         verticalAlign: 'middle',
         width: 20,
         height: 20,
     },
-    _a);
+    _a));
 export var ToolbarIconButton = createComponent('button')({
     displayName: 'ToolbarIconButton',
     Component: function (_a, ref, Element) {
@@ -62,7 +55,7 @@ export var ToolbarIconButton = createComponent('button')({
                 }
             }
         }, [toggled, onToggleChange]);
-        return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(SystemIcon, { icon: icon, shouldMirror: shouldMirrorIcon }) : children));
+        return (React.createElement(StyledToolbarIconButton, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, "aria-pressed": toggled, padding: "zero", minWidth: space.l, width: space.l, height: space.l, borderRadius: borderRadius.m }, elemProps), icon ? React.createElement(BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon }) : children));
     },
 });
 var getToolbarIconButtonColors = function (theme, toggled) {
@@ -88,6 +81,7 @@ var getToolbarIconButtonColors = function (theme, toggled) {
         disabled: {
             icon: toggled ? themePrimary.light : colors.soap600,
             background: toggled ? themePrimary.lightest : 'transparent',
+            opacity: '1',
         },
     };
 };

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

@@ -1,5 +1,5 @@
-export declare const ButtonLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface ButtonLabelProps extends BoxProps {
+}
+export declare const ButtonLabel: import("../../../common").ElementComponent<"span", ButtonLabelProps>;
 //# sourceMappingURL=ButtonLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLabel.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;2GAKtB,CAAC"}
+{"version":3,"file":"ButtonLabel.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;CAAG;AASrD,eAAO,MAAM,WAAW,sEAStB,CAAC"}

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

@@ -1,7 +1,38 @@
-import { styled } from '@workday/canvas-kit-react/common';
-export var ButtonLabel = styled('span')({
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled, createComponent } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+var StyledButtonLabel = styled(Box.as('span'))({
     position: 'relative',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
 });
+export var ButtonLabel = createComponent('span')({
+    displayName: 'ButtonLabel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledButtonLabel, __assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});

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

@@ -1,6 +1,7 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { ButtonSizes, IconPositions } from '../types';
-export interface ButtonLabelIconProps {
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface ButtonLabelIconProps extends BoxProps {
     /**
      * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      *
@@ -15,7 +16,7 @@ export interface ButtonLabelIconProps {
     /**
      * Button icon positions can either be `left` or `right`.
      * If no value is provided, it defaults to `left`.
-     * @default 'left'
+     * @default 'start'
      */
     iconPosition?: IconPositions;
     /**
@@ -24,5 +25,5 @@ export interface ButtonLabelIconProps {
      */
     shouldMirrorIcon?: boolean;
 }
-export declare const ButtonLabelIcon: ({ icon, size, iconPosition, shouldMirrorIcon, ...elemProps }: ButtonLabelIconProps) => JSX.Element | null;
+export declare const ButtonLabelIcon: import("../../../common").ElementComponent<"span", ButtonLabelIconProps>;
 //# sourceMappingURL=ButtonLabelIcon.d.ts.map

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,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,iEAMzB,oBAAoB,uBAYtB,CAAC"}
+{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,UAAU,CAAC;AAGpD,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE1D,MAAM,WAAW,oBAAqB,SAAQ,QAAQ;IACpD;;;;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;AASD,eAAO,MAAM,eAAe,0EAyB1B,CAAC"}

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

@@ -20,52 +20,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as React from 'react';
-import { space } from '@workday/canvas-kit-react/tokens';
-import isPropValid from '@emotion/is-prop-valid';
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { styled } from '@workday/canvas-kit-react/common';
 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'; },
-})({
-    display: 'inline-block',
-}, function (_a) {
-    var size = _a.size;
-    return ({
-        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"]);
-    if (icon === undefined) {
-        return null;
-    }
-    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 })));
-};
+export var ButtonLabelIcon = createComponent('span')({
+    displayName: 'ButtonLabelIconNew',
+    Component: function (_a, ref, Element) {
+        var icon = _a.icon, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, elemProps = __rest(_a, ["icon", "size", "shouldMirrorIcon"]);
+        if (icon === undefined) {
+            return null;
+        }
+        var iconSize = iconSizes[size];
+        return (React.createElement(SystemIcon, __assign({ size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon, width: size ? iconSizes[size] : iconSizes.large, height: size ? iconSizes[size] : iconSizes.large, display: "inline-block" }, elemProps)));
+    },
+});

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

@@ -1,5 +1,3 @@
-export { ButtonContainer } from './ButtonContainer';
 export { ButtonLabel } from './ButtonLabel';
-export { ButtonLabelData } from './ButtonLabelData';
 export { ButtonLabelIcon } from './ButtonLabelIcon';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC"}

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

@@ -1,4 +1,2 @@
-export { ButtonContainer } from './ButtonContainer';
 export { ButtonLabel } from './ButtonLabel';
-export { ButtonLabelData } from './ButtonLabelData';
 export { ButtonLabelIcon } from './ButtonLabelIcon';

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

@@ -8,7 +8,7 @@ export interface ButtonStateColors {
     icon?: string;
     iconFill?: boolean;
     label?: string;
-    labelData?: string;
+    opacity?: string;
 }
 export interface ButtonColors {
     default: ButtonStateColors;
@@ -27,5 +27,5 @@ export interface ButtonColors {
  */
 export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
 export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
-export declare type IconPositions = 'left' | 'right';
+export declare type IconPositions = 'start' | 'end';
 //# 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,iBAAiB,CAAC;AAE1C;;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,mBAAmB,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpE,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;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,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;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,mBAAmB,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC"}

package/dist/es6/common/lib/parts/_brand-assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_brand-assets.d.ts","sourceRoot":"","sources":["../../../../../common/lib/parts/_brand-assets.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAA+C,CAAC;AAExE,eAAO,MAAM,YAAY,QAAgD,CAAC;AAE1E,eAAO,MAAM,YAAY,QAAgD,CAAC;AAE1E,eAAO,MAAM,aAAa,QAAiD,CAAC;AAE5E,eAAO,MAAM,gBAAgB,QAAqD,CAAC"}
+{"version":3,"file":"_brand-assets.d.ts","sourceRoot":"","sources":["../../../../../common/lib/parts/_brand-assets.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAAsD,CAAC;AAE/E,eAAO,MAAM,YAAY,QAAuD,CAAC;AAEjF,eAAO,MAAM,YAAY,QAAuD,CAAC;AAEjF,eAAO,MAAM,aAAa,QAAwD,CAAC;AAEnF,eAAO,MAAM,gBAAgB,QAA4D,CAAC"}

package/dist/es6/common/lib/parts/_brand-assets.js

@@ -1,6 +1,6 @@
 var CDN_URI = '//design.workday.com/images/';
-export var dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\">";
-export var dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\">";
-export var wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\">";
-export var wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\">";
-export var miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\">";
+export var dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\" alt=\"\">";
+export var dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\" alt=\"\">";
+export var wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\" alt=\"\">";
+export var wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\" alt=\"\">";
+export var miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\" alt=\"\">";

package/dist/es6/common/lib/utils/StaticStates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,yBAAyB,EAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,uCAA0B,aAAa,GAAG,SAmB3E,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAC5F,WAAW,CACZ,CASA,CAAC"}
+{"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,yBAAyB,EAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,uCAA0B,aAAa,GAAG,SAoB3E,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAC5F,WAAW,CACZ,CASA,CAAC"}

package/dist/es6/common/lib/utils/StaticStates.js

@@ -31,8 +31,11 @@ export var convertToStaticStates = function (obj) {
         var newKey = key
             .replace(/^:/, '&:') // handle shorthand like ":focus"
             .replace(/,(\s+):/g, ',$1&:') // handle selectors like ":focus, :hover"
-            .replace(/:(focus|hover|active)/g, '.$1')
-            .replace(/\[data\-whatinput=("|')?(mouse|touch|keyboard|pointer)("|')?]/g, '[data-whatinput="noop"]');
+            .replace(/:(focus|hover|active)/g, '.$1');
+        // Remove any selectors that use data-whatinput. Leaving them in would cause focus rings to disappear when the user clicks with a mouse.
+        if (/data-whatinput/.test(key)) {
+            return result;
+        }
         var value = typeof obj[key] === 'object' ? convertToStaticStates(obj[key]) : obj[key];
         var newObj = __assign(__assign({}, result), (_a = {}, _a[newKey] = value, _a));
         return newObj;

package/dist/es6/icon/lib/AccentIcon.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasAccentIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
@@ -14,7 +13,7 @@ export interface AccentIconStyles {
      */
     transparent?: boolean;
 }
-export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type' | 'color'> {
     /**
      *  The icon to display from `@workday/canvas-accent-icons-web`.
      */
@@ -26,7 +25,6 @@ export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src'
     size?: number;
 }
 export declare const accentIconStyles: ({ color, transparent, }: AccentIconStyles) => CSSObject;
-export default class AccentIcon extends React.Component<AccentIconProps> {
-    render(): JSX.Element;
-}
+declare const AccentIcon: import("../../common").ElementComponent<"span", AccentIconProps>;
+export default AccentIcon;
 //# sourceMappingURL=AccentIcon.d.ts.map

package/dist/es6/icon/lib/AccentIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAuBP"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,QAAA,MAAM,UAAU,kEAoBd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/es6/icon/lib/AccentIcon.js

@@ -1,16 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -37,6 +24,7 @@ import * as React from 'react';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
 import Icon from './Icon';
+import { createComponent } from '../../common';
 export var accentIconStyles = function (_a) {
     var _b = _a.color, color = _b === void 0 ? colors.blueberry500 : _b, _c = _a.transparent, transparent = _c === void 0 ? false : _c;
     return ({
@@ -48,15 +36,11 @@ export var accentIconStyles = function (_a) {
         },
     });
 };
-var AccentIcon = /** @class */ (function (_super) {
-    __extends(AccentIcon, _super);
-    function AccentIcon() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AccentIcon.prototype.render = function () {
-        var _a = this.props, _b = _a.transparent, transparent = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 56 : _c, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "iconRef", "shouldMirror"]);
-        return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.Accent, styles: accentIconStyles({ color: color, transparent: transparent }), size: size, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
-    };
-    return AccentIcon;
-}(React.Component));
+var AccentIcon = createComponent('span')({
+    displayName: 'AccentIcon',
+    Component: function (_a, ref, Element) {
+        var _b = _a.transparent, transparent = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 56 : _c, icon = _a.icon, color = _a.color, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "shouldMirror"]);
+        return (React.createElement(Icon, __assign({ src: icon, type: CanvasIconTypes.Accent, styles: accentIconStyles({ color: color, transparent: transparent }), size: size, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    },
+});
 export default AccentIcon;