@workday/canvas-kit-react 10.0.0-alpha.538-next.0 → 10.0.0-alpha.540-next.0

package/button/index.ts

@@ -1,7 +1,3 @@
-export {PrimaryButton, PrimaryButtonProps} from './lib/PrimaryButton';
-export {SecondaryButton, SecondaryButtonProps} from './lib/SecondaryButton';
-export {TertiaryButton, TertiaryButtonProps} from './lib/TertiaryButton';
-export {DeleteButton, DeleteButtonProps} from './lib/DeleteButton';
 export {
   DeprecatedButton as deprecated_Button,
   DeprecatedButtonProps,
@@ -9,12 +5,13 @@ export {
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
-export {
-  BaseButton,
-  ButtonContainerProps,
-  BaseButtonProps,
-  getMinWidthStyles,
-  getPaddingStyles,
-} from './lib/BaseButton';
 export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';
+export * from './lib/PrimaryButton';
+export * from './lib/SecondaryButton';
+export * from './lib/TertiaryButton';
+export * from './lib/DeleteButton';
+export * from './lib/BaseButton';
+export * from './lib/ToolbarDropdownButton';
+export * from './lib/ToolbarIconButton';
+export * from './lib/types';

package/button/lib/BaseButton.tsx

@@ -1,24 +1,15 @@
 import * as React from 'react';
 
-import {ButtonLabelIcon} from './parts/ButtonLabelIcon';
-import {ButtonLabel} from './parts/ButtonLabel';
+import {ButtonLabelIcon} from '../lib/parts/ButtonLabelIcon';
+import {ButtonLabel} from '../lib/parts/ButtonLabel';
 
-import {
-  createComponent,
-  GrowthBehavior,
-  mouseFocusBehavior,
-  focusRing,
-  styled,
-  EmotionCanvasTheme,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
+import {createComponent, GrowthBehavior, focusRing} from '@workday/canvas-kit-react/common';
+import {createStyles, createVars, cssVar, createModifiers} from '@workday/canvas-kit-styling';
 import {SystemIconProps} from '@workday/canvas-kit-react/icon';
-import {boxStyleFn} from '@workday/canvas-kit-react/layout';
-import {borderRadius, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
-
-import {ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes} from './types';
-
-import {CSSObject} from '@emotion/styled';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 
 export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
@@ -29,13 +20,33 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    * If no size is provided, it will default to `medium`.
+   *
+   * @default 'medium
    */
   size?: ButtonSizes;
+  /**
+   * The icon of the Button.
+   * Note: not displayed at `small` size
+   */
+  icon?: CanvasSystemIcon;
   /**
    * Whether the icon should received filled (colored background layer) or regular styles.
    * Corresponds to `toggled` in ToolbarIconButton
    */
   fillIcon?: boolean;
+  /**
+   * Button icon positions can either be `start` or `end`.
+   * If no value is provided, it defaults to `start`.
+   *
+   * @default 'start'
+   */
+  iconPosition?: IconPositions;
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
+  children?: React.ReactNode;
 }
 
 /**
@@ -45,260 +56,267 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
  */
 export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
 
-function getIconColorSelectors(
-  {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  }: EmotionCanvasTheme,
-  color: string,
-  fill?: boolean
-): CSSObject {
-  return {
-    '&:focus span, &:hover span, & span': {
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: color,
-      },
-      '.wd-icon-background': {
-        fill: fill ? color : undefined,
-      },
-      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-        fill: fill
-          ? color === themePrimary.contrast
-            ? themePrimary.main
-            : themePrimary.contrast
-          : color,
-      },
-    },
-  };
-}
+/**
+ * Factory function for creating Button vars.
+ */
+const createButtonVars = () =>
+  createVars(
+    'background',
+    'border',
+    'boxShadowInner',
+    'boxShadowOuter',
+    'icon',
+    'label',
+    'opacity',
+    'borderRadius'
+  );
 
-const ButtonContainer = styled('button')<StyledType & ButtonContainerProps>(
-  {
-    ...type.levels.subtext.large,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
+/**
+ * Temporary css variables to be used across all Buttons.
+ */
+export const buttonVars = {
+  default: createButtonVars(),
+  hover: createButtonVars(),
+  active: createButtonVars(),
+  focus: createButtonVars(),
+  disabled: createButtonVars(),
+};
+
+/**
+ * Base styles for Buttons.
+ */
+const baseButtonStyles = createStyles({
+  fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
+  fontSize: '0.875rem',
+  lineHeight: 'normal',
+  letterSpacing: '0.015rem',
+  fontWeight: 'bold',
+  backgroundColor: cssVar(buttonVars.default.background, 'transparent'),
+  color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400)),
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  gap: cssVar(system.space.x2, space.xxs),
+  borderColor: cssVar(buttonVars.default.border, 'transparent'),
+  cursor: 'pointer',
+  display: 'inline-flex',
+  boxShadow: 'none',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box',
+  outline: '2px transparent',
+  whiteSpace: 'nowrap',
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  borderRadius: cssVar(buttonVars.default.borderRadius, system.shape.circle),
+  position: 'relative',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  transition:
+    'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
+  '&:disabled, &:disabled:active': {
+    cursor: 'default',
     boxShadow: 'none',
-    outline: 'none',
-    fontWeight: type.properties.fontWeights.bold,
-    lineHeight: 'normal',
-    whiteSpace: 'nowrap',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    borderRadius: borderRadius.circle,
-    position: 'relative',
-    verticalAlign: 'middle',
-    overflow: 'hidden',
-    border: '1px solid transparent',
-    background: 'transparent',
-    transition:
-      'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
-    '&:disabled, &:disabled:active': {
-      cursor: 'default',
-      boxShadow: 'none',
-      opacity: 0.4,
+    opacity: cssVar(buttonVars.disabled.opacity, '1'),
+  },
+  '& span .wd-icon-fill': {
+    transitionDuration: '40ms',
+    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400)),
+  },
+  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400)),
+  },
+  '&:focus-visible, &.focus': {
+    backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
+    borderColor: cssVar(buttonVars.focus.border, 'transparent'),
+    color: cssVar(buttonVars.focus.label, cssVar(base.blackPepper400)),
+    '& span .wd-icon-fill': {
+      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400)),
     },
-
-    '&:hover:active': {transitionDuration: '40ms'},
-
-    '& > *:first-of-type': {
-      marginLeft: '0',
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400)),
     },
-
-    '& > *:last-of-type': {
-      marginRight: 0,
+    ...focusRing({
+      width: 2,
+      separation: 2,
+      innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100)),
+      outerColor: cssVar(buttonVars.focus.boxShadowOuter, cssVar(brand.primary.base)),
+    }),
+  },
+  '&:hover, &.hover': {
+    backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500)),
+    borderColor: cssVar(buttonVars.hover.border, 'transparent'),
+    color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500)),
+    '& span .wd-icon-fill': {
+      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500)),
+    },
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500)),
     },
   },
-  ({size}) => {
-    switch (size) {
-      case 'large':
-        return {
-          ...type.levels.body.small,
-          fontWeight: type.properties.fontWeights.bold,
-          height: '48px',
-          '& > * ': {
-            margin: `0 ${space.xxxs}`,
-          },
-        };
-      case 'medium':
-      default:
-        return {
-          height: space.xl,
-          '& > * ': {
-            margin: `0 ${space.xxxs}`,
-          },
-        };
-      case 'small':
-        return {
-          height: space.l,
-          '& > * ': {
-            margin: `0 ${spaceNumbers.xxxs / 2}rem`,
-          },
-        };
-      case 'extraSmall':
-        return {
-          ...type.levels.subtext.medium,
-          fontWeight: type.properties.fontWeights.bold,
-          height: space.m,
-          '& > * ': {
-            margin: `0 ${spaceNumbers.xxxs / 2}rem`,
-          },
-        };
-    }
+  '&:hover:active': {transitionDuration: '40ms'},
+  '&:active, &.active': {
+    backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
+    borderColor: cssVar(buttonVars.active.border, 'transparent'),
+    color: cssVar(buttonVars.active.label, cssVar(base.blackPepper400)),
+    '& span .wd-icon-fill': {
+      fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400)),
+    },
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+      fill: cssVar(buttonVars.active.icon),
+    },
   },
-  ({grow}) => grow && {width: '100%', maxWidth: '100%'},
-  ({colors, fillIcon, theme}) => {
-    if (!colors) {
-      return;
-    }
-
-    const baseStyles = {
-      ...(colors.default.icon && {
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
-          transition: 'fill 120ms ease-in',
-        },
-        ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
-      }),
-      backgroundColor: colors.default.background,
-      borderColor: colors.default.border,
-      color: colors.default.label,
-    };
-
-    const hoverStyles = {
-      '&:hover': {
-        ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
-        backgroundColor: colors.hover.background,
-        borderColor: colors.hover.border,
-        color: colors.hover.label,
-      },
-    };
-
-    const activeStyles = {
-      '&:active, &:focus:active, &:hover:active': {
-        ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
-        backgroundColor: colors.active.background,
-        borderColor: colors.active.border,
-        color: colors.active.label,
-      },
-    };
-
-    return {
-      ...baseStyles,
-      '&:focus': {
-        ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
-        ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
-        backgroundColor: colors.focus.background,
-        borderColor: colors.focus.border,
-        color: colors.focus.label,
-      },
-
-      ...activeStyles,
-      ...hoverStyles,
-      '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-        ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
-        backgroundColor: colors.disabled.background,
-        borderColor: colors.disabled.border,
-        color: colors.disabled.label,
-        opacity: colors.disabled.opacity,
-      },
-      ...mouseFocusBehavior({
-        '&:focus': {
-          ...baseStyles,
-          ...hoverStyles,
-          ...activeStyles,
-          outline: 'none',
-          boxShadow: 'none',
-          animation: 'none',
-        },
-      }),
-    };
+  '&:disabled': {
+    backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
+    borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
+    color: cssVar(buttonVars.disabled.label, cssVar(base.blackPepper400)),
+    '& span .wd-icon-fill': {
+      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400)),
+    },
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400)),
+    },
   },
-  boxStyleFn
-);
-
-export const getMinWidthStyles = (
-  children: React.ReactNode,
-  size: ButtonSizes | TertiaryButtonSizes
-) => {
-  switch (size) {
-    case 'large':
-      return children ? '112px' : '48px';
-    case 'medium':
-      return children ? '96px' : space.xl;
-    case 'small':
-      return children ? space.xxxl : space.l;
-    case 'extraSmall':
-      return children ? 'auto' : space.m;
-    default:
-      return children ? '96px' : space.xl;
-  }
-};
-
-export const getPaddingStyles = (
-  children: React.ReactNode,
-  size: ButtonSizes | TertiaryButtonSizes,
-  icon: CanvasSystemIcon | undefined,
-  iconPosition: IconPositions | undefined
-) => {
-  // In order to calculate the correct padding, we need to know its children
-  // and what side the icon is on and if there's an icon provided
-  if (!children) {
-    // icon buttons do not have any padding
-    return 0;
-  }
-  // If there are children AND an icon
-  // 1. We check what side the icon is in
-  // 2. Adjust padding to visually center the icon and text
-  // If there is children (most likely just text)
-  // 1. We keep the padding the same on both side
-  switch (size) {
-    case 'large':
-      return icon
-        ? iconPosition === 'start'
-          ? `0 ${space.l} 0 ${space.m}`
-          : `0 ${space.m} 0 ${space.l}`
-        : `0 ${space.l}`;
-
-    case 'medium':
-      return icon
-        ? iconPosition === 'start'
-          ? `0 ${space.m} 0 20px`
-          : `0 20px 0 ${space.m}`
-        : `0 ${space.m}`;
+});
 
-    case 'small':
-      return icon
-        ? iconPosition === 'start'
-          ? `0 ${space.s} 0 ${space.xs}`
-          : `0 ${space.xs} 0 ${space.s}`
-        : `0 ${space.s}`;
+/**
+ * Button modifiers that will overwrite the base styles of Buttons.
+ * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
+ * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
+ * within a button or if there is only an icon and no text.
+ */
+export const buttonModifiers = createModifiers({
+  size: {
+    large: createStyles({
+      fontSize: cssVar(system.space.x4),
+      lineHeight: cssVar(system.space.x6),
+      letterSpacing: '0.01rem',
+      height: '48px',
+      paddingInline: cssVar(system.space.x8),
+      minWidth: '112px',
+    }),
+    medium: createStyles({
+      fontSize: '0.875rem',
+      letterSpacing: '0.015rem',
+      minWidth: '96px',
+      paddingInline: cssVar(system.space.x6),
+      height: cssVar(system.space.x10),
+    }),
+    small: createStyles({
+      fontSize: '0.875rem',
+      letterSpacing: '0.015rem',
+      height: cssVar(system.space.x8),
+      minWidth: cssVar(system.space.x20),
+      paddingInline: cssVar(system.space.x4),
+      gap: cssVar(system.space.x1),
+    }),
+    extraSmall: createStyles({
+      fontSize: '0.75rem',
+      lineHeight: cssVar(system.space.x4),
+      letterSpacing: '0.02rem',
+      height: cssVar(system.space.x6),
+      minWidth: 'auto',
+      paddingInline: cssVar(system.space.x3),
+      gap: cssVar(system.space.x1),
+    }),
+  },
+  iconPosition: {
+    largeOnly: createStyles({
+      padding: '0',
+      minWidth: cssVar(system.space.x12),
+    }),
+    largeStart: createStyles({
+      paddingInlineStart: cssVar(system.space.x6),
+      paddingInlineEnd: cssVar(system.space.x8),
+    }),
+    largeEnd: createStyles({
+      paddingInlineStart: cssVar(system.space.x8),
+      paddingInlineEnd: cssVar(system.space.x6),
+    }),
+    mediumOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x10, space.xl)}),
+    mediumStart: createStyles({
+      paddingInlineStart: cssVar(system.space.x5),
+      paddingInlineEnd: cssVar(system.space.x6),
+    }),
+    mediumEnd: createStyles({
+      paddingInlineStart: cssVar(system.space.x6),
+      paddingInlineEnd: cssVar(system.space.x5),
+    }),
+    smallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x8, space.l)}),
+    smallStart: createStyles({
+      paddingInlineStart: cssVar(system.space.x3),
+      paddingInlineEnd: cssVar(system.space.x4),
+    }),
+    smallEnd: createStyles({
+      paddingInlineStart: cssVar(system.space.x4),
+      paddingInlineEnd: cssVar(system.space.x3),
+    }),
+    extraSmallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x6, space.m)}),
+    extraSmallStart: createStyles({
+      paddingInlineStart: cssVar(system.space.x2),
+      paddingInlineEnd: cssVar(system.space.x3),
+    }),
+    extraSmallEnd: createStyles({
+      paddingInlineStart: cssVar(system.space.x3),
+      paddingInlineEnd: cssVar(system.space.x2),
+    }),
+  },
+});
 
-    case 'extraSmall':
-      return icon
-        ? iconPosition === 'start'
-          ? `0 ${space.xs} 0 ${space.xxs}`
-          : `0 ${space.xxs} 0 ${space.xs}`
-        : `0 ${space.xs}`;
+export function capitalize(string: string = '') {
+  return string.charAt(0).toUpperCase() + string.substring(1);
+}
 
-    default:
-      return icon
-        ? iconPosition === 'start'
-          ? `0 ${space.m} 0 20px`
-          : `0 20px 0 ${space.m}`
-        : `0 ${space.m}`;
-  }
-};
+export function getIconPosition(
+  size?: keyof typeof buttonModifiers.size,
+  iconPosition?: IconPositions,
+  children?: React.ReactNode
+): keyof typeof buttonModifiers.iconPosition {
+  return `${size}${capitalize(iconPosition)}` as keyof typeof buttonModifiers.iconPosition;
+}
 
+/**
+ * The base button which all other buttons are built.
+ */
 export const BaseButton = createComponent('button')({
-  displayName: 'Button',
-  Component: ({children, ...elemProps}: ButtonContainerProps, ref, Element) => {
+  displayName: 'BaseButton',
+  Component: (
+    {
+      children,
+      cs,
+      size,
+      fillIcon,
+      iconPosition,
+      icon,
+      colors,
+      shouldMirrorIcon = false,
+      ...elemProps
+    }: ButtonContainerProps,
+    ref,
+    Element
+  ) => {
+    // console.log('iconPosition', children, getIconPosition(size, iconPosition));
     return (
-      <ButtonContainer as={Element} ref={ref} type="button" {...elemProps}>
+      <Box
+        as={Element}
+        ref={ref}
+        type="button"
+        cs={[
+          baseButtonStyles,
+          buttonModifiers({
+            size: size,
+            iconPosition: getIconPosition(size, iconPosition, children),
+          }),
+          buttonVars.default(colors?.default || {}),
+          buttonVars.focus(colors?.focus || {}),
+          buttonVars.hover(colors?.hover || {}),
+          buttonVars.active(colors?.active || {}),
+          buttonVars.disabled(colors?.disabled || {}),
+          cs,
+        ]}
+        {...elemProps}
+      >
         {children}
-      </ButtonContainer>
+      </Box>
     );
   },
   subComponents: {

package/button/lib/Button.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import {BaseButton, ButtonContainerProps} from './BaseButton';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface ButtonProps extends Omit<ButtonContainerProps, 'ref'> {
+  /**
+   * Button icon positions can either be `start` or `end`.
+   * If no value is provided, it defaults to `start`.
+   *
+   * @default 'start'
+   */
+  iconPosition?: 'start' | 'end';
+}
+
+export const Button = createComponent('button')({
+  displayName: 'Button',
+  Component: (
+    {
+      children,
+      icon,
+      colors,
+      iconPosition,
+      shouldMirrorIcon,
+      size = 'medium',
+      ...elemProps
+    }: ButtonProps,
+    ref,
+    Element
+  ) => {
+    const baseIconPosition = iconPosition
+      ? iconPosition
+      : icon
+      ? children
+        ? 'start'
+        : 'only'
+      : undefined;
+
+    return (
+      <BaseButton
+        as={Element}
+        ref={ref}
+        size={size}
+        icon={icon}
+        iconPosition={baseIconPosition}
+        {...elemProps}
+      >
+        {icon && baseIconPosition === 'start' && (
+          <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
+        )}
+        {children && <BaseButton.Label>{children}</BaseButton.Label>}
+
+        {icon && baseIconPosition === 'only' && (
+          <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
+        )}
+        {icon && baseIconPosition === 'end' && (
+          <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
+        )}
+      </BaseButton>
+    );
+  },
+});