@workday/canvas-kit-react 6.0.0-alpha.0-next.27 → 6.0.0-alpha.0-next.31

package/button/lib/PrimaryButton.tsx

@@ -6,17 +6,27 @@ import {
   Themeable,
   EmotionCanvasTheme,
   createComponent,
+  focusRing,
 } from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors} from './types';
+
 import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
+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
@@ -28,10 +38,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
@@ -40,6 +51,16 @@ export interface PrimaryButtonProps 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 PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
   Component: (
@@ -49,6 +70,7 @@ export const PrimaryButton = createComponent('button')({
       theme = useTheme(),
       size = 'medium',
       iconPosition = 'left',
+      variant,
       dataLabel,
       icon,
       shouldMirrorIcon = false,
@@ -61,11 +83,12 @@ export const PrimaryButton = createComponent('button')({
     <ButtonContainer
       ref={ref}
       as={Element}
-      colors={getPrimaryButtonColors(theme)}
+      colors={getPrimaryButtonColors(variant, theme)}
       size={size}
+      extraStyles={disabledButtonOpacity}
       {...elemProps}
     >
-      {icon && size !== 'small' && iconPosition === 'left' && (
+      {icon && iconPosition === 'left' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -74,8 +97,8 @@ export const PrimaryButton = 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}
@@ -87,26 +110,81 @@ export const PrimaryButton = createComponent('button')({
   ),
 });
 
-export const getPrimaryButtonColors = ({
-  canvas: {
-    palette: {primary: themePrimary},
-  },
-}: EmotionCanvasTheme): ButtonColors => ({
-  default: {
-    background: themePrimary.main,
-    icon: themePrimary.contrast,
-    label: themePrimary.contrast,
-  },
-  hover: {
-    background: themePrimary.dark,
-  },
-  active: {
-    background: themePrimary.darkest,
-  },
-  focus: {
-    background: themePrimary.main,
-  },
-  disabled: {
-    background: themePrimary.light,
-  },
-});
+export const getPrimaryButtonColors = (
+  variant: 'inverse' | undefined,
+  theme: EmotionCanvasTheme
+) => {
+  const {
+    canvas: {
+      palette: {primary: themePrimary},
+    },
+  } = theme;
+
+  switch (variant) {
+    case undefined:
+    default:
+      return {
+        default: {
+          background: themePrimary.main,
+          icon: themePrimary.contrast,
+          label: themePrimary.contrast,
+        },
+        hover: {
+          background: themePrimary.dark,
+        },
+        active: {
+          background: themePrimary.darkest,
+        },
+        focus: {
+          background: themePrimary.main,
+        },
+        disabled: {
+          background: themePrimary.main,
+        },
+      };
+
+    case 'inverse':
+      return {
+        default: {
+          background: colors.frenchVanilla100,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+        },
+        hover: {
+          background: colors.soap300,
+          icon: colors.blackPepper500,
+          label: colors.blackPepper500,
+          labelData: colors.blackPepper500,
+        },
+        active: {
+          background: colors.soap300,
+          icon: colors.blackPepper500,
+          label: colors.blackPepper500,
+          labelData: colors.blackPepper500,
+        },
+        focus: {
+          background: colors.frenchVanilla100,
+          border: colors.blackPepper400,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+          focusRing: focusRing(
+            {
+              separation: 1,
+              innerColor: colors.blackPepper500,
+              outerColor: colors.frenchVanilla100,
+            },
+            theme
+          ),
+        },
+        // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
+        disabled: {
+          background: colors.frenchVanilla100,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+        },
+      };
+  }
+};

package/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

@@ -10,7 +10,7 @@ import {
   EmotionCanvasTheme,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {ButtonColors} from '../types';
+import {ButtonColors, ButtonSizes} from '../types';
 import {buttonLabelDataClassName} from './ButtonLabelData';
 
 export interface ButtonContainerProps
@@ -18,10 +18,12 @@ export interface ButtonContainerProps
     GrowthBehavior {
   colors?: ButtonColors;
   /**
-   * The size of the Button.
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+   * If no size is provided, it will default to `medium`.
+   *
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ButtonSizes;
   /**
    * The ref to the button that the styled component renders.
    */
@@ -110,12 +112,13 @@ export const ButtonContainer = styled('button', {
     switch (size) {
       case 'large':
         return {
-          fontSize: type.properties.fontSizes[16],
+          ...type.levels.body.small,
+          fontWeight: type.properties.fontWeights.bold,
           minWidth: '112px',
           height: '48px',
           padding: `0 ${space.l}`,
           '& > * ': {
-            margin: `0 ${spaceNumbers.xs / 2}px`,
+            margin: `0 ${spaceNumbers.xxs / 2}px`,
           },
         };
       case 'medium':
@@ -137,6 +140,16 @@ export const ButtonContainer = styled('button', {
             margin: `0 ${spaceNumbers.xxxs / 2}px`,
           },
         };
+      case 'extraSmall':
+        return {
+          ...type.levels.subtext.medium,
+          fontWeight: type.properties.fontWeights.bold,
+          height: space.m,
+          padding: `0 ${space.xs}`,
+          '& > * ': {
+            margin: `0 ${spaceNumbers.xxxs / 2}px`,
+          },
+        };
     }
   },
   ({grow}) => grow && {width: '100%', maxWidth: '100%'},

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -5,22 +5,25 @@ import isPropValid from '@emotion/is-prop-valid';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {styled} from '@workday/canvas-kit-react/common';
 
+import {ButtonSizes, IconPositions} from '../types';
 export interface ButtonLabelIconProps {
   /**
-   * The size of the Button.
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+   *
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ButtonSizes;
   /**
    * The icon of the Button.
    * Note: not displayed at `small` size
    */
   icon?: CanvasSystemIcon;
   /**
-   * The position of the TertiaryButton icon.
+   * Button icon positions can either be `left` or `right`.
+   * If no value is provided, it defaults to `left`.
    * @default 'left'
    */
-  iconPosition?: 'left' | 'right';
+  iconPosition?: IconPositions;
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
    * @default false
@@ -28,8 +31,29 @@ export interface ButtonLabelIconProps {
   shouldMirrorIcon?: boolean;
 }
 
-const ICON_SIZE = 24;
-const SMALL_ICON_SIZE = 20;
+const iconSizes: Record<ButtonSizes, number> = {
+  extraSmall: 18,
+  small: 20,
+  medium: 20,
+  large: 24,
+};
+
+const getIconPositionStyles = ({iconPosition, size}: ButtonLabelIconProps) => {
+  // Adjust margin values for visual balance, large buttons require 8px
+  const 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,
+    };
+  }
+};
 
 const ButtonLabelIconStyled = styled('span', {
   shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
@@ -38,13 +62,10 @@ const ButtonLabelIconStyled = styled('span', {
     display: 'inline-block',
   },
   ({size}) => ({
-    width: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
-    height: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
+    width: size ? iconSizes[size] : iconSizes.medium,
+    height: size ? iconSizes[size] : iconSizes.medium,
   }),
-  ({iconPosition}) => ({
-    marginLeft: iconPosition === 'right' ? undefined : `-${space.xxxs} !important`,
-    marginRight: iconPosition === 'right' ? `-${space.xxxs} !important` : undefined,
-  })
+  getIconPositionStyles
 );
 
 export const ButtonLabelIcon = ({
@@ -54,12 +75,11 @@ export const ButtonLabelIcon = ({
   shouldMirrorIcon = false,
   ...elemProps
 }: ButtonLabelIconProps) => {
-  /* istanbul ignore next line for coverage */
   if (icon === undefined) {
     return null;
   }
 
-  const iconSize = size === 'small' ? SMALL_ICON_SIZE : undefined;
+  const iconSize = size ? iconSizes[size] : undefined;
 
   return (
     <ButtonLabelIconStyled iconPosition={iconPosition} size={size} {...elemProps}>

package/button/lib/types.ts

@@ -20,3 +20,14 @@ export interface ButtonColors {
   };
   disabled: ButtonStateColors;
 }
+
+/**
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+ * If no size is provided, it will default to `medium`.
+ *
+ * @default 'medium'
+ */
+export 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';