@workday/canvas-kit-react 6.0.0-alpha.0-next.28 → 6.0.0-alpha.0-next.33

package/button/lib/SecondaryButton.tsx

@@ -10,7 +10,7 @@ import {
   focusRing,
 } from '@workday/canvas-kit-react/common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors} from './types';
+import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
 
 export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
@@ -20,10 +20,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
@@ -35,10 +37,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
@@ -47,6 +50,16 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
   children?: React.ReactNode;
 }
 
+// Button sizes where data labels are enabled
+const 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.
+const disabledButtonOpacity = {
+  '&:disabled, &:disabled:active': {
+    opacity: 0.4,
+  },
+};
+
 export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
   Component: (
@@ -71,9 +84,10 @@ export const SecondaryButton = createComponent('button')({
       as={Element}
       colors={getSecondaryButtonColors(variant, theme)}
       size={size}
+      extraStyles={disabledButtonOpacity}
       {...elemProps}
     >
-      {icon && size !== 'small' && iconPosition === 'left' && (
+      {icon && iconPosition === 'left' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -82,8 +96,8 @@ export const SecondaryButton = createComponent('button')({
         />
       )}
       <ButtonLabel>{children}</ButtonLabel>
-      {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
-      {icon && size !== 'small' && iconPosition === 'right' && (
+      {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
+      {icon && iconPosition === 'right' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -136,12 +150,13 @@ export const getSecondaryButtonColors = (
           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)', // Black Pepper 400 @ 40%
-          icon: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
-          label: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
-          labelData: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
+          border: colors.blackPepper400,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
         },
       };
     case 'inverse':
@@ -180,12 +195,12 @@ export const getSecondaryButtonColors = (
             theme
           ),
         },
+        // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
         disabled: {
           background: 'transparent',
-          border: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
-          icon: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
-          label: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
-          labelData: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
+          border: colors.frenchVanilla100,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
         },
       };
   }

package/button/lib/TertiaryButton.tsx

@@ -7,9 +7,9 @@ import {
   EmotionCanvasTheme,
   createComponent,
 } from '@workday/canvas-kit-react/common';
-import {colors, space, type, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors} from './types';
+import {ButtonColors, TertiaryButtonSizes, IconPositions} from './types';
 import {ButtonContainer, ButtonLabelIcon, ButtonLabel} from './parts';
 
 export interface TertiaryButtonProps extends Themeable {
@@ -19,15 +19,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.
    */
@@ -87,8 +90,8 @@ const getTertiaryButtonColors = (
       },
       disabled: {
         background: 'transparent',
-        icon: 'rgba(255, 255, 255, 0.5)',
-        label: 'rgba(255, 255, 255, 0.5)',
+        icon: colors.frenchVanilla100,
+        label: colors.frenchVanilla100,
       },
     };
   } else {
@@ -113,26 +116,34 @@ const getTertiaryButtonColors = (
         focusRing: focusRing({}, theme),
       },
       disabled: {
-        background: 'transparent',
-        icon: themePrimary.light,
-        label: themePrimary.light,
+        icon: themePrimary.main,
+        label: themePrimary.main,
       },
     };
   }
 };
 
-const containerStyles = {
-  borderRadius: borderRadius.m,
-  border: '0',
-  padding: `0 ${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',
+const getPaddingStyles = (
+  icon: CanvasSystemIcon | undefined,
+  iconPosition: 'left' | 'right'
+): string => {
+  // 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}`;
+  }
+  // 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}`;
+  }
+  // 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.
+const disabledButtonOpacity = {
+  '&:disabled, &:disabled:active': {
+    opacity: 0.4,
   },
 };
 
@@ -155,19 +166,17 @@ export const TertiaryButton = createComponent('button')({
     ref,
     Element
   ) => {
-    // Note: We don't use ButtonLabel because the label styles differ from other button types
-    const allContainerStyles: CSSObject = allCaps
-      ? {
-          ...containerStyles,
-          textTransform: 'uppercase',
-          fontWeight: type.properties.fontWeights.bold,
-          fontSize: size === 'medium' ? type.properties.fontSizes[16] : undefined,
-          letterSpacing: '.5px',
-        }
-      : {
-          ...containerStyles,
-          fontSize: size === 'medium' ? type.properties.fontSizes[14] : undefined,
-        };
+    const allContainerStyles: CSSObject = {
+      borderRadius: borderRadius.m,
+      border: '0',
+      padding: getPaddingStyles(icon, iconPosition),
+      minWidth: 'auto',
+      textTransform: allCaps ? 'uppercase' : undefined,
+      '.wdc-text-button-label': {
+        textDecoration: 'underline',
+      },
+      ...disabledButtonOpacity,
+    };
 
     return (
       <ButtonContainer

package/button/lib/parts/ButtonContainer.tsx

@@ -142,6 +142,8 @@ export const ButtonContainer = styled('button', {
         };
       case 'extraSmall':
         return {
+          ...type.levels.subtext.medium,
+          fontWeight: type.properties.fontWeights.bold,
           height: space.m,
           padding: `0 ${space.xs}`,
           '& > * ': {

package/button/lib/types.ts

@@ -28,5 +28,6 @@ export interface ButtonColors {
  * @default 'medium'
  */
 export type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
-
+// TODO: Remove TertiaryButtonSizes in favor of button sizes when we add Tertiary large
+export type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
 export type IconPositions = 'left' | 'right';

package/common/index.ts

@@ -6,3 +6,4 @@ export * from './lib/styles';
 export * from './lib/utils';
 export * from './lib/CanvasProvider';
 export * from './lib/InputProvider';
+export * from './lib/EllipsisText';

package/common/lib/EllipsisText.tsx

@@ -0,0 +1,11 @@
+import styled, {CSSObject} from '@emotion/styled';
+import {ElementComponent} from '..';
+
+export const ellipsisStyles: CSSObject = {
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+};
+
+// Recast as an `ElementComponent` due to better type support for `as` and `ref`
+export const EllipsisText = (styled('span')(ellipsisStyles) as any) as ElementComponent<'span', {}>;

package/common/lib/utils/components.ts

@@ -132,6 +132,7 @@ export type ElementComponent<T extends React.ElementType, P> = {
   ): JSX.Element;
   (props: PropsWithAs<P, T>): JSX.Element;
   displayName?: string;
+  as<E extends React.ElementType>(as: E): ElementComponent<E, P>;
 };
 
 export type Component<P> = {
@@ -233,6 +234,11 @@ export const createComponent = <
   });
   ReturnedComponent.displayName = displayName;
 
+  // The `any`s are here because `ElementComponent` takes care of the `as` type and the
+  // `ReturnComponent` type is overridden
+  (ReturnedComponent as any).as = (as: any) =>
+    createComponent(as)({displayName, Component, subComponents});
+
   // Cast as `any`. We have already specified the return type. Be careful making changes to this
   // file due to this `any` `ReturnedComponent` is a `React.ForwardRefExoticComponent`, but we want
   // it to be either an `Component` or `ElementComponent`
@@ -278,7 +284,7 @@ export const createHook = <M extends Model<any, any>, PO extends {}, PI extends
 ): BehaviorHook<M, PO> => {
   return (model, elemProps, ref) => {
     const props = mergeProps(fn(model, ref, elemProps || ({} as any)), elemProps || ({} as any));
-    if (!props.hasOwnProperty('ref')) {
+    if (!props.hasOwnProperty('ref') && ref) {
       // This is the weird "incoming ref isn't in props, but outgoing ref is in props" thing
       props.ref = ref;
     }
@@ -286,11 +292,32 @@ export const createHook = <M extends Model<any, any>, PO extends {}, PI extends
   };
 };
 
-export type BehaviorHook<M extends Model<any, any>, O extends {}> = <P extends {}, R>(
-  model: M,
-  elemProps?: P,
-  ref?: React.Ref<R>
-) => O & P & (R extends HTMLOrSVGElement ? {ref: React.Ref<R>} : {});
+export const subModelHook = <M extends Model<any, any>, SM extends Model<any, any>, O extends {}>(
+  fn: (model: M) => SM,
+  hook: BehaviorHook<SM, O>
+): BehaviorHook<M, O> => {
+  return (model: M, props: any, ref: React.Ref<any>) => {
+    return hook(fn(model), props, ref);
+  };
+};
+
+// Typescript function parameters are contravariant while return types are covariant. This is a
+// problem when someone hands us a model that correctly extends `Model<any, any>`, but adds extra
+// properties to the model. So `M extends Model<any, any>`. But the `BehaviorHook` is the return
+// type which will reverse the direction which is no longer true: `Model<any, any> extends M`. In
+// order to avoid this issue, we use the `bivarianceHack` found in ReactJS type definitions. This
+// hack forces Typescript to treat `M` as a bivariant allowing extension to go either direction.
+// Normally this would be less type safe, but we're using a generic `M` as a placeholder so there
+// isn't a real issue. Not 100% this is a bug, but the "hack" is a bit messy.
+// https://www.stephanboyer.com/post/132/what-are-covariance-and-contravariance
+// https://stackoverflow.com/questions/52667959/what-is-the-purpose-of-bivariancehack-in-typescript-types/52668133
+export type BehaviorHook<M extends Model<any, any>, O extends {}> = {
+  bivarianceHack<P extends {}, R>(
+    model: M,
+    elemProps?: P,
+    ref?: React.Ref<R>
+  ): O & P & (R extends HTMLOrSVGElement ? {ref: React.Ref<R>} : {});
+}['bivarianceHack'];
 
 function setRef<T>(ref: React.Ref<T> | undefined, value: T): void {
   if (ref) {
@@ -327,7 +354,7 @@ function setRef<T>(ref: React.Ref<T> | undefined, value: T): void {
  *   return <div ref={elementRef}/>
  * })
  */
-export function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): (instance: T) => void {
+export function useForkRef<T>(ref1?: React.Ref<T>, ref2?: React.Ref<T>): React.RefCallback<T> {
   return (value: T) => {
     setRef(ref1, value);
     setRef(ref2, value);
@@ -410,9 +437,9 @@ export function useModelContext<T>(context: React.Context<T>, model?: T): T {
  *   return <div id="foo" {...props}>{children}</div>
  * })
  */
-export function composeHooks<M extends Model<any, any>, O1 extends {}, P extends {}, O2 extends {}>(
-  hook1: (model: M, props: P, ref: React.Ref<any>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<any>) => O2
+export function composeHooks<M extends Model<any, any>, O1 extends {}, O2 extends {}>(
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>
 ): BehaviorHook<M, O1 & O2>;
 
 export function composeHooks<
@@ -423,9 +450,9 @@ export function composeHooks<
   O2 extends {},
   O3 extends {}
 >(
-  hook1: (model: M, props: P, ref: React.Ref<R>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<R>) => O2,
-  hook3: (model: M, props: P, ref: React.Ref<R>) => O3
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>,
+  hook3: BehaviorHook<M, O3>
 ): BehaviorHook<M, O1 & O2 & O3>;
 export function composeHooks<
   M extends Model<any, any>,
@@ -436,10 +463,10 @@ export function composeHooks<
   O3 extends {},
   O4 extends {}
 >(
-  hook1: (model: M, props: P, ref: React.Ref<R>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<R>) => O2,
-  hook3: (model: M, props: P, ref: React.Ref<R>) => O3,
-  hook4: (model: M, props: P, ref: React.Ref<R>) => O4
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>,
+  hook3: BehaviorHook<M, O3>,
+  hook4: BehaviorHook<M, O4>
 ): BehaviorHook<M, O1 & O2 & O3 & O4>;
 export function composeHooks<
   M extends Model<any, any>,
@@ -451,11 +478,11 @@ export function composeHooks<
   O4 extends {},
   O5 extends {}
 >(
-  hook1: (model: M, props: P, ref: React.Ref<R>) => O1,
-  hook2: (model: M, props: P, ref: React.Ref<R>) => O2,
-  hook3: (model: M, props: P, ref: React.Ref<R>) => O3,
-  hook4: (model: M, props: P, ref: React.Ref<R>) => O4,
-  hook5: (model: M, props: P, ref: React.Ref<R>) => O5
+  hook1: BehaviorHook<M, O1>,
+  hook2: BehaviorHook<M, O2>,
+  hook3: BehaviorHook<M, O3>,
+  hook4: BehaviorHook<M, O4>,
+  hook5: BehaviorHook<M, O5>
 ): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
 export function composeHooks<M extends Model<any, any>, R, P extends {}, O extends {}>(
   ...hooks: ((model: M, props: P, ref: React.Ref<R>) => O)[]
@@ -465,7 +492,7 @@ export function composeHooks<M extends Model<any, any>, R, P extends {}, O exten
       return hook(model, props, props.ref || ref);
     }, props);
 
-    if (!returnProps.hasOwnProperty('ref')) {
+    if (!returnProps.hasOwnProperty('ref') && ref) {
       // This is the weird "incoming ref isn't in props, but outgoing ref is in props" thing
       returnProps.ref = ref;
     }

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/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,
                 },
             };
     }