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

package/tokens/lib/depth.ts

@@ -1,23 +1,23 @@
 export type CanvasDepth = {
   /**
-   * ### Depth Inset
-   * 	Used for inset containers
+   * ### Depth None
+   * 	Used for removing existing depth
    *
    * @example
    * ```ts
    * import { depth } from '@workday/canvas-kit-react/tokens';
    *
-   * const insetCardStyles = {
-   *   ...depth.inset,
+   * const noDepthCardStyles = {
+   *   ...depth.none,
    * };
    * ```
    */
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+  none: {
+    boxShadow: 'none';
   };
   /**
    * ### Depth 1
-   * Used for minimal offset
+   * Used for minimal offset and Cards
    *
    * @example
    * ```ts
@@ -29,11 +29,11 @@ export type CanvasDepth = {
    * ```
    */
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 2
-   * Used for Cards, Popups, and Menus — our most common depth
+   * Used for Top navigation, Bottom navigation
    *
    * @example
    * ```ts
@@ -45,11 +45,11 @@ export type CanvasDepth = {
    * ```
    */
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 3
-   * Used for interactive Cards on hover
+   * Used for FABs, Menus
    *
    * @example
    * ```ts
@@ -61,11 +61,11 @@ export type CanvasDepth = {
    * ```
    */
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 4
-   * Used for Cards on white backgrounds — adds border styles for more contrast
+   *
    *
    * @example
    * ```ts
@@ -77,8 +77,39 @@ export type CanvasDepth = {
    * ```
    */
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)';
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 5
+   * Used for Popups, Toast Messages, Dialogs, Side Panels without opacity overlay behavior
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[5],
+   * };
+   * ```
+   */
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 6
+   * Used for components with opacity overlay behavior such as Modal or Side Panels
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[6],
+   * };
+   * ```
+   */
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
   };
 };
 
@@ -90,8 +121,8 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  * Depth is the relative distance between surfaces in the z-axis.
  * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
+ * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
  *
  * @example
  * ```tsx
@@ -108,20 +139,25 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  */
 export const depth: CanvasDepth = {
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
+  none: {
+    boxShadow: 'none',
   },
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
   },
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
   },
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
   },
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)',
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+  },
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+  },
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
   },
 };

package/tokens/lib/types.ts

@@ -1,4 +1,4 @@
 import {CSSProperties as RCP} from 'react';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 
 export type CSSProperties = RCP & CSSObject;

package/tooltip/README.md

@@ -2,7 +2,8 @@
 
 A Tooltip component that renders information/text when the user hovers over an element. A tooltip is
 used to label or describe an element. By default, a tooltip will label an element. This is useful
-for IconButtons. A tooltip can also be used to describe additional information about an element
+for TertiaryButtons that render just an icon. A tooltip can also be used to describe additional
+information about an element
 
 [> Workday Design Reference](https://design.workday.com/components/popups/tooltips)
 
@@ -18,12 +19,12 @@ yarn add @workday/canvas-kit-react
 import * as React from 'react';
 
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 
 const TooltipExample = () => {
   return (
     <Tooltip title="Close">
-      <IconButton variant="circle" icon={xIcon} aria-label="Close" />
+      <TertiaryButton icon={xIcon} aria-label="Close" />
     </Tooltip>
   );
 };
@@ -60,8 +61,8 @@ const TooltipExample = () => {
 > Determines the tooltip type for accessibility.
 >
 > - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip `title`
->   prop is the same as the text content of the wrapped element. E.g. IconButtons or Ellipsis
->   tooltips.
+>   prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an
+>   icon or Ellipsis tooltips.
 > - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
 >   information about the target. **Note**: Assistive technology may ignore `describe` techniques
 >   based on verbosity settings. Consider an alternate way to inform a user of additional important

package/tooltip/lib/Tooltip.tsx

@@ -31,7 +31,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * Determines the tooltip type for accessibility.
    *
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-   *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+   *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
    *   Ellipsis tooltips.
    * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.

package/tooltip/lib/TooltipContainer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {borderRadius, colors, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';

package/tooltip/lib/useTooltip.tsx

@@ -62,7 +62,7 @@ export function useTooltip<T extends Element = Element>({
    * Determines the tooltip type for accessibility.
    *
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-   *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+   *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
    *   Ellipsis tooltips.
    * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.

package/button/lib/IconButton.tsx

@@ -1,276 +0,0 @@
-import * as React from 'react';
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {
-  focusRing,
-  useTheme,
-  Themeable,
-  EmotionCanvasTheme,
-  createComponent,
-} from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors} from './types';
-import {ButtonContainer} from './parts';
-
-export interface IconButtonProps extends Themeable {
-  /**
-   * The accessibility label to indicate the action triggered by clicking the IconButton.
-   */
-  'aria-label': string;
-  /**
-   * The type of the IconButton.
-   * @default 'circle'
-   */
-  variant?:
-    | 'square'
-    | 'squareFilled'
-    | 'plain'
-    | 'circle'
-    | 'circleFilled'
-    | 'inverse'
-    | 'inverseFilled';
-  /**
-   * The size of the IconButton.
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium';
-  /**
-   * The toggled state of the button. If defined as a boolean, then it manages the toggled state: on (`true`) or off (`false`).
-   * @default undefined
-   */
-  toggled?: boolean;
-  /**
-   * The icon of the IconButton.
-   */
-  icon?: CanvasSystemIcon;
-  /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
-   */
-  shouldMirrorIcon?: boolean;
-  /**
-   * The function called when the IconButton toggled state changes.
-   */
-  onToggleChange?: (toggled: boolean | undefined) => void;
-  value?: string | string[] | number;
-  children?: React.ReactNode;
-}
-
-export const IconButton = createComponent('button')({
-  displayName: 'IconButton',
-  Component: (
-    {
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
-      variant = 'circle',
-      size = 'medium',
-      onToggleChange,
-      icon,
-      shouldMirrorIcon = false,
-      toggled,
-      children,
-      ...elemProps
-    }: IconButtonProps,
-    ref,
-    Element
-  ) => {
-    const isInitialMount = React.useRef(true);
-
-    // Only call onToggleChange on update - not on first mount
-    React.useEffect(() => {
-      if (isInitialMount.current) {
-        isInitialMount.current = false;
-      } else {
-        if (toggled && typeof onToggleChange === 'function') {
-          onToggleChange(toggled);
-        }
-      }
-    }, [toggled, onToggleChange]);
-
-    const containerStyles = {
-      padding: 0,
-      margin: variant === 'plain' ? '-8px' : undefined,
-      minWidth: size === 'small' ? space.l : space.xl, // min-width is set so buttons don't collapse in IE11
-      width: size === 'small' ? space.l : space.xl,
-      height: size === 'small' ? space.l : space.xl,
-      ...getIconButtonBorderRadius(variant),
-      ['& .wd-icon']: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        width: size === 'small' ? '20px' : undefined,
-        height: size === 'small' ? '20px' : undefined,
-      },
-    };
-
-    return (
-      <ButtonContainer
-        ref={ref}
-        as={Element}
-        colors={getIconButtonColors(variant, theme, toggled)}
-        size={size}
-        fillIcon={toggled}
-        extraStyles={containerStyles}
-        aria-pressed={toggled}
-        {...elemProps}
-      >
-        {icon ? <SystemIcon icon={icon} shouldMirror={shouldMirrorIcon} /> : children}
-      </ButtonContainer>
-    );
-  },
-});
-
-const getIconButtonBorderRadius = (variant: IconButtonProps['variant']) => {
-  switch (variant) {
-    case 'square':
-    case 'squareFilled':
-      return {borderRadius: borderRadius.m};
-    default:
-      return {borderRadius: borderRadius.circle};
-  }
-};
-
-const getIconButtonColors = (
-  variant: IconButtonProps['variant'],
-  theme: EmotionCanvasTheme,
-  toggled?: boolean
-): ButtonColors => {
-  const {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  } = theme;
-
-  switch (variant) {
-    case 'square':
-    case 'circle':
-    default:
-      return {
-        default: {
-          background: toggled ? themePrimary.main : undefined,
-          icon: toggled ? themePrimary.contrast : colors.licorice200,
-        },
-        hover: {
-          background: toggled ? themePrimary.dark : colors.soap300,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        active: {
-          background: toggled ? themePrimary.dark : colors.soap500,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        focus: {
-          background: toggled ? themePrimary.main : undefined,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        disabled: {
-          background: toggled ? themePrimary.lightest : 'transparent',
-          icon: toggled ? themePrimary.light : colors.soap600,
-        },
-      };
-    case 'squareFilled':
-    case 'circleFilled':
-      return {
-        default: {
-          background: toggled ? themePrimary.main : colors.soap200,
-          icon: toggled ? themePrimary.contrast : colors.licorice200,
-        },
-        hover: {
-          background: toggled ? themePrimary.dark : colors.soap400,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        active: {
-          background: toggled ? themePrimary.dark : colors.soap500,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        focus: {
-          background: toggled ? themePrimary.main : colors.soap200,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        disabled: {
-          background: toggled ? themePrimary.lightest : colors.soap100,
-          icon: toggled ? themePrimary.light : colors.soap600,
-        },
-      };
-    case 'plain':
-      return {
-        default: {
-          icon: toggled ? themePrimary.main : colors.licorice200,
-        },
-        hover: {
-          icon: toggled ? themePrimary.main : colors.licorice500,
-        },
-        active: {
-          icon: toggled ? themePrimary.main : colors.licorice500,
-        },
-        focus: {
-          icon: toggled ? themePrimary.main : colors.licorice500,
-          focusRing: focusRing({}, theme),
-        },
-        disabled: {
-          icon: toggled ? themePrimary.light : colors.soap600,
-        },
-      };
-    case 'inverse':
-      return {
-        default: {
-          background: toggled ? themePrimary.contrast : undefined,
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        hover: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        active: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.3)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        focus: {
-          background: toggled ? themePrimary.contrast : undefined,
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-          focusRing: focusRing(
-            {
-              separation: 2,
-              innerColor: 'currentColor',
-              outerColor: themePrimary.contrast,
-            },
-            theme
-          ),
-        },
-        disabled: {
-          background: toggled ? 'rgba(255,255,255,0.75)' : 'transparent',
-          icon: toggled ? themePrimary.main : 'rgba(255, 255, 255, 0.75)',
-        },
-      };
-    case 'inverseFilled':
-      return {
-        default: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        hover: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.3)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        active: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.4)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        focus: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-          focusRing: focusRing(
-            {
-              separation: 2,
-              innerColor: 'currentColor',
-              outerColor: themePrimary.contrast,
-            },
-            theme
-          ),
-        },
-        disabled: {
-          background: toggled ? 'rgba(255,255,255,0.75)' : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : 'rgba(255, 255, 255, 0.75)',
-        },
-      };
-  }
-};