@workday/canvas-kit-react 6.8.8 → 6.9.0-next.4

package/button/lib/TertiaryButton.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
 import {
   focusRing,
   useTheme,
   Themeable,
   EmotionCanvasTheme,
   createComponent,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors, TertiaryButtonSizes, IconPositions} from './types';
-import {ButtonContainer, ButtonLabelIcon, ButtonLabel} from './parts';
+import {ButtonColors, IconPositions, ButtonSizes} from './types';
+import {BaseButton} from './BaseButton';
 
 export interface TertiaryButtonProps extends Themeable {
   /**
@@ -24,11 +25,11 @@ export interface TertiaryButtonProps extends Themeable {
    *
    * @default 'medium'
    */
-  size?: TertiaryButtonSizes;
+  size?: ButtonSizes;
   /**
-   * Button icon positions can either be `left` or `right`.
-   * If no value is provided, it defaults to `left`.
-   * @default 'left'
+   * Button icon positions can either be `start` or `end`.
+   * If no value is provided, it defaults to `start`.
+   * @default 'start'
    */
   iconPosition?: IconPositions;
   /**
@@ -49,7 +50,8 @@ export interface TertiaryButtonProps extends Themeable {
 
 const getTertiaryButtonColors = (
   variant: 'inverse' | undefined,
-  theme: EmotionCanvasTheme
+  theme: EmotionCanvasTheme,
+  children: React.ReactNode
 ): ButtonColors => {
   const {
     canvas: {
@@ -97,66 +99,104 @@ const getTertiaryButtonColors = (
   } else {
     return {
       default: {
-        icon: themePrimary.main,
+        icon: children ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
       hover: {
         background: colors.soap200,
-        icon: themePrimary.dark,
+        icon: children ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       active: {
         background: colors.soap300,
-        icon: themePrimary.dark,
+        icon: children ? themePrimary.dark : colors.blackPepper500,
         label: themePrimary.dark,
       },
       focus: {
-        icon: themePrimary.dark,
-        label: themePrimary.dark,
-        focusRing: focusRing({}, theme),
+        icon: children ? themePrimary.main : colors.blackPepper500,
+        label: themePrimary.main,
+        focusRing: focusRing({innerColor: colors.blueberry400}, theme),
       },
       disabled: {
         background: 'transparent',
-        icon: themePrimary.main,
+        icon: children ? themePrimary.main : colors.blackPepper400,
         label: themePrimary.main,
       },
     };
   }
 };
 
+const StyledButtonLabel = styled(BaseButton.Label)({
+  textDecoration: 'underline',
+});
+
+const StyledTertiaryButtonContainer = styled(BaseButton)<
+  StyledType & Pick<TertiaryButtonProps, 'allCaps'>
+>(
+  {
+    border: '0',
+  },
+  ({allCaps}) => ({
+    textTransform: allCaps ? 'uppercase' : undefined,
+  })
+);
+
 const getPaddingStyles = (
   icon: CanvasSystemIcon | undefined,
-  iconPosition: 'left' | 'right'
+  iconPosition: 'start' | 'end',
+  children: React.ReactNode,
+  size: ButtonSizes
 ): 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 (children) {
+    // if there is an icon on the left, add 4px extra padding to the right for visual balance
+    if (icon && iconPosition === 'start') {
+      if (size === 'extraSmall') {
+        return `0 ${space.xxs} 0 ${space.xxxs}`;
+      }
+      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 === 'end') {
+      if (size === 'extraSmall') {
+        return `0 ${space.xxxs} 0 ${space.xxs}`;
+      }
+      return `0 ${space.xxs} 0 ${space.xs}`;
+    }
+    // if there is no icon, return the default padding
+    return `0 ${space.xxs}`;
+  } else {
+    return '0';
   }
-  // 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 getMinWidthStyles = (children: React.ReactNode, size: ButtonSizes): string => {
+  let minWidthNum;
+  switch (size) {
+    case 'large':
+      minWidthNum = '48px';
+      break;
+    case 'medium':
+      minWidthNum = space.xl;
+      break;
+    case 'small':
+      minWidthNum = space.l;
+      break;
+    case 'extraSmall':
+      minWidthNum = space.m;
+      break;
+    default:
+      minWidthNum = space.xl;
+      break;
+  }
+  return children ? 'auto' : minWidthNum;
 };
 
 export const TertiaryButton = createComponent('button')({
   displayName: 'TertiaryButton',
   Component: (
     {
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
       size = 'medium',
-      iconPosition = 'left',
+      iconPosition = 'start',
       variant,
       children,
       icon,
@@ -167,45 +207,38 @@ 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,
-    };
+    const theme = useTheme();
 
     return (
-      <ButtonContainer
+      <StyledTertiaryButtonContainer
         ref={ref}
         as={Element}
-        colors={getTertiaryButtonColors(variant, theme)}
+        allCaps={allCaps}
+        colors={getTertiaryButtonColors(variant, theme, children)}
         size={size}
-        extraStyles={allContainerStyles}
+        padding={getPaddingStyles(icon, iconPosition, children, size)}
+        minWidth={getMinWidthStyles(children, size)}
+        style={{borderRadius: children ? borderRadius.m : borderRadius.circle}}
         {...elemProps}
       >
-        {icon && iconPosition === 'left' && (
-          <ButtonLabelIcon
+        {icon && iconPosition === 'start' && (
+          <BaseButton.Icon
             size={size}
             iconPosition={iconPosition}
             icon={icon}
             shouldMirrorIcon={shouldMirrorIcon}
           />
         )}
-        <ButtonLabel className="wdc-text-button-label">{children}</ButtonLabel>
-        {icon && iconPosition === 'right' && (
-          <ButtonLabelIcon
+        {children && <StyledButtonLabel>{children}</StyledButtonLabel>}
+        {icon && iconPosition === 'end' && (
+          <BaseButton.Icon
             size={size}
             iconPosition={iconPosition}
             icon={icon}
             shouldMirrorIcon={shouldMirrorIcon}
           />
         )}
-      </ButtonContainer>
+      </StyledTertiaryButtonContainer>
     );
   },
 });

package/button/lib/ToolbarDropdownButton.tsx

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
+import React from 'react';
 import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {
   focusRing,
@@ -7,10 +6,11 @@ import {
   Themeable,
   EmotionCanvasTheme,
   createComponent,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {ButtonColors} from './types';
-import {ButtonContainer} from './parts';
+import {BaseButton} from './BaseButton';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {ToolbarIconButtonProps} from './ToolbarIconButton';
 
@@ -18,7 +18,7 @@ export interface ToolbarDropdownButtonProps
   extends Omit<ToolbarIconButtonProps, 'toggled' | 'onToggleChange'>,
     Themeable {}
 
-const containerStyles = {
+const StyledToolbarDropdownButton = styled(BaseButton)<StyledType & ToolbarDropdownButtonProps>({
   padding: space.zero,
   minWidth: space.l,
   width: 'auto',
@@ -38,7 +38,7 @@ const containerStyles = {
     marginRight: 0,
     width: 18, // decrease the space between a custom icon and the chevron per design
   },
-};
+});
 
 export const ToolbarDropdownButton = createComponent('button')({
   displayName: 'ToolbarDropdownButton',
@@ -56,28 +56,27 @@ export const ToolbarDropdownButton = createComponent('button')({
     Element
   ) => {
     return (
-      <ButtonContainer
+      <StyledToolbarDropdownButton
         ref={ref}
         as={Element}
         colors={getToolbarDropdownButtonColors(theme)}
-        extraStyles={containerStyles}
         {...elemProps}
       >
         {icon ? (
-          <SystemIcon
+          <BaseButton.Icon
             className={'wdc-toolbar-dropdown-btn-custom-icon'}
             icon={icon}
-            shouldMirror={shouldMirrorIcon}
+            shouldMirrorIcon={shouldMirrorIcon}
           />
         ) : (
           children
         )}
-        <SystemIcon
+        <BaseButton.Icon
           className={'wdc-toolbar-dropdown-btn-arrow'}
           icon={chevronDownSmallIcon}
-          shouldMirror={shouldMirrorIcon}
+          shouldMirrorIcon={shouldMirrorIcon}
         />
-      </ButtonContainer>
+      </StyledToolbarDropdownButton>
     );
   },
 });
@@ -103,6 +102,7 @@ const getToolbarDropdownButtonColors = (theme: EmotionCanvasTheme): ButtonColors
     disabled: {
       icon: colors.soap600,
       background: 'transparent',
+      opacity: '1',
     },
   };
 };

package/button/lib/ToolbarIconButton.tsx

@@ -1,34 +1,34 @@
 import * as React from 'react';
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
   focusRing,
   useTheme,
   Themeable,
   EmotionCanvasTheme,
   createComponent,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {ButtonColors} from './types';
-import {ButtonContainer} from './parts';
-import {IconButtonProps} from './IconButton';
+import {BaseButton} from './BaseButton';
+import {TertiaryButtonProps} from './TertiaryButton';
 
 export interface ToolbarIconButtonProps
-  extends Omit<IconButtonProps, 'size' | 'variant'>,
-    Themeable {}
+  extends Omit<TertiaryButtonProps, 'size' | 'variant'>,
+    Themeable {
+  onToggleChange?: (toggled: boolean | undefined) => void;
+  toggled?: boolean;
+  shouldMirrorIcon?: boolean;
+}
 
-const containerStyles = {
-  padding: 0,
-  minWidth: space.l,
-  width: space.l,
-  height: space.l,
-  borderRadius: borderRadius.m,
+const StyledToolbarIconButton = styled(BaseButton)<StyledType & ToolbarIconButtonProps>({
   ['& .wd-icon']: {
     display: 'inline-block',
     verticalAlign: 'middle',
     width: 20,
     height: 20,
   },
-};
+});
 
 export const ToolbarIconButton = createComponent('button')({
   displayName: 'ToolbarIconButton',
@@ -61,18 +61,22 @@ export const ToolbarIconButton = createComponent('button')({
     }, [toggled, onToggleChange]);
 
     return (
-      <ButtonContainer
+      <StyledToolbarIconButton
         ref={ref}
         as={Element}
         colors={getToolbarIconButtonColors(theme, toggled)}
         size={'small'}
         fillIcon={toggled}
-        extraStyles={containerStyles}
         aria-pressed={toggled}
+        padding="zero"
+        minWidth={space.l}
+        width={space.l}
+        height={space.l}
+        borderRadius={borderRadius.m}
         {...elemProps}
       >
-        {icon ? <SystemIcon icon={icon} shouldMirror={shouldMirrorIcon} /> : children}
-      </ButtonContainer>
+        {icon ? <BaseButton.Icon icon={icon} shouldMirrorIcon={shouldMirrorIcon} /> : children}
+      </StyledToolbarIconButton>
     );
   },
 });
@@ -104,6 +108,7 @@ const getToolbarIconButtonColors = (theme: EmotionCanvasTheme, toggled?: boolean
     disabled: {
       icon: toggled ? themePrimary.light : colors.soap600,
       background: toggled ? themePrimary.lightest : 'transparent',
+      opacity: '1',
     },
   };
 };

package/button/lib/parts/ButtonLabel.tsx

@@ -1,8 +1,23 @@
-import {styled} from '@workday/canvas-kit-react/common';
+import React from 'react';
+import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-export const ButtonLabel = styled('span')({
+export interface ButtonLabelProps extends BoxProps {}
+
+const StyledButtonLabel = styled(Box.as('span'))<StyledType>({
   position: 'relative', // Fixes an IE issue with text within button moving on click
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
 });
+
+export const ButtonLabel = createComponent('span')({
+  displayName: 'ButtonLabel',
+  Component: ({children, ...elemProps}: ButtonLabelProps, ref, Element) => {
+    return (
+      <StyledButtonLabel as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledButtonLabel>
+    );
+  },
+});

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react';
+import React from 'react';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {space} from '@workday/canvas-kit-react/tokens';
-import isPropValid from '@emotion/is-prop-valid';
+import {ButtonSizes, IconPositions} from '../types';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {styled} from '@workday/canvas-kit-react/common';
+import {BoxProps} from '@workday/canvas-kit-react/layout';
 
-import {ButtonSizes, IconPositions} from '../types';
-export interface ButtonLabelIconProps {
+export interface ButtonLabelIconProps extends BoxProps {
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
    *
@@ -21,7 +20,7 @@ export interface ButtonLabelIconProps {
   /**
    * Button icon positions can either be `left` or `right`.
    * If no value is provided, it defaults to `left`.
-   * @default 'left'
+   * @default 'start'
    */
   iconPosition?: IconPositions;
   /**
@@ -38,52 +37,29 @@ const iconSizes: Record<ButtonSizes, number> = {
   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',
-})<ButtonLabelIconProps>(
-  {
-    display: 'inline-block',
-  },
-  ({size}) => ({
-    width: size ? iconSizes[size] : iconSizes.medium,
-    height: size ? iconSizes[size] : iconSizes.medium,
-  }),
-  getIconPositionStyles
-);
-
-export const ButtonLabelIcon = ({
-  icon,
-  size,
-  iconPosition,
-  shouldMirrorIcon = false,
-  ...elemProps
-}: ButtonLabelIconProps) => {
-  if (icon === undefined) {
-    return null;
-  }
+export const ButtonLabelIcon = createComponent('span')({
+  displayName: 'ButtonLabelIconNew',
+  Component: (
+    {icon, size = 'medium', shouldMirrorIcon = false, ...elemProps}: ButtonLabelIconProps,
+    ref,
+    Element
+  ) => {
+    if (icon === undefined) {
+      return null;
+    }
 
-  const iconSize = size ? iconSizes[size] : undefined;
+    const iconSize = iconSizes[size];
 
-  return (
-    <ButtonLabelIconStyled iconPosition={iconPosition} size={size} {...elemProps}>
-      <SystemIcon size={iconSize} icon={icon} shouldMirror={shouldMirrorIcon} />
-    </ButtonLabelIconStyled>
-  );
-};
+    return (
+      <SystemIcon
+        size={iconSize}
+        icon={icon}
+        shouldMirror={shouldMirrorIcon}
+        width={size ? iconSizes[size] : iconSizes.large}
+        height={size ? iconSizes[size] : iconSizes.large}
+        display="inline-block"
+        {...elemProps}
+      />
+    );
+  },
+});

package/button/lib/parts/index.tsx

@@ -1,4 +1,2 @@
-export {ButtonContainer} from './ButtonContainer';
 export {ButtonLabel} from './ButtonLabel';
-export {ButtonLabelData} from './ButtonLabelData';
 export {ButtonLabelIcon} from './ButtonLabelIcon';

package/button/lib/types.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 
 /**
  * The object used for passing in colors to the ButtonContainer
@@ -9,7 +9,7 @@ export interface ButtonStateColors {
   icon?: string;
   iconFill?: boolean;
   label?: string;
-  labelData?: string;
+  opacity?: string;
 }
 export interface ButtonColors {
   default: ButtonStateColors;
@@ -30,4 +30,4 @@ export interface ButtonColors {
 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';
+export type IconPositions = 'start' | 'end';

package/card/lib/Card.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 import {CardHeading} from './CardHeading';
 import {CardBody} from './CardBody';
@@ -21,7 +21,7 @@ export const Card = createComponent('div')({
       <Box
         ref={ref}
         as={Element}
-        depth={2}
+        depth={1}
         padding="l"
         backgroundColor="frenchVanilla100"
         border={`1px solid ${colors.soap500}`}

package/card/lib/CardBody.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import {type} from '@workday/canvas-kit-react/tokens';
 import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 const Body = styled(Box)<BoxProps & StyledType>(type.levels.subtext.large);
 

package/card/lib/CardHeading.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {type, space} from '@workday/canvas-kit-react/tokens';
+import {type} from '@workday/canvas-kit-react/tokens';
 import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-export interface CardHeadingProps {
+export interface CardHeadingProps extends BoxProps {
   /**
    * The id of the Card heading. Tie this to an `aria-labelledby` for accessibility.
    */
@@ -12,17 +13,15 @@ export interface CardHeadingProps {
   children?: React.ReactNode;
 }
 
-const Heading = styled('h3')<StyledType>(type.levels.body.large, {
+const Heading = styled(Box.as('h3'))<StyledType>(type.levels.body.large, {
   fontWeight: type.properties.fontWeights.bold,
-  marginBottom: space.m,
-  marginTop: 0,
 });
 
 export const CardHeading = createComponent('h3')({
   displayName: 'Card.Heading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
-      <Heading ref={ref} as={Element} {...elemProps}>
+      <Heading ref={ref} marginBottom="m" marginTop={0} as={Element} {...elemProps}>
         {children}
       </Heading>
     );