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

package/badge/README.md

@@ -32,15 +32,14 @@ const AccessibleHide = styled('div')({
 
 ...
 
-<IconButton
+<TertiaryButton
   style={{ position: "relative" }}
   aria-label={`Alerts ${count} new notifications`}
   size="medium"
-  variant="circle"
 >
   <SystemIcon icon={notificationsIcon} aria-hidden="true" />
   <Badge count={count} aria-hidden="true" />
-</IconButton>
+</TertiaryButton>
 <AccessibleHide role="status" aria-live="polite" aria-atomic="true">
   New notifications
 </AccessibleHide>

package/banner/lib/BannerIcon.tsx

@@ -32,8 +32,8 @@ export const BannerIcon = createComponent('span')({
     const localModel = useModelContext(BannerModelContext, model);
 
     // SystemIcon is still a class based component so we need to set ref manually.
-    const {ref: iconRef, icon: defaultIcon, ...props} = useBannerIcon(localModel, elemProps, ref);
+    const {icon: defaultIcon, ...props} = useBannerIcon(localModel, elemProps);
 
-    return <StyledBannerIcon icon={icon ?? defaultIcon} iconRef={iconRef} {...props} />;
+    return <StyledBannerIcon icon={icon ?? defaultIcon} ref={ref} {...props} />;
   },
 });

package/button/README.md

@@ -2,7 +2,7 @@
 
 Clickable button elements that extend the native `<button>` element with Canvas styling.
 
-For `PrimaryButton`, `SecondaryButton`, `TertiaryButton`, `DeleteButton`, or `IconButton`, view the
+For `PrimaryButton`, `SecondaryButton`, `TertiaryButton` or `DeleteButton`, view the
 [documentation on Storybook](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-button-react--primary).
 
 [> Workday Design Reference](https://design.workday.com/components/buttons/buttons)
@@ -182,6 +182,73 @@ Default: `false`
 
 ---
 
+# BaseButton
+
+As part of the restructure of our Buttons, we've created a low level `BaseButton` component. This
+component isn't intended to be used outside of Canvas Kit, but we do export it for very specific use
+cases which we'll outline below. The `BaseButton` is a styled `button` element which extends our
+style properties which allow us to customize a buttons `colors`, `padding`, `width` and other style
+properties.
+
+Basic example:
+
+```tsx
+import * as React from 'react';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {BaseButton} from '@workday/canvas-kit-react/button';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+const getBasicButtonColors = () => {
+  return {
+    default: {
+      background: colors.blueberry400,
+      label: colors.frenchVanilla100,
+      icon: colors.frenchVanilla100,
+    },
+    hover: {
+      background: colors.blueberry500,
+      label: colors.frenchVanilla100,
+      icon: colors.frenchVanilla100,
+    },
+    active: {
+      background: colors.blueberry500,
+      label: colors.frenchVanilla100,
+      icon: colors.frenchVanilla100,
+    },
+    focus: {
+      background: colors.blueberry400,
+      label: colors.frenchVanilla100,
+      icon: colors.frenchVanilla100,
+    },
+    disabled: {
+      background: colors.blueberry400,
+    },
+  };
+};
+
+export type BasicButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {};
+
+export const BasicButton = ({children, ...elemProps}: BasicButtonProps) => {
+  return (
+    <BaseButton
+      colors={getPaginationButtonColors(toggled)}
+      {...elemProps}
+    >
+      <BaseButton.Label>{children}</BaseButton.Label>
+      <BaseButton.Icon icon={plusIcon}>
+    </StyledToggleButton>
+  );
+};
+```
+
+**Note:** Under the hood, `BaseButton` uses our `Box` component which allows `BaseButton` to accept
+style properties. Because of the flexibility of this component, consumers can use this to create
+toggled buttons or a specific button that doesn't fall under the main use case you see in our design
+system.
+
+**Disclaimer** We strongly advise consumers not to use this component if possible and to rely on our
+`PrimaryButton`, `SecondaryButton` and `TertiaryButton` when possible.
+
 ### Deprecated Buttons
 
 > We have rolled out our next iteration of our buttons and will be deprecating the old style (orange

package/button/index.ts

@@ -6,8 +6,8 @@ export {
   DeprecatedButton as deprecated_Button,
   DeprecatedButtonProps,
 } from './lib/deprecated_Button';
-export {IconButton, IconButtonProps} from './lib/IconButton';
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
+export {BaseButton, ButtonContainerProps} from './lib/BaseButton';
 export * from './lib/types';

package/button/lib/{parts/ButtonContainer.tsx → BaseButton.tsx}

@@ -1,20 +1,26 @@
 import * as React from 'react';
-import isPropValid from '@emotion/is-prop-valid';
-import {CSSObject} from '@emotion/styled';
-import {borderRadius, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
+
+import {ButtonLabelIcon} from './parts/ButtonLabelIcon';
+import {ButtonLabel} from './parts/ButtonLabel';
+
 import {
+  createComponent,
   GrowthBehavior,
   mouseFocusBehavior,
   focusRing,
   styled,
   EmotionCanvasTheme,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
-import {ButtonColors, ButtonSizes} from '../types';
-import {buttonLabelDataClassName} from './ButtonLabelData';
+import {BoxProps, 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';
 
-export interface ButtonContainerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    GrowthBehavior {
+import {CSSObject} from '@emotion/styled';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+
+export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
   colors?: ButtonColors;
   /**
    * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
@@ -29,14 +35,9 @@ export interface ButtonContainerProps
   ref?: React.Ref<HTMLButtonElement>;
   /**
    * Whether the icon should received filled (colored background layer) or regular styles.
-   * Corresponds to `toggled` in IconButton
+   * Corresponds to `toggled` in ToolbarIconButton
    */
   fillIcon?: boolean;
-  /**
-   * Any extra styles necessary for a given parent component.
-   * This avoids using the inline `style` attribute when the shape needs to be customized (e.g. for IconButton)
-   */
-  extraStyles?: CSSObject;
 }
 
 function getIconColorSelectors(
@@ -67,40 +68,39 @@ function getIconColorSelectors(
   };
 }
 
-export const ButtonContainer = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<ButtonContainerProps>(
+const ButtonContainer = styled('button')<StyledType & ButtonContainerProps>(
   {
     ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.bold,
-    lineHeight: 'normal',
-    boxSizing: 'border-box',
+    cursor: 'pointer',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    background: 'none',
-    borderRadius: borderRadius.circle,
+    boxSizing: 'border-box',
     boxShadow: 'none',
-    position: 'relative',
-    cursor: 'pointer',
     outline: 'none',
-    verticalAlign: 'middle',
-    border: '1px solid transparent',
-    overflow: 'hidden',
+    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,
+    },
 
-    // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
     '&:hover:active': {transitionDuration: '40ms'},
 
-    '&:disabled, &:disabled:active': {cursor: 'default', boxShadow: 'none'},
-
     '& > *:first-of-type': {
-      marginLeft: 0,
+      marginLeft: '0',
     },
 
     '& > *:last-of-type': {
@@ -113,9 +113,7 @@ export const ButtonContainer = styled('button', {
         return {
           ...type.levels.body.small,
           fontWeight: type.properties.fontWeights.bold,
-          minWidth: '112px',
           height: '48px',
-          padding: `0 ${space.l}`,
           '& > * ': {
             margin: `0 ${spaceNumbers.xxs / 2}px`,
           },
@@ -123,18 +121,14 @@ export const ButtonContainer = styled('button', {
       case 'medium':
       default:
         return {
-          minWidth: '96px',
           height: space.xl,
-          padding: `0 ${space.m}`,
           '& > * ': {
             margin: `0 ${spaceNumbers.xxs / 2}px`,
           },
         };
       case 'small':
         return {
-          minWidth: '80px',
           height: space.l,
-          padding: `0 ${space.s}`,
           '& > * ': {
             margin: `0 ${spaceNumbers.xxxs / 2}px`,
           },
@@ -144,7 +138,6 @@ export const ButtonContainer = styled('button', {
           ...type.levels.subtext.medium,
           fontWeight: type.properties.fontWeights.bold,
           height: space.m,
-          padding: `0 ${space.xs}`,
           '& > * ': {
             margin: `0 ${spaceNumbers.xxxs / 2}px`,
           },
@@ -156,6 +149,7 @@ export const ButtonContainer = styled('button', {
     if (!colors) {
       return;
     }
+
     const baseStyles = {
       backgroundColor: colors.default.background,
       borderColor: colors.default.border,
@@ -166,11 +160,6 @@ export const ButtonContainer = styled('button', {
         },
         ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
       }),
-      ...(colors.default.labelData && {
-        ['.' + buttonLabelDataClassName]: {
-          color: colors.default.labelData,
-        },
-      }),
     };
 
     const hoverStyles = {
@@ -178,12 +167,6 @@ export const ButtonContainer = styled('button', {
         backgroundColor: colors.hover.background,
         borderColor: colors.hover.border,
         color: colors.hover.label,
-        ...(colors.hover.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            transition: 'color 120ms ease-in',
-            color: colors.hover.labelData,
-          },
-        }),
         ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
       },
     };
@@ -193,11 +176,6 @@ export const ButtonContainer = styled('button', {
         backgroundColor: colors.active.background,
         borderColor: colors.active.border,
         color: colors.active.label,
-        ...(colors.active.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            color: colors.active.labelData,
-          },
-        }),
         ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
       },
     };
@@ -209,11 +187,6 @@ export const ButtonContainer = styled('button', {
         borderColor: colors.focus.border,
         color: colors.focus.label,
         ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
-        ...(colors.focus.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            color: colors.focus.labelData,
-          },
-        }),
         ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
       },
 
@@ -223,12 +196,8 @@ export const ButtonContainer = styled('button', {
         backgroundColor: colors.disabled.background,
         borderColor: colors.disabled.border,
         color: colors.disabled.label,
+        opacity: colors.disabled.opacity,
         ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
-        ...(colors.disabled.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            color: colors.disabled.labelData,
-          },
-        }),
       },
       ...mouseFocusBehavior({
         '&:focus': {
@@ -242,5 +211,93 @@ export const ButtonContainer = styled('button', {
       }),
     };
   },
-  ({extraStyles}) => extraStyles
+  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 20px 0 ${space.s}`
+          : `0 ${space.s} 0 20px`
+        : `0 ${space.s}`;
+
+    case 'extraSmall':
+      return icon
+        ? iconPosition === 'start'
+          ? `0 ${space.xs} 0 ${space.xxs}`
+          : `0 ${space.xxs} 0 ${space.xs}`
+        : `0 ${space.xs}`;
+
+    default:
+      return icon
+        ? iconPosition === 'start'
+          ? `0 ${space.m} 0 20px`
+          : `0 20px 0 ${space.m}`
+        : `0 ${space.m}`;
+  }
+};
+
+export const BaseButton = createComponent('button')({
+  displayName: 'Button',
+  Component: ({children, ...elemProps}: ButtonContainerProps, ref, Element) => {
+    return (
+      <ButtonContainer as={Element} ref={ref} {...elemProps}>
+        {children}
+      </ButtonContainer>
+    );
+  },
+  subComponents: {
+    Icon: ButtonLabelIcon,
+    Label: ButtonLabel,
+  },
+});

package/button/lib/DeleteButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {ButtonColors} from './types';
-import {ButtonContainer, ButtonLabel} from './parts';
+import {BaseButton, getMinWidthStyles, getPaddingStyles} from './BaseButton';
 import {
   GrowthBehavior,
   useTheme,
@@ -38,6 +38,7 @@ const getDeleteButtonColors = ({
   },
   disabled: {
     background: themeError.light,
+    opacity: '1', // allows for overriding the default opacity of 0.4
   },
 });
 
@@ -55,14 +56,16 @@ export const DeleteButton = createComponent('button')({
     ref,
     Element
   ) => (
-    <ButtonContainer
+    <BaseButton
+      padding={getPaddingStyles(children, size, undefined, undefined)}
+      minWidth={getMinWidthStyles(children, size)}
       ref={ref}
       as={Element}
       colors={getDeleteButtonColors(theme)}
       size={size}
       {...elemProps}
     >
-      <ButtonLabel>{children}</ButtonLabel>
-    </ButtonContainer>
+      <BaseButton.Label>{children}</BaseButton.Label>
+    </BaseButton>
   ),
 });