@workday/canvas-kit-react 8.0.0 → 8.0.1

package/layout/lib/Layout.tsx

@@ -1,26 +1,34 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {GenericStyle} from '@workday/canvas-kit-react/common';
-import Column, {ColumnProps} from './Column';
-import canvas, {spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {DeprecatedColumn, DeprecatedColumnProps} from './Column';
+import {canvas, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import isPropValid from '@emotion/is-prop-valid';
 
-export interface LayoutProps {
+/**
+ * ### Deprecated Layout 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 DeprecatedLayoutProps {
   /**
-   * The children of the Layout (cannot be empty).
+   * The children of the DeprecatedLayout (cannot be empty).
    */
-  children: React.ReactElement<ColumnProps>[] | React.ReactNode;
+  children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
   /**
-   * The spacing of the Layout children.
+   * The spacing of the DeprecatedLayout children.
    */
   spacing?: number;
   /**
-   * The padding of the Layout's outside container.
+   * The padding of the DeprecatedLayout's outside container.
    * @default 12
    */
   gutter?: number | string;
   /**
-   * If true, set the max width of the Layout container to `1280px`.
+   * If true, set the max width of the DeprecatedLayout container to `1280px`.
    * @default false
    */
   capWidth?: boolean;
@@ -37,7 +45,7 @@ const LayoutStyles: GenericStyle = {
 
 const LayoutContainer = styled('div', {
   shouldForwardProp: prop => isPropValid(prop) && prop !== 'spacing',
-})<LayoutProps>(
+})<DeprecatedLayoutProps>(
   LayoutStyles.styles,
   ({gutter}) => {
     if (gutter === 0) {
@@ -58,15 +66,32 @@ const LayoutContainer = styled('div', {
   }
 );
 
-class Layout extends React.Component<LayoutProps> {
-  public static Column = Column;
+/**
+ * ### Deprecated Layout
+ *
+ * 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 class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
+  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 static Column = DeprecatedColumn;
 
   private renderChild = (child: React.ReactNode, spacing: number): React.ReactNode => {
     if (!React.isValidElement(child)) {
       return;
     }
 
-    if (child.type === Column) {
+    if (child.type === DeprecatedColumn) {
       const childProps = child.props;
 
       if (childProps.spacing || childProps.spacing === 0) {
@@ -96,6 +121,4 @@ class Layout extends React.Component<LayoutProps> {
   }
 }
 
-Layout.Column = Column;
-
-export default Layout;
+DeprecatedLayout.Column = DeprecatedColumn;

package/layout/lib/Stack.tsx

@@ -62,9 +62,9 @@ export interface HStackProps extends StackProps {
 
 export const HStack = createComponent('div')({
   displayName: 'HStack',
-  Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
+  Component: ({children, flexDirection = 'row', ...elemProps}: HStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
         {children}
       </Stack>
     );
@@ -84,9 +84,9 @@ export interface VStackProps extends StackProps {
 
 export const VStack = createComponent('div')({
   displayName: 'VStack',
-  Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
+  Component: ({children, flexDirection = 'column', ...elemProps}: VStackProps, ref, Element) => {
     return (
-      <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
+      <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
         {children}
       </Stack>
     );

package/layout/lib/utils/background.ts

@@ -0,0 +1,83 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to set CSS background properties */
+export type BackgroundStyleProps = {
+  /**
+   * - sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+   * - system tokens: `color`
+   * */
+  background?: SystemPropValues['color'];
+  /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) */
+  backgroundAttachment?: Property.BackgroundAttachment;
+  /**
+   * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+   * - system tokens: `color`
+   * */
+  backgroundColor?: SystemPropValues['color'];
+  /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) */
+  backgroundImage?: Property.BackgroundImage;
+  /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) */
+  backgroundPosition?: Property.BackgroundPosition;
+  /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) */
+  backgroundRepeat?: Property.BackgroundRepeat;
+  /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) */
+  backgroundSize?: Property.BackgroundSize;
+};
+
+export const backgroundStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'background',
+    properties: ['background'],
+    system: 'color',
+  },
+  {
+    name: 'backgroundAttachment',
+    properties: ['backgroundAttachment'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundColor',
+    properties: ['backgroundColor'],
+    system: 'color',
+  },
+  {
+    name: 'backgroundImage',
+    properties: ['backgroundImage'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundPosition',
+    properties: ['backgroundPosition'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundRepeat',
+    properties: ['backgroundRepeat'],
+    system: 'none',
+  },
+  {
+    name: 'backgroundSize',
+    properties: ['backgroundSize'],
+    system: 'none',
+  },
+];
+
+export const backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns border styles.
+ * Some props, such as background and backgroundColor, are connected to our design tokens.
+ * If no `BackgroundStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const BackgroundExample = () => (
+ *   <Box backgroundColor="blueberry500">
+ *     Hello, background styles!
+ *   </Box>
+ * );
+ *```
+ */
+export const background = buildStylePropFn<BackgroundStyleProps>(backgroundFns);

package/layout/lib/utils/border/color.ts

@@ -0,0 +1,85 @@
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {SystemPropValues} from '../systemProps';
+
+/** style props to set CSS border color properties */
+export type BorderColorStyleProps = {
+  /**
+   * - sets [CSS border-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
+   * - system tokens: `color`
+   */
+  borderColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-top-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
+   * - system tokens: `color`
+   */
+  borderTopColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-right-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
+   * - no bidirectional support
+   * - system tokens: `color`
+   */
+  borderRightColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-bottom-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
+   * - system tokens: `color`
+   */
+  borderBottomColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-left-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
+   * - no bidirectional support
+   * - system tokens: `color`
+   */
+  borderLeftColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-inline-start-color property ]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color)
+   * - bidirectional support
+   * - system tokens: `color`
+   */
+  borderInlineStartColor?: SystemPropValues['color'];
+  /**
+   * - sets [CSS border-inline-end-color property ]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color)
+   * - bidirectional support
+   * - system tokens: `color`
+   */
+  borderInlineEndColor?: SystemPropValues['color'];
+};
+
+export const borderColorStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderColor',
+    properties: ['borderColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderTopColor',
+    properties: ['borderTopColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderRightColor',
+    properties: ['borderRightColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderBottomColor',
+    properties: ['borderBottomColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderLeftColor',
+    properties: ['borderLeftColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderInlineStartColor',
+    properties: ['borderInlineStartColor'],
+    system: 'color',
+  },
+  {
+    name: 'borderInlineEndColor',
+    properties: ['borderInlineEndColor'],
+    system: 'color',
+  },
+];
+
+export const borderColorFns = buildStyleFns(borderColorStyleFnConfigs);

package/layout/lib/utils/border/index.ts

@@ -0,0 +1,49 @@
+import {buildStylePropFn} from '../buildStyleFns';
+import {BorderColorStyleProps, borderColorFns, borderColorStyleFnConfigs} from './color';
+import {BorderLineStyleProps, borderLineStyleFns, borderLineStyleFnConfigs} from './lineStyle';
+import {BorderRadiusStyleProps, borderRadiusFns, borderRadiusStyleFnConfigs} from './radius';
+import {
+  BorderShorthandStyleProps,
+  borderShorthandFns,
+  borderShorthandStyleFnConfigs,
+} from './shorthand';
+import {BorderWidthStyleProps, borderWidthFns, borderWidthStyleFnConfigs} from './width';
+
+export type BorderStyleProps = BorderColorStyleProps &
+  BorderLineStyleProps &
+  BorderRadiusStyleProps &
+  BorderShorthandStyleProps &
+  BorderWidthStyleProps;
+
+/**
+ * A style prop function that takes component props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
+ * If no `BorderStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const BorderExample = () => (
+ *   <Box
+ *    border="solid 1px"
+ *    borderColor="soap500"
+ *    borderRadius="l"
+ *   >
+ *     Hello, border styles!
+ *   </Box>
+ * );
+ *```
+ */
+export const border = buildStylePropFn<BorderStyleProps>({
+  ...borderColorFns,
+  ...borderLineStyleFns,
+  ...borderRadiusFns,
+  ...borderShorthandFns,
+  ...borderWidthFns,
+});
+
+export const borderStyleFnConfigs = [
+  ...borderColorStyleFnConfigs,
+  ...borderLineStyleFnConfigs,
+  ...borderRadiusStyleFnConfigs,
+  ...borderShorthandStyleFnConfigs,
+  ...borderWidthStyleFnConfigs,
+];

package/layout/lib/utils/border/lineStyle.ts

@@ -0,0 +1,87 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border style properties */
+export type BorderLineStyleProps = {
+  /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) */
+  borderCollapse?: Property.BorderCollapse;
+  /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) */
+  borderSpacing?: Property.BorderSpacing;
+  /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) */
+  borderStyle?: Property.Border;
+  /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) */
+  borderTopStyle?: Property.Border;
+  /**
+   * - sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
+   * - no bidirectional support
+   */
+  borderRightStyle?: Property.Border;
+  /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) */
+  borderBottomStyle?: Property.Border;
+  /**
+   * - sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
+   * - no bidirectional support
+   */
+  borderLeftStyle?: Property.Border;
+  /**
+   * - sets [CSS border-inline-start-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style)
+   * - bidirectional support
+   */
+  borderInlineStartStyle?: Property.Border;
+  /**
+   * - sets [CSS border-inline-end-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style)
+   * - bidirectional support
+   */
+  borderInlineEndStyle?: Property.Border;
+};
+
+export const borderLineStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderCollapse',
+    properties: ['borderCollapse'],
+    system: 'none',
+  },
+  {
+    name: 'borderSpacing',
+    properties: ['borderSpacing'],
+    system: 'none',
+  },
+  {
+    name: 'borderStyle',
+    properties: ['borderStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderTopStyle',
+    properties: ['borderTopStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderRightStyle',
+    properties: ['borderRightStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottomStyle',
+    properties: ['borderBottomStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeftStyle',
+    properties: ['borderLeftStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStartStyle',
+    properties: ['borderInlineStartStyle'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEndStyle',
+    properties: ['borderInlineEndStyle'],
+    system: 'none',
+  },
+];
+
+export const borderLineStyleFns = buildStyleFns(borderLineStyleFnConfigs);

package/layout/lib/utils/border/radius.ts

@@ -0,0 +1,61 @@
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+import {SystemPropValues} from '../systemProps';
+
+/** style props to set CSS border radius properties */
+export type BorderRadiusStyleProps = {
+  /**
+   * - sets [CSS border-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
+   * - system tokens: `shape`
+   * */
+  borderRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-top-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
+   * - system tokens: `shape`
+   * */
+  borderTopLeftRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-top-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
+   * - system tokens: `shape`
+   * */
+  borderTopRightRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-bottom-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
+   * - system tokens: `shape`
+   * */
+  borderBottomLeftRadius?: SystemPropValues['shape'];
+  /**
+   * - sets [CSS border-bottom-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
+   * - system tokens: `shape`
+   * */
+  borderBottomRightRadius?: SystemPropValues['shape'];
+};
+
+export const borderRadiusStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderRadius',
+    properties: ['borderRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderTopLeftRadius',
+    properties: ['borderTopLeftRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderTopRightRadius',
+    properties: ['borderTopRightRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderBottomLeftRadius',
+    properties: ['borderBottomLeftRadius'],
+    system: 'shape',
+  },
+  {
+    name: 'borderBottomRightRadius',
+    properties: ['borderBottomRightRadius'],
+    system: 'shape',
+  },
+];
+
+export const borderRadiusFns = buildStyleFns(borderRadiusStyleFnConfigs);

package/layout/lib/utils/border/shorthand.ts

@@ -0,0 +1,73 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border properties */
+export type BorderShorthandStyleProps = {
+  /** sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border) */
+  border?: Property.Border;
+  /** sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) */
+  borderTop?: Property.BorderTop;
+  /**
+   * - sets [CSS border-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right)
+   * - no bidirectional support
+   * */
+  borderRight?: Property.BorderRight;
+  /** sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) */
+  borderBottom?: Property.BorderBottom;
+  /**
+   * - sets [CSS border-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left)
+   * - no bidirectional support
+   * */
+  borderLeft?: Property.BorderLeft;
+  /**
+   * - sets [CSS border-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start)
+   * - bidirectional support
+   * */
+  borderInlineStart?: Property.BorderInlineStart;
+  /**
+   * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
+   * - bidirectional support
+   * */
+  borderInlineEnd?: Property.BorderInlineEnd;
+};
+
+export const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'border',
+    properties: ['border'],
+    system: 'none',
+  },
+  {
+    name: 'borderTop',
+    properties: ['borderTop'],
+    system: 'none',
+  },
+  {
+    name: 'borderRight',
+    properties: ['borderRight'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottom',
+    properties: ['borderBottom'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeft',
+    properties: ['borderLeft'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStart',
+    properties: ['borderInlineStart'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEnd',
+    properties: ['borderInlineEnd'],
+    system: 'none',
+  },
+];
+
+export const borderShorthandFns = buildStyleFns(borderShorthandStyleFnConfigs);

package/layout/lib/utils/border/width.ts

@@ -0,0 +1,73 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
+
+/** style props to set CSS border width properties */
+export type BorderWidthStyleProps = {
+  /** sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) */
+  borderWidth?: Property.BorderWidth | number;
+  /** sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) */
+  borderTopWidth?: Property.BorderTopWidth | number;
+  /**
+   * - sets [CSS border-right-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
+   * - no bidirectional support
+   * */
+  borderRightWidth?: Property.BorderRightWidth | number;
+  /** sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) */
+  borderBottomWidth?: Property.BorderBottomWidth | number;
+  /**
+   * - sets [CSS border-left-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
+   * - no bidirectional support
+   * */
+  borderLeftWidth?: Property.BorderLeftWidth | number;
+  /**
+   * - sets [CSS border-inline-start-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width)
+   * - bidirectional support
+   * */
+  borderInlineStartWidth?: Property.BorderInlineStartWidth | number;
+  /**
+   * - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end)
+   * - bidirectional support
+   * */
+  borderInlineEndWidth?: Property.BorderInlineEndWidth | number;
+};
+
+export const borderWidthStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'borderWidth',
+    properties: ['borderWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderTopWidth',
+    properties: ['borderTopWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderRightWidth',
+    properties: ['borderRightWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderBottomWidth',
+    properties: ['borderBottomWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderLeftWidth',
+    properties: ['borderLeftWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineStartWidth',
+    properties: ['borderInlineStartWidth'],
+    system: 'none',
+  },
+  {
+    name: 'borderInlineEndWidth',
+    properties: ['borderInlineEndWidth'],
+    system: 'none',
+  },
+];
+
+export const borderWidthFns = buildStyleFns(borderWidthStyleFnConfigs);