@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/form-field/lib/Hint.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {ErrorType, styled, Themeable} from '@workday/canvas-kit-react/common';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {Subtext, Text} from '@workday/canvas-kit-react/text';
 
 export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
   /**
@@ -19,20 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
   alertLabel?: string;
 }
 
-const Label = styled('span')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    fontWeight: type.properties.fontWeights.medium,
-  },
-  ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
-);
-
-const Message = styled('p')<Pick<HintProps, 'error'>>(
-  type.levels.subtext.medium,
-  {
-    margin: `${space.xxs} 0 0`,
-    width: '100%',
-  },
+const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
   ({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
 );
 
@@ -41,7 +29,6 @@ class Hint extends React.Component<HintProps> {
 
   public render() {
     const {errorLabel = 'Error', alertLabel = 'Alert', children, error} = this.props;
-
     let hintLabel: string | undefined;
     switch (error) {
       case Hint.ErrorType.Error:
@@ -54,8 +41,10 @@ class Hint extends React.Component<HintProps> {
     }
 
     return (
-      <Message {...this.props}>
-        {typeof error !== 'undefined' && hintLabel && <Label error={error}>{hintLabel}: </Label>}
+      <Message size="medium" margin={`${space.xxs} 0 0`} width="100%" {...this.props}>
+        {typeof error !== 'undefined' && hintLabel && (
+          <Text fontWeight="medium">{hintLabel}: </Text>
+        )}
         {children}
       </Message>
     );
@@ -64,4 +53,4 @@ class Hint extends React.Component<HintProps> {
 
 Hint.ErrorType = ErrorType;
 
-export default Hint;
+export {Hint};

package/form-field/lib/Label.tsx

@@ -15,7 +15,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
    */
   isLegend?: boolean;
   /**
-   * The id of a labelable form-related element. Synonymous with `for`.
+   * The id of the form-related element. Synonymous with `for`.
    */
   htmlFor?: string;
   /**
@@ -24,8 +24,9 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
    */
   required?: boolean;
   /**
-   * The title of the required label.
-   * @default required
+   * The required label is not visible to screen readers and should have no label. This prop will be
+   * ignored.
+   * @deprecated
    */
   requiredLabel?: string;
   /**
@@ -62,7 +63,7 @@ const labelStyles = [
   },
 ];
 
-const RequiredAstrisk = styled('abbr')({
+const RequiredAsterisk = styled('abbr')({
   color: colors.cinnamon500,
   fontSize: '16px',
   fontWeight: 400,
@@ -72,8 +73,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,25 +85,26 @@ 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() {
     const {
       labelPosition = Label.Position.Top,
       isLegend = false,
-      requiredLabel = 'required',
+      required,
       ...elemProps
     } = this.props;
-    const children = !this.props.required
+    const children = !required
       ? this.props.children
       : [
           this.props.children,
-          <RequiredAstrisk key={'0'} title={requiredLabel}>
+          <RequiredAsterisk key={'0'} aria-hidden>
             *
-          </RequiredAstrisk>,
+          </RequiredAsterisk>,
         ];
     return (
       <>
@@ -125,4 +125,4 @@ class Label extends React.Component<LabelProps> {
 
 Label.Position = FormFieldLabelPosition;
 
-export default Label;
+export {Label};

package/form-field/package.json

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

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,15 +2,16 @@ 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 {createComponent} from '@workday/canvas-kit-react/common';
+import {Icon, IconProps} from './Icon';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface AccentIconStyles {
   /**
    * The fill color of the AccentIcon.
    * @default colors.blueberry500
    */
-  color?: string;
+  color?: SystemPropValues['color'];
   /**
    * If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `colors.frenchVanilla100`.
    * @default false
@@ -18,9 +19,7 @@ export interface AccentIconStyles {
   transparent?: boolean;
 }
 
-export interface AccentIconProps
-  extends AccentIconStyles,
-    Omit<IconProps, 'src' | 'type' | 'color'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
   /**
    *  The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -37,14 +36,14 @@ export const accentIconStyles = ({
   transparent = false,
 }: AccentIconStyles): CSSObject => ({
   '& .color-500': {
-    fill: color,
+    fill: getColor(color),
   },
   '& .french-vanilla-100': {
     fill: transparent ? 'transparent' : colors.frenchVanilla100,
   },
 });
 
-const AccentIcon = createComponent('span')({
+export const AccentIcon = createComponent('span')({
   displayName: 'AccentIcon',
   Component: (
     {transparent = false, size = 56, icon, color, shouldMirror, ...elemProps}: AccentIconProps,
@@ -65,5 +64,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,51 +2,52 @@ 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 {createComponent} from '@workday/canvas-kit-react/common';
+import {Icon, IconProps} from './Icon';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface SystemIconStyles {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
-  accent?: string;
+  accent?: SystemPropValues['color'];
   /**
    * The accent color of the SystemIcon on hover. This overrides `colorHover`.
    */
-  accentHover?: string;
+  accentHover?: SystemPropValues['color'];
   /**
    * The background color of the SystemIcon.
    * @default transparent
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The background color of the SystemIcon on hover.
    * @default transparent
    */
-  backgroundHover?: string;
+  backgroundHover?: SystemPropValues['color'];
   /**
    * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
    * @default iconColors.standard
    */
-  color?: string;
+  color?: SystemPropValues['color'];
   /**
    * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
    * @default iconColors.hover
    */
-  colorHover?: string;
+  colorHover?: SystemPropValues['color'];
   /**
    * The fill color of the SystemIcon. This overrides `color`.
    */
-  fill?: string;
+  fill?: SystemPropValues['color'];
   /**
    * The fill color of the SystemIcon on hover. This overrides `colorHover`.
    */
-  fillHover?: string;
+  fillHover?: SystemPropValues['color'];
 }
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
+    Omit<IconProps, 'src' | 'fill' | 'type'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -55,7 +56,6 @@ export interface SystemIconProps
    * The size of the SystemIcon in `px`.
    */
   size?: number | string | undefined;
-  className?: string; //investigate more
 }
 
 export const systemIconStyles = ({
@@ -69,26 +69,26 @@ export const systemIconStyles = ({
   fillHover,
 }: SystemIconStyles): CSSObject => ({
   '& .wd-icon-fill': {
-    fill: fill || color,
+    fill: getColor(fill) || getColor(color),
   },
   ':hover .wd-icon-fill': {
-    fill: fillHover || colorHover,
+    fill: getColor(fillHover) || getColor(colorHover),
   },
   '& .wd-icon-accent, & .wd-icon-accent2': {
-    fill: accent || color,
+    fill: getColor(accent) || getColor(color),
   },
   ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-    fill: accentHover || colorHover,
+    fill: getColor(accentHover) || getColor(colorHover),
   },
   '& .wd-icon-background': {
-    fill: background,
+    fill: getColor(background),
   },
   ':hover .wd-icon-background': {
-    fill: backgroundHover,
+    fill: getColor(backgroundHover),
   },
 });
 
-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,9 +2,10 @@ 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';
+import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -20,7 +21,7 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
    * @default colors.soap300
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -50,7 +51,7 @@ const Container = styled('div', {
     },
   },
   ({background}) => ({
-    background: background,
+    background: getColor(background),
   }),
   ({size}) => ({
     width: size,
@@ -58,7 +59,7 @@ const Container = styled('div', {
   })
 );
 
-const SystemIconCircle = createComponent('span')({
+export const SystemIconCircle = createComponent('span')({
   displayName: 'SystemIconCircle',
   Component: (
     {
@@ -89,5 +90,3 @@ const SystemIconCircle = createComponent('span')({
     );
   },
 });
-
-export default SystemIconCircle;

package/icon/package.json

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

package/index.ts

@@ -2,18 +2,20 @@ 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';
 export * from './collection';
 export * from './color-picker';
+export * from './combobox';
 export * from './common';
 export * from './dialog';
 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 +29,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
@@ -140,17 +141,11 @@ Default: `12`
 # Flex
 
 View the
-[documentation for Flex](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-flex--usage)
-on Storybook.
-
-# Stack
-
-View the
-[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-stack--basic-stack)
+[documentation for Flex](https://workday.github.io/canvas-kit/?path=/docs/components-containers-flex--basic)
 on Storybook.
 
 # Box
 
 View the
-[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-box--as#box)
+[documentation for Box](https://workday.github.io/canvas-kit/?path=/docs/components-containers-box--basic)
 on Storybook.

package/layout/index.ts

@@ -1,16 +1,22 @@
-import Layout from './lib/Layout';
-import Column from './lib/Column';
-
-export { Layout, Column};
 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/systemProps';
 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/Stack';
+export * from './lib/Grid';
 export type { FlexStyleProps } from './lib/utils/flex';
-export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
+export type { GridStyleProps } from './lib/utils/grid';
+export type { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
+export * from './lib/utils/systemProps';