@workday/canvas-kit-react 8.0.0 → 8.0.2

package/form-field/lib/Label.tsx

@@ -72,8 +72,6 @@ const RequiredAstrisk = styled('abbr')({
 });
 
 // Used inside the fieldset component instead of a label for accessible radio groups.
-// Extra `width: 100%` style is to help IE11 wrap text properly in a top-positioned
-// FormField's legend element.
 const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosition}) => {
   if (labelPosition === Label.Position.Top) {
     return {
@@ -86,9 +84,10 @@ const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosi
     width: 'auto',
   };
 });
+
 const LabelComponent = styled('label')<LabelProps>(...labelStyles);
 
-class Label extends React.Component<LabelProps> {
+class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
   static Position = FormFieldLabelPosition;
 
   public render() {
@@ -125,4 +124,4 @@ class Label extends React.Component<LabelProps> {
 
 Label.Position = FormFieldLabelPosition;
 
-export default Label;
+export {Label};

package/icon/index.ts

@@ -1,12 +1,3 @@
-import AccentIcon from './lib/AccentIcon';
-import AppletIcon from './lib/AppletIcon';
-import SystemIcon from './lib/SystemIcon';
-import SystemIconCircle from './lib/SystemIconCircle';
-import Graphic from './lib/Graphic';
-import Svg from './lib/Svg';
-
-export {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic, Svg};
-
 export * from './lib/AccentIcon';
 export * from './lib/AppletIcon';
 export * from './lib/SystemIcon';

package/icon/lib/AccentIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import Icon, {IconProps} from './Icon';
+import {Icon, IconProps} from './Icon';
 import {createComponent} from '@workday/canvas-kit-react/common';
 
 export interface AccentIconStyles {
@@ -44,7 +44,7 @@ export const accentIconStyles = ({
   },
 });
 
-const AccentIcon = createComponent('span')({
+export const AccentIcon = createComponent('span')({
   displayName: 'AccentIcon',
   Component: (
     {transparent = false, size = 56, icon, color, shouldMirror, ...elemProps}: AccentIconProps,
@@ -65,5 +65,3 @@ const AccentIcon = createComponent('span')({
     );
   },
 });
-
-export default AccentIcon;

package/icon/lib/AppletIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import Icon, {IconProps} from './Icon';
+import {Icon, IconProps} from './Icon';
 import {createComponent} from '@workday/canvas-kit-react/common';
 
 export interface AppletIconStyles {
@@ -91,5 +91,3 @@ export const AppletIcon = createComponent('span')({
     Colors: BrandingColor,
   },
 });
-
-export default AppletIcon;

package/icon/lib/Graphic.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import Svg, {SvgProps} from './Svg';
+import {Svg, SvgProps} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
 
 export interface GraphicStyles {
@@ -59,7 +59,7 @@ export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject =
   return {};
 };
 
-const Graphic = createComponent('span')({
+export const Graphic = createComponent('span')({
   displayName: 'Graphic',
   Component: (
     {grow = false, src, width, height, shouldMirror, ...elemProps}: GraphicProps,
@@ -79,5 +79,3 @@ const Graphic = createComponent('span')({
     );
   },
 });
-
-export default Graphic;

package/icon/lib/Icon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import Svg, {SvgProps} from './Svg';
+import {Svg, SvgProps} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
 
 export interface IconProps extends SvgProps {
@@ -36,5 +36,3 @@ export const Icon = createComponent('span')({
     );
   },
 });
-
-export default Icon;

package/icon/lib/Svg.tsx

@@ -49,5 +49,3 @@ export const Svg = createComponent('span')({
     );
   },
 });
-
-export default Svg;

package/icon/lib/SystemIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import Icon, {IconProps} from './Icon';
+import {Icon, IconProps} from './Icon';
 import {createComponent} from '@workday/canvas-kit-react/common';
 
 export interface SystemIconStyles {
@@ -46,7 +46,7 @@ export interface SystemIconStyles {
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
+    Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -88,7 +88,7 @@ export const systemIconStyles = ({
   },
 });
 
-const SystemIcon = createComponent('span')({
+export const SystemIcon = createComponent('span')({
   displayName: 'SystemIcon',
   Component: (
     {
@@ -133,5 +133,3 @@ const SystemIcon = createComponent('span')({
     );
   },
 });
-
-export default SystemIcon;

package/icon/lib/SystemIconCircle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import SystemIcon, {SystemIconProps} from './SystemIcon';
+import {SystemIcon, SystemIconProps} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
 
@@ -58,7 +58,7 @@ const Container = styled('div', {
   })
 );
 
-const SystemIconCircle = createComponent('span')({
+export const SystemIconCircle = createComponent('span')({
   displayName: 'SystemIconCircle',
   Component: (
     {
@@ -89,5 +89,3 @@ const SystemIconCircle = createComponent('span')({
     );
   },
 });
-
-export default SystemIconCircle;

package/index.ts

@@ -2,6 +2,7 @@ export * from './action-bar';
 export * from './avatar';
 export * from './badge';
 export * from './banner';
+export * from './breadcrumbs';
 export * from './button';
 export * from './card';
 export * from './checkbox';
@@ -13,7 +14,7 @@ export * from './disclosure';
 export * from './form-field';
 export * from './icon';
 export * from './layout';
-export * from './loading-animation';
+export * from './loading-dots';
 export * from './menu';
 export * from './modal';
 export * from './pagination';
@@ -27,6 +28,8 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './testing';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

package/layout/README.md

@@ -14,26 +14,27 @@ For more detailed information on this component, please refer to the
 # Canvas Kit Layout
 
 The layout component is used to create layouts for your application. The component comes with the
-`Layout` and `Column` component. Layout and Columns can be utilized to create a combination of
-different workday specific layouts. Layouts should be used to create the main layout on the page.
+`DeprecatedLayout` and `DeprecatedColumn` component. Layout and Columns can be utilized to create a
+combination of different workday specific layouts. Layouts should be used to create the main layout
+on the page.
 
-# Layout
+# Layout (deprecated)
 
 > Layout Container
 
 ## Usage
 
 ```tsx
-import {Layout} from '@workday/canvas-kit-react/layout';
+import {DeprecatedLayout} from '@workday/canvas-kit-react/layout';
 
 // Basic
-<Layout>...</Layout>
+<DeprecatedLayout>...</DeprecatedLayout>
 
 // No spacing and no gutter
-<Layout gutter={0} spacing={0}>...</Layout>
+<DeprecatedLayout gutter={0} spacing={0}>...</DeprecatedLayout>
 
 // Layout with a max container width
-<Layout capWidth={true}>...</Layout>
+<DeprecatedLayout capWidth={true}>...</DeprecatedLayout>
 ```
 
 ## Static Properties
@@ -70,39 +71,39 @@ Default: `12`
 
 ---
 
-# Column
+# Column (deprecated)
 
 > The column acts as a pillar for building layouts. Columns widths can be fluid, 12 columns, or a
-> fixed. Columns should be used exclusively with `Layout` to build the main page layouts. `width`
-> and `columns` props are mutually exclusive. The `width` prop will take precedence over the
+> fixed. Columns should be used exclusively with `DeprecatedLayout` to build the main page layouts.
+> `width` and `columns` props are mutually exclusive. The `width` prop will take precedence over the
 > `columns` prop.
 
 ```tsx
-import {Layout} from '@workday/canvas-kit-react/layout';
+import {DeprecatedLayout} from '@workday/canvas-kit-react/layout';
 
 // Fluid layouts
-<Layout>
-  <Layout.Column />
-  <Layout.Column />
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column />
+  <DeprecatedLayout.Column />
+</DeprecatedLayout>
 
 // 12 column layouts
-<Layout>
-  <Layout.Column columns={4}/>
-  <Layout.Column columns={8}/>
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column columns={4}/>
+  <DeprecatedLayout.Column columns={8}/>
+</DeprecatedLayout>
 
 // Fixed column width
-<Layout>
-  <Layout.Column width={'400px'}/>
-  <Layout.Column columns={8}/>
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column width={'400px'}/>
+  <DeprecatedLayout.Column columns={8}/>
+</DeprecatedLayout>
 
 // Custom spacing
-<Layout>
-  <Layout.Column spacing={0}/>
-  <Layout.Column />
-</Layout>
+<DeprecatedLayout>
+  <DeprecatedLayout.Column spacing={0}/>
+  <DeprecatedLayout.Column />
+</DeprecatedLayout>
 ```
 
 ## Static Properties

package/layout/index.ts

@@ -1,16 +1,26 @@
-import Layout from './lib/Layout';
-import Column from './lib/Column';
+import {DeprecatedLayout} from './lib/Layout';
+import {DeprecatedColumn} from './lib/Column';
 
-export { Layout, Column};
+export { DeprecatedLayout, DeprecatedColumn};
 export * from './lib/Box';
+export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
-export {DepthStyleProps} from './lib/utils/depth';
+export {DepthStyleProps, depthStyleFnConfigs} from './lib/utils/depth';
+export * from './lib/utils/flex';
 export * from './lib/utils/flexItem';
+export * from './lib/utils/grid';
+export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
+export * from './lib/utils/other';
 export * from './lib/utils/position';
-export {SpaceStyleProps} from './lib/utils/space';
+export {SpaceStyleProps, spaceStyleFnConfigs} from './lib/utils/space';
+export {AllStyleProps, CommonStyleProps} from './lib/utils/styleProps';
+export * from './lib/utils/text';
 export * from './lib/Flex';
+export * from './lib/Grid';
 export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
+export type { GridStyleProps } from './lib/utils/grid';
+export type { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
 export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';

package/layout/lib/Box.tsx

@@ -4,27 +4,62 @@ import isPropValid from '@emotion/is-prop-valid';
 import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
 
 // style props
-import {border, BorderStyleProps} from './utils/border';
-import {color, ColorStyleProps} from './utils/color';
-import {depth, DepthStyleProps} from './utils/depth';
-import {flexItem, FlexItemStyleProps} from './utils/flexItem';
-import {layout, LayoutStyleProps} from './utils/layout';
-import {other, OtherStyleProps} from './utils/other';
-import {position, PositionStyleProps} from './utils/position';
-import {space, SpaceStyleProps} from './utils/space';
+import {background} from './utils/background';
+import {border} from './utils/border';
+import {color} from './utils/color';
+import {depth} from './utils/depth';
+import {flexItem} from './utils/flexItem';
+import {gridItem} from './utils/gridItem';
+import {layout} from './utils/layout';
+import {other} from './utils/other';
+import {position} from './utils/position';
+import {space} from './utils/space';
+import {text} from './utils/text';
+import {CommonStyleProps} from './utils/styleProps';
 
-export type BoxProps = BorderStyleProps &
-  ColorStyleProps &
-  DepthStyleProps &
-  FlexItemStyleProps &
-  LayoutStyleProps &
-  OtherStyleProps &
-  PositionStyleProps &
-  SpaceStyleProps & {
-    children?: React.ReactNode;
-  };
+/**
+ * Box Props
+ * ---
+ * Common style props + children
+ *
+ * - background
+ * - border
+ * - color
+ * - depth
+ * - flexItem
+ * - gridItem
+ * - layout
+ * - other
+ * - position
+ * - space
+ * - text
+ */
+export type BoxProps = CommonStyleProps & {
+  children?: React.ReactNode;
+};
 
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
+const omittedProps = [
+  'display',
+  'color',
+  'height',
+  'overflow',
+  'width',
+  'border',
+  'background',
+  'fontSize',
+  'fontWeight',
+  'fontFamily',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'opacity',
+  'textDecoration',
+  'textOverflow',
+  'textTransform',
+  'textShadow',
+  'whiteSpace',
+  'wordBreak',
+];
 
 const shouldForwardProp = (prop: string) => {
   return isPropValid(prop) && !omittedProps.includes(prop);
@@ -34,6 +69,7 @@ const shouldForwardProp = (prop: string) => {
  * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
  * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
  * @example
+ * ```
  * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
  * const StyledHeader = styled('h1')(
  *  boxStyleFn,
@@ -42,22 +78,27 @@ const shouldForwardProp = (prop: string) => {
  *  }
  * )
  *
- * ....
+ * ...
  *
  * <StyledHeader color='red'>Hello World</StyledHeader>
+ * ```
  */
 export const boxStyleFn = <P extends BoxProps>(props: P) => {
   return [
     {
       boxSizing: 'border-box',
     },
+    background,
     border,
     color,
     depth,
     flexItem,
+    gridItem,
     layout,
+    other,
     position,
     space,
+    text,
   ].reduce((result, style) => {
     // @ts-ignore
     const temp = typeof style === 'function' ? style(props) : style;
@@ -71,33 +112,10 @@ export const boxStyleFn = <P extends BoxProps>(props: P) => {
 };
 
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
-const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  position,
-  space
-);
+const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(boxStyleFn);
 
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  other,
-  position,
-  space
-);
+const StyledBoxComponent = styled('div')<StyledType & BoxProps>(boxStyleFn);
 
 /**
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.

package/layout/lib/Column.tsx

@@ -2,13 +2,21 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 
-export interface ColumnProps {
+/**
+ * ### Deprecated Layout Column Props
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedColumnProps {
   /**
-   * The children of the Column (cannot be empty).
+   * The children of the DeprecatedColumn (cannot be empty).
    */
   children?: React.ReactNode;
   /**
-   * The left and right padding of the Column (inherits from Layout prop).
+   * The left and right padding of the DeprecatedColumn (inherits from Layout prop).
    * @default 12
    */
   spacing?: number;
@@ -24,7 +32,7 @@ export interface ColumnProps {
 
 const ColumnContainer = styled('div', {
   shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
-})<ColumnProps>(
+})<DeprecatedColumnProps>(
   {
     '&:first-of-type': {
       paddingLeft: 0,
@@ -58,7 +66,16 @@ const ColumnContainer = styled('div', {
   }
 );
 
-export default class Column extends React.Component<ColumnProps> {
+export class DeprecatedColumn extends React.Component<DeprecatedColumnProps> {
+  componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `
+    );
+  }
+
   public render() {
     const {children, spacing, columns, width, ...elemProps} = this.props;
 

package/layout/lib/Flex.tsx

@@ -5,7 +5,7 @@ import {Box, BoxProps} from './Box';
 
 import {flex, FlexStyleProps} from './utils/flex';
 
-export type FlexProps = BoxProps & FlexStyleProps;
+export type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 
 const StyledFlex = styled(Box)<StyledType & FlexProps>(
   {
@@ -20,6 +20,7 @@ const StyledFlex = styled(Box)<StyledType & FlexProps>(
  * `Flex` is built on top of `Box` and has access to all `BoxProps`.
  *
  * @example
+ * ```tsx
  * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
  *
  * interface CardProps extends FlexProps {
@@ -33,7 +34,7 @@ const StyledFlex = styled(Box)<StyledType & FlexProps>(
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>
  * );
- *
+ * ```
  */
 export const Flex = createComponent('div')({
   displayName: 'Flex',
@@ -44,4 +45,7 @@ export const Flex = createComponent('div')({
       </StyledFlex>
     );
   },
+  subComponents: {
+    Item: Box,
+  },
 });

package/layout/lib/Grid.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from './Box';
+
+import {grid, GridStyleProps} from './utils/grid';
+
+export type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
+export type GridItemProps = BoxProps;
+
+const StyledGrid = styled(Box)<StyledType & GridProps>(
+  {
+    display: 'grid',
+  },
+  grid
+);
+
+const GridItem = createComponent('div')({
+  displayName: 'Grid.Item',
+  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+    return (
+      <Box as={Element} ref={ref} {...elemProps}>
+        {children}
+      </Box>
+    );
+  },
+});
+
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export const Grid = createComponent('div')({
+  displayName: 'Grid',
+  Component: ({children, ...elemProps}: GridProps, ref, Element) => {
+    return (
+      <StyledGrid as={Element} ref={ref} {...elemProps}>
+        {children}
+      </StyledGrid>
+    );
+  },
+  subComponents: {
+    /**
+     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+     *
+     * @example
+     * ```
+     * import { Grid } from '@workday/canvas-kit-react/layout';
+     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+     *
+     * interface CardProps extends GridItemStyleProps {
+     *   // card-specific props
+     * }
+     *
+     * // `Card`'s default values are set using `GridItemStyleProps`
+     * const Card = (props: CardProps) => (
+     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+     *     <h1>Hello, Card!</h1>
+     *     <p>This card uses grid child specific props to set its layout.</p>
+     *   </Grid.Item>
+     * );
+     *```
+     */
+
+    Item: GridItem,
+  },
+});