@workday/canvas-kit-react 5.3.0 → 5.3.4

package/action-bar/lib/ActionBar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
+import styled from '@emotion/styled';
+import {colors, commonColors, space} from '@workday/canvas-kit-react/tokens';
 
 export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -10,58 +10,45 @@ export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
   fixed?: boolean;
 }
 
-function getFixedStyles(fixed = false): CSSProperties {
-  return fixed
-    ? {
-        position: 'fixed',
-        left: 0,
-        bottom: 0,
-        right: 0,
-      }
-    : {};
-}
-
-const ActionBarContainer = styled('div')<ActionBarProps>(
+const ActionBarContainer = styled('div')(
   {
     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, theme}) => {
-    return {
-      ...getFixedStyles(fixed),
-      [theme.canvas.breakpoints.down('s')]: {
-        padding: space.xxs,
-      },
-    };
-  }
+  ({fixed}: ActionBarProps) =>
+    fixed && {
+      position: 'fixed',
+      left: 0,
+      bottom: 0,
+      right: 0,
+    }
 );
 
-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,
   },
-  ({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,
-        },
+  '@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,
       },
     },
-  })
-);
+  },
+});
 
 export default class ActionBar extends React.Component<ActionBarProps> {
   public render() {

package/button/lib/PrimaryButton.tsx

@@ -6,27 +6,17 @@ 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 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`.
-   *
+   * The size of the Button.
    * @default 'medium'
    */
-  size?: ButtonSizes;
+  size?: 'small' | 'medium' | 'large';
   /**
    * The data label of the Button.
    * Note: not displayed at `small` size
@@ -38,11 +28,10 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
    */
   icon?: CanvasSystemIcon;
   /**
-   * Button icon positions can either be `left` or `right`.
-   * If no value is provided, it defaults to `left`.
+   * The position of the TertiaryButton icon.
    * @default 'left'
    */
-  iconPosition?: IconPositions;
+  iconPosition?: 'left' | 'right';
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
    * @default false
@@ -51,16 +40,6 @@ 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: (
@@ -70,7 +49,6 @@ export const PrimaryButton = createComponent('button')({
       theme = useTheme(),
       size = 'medium',
       iconPosition = 'left',
-      variant,
       dataLabel,
       icon,
       shouldMirrorIcon = false,
@@ -83,12 +61,11 @@ export const PrimaryButton = createComponent('button')({
     <ButtonContainer
       ref={ref}
       as={Element}
-      colors={getPrimaryButtonColors(variant, theme)}
+      colors={getPrimaryButtonColors(theme)}
       size={size}
-      extraStyles={disabledButtonOpacity}
       {...elemProps}
     >
-      {icon && iconPosition === 'left' && (
+      {icon && size !== 'small' && iconPosition === 'left' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -97,8 +74,8 @@ export const PrimaryButton = createComponent('button')({
         />
       )}
       <ButtonLabel>{children}</ButtonLabel>
-      {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
-      {icon && iconPosition === 'right' && (
+      {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
+      {icon && size !== 'small' && iconPosition === 'right' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -110,81 +87,26 @@ export const PrimaryButton = createComponent('button')({
   ),
 });
 
-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,
-        },
-      };
-  }
-};
+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,
+  },
+});

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, ButtonSizes, IconPositions} from './types';
+import {ButtonColors} from './types';
 import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
 
 export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
@@ -20,12 +20,10 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
    */
   variant?: 'inverse' | undefined;
   /**
-   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-   * If no size is provided, it will default to `medium`.
-   *
+   * The size of the Button.
    * @default 'medium'
    */
-  size?: ButtonSizes;
+  size?: 'small' | 'medium' | 'large';
   /**
    * The data label of the Button.
    * Note: not displayed at `small` size
@@ -37,11 +35,10 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
    */
   icon?: CanvasSystemIcon;
   /**
-   * Button icon positions can either be `left` or `right`.
-   * If no value is provided, it defaults to `left`.
+   * The position of the TertiaryButton icon.
    * @default 'left'
    */
-  iconPosition?: IconPositions;
+  iconPosition?: 'left' | 'right';
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
    * @default false
@@ -50,16 +47,6 @@ 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: (
@@ -84,10 +71,9 @@ export const SecondaryButton = createComponent('button')({
       as={Element}
       colors={getSecondaryButtonColors(variant, theme)}
       size={size}
-      extraStyles={disabledButtonOpacity}
       {...elemProps}
     >
-      {icon && iconPosition === 'left' && (
+      {icon && size !== 'small' && iconPosition === 'left' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -96,8 +82,8 @@ export const SecondaryButton = createComponent('button')({
         />
       )}
       <ButtonLabel>{children}</ButtonLabel>
-      {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
-      {icon && iconPosition === 'right' && (
+      {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
+      {icon && size !== 'small' && iconPosition === 'right' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -150,13 +136,12 @@ export const getSecondaryButtonColors = (
           label: colors.blackPepper400,
           labelData: colors.blackPepper400,
         },
-        // Identical to 'default' styles. ButtonContainer will set opacity to 40%
         disabled: {
           background: 'transparent',
-          border: colors.blackPepper400,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
+          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%
         },
       };
     case 'inverse':
@@ -195,12 +180,12 @@ export const getSecondaryButtonColors = (
             theme
           ),
         },
-        // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
         disabled: {
           background: 'transparent',
-          border: colors.frenchVanilla100,
-          icon: colors.frenchVanilla100,
-          label: colors.frenchVanilla100,
+          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%
         },
       };
   }

package/button/lib/TertiaryButton.tsx

@@ -7,9 +7,9 @@ import {
   EmotionCanvasTheme,
   createComponent,
 } from '@workday/canvas-kit-react/common';
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {colors, space, type, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors, TertiaryButtonSizes, IconPositions} from './types';
+import {ButtonColors} from './types';
 import {ButtonContainer, ButtonLabelIcon, ButtonLabel} from './parts';
 
 export interface TertiaryButtonProps extends Themeable {
@@ -19,18 +19,15 @@ export interface TertiaryButtonProps extends Themeable {
    */
   variant?: 'inverse' | undefined;
   /**
-   * There are three button sizes: `extraSmall`, `small`, and `medium`.
-   * If no size is provided, it will default to `medium`.
-   *
+   * The size of the TertiaryButton.
    * @default 'medium'
    */
-  size?: TertiaryButtonSizes;
+  size?: 'small' | 'medium';
   /**
-   * Button icon positions can either be `left` or `right`.
-   * If no value is provided, it defaults to `left`.
+   * The position of the TertiaryButton icon.
    * @default 'left'
    */
-  iconPosition?: IconPositions;
+  iconPosition?: 'left' | 'right';
   /**
    * The icon of the TertiaryButton.
    */
@@ -90,8 +87,8 @@ const getTertiaryButtonColors = (
       },
       disabled: {
         background: 'transparent',
-        icon: colors.frenchVanilla100,
-        label: colors.frenchVanilla100,
+        icon: 'rgba(255, 255, 255, 0.5)',
+        label: 'rgba(255, 255, 255, 0.5)',
       },
     };
   } else {
@@ -116,34 +113,26 @@ const getTertiaryButtonColors = (
         focusRing: focusRing({}, theme),
       },
       disabled: {
-        icon: themePrimary.main,
-        label: themePrimary.main,
+        background: 'transparent',
+        icon: themePrimary.light,
+        label: themePrimary.light,
       },
     };
   }
 };
 
-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,
+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',
   },
 };
 
@@ -166,17 +155,19 @@ export const TertiaryButton = createComponent('button')({
     ref,
     Element
   ) => {
-    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,
-    };
+    // 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,
+        };
 
     return (
       <ButtonContainer

package/button/lib/parts/ButtonContainer.tsx

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