@workday/canvas-kit-react 5.3.0-next.10 → 5.3.0-next.24

package/action-bar/lib/ActionBar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import {colors, commonColors, space} from '@workday/canvas-kit-react/tokens';
+import {styled} from '@workday/canvas-kit-react/common';
+import {colors, commonColors, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -10,45 +10,58 @@ export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
   fixed?: boolean;
 }
 
-const ActionBarContainer = styled('div')(
+function getFixedStyles(fixed = false): CSSProperties {
+  return fixed
+    ? {
+        position: 'fixed',
+        left: 0,
+        bottom: 0,
+        right: 0,
+      }
+    : {};
+}
+
+const ActionBarContainer = styled('div')<ActionBarProps>(
   {
     borderTop: `solid 1px ${colors.soap400}`,
     background: commonColors.background,
     padding: space.s,
     boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-    '@media (max-width: 575px)': {
-      padding: space.xxs,
-    },
   },
-  ({fixed}: ActionBarProps) =>
-    fixed && {
-      position: 'fixed',
-      left: 0,
-      bottom: 0,
-      right: 0,
-    }
+  ({fixed, theme}) => {
+    return {
+      ...getFixedStyles(fixed),
+      [theme.canvas.breakpoints.down('s')]: {
+        padding: space.xxs,
+      },
+    };
+  }
 );
 
-const ChildrenContainer = styled('div')({
-  display: 'inline-block',
-  padding: `0 ${space.m}`,
-  '*:not(:first-of-type)': {
-    marginLeft: space.s,
+const ChildrenContainer = styled('div')(
+  {
+    display: 'inline-block',
+    padding: `0 ${space.m}`,
+    '*:not(:first-of-type)': {
+      marginLeft: space.s,
+    },
   },
-  '@media (max-width: 575px)': {
-    display: 'flex',
-    padding: space.xxs,
-    justifyContent: 'center',
-    flexDirection: 'row-reverse',
-    '> *': {
-      flex: 1,
-      '&:not(:first-of-type)': {
-        marginRight: space.s,
-        marginLeft: 0,
+  ({theme}) => ({
+    [theme.canvas.breakpoints.down('s')]: {
+      display: 'flex',
+      padding: space.xxs,
+      justifyContent: 'center',
+      flexDirection: 'row-reverse',
+      '> *': {
+        flex: 1,
+        '&:not(:first-of-type)': {
+          marginRight: space.s,
+          marginLeft: 0,
+        },
       },
     },
-  },
-});
+  })
+);
 
 export default class ActionBar extends React.Component<ActionBarProps> {
   public render() {

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%'},