@workday/canvas-kit-react 5.3.0-next.9 → 5.3.0

package/common/lib/utils/index.ts

@@ -11,4 +11,5 @@ export * from './components';
 export * from './models';
 export * from './elements';
 export * from './useWindowSize';
+export * from './useResizeObserver';
 export * from './StaticStates';

package/common/lib/utils/mergeProps.ts

@@ -39,6 +39,10 @@ export function mergeProps<T extends object, S extends object>(
         typeof targetProps[key] === 'function'
       ) {
         // we don't support removing callbacks via `undefined`, so do nothing here
+      } else if (key === 'ref' && sourceProps.hasOwnProperty('ref')) {
+        // refs should never be overridden. This doesn't happen normally, but happens with hook
+        // composition
+        (returnProps as any).ref = (returnProps as any).ref || (sourceProps as any).ref;
       } else {
         // @ts-ignore TS has more object constraint complaints that aren't useful here
         returnProps[key] = sourceProps[key];

package/common/lib/utils/useConstant.ts

@@ -0,0 +1,18 @@
+import {useRef} from 'react';
+
+/**
+ * Get a constant value in React, only running the callback function once.  `React.useMemo` does not
+ * guarantee that a function will only be run once.
+ *
+ * @example
+ * const value = useConstant(generateUniqueId)
+ */
+export function useConstant<T>(fn: () => T): T {
+  const ref = useRef<T>();
+
+  if (!ref.current) {
+    ref.current = fn();
+  }
+
+  return ref.current;
+}

package/common/lib/utils/useResizeObserver.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import useResizeObserverOriginal from 'use-resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
+
+if (typeof window !== 'undefined' && !(window as any).ResizeObserver) {
+  (window as any).ResizeObserver = ResizeObserver;
+}
+
+// `useResizeObserver` contains this fix in 8.0.0:
+// https://github.com/ZeeCoder/use-resize-observer/commit/bd0f3c8597bac0d853b88cf585256aac1bd4f554
+// v8.0.0 requires TS4.2. So we'll manually patch until we're ready for TS4.2+
+export const useResizeObserver: typeof useResizeObserverOriginal = (params = {}) => {
+  const widthRef = React.useRef<number | undefined>();
+  const heightRef = React.useRef<number | undefined>();
+  const onResize = params.onResize
+    ? (data: {width: number | undefined; height: number | undefined}) => {
+        if (widthRef.current !== data.width || heightRef.current !== data.height) {
+          widthRef.current = data.width;
+          heightRef.current = data.height;
+          params.onResize!(data);
+        }
+      }
+    : undefined;
+  return useResizeObserverOriginal({...params, onResize});
+};
+
+// When the dependency is moved up to v8.0.0, remove the above function and export below instead
+// export {useResizeObserver};

package/common/lib/utils/useUniqueId.ts

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import uuid from 'uuid/v4';
 
-export const generateUniqueId = () => uuid().replace(/^[0-9]*/gi, '');
+import {useConstant} from './useConstant';
+
+export const generateUniqueId = () => uuid().replace(/^[0-9\-]*/gi, '');
 
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -9,7 +10,7 @@ export const generateUniqueId = () => uuid().replace(/^[0-9]*/gi, '');
  */
 export const useUniqueId = (id?: string) => {
   // https://codesandbox.io/s/react-functional-component-ids-p2ndq
-  const [generatedId] = React.useState(generateUniqueId);
+  const generatedId = useConstant(generateUniqueId);
   return id || generatedId;
 };
 

package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA0CD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAuDD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}

package/dist/commonjs/action-bar/lib/ActionBar.js

@@ -41,49 +41,57 @@ var __importStar = (this && this.__importStar) || function (mod) {
     result["default"] = mod;
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var ActionBarContainer = styled_1.default('div')({
+function getFixedStyles(fixed) {
+    if (fixed === void 0) { fixed = false; }
+    return fixed
+        ? {
+            position: 'fixed',
+            left: 0,
+            bottom: 0,
+            right: 0,
+        }
+        : {};
+}
+var ActionBarContainer = common_1.styled('div')({
     borderTop: "solid 1px " + tokens_1.colors.soap400,
     background: tokens_1.commonColors.background,
     padding: tokens_1.space.s,
     boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-    '@media (max-width: 575px)': {
-        padding: tokens_1.space.xxs,
-    },
 }, function (_a) {
-    var fixed = _a.fixed;
-    return fixed && {
-        position: 'fixed',
-        left: 0,
-        bottom: 0,
-        right: 0,
-    };
+    var _b;
+    var fixed = _a.fixed, theme = _a.theme;
+    return __assign(__assign({}, getFixedStyles(fixed)), (_b = {}, _b[theme.canvas.breakpoints.down('s')] = {
+        padding: tokens_1.space.xxs,
+    }, _b));
 });
-var ChildrenContainer = styled_1.default('div')({
+var ChildrenContainer = common_1.styled('div')({
     display: 'inline-block',
     padding: "0 " + tokens_1.space.m,
     '*:not(:first-of-type)': {
         marginLeft: tokens_1.space.s,
     },
-    '@media (max-width: 575px)': {
-        display: 'flex',
-        padding: tokens_1.space.xxs,
-        justifyContent: 'center',
-        flexDirection: 'row-reverse',
-        '> *': {
-            flex: 1,
-            '&:not(:first-of-type)': {
-                marginRight: tokens_1.space.s,
-                marginLeft: 0,
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b[theme.canvas.breakpoints.down('s')] = {
+            display: 'flex',
+            padding: tokens_1.space.xxs,
+            justifyContent: 'center',
+            flexDirection: 'row-reverse',
+            '> *': {
+                flex: 1,
+                '&:not(:first-of-type)': {
+                    marginRight: tokens_1.space.s,
+                    marginLeft: 0,
+                },
             },
         },
-    },
+        _b);
 });
 var ActionBar = /** @class */ (function (_super) {
     __extends(ActionBar, _super);

package/dist/commonjs/button/lib/PrimaryButton.d.ts

@@ -1,13 +1,20 @@
 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 { ButtonSizes, IconPositions } from './types';
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     /**
-     * The size of the Button.
+     * The variant of the PrimaryButton.
+     * @default undefined
+     */
+    variant?: 'inverse';
+    /**
+     * 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
@@ -19,10 +26,11 @@ export interface PrimaryButtonProps 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
@@ -31,5 +39,71 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     children?: React.ReactNode;
 }
 export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
-export declare const getPrimaryButtonColors: ({ canvas: { palette: { primary: themePrimary }, }, }: EmotionCanvasTheme) => ButtonColors;
+export declare const getPrimaryButtonColors: (variant: "inverse" | undefined, theme: EmotionCanvasTheme) => {
+    default: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData?: undefined;
+    };
+    hover: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+    active: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+    focus: {
+        background: string;
+        border?: undefined;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+        focusRing?: undefined;
+    };
+    disabled: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+} | {
+    default: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    hover: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    active: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    focus: {
+        background: string;
+        border: string;
+        icon: string;
+        label: string;
+        labelData: string;
+        focusRing: import("@emotion/serialize").CSSObject;
+    };
+    disabled: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+};
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/commonjs/button/lib/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;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,aAAa,uEA6CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;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,aAAa,uEA+CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ElC,CAAC"}

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

@@ -31,7 +31,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var parts_1 = require("./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,
+    },
+};
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
     Component: function (_a, ref, Element) {
@@ -41,33 +51,77 @@ exports.PrimaryButton = common_1.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 ? common_1.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(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getPrimaryButtonColors(theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+        theme = _b === void 0 ? common_1.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(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getPrimaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
+            icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, null, children),
-            dataLabel && size !== 'small' && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+            dataLabel && dataLabelSizes.includes(size) && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
+            icon && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
-exports.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,
-        },
-    });
+exports.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: tokens_1.colors.frenchVanilla100,
+                    icon: tokens_1.colors.blackPepper400,
+                    label: tokens_1.colors.blackPepper400,
+                    labelData: tokens_1.colors.blackPepper400,
+                },
+                hover: {
+                    background: tokens_1.colors.soap300,
+                    icon: tokens_1.colors.blackPepper500,
+                    label: tokens_1.colors.blackPepper500,
+                    labelData: tokens_1.colors.blackPepper500,
+                },
+                active: {
+                    background: tokens_1.colors.soap300,
+                    icon: tokens_1.colors.blackPepper500,
+                    label: tokens_1.colors.blackPepper500,
+                    labelData: tokens_1.colors.blackPepper500,
+                },
+                focus: {
+                    background: tokens_1.colors.frenchVanilla100,
+                    border: tokens_1.colors.blackPepper400,
+                    icon: tokens_1.colors.blackPepper400,
+                    label: tokens_1.colors.blackPepper400,
+                    labelData: tokens_1.colors.blackPepper400,
+                    focusRing: common_1.focusRing({
+                        separation: 1,
+                        innerColor: tokens_1.colors.blackPepper500,
+                        outerColor: tokens_1.colors.frenchVanilla100,
+                    }, theme),
+                },
+                // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
+                disabled: {
+                    background: tokens_1.colors.frenchVanilla100,
+                    icon: tokens_1.colors.blackPepper400,
+                    label: tokens_1.colors.blackPepper400,
+                    labelData: tokens_1.colors.blackPepper400,
+                },
+            };
+    }
 };

package/dist/commonjs/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/commonjs/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/commonjs/button/lib/SecondaryButton.js

@@ -33,6 +33,15 @@ var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
 var parts_1 = require("./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,
+    },
+};
 exports.SecondaryButton = common_1.createComponent('button')({
     displayName: 'SecondaryButton',
     Component: function (_a, ref, Element) {
@@ -43,11 +52,11 @@ exports.SecondaryButton = common_1.createComponent('button')({
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
         theme = _b === void 0 ? common_1.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(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getSecondaryButtonColors(variant, theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getSecondaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
+            icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, null, children),
-            dataLabel && size !== 'small' && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+            dataLabel && dataLabelSizes.includes(size) && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
+            icon && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
 exports.getSecondaryButtonColors = function (variant, theme) {
@@ -83,12 +92,13 @@ exports.getSecondaryButtonColors = function (variant, theme) {
                     label: tokens_1.colors.blackPepper400,
                     labelData: tokens_1.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: tokens_1.colors.blackPepper400,
+                    icon: tokens_1.colors.blackPepper400,
+                    label: tokens_1.colors.blackPepper400,
+                    labelData: tokens_1.colors.blackPepper400,
                 },
             };
         case 'inverse':
@@ -124,12 +134,12 @@ exports.getSecondaryButtonColors = function (variant, theme) {
                         outerColor: tokens_1.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: tokens_1.colors.frenchVanilla100,
+                    icon: tokens_1.colors.frenchVanilla100,
+                    label: tokens_1.colors.frenchVanilla100,
                 },
             };
     }

package/dist/commonjs/button/lib/TertiaryButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Themeable } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { TertiaryButtonSizes, IconPositions } from './types';
 export interface TertiaryButtonProps extends Themeable {
     /**
      * The variant of the TertiaryButton.
@@ -8,15 +9,18 @@ export interface TertiaryButtonProps extends Themeable {
      */
     variant?: 'inverse' | undefined;
     /**
-     * The size of the TertiaryButton.
+     * There are three button sizes: `extraSmall`, `small`, and `medium`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium';
+    size?: TertiaryButtonSizes;
     /**
-     * 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;
     /**
      * The icon of the TertiaryButton.
      */

package/dist/commonjs/button/lib/TertiaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,wEA8DzB,CAAC"}
+{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,mBAAmB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGzE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAsGD,eAAO,MAAM,cAAc,wEA4DzB,CAAC"}

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

@@ -65,8 +65,8 @@ var getTertiaryButtonColors = function (variant, theme) {
             },
             disabled: {
                 background: 'transparent',
-                icon: 'rgba(255, 255, 255, 0.5)',
-                label: 'rgba(255, 255, 255, 0.5)',
+                icon: tokens_1.colors.frenchVanilla100,
+                label: tokens_1.colors.frenchVanilla100,
             },
         };
     }
@@ -92,25 +92,29 @@ var getTertiaryButtonColors = function (variant, theme) {
                 focusRing: common_1.focusRing({}, theme),
             },
             disabled: {
-                background: 'transparent',
-                icon: themePrimary.light,
-                label: themePrimary.light,
+                icon: themePrimary.main,
+                label: themePrimary.main,
             },
         };
     }
 };
-var containerStyles = {
-    borderRadius: tokens_1.borderRadius.m,
-    border: '0',
-    padding: "0 " + tokens_1.space.xxs,
-    minWidth: 'auto',
-    '.wdc-text-button-label': {
-        borderBottom: '2px solid transparent',
-        paddingTop: '2px',
-        transition: 'border-color 0.3s',
-    },
-    '&:hover:not([disabled]) .wdc-text-button-label': {
-        borderBottomColor: 'currentColor',
+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 " + tokens_1.space.xs + " 0 " + tokens_1.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 " + tokens_1.space.xxs + " 0 " + tokens_1.space.xs;
+    }
+    // if there is no icon, return the default padding
+    return "0 " + tokens_1.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,
     },
 };
 exports.TertiaryButton = common_1.createComponent('button')({
@@ -123,9 +127,9 @@ exports.TertiaryButton = common_1.createComponent('button')({
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
         theme = _b === void 0 ? common_1.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"]);
-        // Note: We don't use ButtonLabel because the label styles differ from other button types
-        var allContainerStyles = allCaps
-            ? __assign(__assign({}, containerStyles), { textTransform: 'uppercase', fontWeight: tokens_1.type.properties.fontWeights.bold, fontSize: size === 'medium' ? tokens_1.type.properties.fontSizes[16] : undefined, letterSpacing: '.5px' }) : __assign(__assign({}, containerStyles), { fontSize: size === 'medium' ? tokens_1.type.properties.fontSizes[14] : undefined });
+        var allContainerStyles = __assign({ borderRadius: tokens_1.borderRadius.m, border: '0', padding: getPaddingStyles(icon, iconPosition), minWidth: 'auto', textTransform: allCaps ? 'uppercase' : undefined, '.wdc-text-button-label': {
+                textDecoration: 'underline',
+            } }, disabledButtonOpacity);
         return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme), size: size, extraStyles: allContainerStyles }, elemProps),
             icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, { className: "wdc-text-button-label" }, children),