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

package/button/lib/DeleteButton.tsx

@@ -1,43 +1,44 @@
 import * as React from 'react';
-import {ButtonColors} from './types';
-import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
-import {
-  GrowthBehavior,
-  useTheme,
-  Themeable,
-  EmotionCanvasTheme,
-  createComponent,
-} from '@workday/canvas-kit-react/common';
 
-export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
-  /**
-   * The size of the Button.
-   */
-  size?: 'small' | 'medium' | 'large';
-  children?: React.ReactNode;
-}
+import {buttonVars} from './BaseButton';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {Button, ButtonProps} from './Button';
 
-const getDeleteButtonColors = ({
-  canvas: {
-    palette: {error: themeError},
-  },
-}: EmotionCanvasTheme): ButtonColors => ({
-  default: {
-    background: themeError.main,
-    label: themeError.contrast,
-  },
-  hover: {
-    background: themeError.dark,
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * 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 DeleteButtonProps extends ButtonProps {}
+
+const deleteStyles = createStyles({
+  [buttonVars.default.background]: cssVar(brand.error.base),
+  [buttonVars.default.border]: 'transparent',
+  [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
+  [buttonVars.default.label]: cssVar(brand.error.accent),
+  '&:hover, &.hover': {
+    [buttonVars.hover.background]: cssVar(brand.error.dark),
+    [buttonVars.hover.border]: 'transparent',
+    [buttonVars.hover.label]: cssVar(brand.error.accent),
   },
-  active: {
-    background: themeError.darkest,
+  '&:focus-visible, &.focus': {
+    [buttonVars.focus.background]: cssVar(brand.error.base),
+    [buttonVars.focus.border]: 'transparent',
+    [buttonVars.focus.label]: cssVar(brand.error.accent),
+    [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
+    [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
   },
-  focus: {
-    background: themeError.main,
+  '&:active, &.active': {
+    [buttonVars.active.background]: cssVar(brand.error.darkest),
+    [buttonVars.active.border]: 'transparent',
+    [buttonVars.active.label]: cssVar(brand.error.accent),
   },
-  disabled: {
-    background: themeError.light,
-    opacity: '1', // allows for overriding the default opacity of 0.4
+  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
+    [buttonVars.disabled.background]: cssVar(brand.error.light),
+    [buttonVars.disabled.label]: cssVar(brand.error.accent),
+    opacity: 1,
   },
 });
 
@@ -48,28 +49,11 @@ const getDeleteButtonColors = ({
  */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
-  Component: (
-    {
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
-      size = 'medium',
-      children,
-      ...elemProps
-    }: DeleteButtonProps,
-    ref,
-    Element
-  ) => (
-    <BaseButton
-      padding={getPaddingStyles(children, size, undefined, undefined)}
-      minWidth={getMinWidthStyles(children, size)}
-      ref={ref}
-      as={Element}
-      colors={getDeleteButtonColors(theme)}
-      size={size}
-      {...elemProps}
-    >
-      <BaseButton.Label>{children}</BaseButton.Label>
-    </BaseButton>
-  ),
+  Component: ({children, cs, size, ...elemProps}: DeleteButtonProps, ref, Element) => {
+    return (
+      <Button as={Element} ref={ref} size={size} cs={[deleteStyles, cs]} {...elemProps}>
+        {children}
+      </Button>
+    );
+  },
 });

package/button/lib/PrimaryButton.tsx

@@ -1,171 +1,104 @@
 import * as React from 'react';
 
-import {
-  GrowthBehavior,
-  useTheme,
-  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 {ButtonSizes, IconPositions} from './types';
-import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {buttonVars} from './BaseButton';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles, cssVar, createModifiers} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {Button, ButtonProps} from './Button';
 
-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,
-        },
-        hover: {
-          background: colors.soap300,
-          icon: colors.blackPepper500,
-          label: colors.blackPepper500,
-        },
-        active: {
-          background: colors.soap400,
-          icon: colors.blackPepper500,
-          label: colors.blackPepper500,
-        },
-        focus: {
-          background: colors.frenchVanilla100,
-          border: colors.blackPepper400,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-
-          focusRing: focusRing(
-            {
-              separation: 1,
-              innerColor: colors.blackPepper400,
-              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,
-        },
-      };
-  }
-};
-
-export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * 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 PrimaryButtonProps extends ButtonProps {
   /**
-   * The variant of the PrimaryButton.
+   * Variant has an option for `inverse` which will inverse the styling
    */
   variant?: 'inverse';
-  /**
-   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-   * If no size is provided, it will default to `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`.
-   */
-  iconPosition?: IconPositions;
-  /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   */
-  shouldMirrorIcon?: boolean;
-  children?: React.ReactNode;
 }
 
-/**
- * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
- * action. Multiple primary buttons make it confusing for the user to understand what action they
- * should take. Not all screens require a Primary Button.
- *
- * Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
- * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
- * prop.
- */
+const primaryStyles = createStyles({
+  // Default Styles
+  [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400)),
+  [buttonVars.default.border]: 'transparent',
+  [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
+  [buttonVars.default.label]: cssVar(brand.primary.accent),
+  [buttonVars.default.icon]: cssVar(brand.primary.accent),
+  // Hover Styles
+  [buttonVars.hover.background]: cssVar(brand.primary.dark),
+  [buttonVars.hover.border]: 'transparent',
+  [buttonVars.hover.label]: cssVar(brand.primary.accent),
+  [buttonVars.hover.icon]: cssVar(brand.primary.accent),
+  // Focus Styles
+  [buttonVars.focus.background]: cssVar(brand.primary.base),
+  [buttonVars.focus.border]: 'transparent',
+  [buttonVars.focus.label]: cssVar(brand.primary.accent),
+  [buttonVars.focus.icon]: cssVar(brand.primary.accent),
+  [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
+  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+  // Active Styles
+  [buttonVars.active.background]: cssVar(brand.primary.darkest),
+  [buttonVars.active.border]: 'transparent',
+  [buttonVars.active.label]: cssVar(brand.primary.accent),
+  [buttonVars.active.icon]: cssVar(brand.primary.accent),
+  // Disabled Styles
+  [buttonVars.disabled.background]: cssVar(brand.primary.base),
+  [buttonVars.disabled.border]: 'transparent',
+  [buttonVars.disabled.label]: cssVar(brand.primary.accent),
+  [buttonVars.disabled.opacity]: '0.4',
+  [buttonVars.disabled.icon]: cssVar(brand.primary.accent),
+});
+
+export const primaryButtonModifiers = createModifiers({
+  variant: {
+    inverse: createStyles({
+      // Default Styles
+      [buttonVars.default.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
+      [buttonVars.default.label]: cssVar(base.blackPepper400),
+      [buttonVars.default.icon]: cssVar(base.blackPepper400),
+      // Hover Styles
+      [buttonVars.hover.background]: cssVar(base.soap300),
+      [buttonVars.hover.label]: cssVar(base.blackPepper500),
+      [buttonVars.hover.icon]: cssVar(base.blackPepper500),
+      // Focus Styles
+      [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.label]: cssVar(base.blackPepper400),
+      [buttonVars.focus.icon]: cssVar(base.blackPepper400),
+      [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper400),
+      [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100),
+      // Active Styles
+      [buttonVars.active.background]: cssVar(base.soap400),
+      [buttonVars.active.label]: cssVar(base.blackPepper500),
+      [buttonVars.active.icon]: cssVar(base.blackPepper500),
+      // Disabled Styles
+      [buttonVars.disabled.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.label]: cssVar(base.blackPepper400),
+      [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
+    }),
+  },
+});
+
 export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
   Component: (
-    {
-      size = 'medium',
-      iconPosition = 'start',
-      variant,
-      icon,
-      shouldMirrorIcon = false,
-      children,
-      ...elemProps
-    }: PrimaryButtonProps,
+    {children, icon, cs, iconPosition, variant, size, ...elemProps}: PrimaryButtonProps,
     ref,
     Element
   ) => {
-    const theme = useTheme();
     return (
-      <BaseButton
+      <Button
+        as={Element}
         ref={ref}
         size={size}
-        colors={getPrimaryButtonColors(variant, theme)}
-        padding={getPaddingStyles(children, size, icon, iconPosition)}
-        minWidth={getMinWidthStyles(children, size)}
-        as={Element}
+        icon={icon}
+        iconPosition={iconPosition}
+        cs={[primaryStyles, primaryButtonModifiers({variant: variant}), cs]}
         {...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>
+        {children}
+      </Button>
     );
   },
 });

package/button/lib/SecondaryButton.tsx

@@ -1,193 +1,107 @@
 import * as React from 'react';
 
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {
-  GrowthBehavior,
-  useTheme,
-  Themeable,
-  EmotionCanvasTheme,
-  createComponent,
-  focusRing,
-} from '@workday/canvas-kit-react/common';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors, ButtonSizes, IconPositions} from './types';
-import {BaseButton, BaseButtonProps, getMinWidthStyles, getPaddingStyles} from './BaseButton';
+import {buttonVars} from './BaseButton';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles, cssVar, createModifiers} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+import {Button, ButtonProps} from './Button';
 
-export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
-  /**
-   * The variant of the SecondaryButton.
-   * @default undefined
-   */
-  variant?: 'inverse' | undefined;
-  /**
-   * 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;
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * 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 SecondaryButtonProps extends ButtonProps {
   /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
+   * Variant has an option for `inverse` which will inverse the styling
    */
-  shouldMirrorIcon?: boolean;
-  children?: React.ReactNode;
+  variant?: 'inverse';
 }
 
-/**
- * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
- * Buttons can be used on most pages without restrictions and work well for multiple actions of
- * equal weight. They can be used in conjunction with a Primary Button or independently.
- *
- * Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
- * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
- * prop.
- */
+const secondaryStyles = createStyles({
+  // Default Styles
+  [buttonVars.default.background]: 'transparent',
+  [buttonVars.default.border]: cssVar(base.blackPepper400),
+  [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
+  [buttonVars.default.label]: cssVar(base.blackPepper400),
+  [buttonVars.default.icon]: cssVar(base.blackPepper400),
+  // Hover Styles
+  [buttonVars.hover.background]: cssVar(base.blackPepper400),
+  [buttonVars.hover.border]: cssVar(base.blackPepper400),
+  [buttonVars.hover.label]: cssVar(brand.primary.accent),
+  [buttonVars.hover.icon]: cssVar(brand.primary.accent),
+  // Focus Styles
+  [buttonVars.focus.background]: 'transparent',
+  [buttonVars.focus.border]: cssVar(base.blackPepper400),
+  [buttonVars.focus.label]: cssVar(base.blackPepper400),
+  [buttonVars.focus.icon]: cssVar(base.blackPepper400),
+  [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
+  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+  // Active Styles
+  [buttonVars.active.background]: cssVar(base.blackPepper500),
+  [buttonVars.active.border]: cssVar(base.blackPepper500),
+  [buttonVars.active.label]: cssVar(brand.primary.accent),
+  [buttonVars.active.icon]: cssVar(brand.primary.accent),
+  // Disabled Styles
+  [buttonVars.disabled.background]: 'transparent',
+  [buttonVars.disabled.border]: cssVar(base.blackPepper400),
+  [buttonVars.disabled.label]: cssVar(base.blackPepper400),
+  [buttonVars.disabled.opacity]: '0.4',
+  [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
+});
+
+export const secondaryButtonModifiers = createModifiers({
+  variant: {
+    inverse: createStyles({
+      // Default Styles
+      [buttonVars.default.background]: 'transparent',
+      [buttonVars.default.border]: cssVar(base.frenchVanilla100),
+      [buttonVars.default.label]: cssVar(base.frenchVanilla100),
+      [buttonVars.default.icon]: cssVar(base.frenchVanilla100),
+      // Hover Styles
+      [buttonVars.hover.background]: cssVar(base.soap300),
+      [buttonVars.hover.border]: cssVar(base.soap300),
+      [buttonVars.hover.label]: cssVar(base.blackPepper500),
+      [buttonVars.hover.icon]: cssVar(base.blackPepper500),
+      // Focus Styles
+      [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.border]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.label]: cssVar(base.blackPepper500),
+      [buttonVars.focus.icon]: cssVar(base.blackPepper500),
+      [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper500),
+      [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100),
+      // Active Styles
+      [buttonVars.active.background]: cssVar(base.soap400),
+      [buttonVars.active.border]: cssVar(base.soap400),
+      [buttonVars.active.label]: cssVar(base.blackPepper500),
+      [buttonVars.active.icon]: cssVar(base.blackPepper500),
+      // Disabled Styles
+      [buttonVars.disabled.background]: 'transparent',
+      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100),
+    }),
+  },
+});
+
 export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
   Component: (
-    {
-      size = 'medium',
-      iconPosition = 'start',
-      variant,
-      icon,
-      shouldMirrorIcon = false,
-      children,
-      ...elemProps
-    }: SecondaryButtonProps,
+    {children, icon, cs, iconPosition, variant, ...elemProps}: SecondaryButtonProps,
     ref,
     Element
   ) => {
-    const theme = useTheme();
-
     return (
-      <BaseButton
-        ref={ref}
-        size={size}
-        colors={getSecondaryButtonColors(variant, theme)}
-        padding={getPaddingStyles(children, size, icon, iconPosition)}
-        minWidth={getMinWidthStyles(children, size)}
+      <Button
         as={Element}
+        ref={ref}
+        icon={icon}
+        iconPosition={iconPosition}
+        cs={[secondaryStyles, secondaryButtonModifiers({variant: variant}), cs]}
         {...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>
+        {children}
+      </Button>
     );
   },
 });
-
-export const getSecondaryButtonColors = (
-  variant: 'inverse' | undefined,
-  theme: EmotionCanvasTheme
-): ButtonColors => {
-  const {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  } = theme;
-
-  switch (variant) {
-    case undefined:
-    default:
-      return {
-        default: {
-          background: 'transparent',
-          border: colors.blackPepper400,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-        },
-        hover: {
-          background: colors.blackPepper400,
-          border: colors.blackPepper400,
-          icon: themePrimary.contrast,
-          label: themePrimary.contrast,
-        },
-        active: {
-          background: colors.blackPepper500,
-          border: colors.blackPepper500,
-          icon: themePrimary.contrast,
-          label: themePrimary.contrast,
-        },
-        focus: {
-          border: colors.blackPepper400,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-        },
-        // Identical to 'default' styles. ButtonContainer will set opacity to 40%
-        disabled: {
-          background: 'transparent',
-          border: colors.blackPepper400,
-          icon: colors.blackPepper400,
-          label: colors.blackPepper400,
-        },
-      };
-    case 'inverse':
-      return {
-        default: {
-          background: 'transparent',
-          border: colors.frenchVanilla100,
-          icon: colors.frenchVanilla100,
-          label: colors.frenchVanilla100,
-        },
-        hover: {
-          background: colors.soap300,
-          border: colors.soap300,
-          icon: colors.blackPepper500,
-          label: colors.blackPepper500,
-        },
-        active: {
-          background: colors.soap400,
-          border: colors.soap400,
-          icon: colors.blackPepper500,
-          label: colors.blackPepper500,
-        },
-        focus: {
-          background: colors.frenchVanilla100,
-          icon: colors.blackPepper500,
-          label: colors.blackPepper500,
-          focusRing: focusRing(
-            {
-              separation: 2,
-              innerColor: 'currentColor',
-              outerColor: colors.frenchVanilla100,
-            },
-            theme
-          ),
-        },
-        // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
-        disabled: {
-          background: 'transparent',
-          border: colors.frenchVanilla100,
-          icon: colors.frenchVanilla100,
-          label: colors.frenchVanilla100,
-        },
-      };
-  }
-};