@workday/canvas-kit-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

package/button/lib/PrimaryButton.tsx

@@ -10,110 +10,10 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-
-import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
 import {ButtonSizes, IconPositions} from './types';
+import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
-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`.
-   *
-   * @default 'medium'
-   */
-  size?: ButtonSizes;
-  /**
-   * The data label of the Button.
-   * Note: not displayed at `small` size
-   */
-  dataLabel?: String;
-  /**
-   * The icon of the Button.
-   * Note: not displayed at `small` size
-   */
-  icon?: CanvasSystemIcon;
-  /**
-   * Button icon positions can either be `left` or `right`.
-   * If no value is provided, it defaults to `left`.
-   * @default 'left'
-   */
-  iconPosition?: IconPositions;
-  /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
-   */
-  shouldMirrorIcon?: boolean;
-  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: (
-    {
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
-      size = 'medium',
-      iconPosition = 'left',
-      variant,
-      dataLabel,
-      icon,
-      shouldMirrorIcon = false,
-      children,
-      ...elemProps
-    }: PrimaryButtonProps,
-    ref,
-    Element
-  ) => (
-    <ButtonContainer
-      ref={ref}
-      as={Element}
-      colors={getPrimaryButtonColors(variant, theme)}
-      size={size}
-      extraStyles={disabledButtonOpacity}
-      {...elemProps}
-    >
-      {icon && iconPosition === 'left' && (
-        <ButtonLabelIcon
-          size={size}
-          iconPosition={iconPosition}
-          icon={icon}
-          shouldMirrorIcon={shouldMirrorIcon}
-        />
-      )}
-      <ButtonLabel>{children}</ButtonLabel>
-      {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
-      {icon && iconPosition === 'right' && (
-        <ButtonLabelIcon
-          size={size}
-          iconPosition={iconPosition}
-          icon={icon}
-          shouldMirrorIcon={shouldMirrorIcon}
-        />
-      )}
-    </ButtonContainer>
-  ),
-});
-
-export const getPrimaryButtonColors = (
-  variant: 'inverse' | undefined,
-  theme: EmotionCanvasTheme
-) => {
+const getPrimaryButtonColors = (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => {
   const {
     canvas: {
       palette: {primary: themePrimary},
@@ -149,30 +49,27 @@ export const getPrimaryButtonColors = (
           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,
+          background: colors.soap400,
           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,
+              innerColor: colors.blackPepper400,
               outerColor: colors.frenchVanilla100,
             },
             theme
@@ -183,8 +80,88 @@ export const getPrimaryButtonColors = (
           background: colors.frenchVanilla100,
           icon: colors.blackPepper400,
           label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
         },
       };
   }
 };
+
+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`.
+   *
+   * @default 'medium'
+   */
+  size?: ButtonSizes;
+  /**
+   * The icon of the Button.
+   * Note: not displayed at `small` size
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * 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;
+}
+
+export const PrimaryButton = createComponent('button')({
+  displayName: 'PrimaryButton',
+  Component: (
+    {
+      size = 'medium',
+      iconPosition = 'start',
+      variant,
+      icon,
+      shouldMirrorIcon = false,
+      children,
+      ...elemProps
+    }: PrimaryButtonProps,
+    ref,
+    Element
+  ) => {
+    const theme = useTheme();
+    return (
+      <BaseButton
+        ref={ref}
+        size={size}
+        colors={getPrimaryButtonColors(variant, theme)}
+        padding={getPaddingStyles(children, size, icon, iconPosition)}
+        minWidth={getMinWidthStyles(children, size)}
+        as={Element}
+        {...elemProps}
+      >
+        {icon && iconPosition === 'start' && (
+          <BaseButton.Icon
+            size={size}
+            iconPosition={iconPosition}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+          />
+        )}
+        {children && <BaseButton.Label>{children}</BaseButton.Label>}
+
+        {icon && iconPosition === 'end' && (
+          <BaseButton.Icon
+            size={size}
+            iconPosition={iconPosition}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+          />
+        )}
+      </BaseButton>
+    );
+  },
+});

package/button/lib/SecondaryButton.tsx

@@ -11,7 +11,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
-import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
+import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 
 export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
   /**
@@ -26,11 +26,6 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
    * @default 'medium'
    */
   size?: ButtonSizes;
-  /**
-   * The data label of the Button.
-   * Note: not displayed at `small` size
-   */
-  dataLabel?: String;
   /**
    * The icon of the Button.
    * Note: not displayed at `small` size
@@ -50,27 +45,13 @@ 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: (
     {
-      // 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,
-      dataLabel,
       icon,
       shouldMirrorIcon = false,
       children,
@@ -78,35 +59,39 @@ export const SecondaryButton = createComponent('button')({
     }: SecondaryButtonProps,
     ref,
     Element
-  ) => (
-    <ButtonContainer
-      ref={ref}
-      as={Element}
-      colors={getSecondaryButtonColors(variant, theme)}
-      size={size}
-      extraStyles={disabledButtonOpacity}
-      {...elemProps}
-    >
-      {icon && iconPosition === 'left' && (
-        <ButtonLabelIcon
-          size={size}
-          iconPosition={iconPosition}
-          icon={icon}
-          shouldMirrorIcon={shouldMirrorIcon}
-        />
-      )}
-      <ButtonLabel>{children}</ButtonLabel>
-      {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
-      {icon && iconPosition === 'right' && (
-        <ButtonLabelIcon
-          size={size}
-          iconPosition={iconPosition}
-          icon={icon}
-          shouldMirrorIcon={shouldMirrorIcon}
-        />
-      )}
-    </ButtonContainer>
-  ),
+  ) => {
+    const theme = useTheme();
+
+    return (
+      <BaseButton
+        ref={ref}
+        size={size}
+        colors={getSecondaryButtonColors(variant, theme)}
+        padding={getPaddingStyles(children, size, icon, iconPosition)}
+        minWidth={getMinWidthStyles(children, size)}
+        as={Element}
+        {...elemProps}
+      >
+        {icon && iconPosition === 'start' && (
+          <BaseButton.Icon
+            size={size}
+            iconPosition={iconPosition}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+          />
+        )}
+        {children && <BaseButton.Label>{children}</BaseButton.Label>}
+        {icon && iconPosition === 'end' && (
+          <BaseButton.Icon
+            size={size}
+            iconPosition={iconPosition}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+          />
+        )}
+      </BaseButton>
+    );
+  },
 });
 
 export const getSecondaryButtonColors = (
@@ -128,27 +113,23 @@ export const getSecondaryButtonColors = (
           border: colors.blackPepper400,
           icon: colors.blackPepper400,
           label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
         },
         hover: {
           background: colors.blackPepper400,
           border: colors.blackPepper400,
           icon: themePrimary.contrast,
           label: themePrimary.contrast,
-          labelData: themePrimary.contrast,
         },
         active: {
           background: colors.blackPepper500,
           border: colors.blackPepper500,
           icon: themePrimary.contrast,
           label: themePrimary.contrast,
-          labelData: themePrimary.contrast,
         },
         focus: {
           border: colors.blackPepper400,
           icon: colors.blackPepper400,
           label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
         },
         // Identical to 'default' styles. ButtonContainer will set opacity to 40%
         disabled: {
@@ -156,7 +137,6 @@ export const getSecondaryButtonColors = (
           border: colors.blackPepper400,
           icon: colors.blackPepper400,
           label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
         },
       };
     case 'inverse':
@@ -170,26 +150,24 @@ export const getSecondaryButtonColors = (
         hover: {
           background: colors.soap300,
           border: colors.soap300,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
+          icon: colors.blackPepper500,
+          label: colors.blackPepper500,
         },
         active: {
           background: colors.soap400,
           border: colors.soap400,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
+          icon: colors.blackPepper500,
+          label: colors.blackPepper500,
         },
         focus: {
           background: colors.frenchVanilla100,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-          labelData: colors.blackPepper400,
+          icon: colors.blackPepper500,
+          border: colors.blackPepper400,
+          label: colors.blackPepper500,
           focusRing: focusRing(
             {
-              separation: 2,
-              innerColor: 'currentColor',
+              separation: 1,
+              innerColor: colors.blackPepper400,
               outerColor: colors.frenchVanilla100,
             },
             theme

package/button/lib/TertiaryButton.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/styled';
 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,7 +25,7 @@ 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`.
@@ -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,65 +99,103 @@ 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: {
-        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,
@@ -166,45 +206,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>
     );
   },
 });