@workday/canvas-kit-react 6.0.0-alpha.0-next.26 → 6.0.0-alpha.0-next.30

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/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,14 @@ export const ButtonContainer = styled('button', {
             margin: `0 ${spaceNumbers.xxxs / 2}px`,
           },
         };
+      case 'extraSmall':
+        return {
+          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,13 @@ 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';
+
+export type IconPositions = 'left' | 'right';