@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.102-next.27

package/banner/lib/hooks/useBannerLabel.tsx

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {BannerModel} from './useBannerModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useBannerModel} from './useBannerModel';
 
 /**
  * Adds the necessary props to a `Label` component.
  * Used by the Banner.Label subcomponent
  */
-export const useBannerLabel = createHook(({state}: BannerModel) => {
+export const useBannerLabel = createElemPropsHook(useBannerModel)(({state}) => {
   return {
     id: `label-${state.id}`,
   };

package/banner/lib/hooks/useBannerModel.tsx

@@ -1,63 +1,42 @@
-import {
-  createEventMap,
-  Model,
-  ToModelConfig,
-  useEventMap,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-
-type BannerState = {
-  /**
-   * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
-   * will be `exclamationCircleIcon`, and a themed error color will be applied.
-   * @default false
-   */
-  hasError?: boolean;
-  /**
-   * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
-   * will be hidden, and some basic styles will be applied.
-   * You will still need to manually set the css `position` value.
-   * @default false
-   */
-  isSticky?: boolean;
-  /**
-   * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
-   * - `Banner` will set `aria-describedby` to `label-${id}`
-   * - `Banner` will set `aria-label` to `action-${id}`
-   * - `Banner.Label` will set `id` to `label-${id}`
-   * - `Banner.ActionText` will set `id` to `action-${id}`
-   *
-   * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
-   * @default `useUniqueId()`
-   */
-  id?: string;
-};
-
-type BannerEvents = {};
-
-export type BannerModel = Model<BannerState, BannerEvents>;
-
-const BannerEventMap = createEventMap<BannerEvents>()({
-  guards: {},
-  callbacks: {},
-});
-
-export type BannerModelConfig = BannerState &
-  Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
-
-export const useBannerModel = (config: BannerModelConfig = {}): BannerModel => {
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
+export const useBannerModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
+     * will be `exclamationCircleIcon`, and a themed error color will be applied.
+     * @default false
+     */
+    hasError: false,
+    /**
+     * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
+     * will be hidden, and some basic styles will be applied.
+     * You will still need to manually set the css `position` value.
+     * @default false
+     */
+    isSticky: false,
+    /**
+     * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
+     * - `Banner` will set `aria-describedby` to `label-${id}`
+     * - `Banner` will set `aria-label` to `action-${id}`
+     * - `Banner.Label` will set `id` to `label-${id}`
+     * - `Banner.ActionText` will set `id` to `action-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default `useUniqueId()`
+     */
+    id: '',
+  },
+})(config => {
   const id = useUniqueId(config.id);
 
   const state = {
-    hasError: config.hasError ?? false,
-    isSticky: config.isSticky ?? false,
+    ...config,
     id,
   };
 
-  const events = useEventMap(BannerEventMap, state, config, {});
-
   return {
     state,
-    events,
+    events: {},
   };
-};
+});

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/BaseButton.tsx

@@ -0,0 +1,303 @@
+import * as React from 'react';
+
+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 {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';
+
+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`.
+   * If no size is provided, it will default to `medium`.
+   *
+   * @default 'medium'
+   */
+  size?: ButtonSizes;
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  ref?: React.Ref<HTMLButtonElement>;
+  /**
+   * Whether the icon should received filled (colored background layer) or regular styles.
+   * Corresponds to `toggled` in ToolbarIconButton
+   */
+  fillIcon?: boolean;
+}
+
+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,
+      },
+    },
+  };
+}
+
+const ButtonContainer = styled('button')<StyledType & ButtonContainerProps>(
+  {
+    ...type.levels.subtext.large,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    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,
+    },
+
+    '&:hover:active': {transitionDuration: '40ms'},
+
+    '& > *:first-of-type': {
+      marginLeft: '0',
+    },
+
+    '& > *:last-of-type': {
+      marginRight: 0,
+    },
+  },
+  ({size}) => {
+    switch (size) {
+      case 'large':
+        return {
+          ...type.levels.body.small,
+          fontWeight: type.properties.fontWeights.bold,
+          height: '48px',
+          '& > * ': {
+            margin: `0 ${spaceNumbers.xxs / 2}px`,
+          },
+        };
+      case 'medium':
+      default:
+        return {
+          height: space.xl,
+          '& > * ': {
+            margin: `0 ${spaceNumbers.xxs / 2}px`,
+          },
+        };
+      case 'small':
+        return {
+          height: space.l,
+          '& > * ': {
+            margin: `0 ${spaceNumbers.xxxs / 2}px`,
+          },
+        };
+      case 'extraSmall':
+        return {
+          ...type.levels.subtext.medium,
+          fontWeight: type.properties.fontWeights.bold,
+          height: space.m,
+          '& > * ': {
+            margin: `0 ${spaceNumbers.xxxs / 2}px`,
+          },
+        };
+    }
+  },
+  ({grow}) => grow && {width: '100%', maxWidth: '100%'},
+  ({colors, fillIcon, theme}) => {
+    if (!colors) {
+      return;
+    }
+
+    const baseStyles = {
+      backgroundColor: colors.default.background,
+      borderColor: colors.default.border,
+      color: colors.default.label,
+      ...(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),
+      }),
+    };
+
+    const hoverStyles = {
+      '&:hover': {
+        backgroundColor: colors.hover.background,
+        borderColor: colors.hover.border,
+        color: colors.hover.label,
+        ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
+      },
+    };
+
+    const activeStyles = {
+      '&:active, &:focus:active, &:hover:active': {
+        backgroundColor: colors.active.background,
+        borderColor: colors.active.border,
+        color: colors.active.label,
+        ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
+      },
+    };
+
+    return {
+      ...baseStyles,
+      '&:focus': {
+        backgroundColor: colors.focus.background,
+        borderColor: colors.focus.border,
+        color: colors.focus.label,
+        ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
+        ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
+      },
+
+      ...activeStyles,
+      ...hoverStyles,
+      '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
+        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)),
+      },
+      ...mouseFocusBehavior({
+        '&:focus': {
+          ...baseStyles,
+          outline: 'none',
+          boxShadow: 'none',
+          animation: 'none',
+          ...hoverStyles,
+          ...activeStyles,
+        },
+      }),
+    };
+  },
+  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}`;
+
+    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>
   ),
 });