@workday/canvas-kit-react 6.8.9 → 6.9.0-next.2

package/banner/lib/BannerActionText.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import {
+  ExtractProps,
+  createSubcomponent,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+import {useBannerActionText, useBannerModel} from './hooks';
+
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+  /**
+   * The text of the Banner action.
+   * @default 'View All'
+   */
+  children?: React.ReactNode;
+}
+
+const StyledActionBarText = styled(Box.as('span'))<StyledType>({
+  textDecoration: 'underline',
+});
+
+export const BannerActionText = createSubcomponent('span')({
+  displayName: 'Banner.ActionTextText',
+  modelHook: useBannerModel,
+  elemPropsHook: useBannerActionText,
+})<BannerActionTextProps>(({children = 'View All', ...elemProps}, Element, model) => {
+  return (
+    <StyledActionBarText
+      as={Element}
+      display={model.state.isSticky ? 'none' : 'inline'}
+      {...elemProps}
+    >
+      {children}
+    </StyledActionBarText>
+  );
+});

package/banner/lib/BannerIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {
+  ExtractProps,
+  createSubcomponent,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+
+import {useBannerIcon, useBannerModel} from './hooks';
+
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+  /**
+   * Icon to show next to label
+   * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+   */
+  icon?: CanvasSystemIcon;
+}
+
+const StyledBannerIcon = styled(SystemIcon)<StyledType>({
+  marginRight: space.xs,
+});
+
+export const BannerIcon = createSubcomponent('span')({
+  displayName: 'Banner.Icon',
+  modelHook: useBannerModel,
+  elemPropsHook: useBannerIcon,
+})<BannerIconProps>((elemProps, Element, model) => {
+  const {icon, ...iconButtonProps} = elemProps;
+
+  return <StyledBannerIcon as={Element} icon={icon!} {...iconButtonProps} />;
+});

package/banner/lib/BannerLabel.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+import {useBannerLabel, useBannerModel} from './hooks';
+
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+  /**
+   * The text of the Banner.
+   */
+  children: React.ReactNode;
+}
+
+export const BannerLabel = createSubcomponent('div')({
+  displayName: 'Banner.Label',
+  modelHook: useBannerModel,
+  elemPropsHook: useBannerLabel,
+})<BannerLabelProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Flex as={Element} flex="1 1 0%" {...elemProps}>
+      {children}
+    </Flex>
+  );
+});

package/banner/lib/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './useBannerModel';
+export * from './useThemedPalette';
+export * from './useBannerIcon';
+export * from './useBannerLabel';
+export * from './useBannerActionText';
+export * from './useBanner';

package/banner/lib/hooks/useBanner.tsx

@@ -0,0 +1,13 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useBannerModel} from './useBannerModel';
+
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+export const useBanner = createElemPropsHook(useBannerModel)(({state}) => {
+  return {
+    'aria-describedby': `label-${state.id}`,
+    'aria-labelledby': `action-${state.id}`,
+  };
+});

package/banner/lib/hooks/useBannerActionText.tsx

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

package/banner/lib/hooks/useBannerIcon.tsx

@@ -0,0 +1,19 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
+import {useBannerModel} from './useBannerModel';
+import {useThemedPalette} from './useThemedPalette';
+
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+export const useBannerIcon = createElemPropsHook(useBannerModel)(({state}) => {
+  const palette = useThemedPalette(state.hasError ? 'error' : 'alert');
+
+  return {
+    icon: state.hasError ? exclamationCircleIcon : exclamationTriangleIcon,
+    color: palette.contrast,
+    colorHover: palette.contrast,
+    size: 24,
+  };
+});

package/banner/lib/hooks/useBannerLabel.tsx

@@ -0,0 +1,12 @@
+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 = createElemPropsHook(useBannerModel)(({state}) => {
+  return {
+    id: `label-${state.id}`,
+  };
+});

package/banner/lib/hooks/useBannerModel.tsx

@@ -0,0 +1,42 @@
+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 = {
+    ...config,
+    id,
+  };
+
+  return {
+    state,
+    events: {},
+  };
+});

package/banner/lib/hooks/useThemedPalette.ts

@@ -0,0 +1,53 @@
+import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import chroma from 'chroma-js';
+
+type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+
+interface BackgroundColors {
+  normal?: string;
+  hover?: string;
+  contrast?: string;
+}
+
+const isAccessible = (foreground: string, background: string) => {
+  return chroma.contrast(foreground, background) >= 3;
+};
+
+const getPaletteColorsFromTheme = (
+  palette: CanvasThemePalette,
+  fallbackColors?: BackgroundColors
+): BackgroundColors => {
+  return {
+    hover: palette.dark,
+    normal: palette.main,
+    contrast: isAccessible(palette.contrast, palette.main)
+      ? palette.contrast
+      : fallbackColors?.contrast,
+  };
+};
+
+export function getPaletteColors(
+  type: paletteSelection,
+  theme: EmotionCanvasTheme
+): BackgroundColors {
+  const palette = theme.canvas.palette[type];
+
+  switch (type) {
+    case 'error': {
+      return getPaletteColorsFromTheme(palette, {contrast: colors.frenchVanilla100});
+    }
+    case 'alert': {
+      return getPaletteColorsFromTheme(palette, {contrast: colors.blackPepper400});
+    }
+    default: {
+      return getPaletteColorsFromTheme(palette);
+    }
+  }
+}
+
+export const useThemedPalette = (type: paletteSelection) => {
+  const theme = useTheme();
+
+  return getPaletteColors(type, theme);
+};

package/banner/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/banner",
   "module": "../dist/es6/banner",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/banner"
 }

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,9 @@ 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 {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 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,
+  },
+});