@workday/canvas-kit-react 12.0.0-alpha.852-next.0 → 12.0.0-alpha.862-next.0

package/dist/es6/text-input/lib/TextInput.js

@@ -1,57 +1,29 @@
 import * as React from 'react';
-import { createComponent, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
-import { borderRadius, inputColors, space, type } from '@workday/canvas-kit-react/tokens';
-const StyledTextInput = styled('input')({
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    height: 40,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs,
-    margin: 0,
-    '&::placeholder': {
-        color: inputColors.placeholder,
+import { createComponent, ErrorType } from '@workday/canvas-kit-react/common';
+import { createStencil, cssVar, px2rem, calc, handleCsProp } from '@workday/canvas-kit-styling';
+import { brand, system } from '@workday/canvas-tokens-web';
+export const textInputStencil = createStencil({
+    vars: {
+        width: '',
     },
-    '&:hover, &.hover': {
-        borderColor: inputColors.hoverBorder,
-    },
-    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
-        borderColor: inputColors.focusBorder,
-        boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
-        outline: 'none',
-    },
-    '&:disabled': {
-        backgroundColor: inputColors.disabled.background,
-        borderColor: inputColors.disabled.border,
-        color: inputColors.disabled.text,
-        '&::placeholder': {
-            color: inputColors.disabled.text,
+    base: { name: "edcc19", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-ac8e50);min-width:var(--width-text-input-ac8e50, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:disabled, .disabled{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
+    modifiers: {
+        grow: {
+            true: { name: "6c63b7", styles: "width:100%;resize:vertical;" },
+            false: { name: "ba7d2f", styles: "width:initial;" }
         },
+        error: {
+            error: { name: "a75f3c", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-error-base);}&:focus-visible:not([disabled]), &.focus:not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+            alert: { name: "277895", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-alert-darkest);}&:focus-visible:not([disabled]), &.focus:not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
+        }
     },
-    '::-ms-clear': {
-        display: 'none',
-    },
-}, ({ width }) => ({
-    minWidth: width || 280,
-    width,
-}), ({ grow }) => grow && {
-    width: '100%',
-}, ({ theme, error }) => {
-    return {
-        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
-            borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-            outline: 'none',
-        },
-        ...errorRing(error, theme),
-    };
-});
+    defaultModifiers: {
+        grow: 'false',
+    }
+}, "text-input-ac8e50");
 export const TextInput = createComponent('input')({
     displayName: 'TextInput',
-    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(StyledTextInput, Object.assign({ type: "text", ref: ref, as: Element, grow: grow, error: error, width: width }, elemProps))),
+    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(Element, Object.assign({ type: "text", ref: ref }, handleCsProp(elemProps, textInputStencil({ width: typeof width === 'number' ? px2rem(width) : width, grow, error }))))),
     subComponents: {
         ErrorType,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.0-alpha.852-next.0",
+  "version": "12.0.0-alpha.862-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.852-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.852-next.0",
+    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.862-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "bbd7343aec2a6657b8eff4981a7aa4a6e47af161"
+  "gitHead": "3b7726adda5b24aff4229e4ee8ca9f4f83522be3"
 }

package/text-area/lib/TextArea.tsx

@@ -1,107 +1,67 @@
 import * as React from 'react';
-import {
-  createComponent,
-  StyledType,
-  GrowthBehavior,
-  ErrorType,
-  errorRing,
-  styled,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common';
+import {createStencil, calc, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {textInputStencil} from '@workday/canvas-kit-react/text-input';
+export type ValueOf<T> = T[keyof T];
 
-export interface TextAreaProps extends Themeable, GrowthBehavior {
-  /**
-   * If true, set the TextArea to the disabled state.
-   * @default false
-   */
-  disabled?: boolean;
+export interface TextAreaProps extends GrowthBehavior {
   /**
    * The type of error associated with the TextArea (if applicable).
    */
   error?: ErrorType;
-  /**
-   * The function called when the TextArea state changes.
-   */
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  /**
-   * The placeholder text of the TextArea.
-   */
-  placeholder?: string;
-  /**
-   * If true, set the TextArea to read-only. The user will be unable to interact with the TextArea.
-   * @default false
-   */
-  readOnly?: boolean;
   /**
    * The resize constraints of the TextArea.
    * @default TextArea.ResizeDirection.Both
    */
-  resize?: TextAreaResizeDirection;
-  /**
-   * The value of the TextArea.
-   */
-  value?: any;
+  resize?: ValueOf<typeof TextAreaResizeDirection>;
 }
 
-export enum TextAreaResizeDirection {
-  None = 'none',
-  Both = 'both',
-  Horizontal = 'horizontal',
-  Vertical = 'vertical',
-}
+export const TextAreaResizeDirection = {
+  None: 'none',
+  Both: 'both',
+  Horizontal: 'horizontal',
+  Vertical: 'vertical',
+} as const;
 
-const StyledTextArea = styled('textarea')<TextAreaProps & StyledType>(
-  ({theme, error}) => ({
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    minHeight: space.xxl,
-    minWidth: `calc((${space.xxxl} * 3) + ${space.xl})`,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs, // Compensate for border
-    margin: 0, // Fix Safari
+export const textAreaStencil = createStencil({
+  extends: textInputStencil,
+  base: {
+    minHeight: system.space.x16,
+    minWidth: calc.add(calc.multiply(system.space.x20, 3), system.space.x10),
     '&::webkit-resizer': {
       display: 'none',
     },
-    '&::placeholder': {
-      color: inputColors.placeholder,
-    },
-    '&:hover': {
-      borderColor: inputColors.hoverBorder,
-    },
-    '&:focus:not([disabled])': {
-      borderColor: theme.canvas.palette.common.focusOutline,
-      boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-      outline: 'none',
-    },
-    '&:disabled': {
-      backgroundColor: inputColors.disabled.background,
-      borderColor: inputColors.disabled.border,
-      color: inputColors.disabled.text,
-      '&::placeholder': {
-        color: inputColors.disabled.text,
+  },
+
+  modifiers: {
+    resize: {
+      both: {
+        resize: 'both',
+      },
+      horizontal: {
+        resize: 'horizontal',
+      },
+      vertical: {
+        resize: 'vertical',
+      },
+      none: {
+        resize: 'none',
       },
     },
-    ...errorRing(error, theme),
-  }),
-
-  ({resize, grow}) => ({
-    width: grow ? '100%' : undefined,
-    resize: grow ? TextAreaResizeDirection.Vertical : resize,
-  })
-);
+  },
+  defaultModifiers: {
+    resize: 'both',
+  },
+});
 
 export const TextArea = createComponent('textarea')({
   displayName: 'TextArea',
   Component: (
-    {resize = TextAreaResizeDirection.Both, grow, ...elemProps}: TextAreaProps,
+    {resize = TextAreaResizeDirection.Both, grow, error, ...elemProps}: TextAreaProps,
     ref,
     Element
-  ) => <StyledTextArea ref={ref} as={Element} grow={grow} resize={resize} {...elemProps} />,
+  ) => <Element ref={ref} {...handleCsProp(elemProps, textAreaStencil({error, grow, resize}))} />,
   subComponents: {
     ErrorType,
     ResizeDirection: TextAreaResizeDirection,

package/text-input/lib/TextInput.tsx

@@ -1,16 +1,9 @@
 import * as React from 'react';
-import {
-  createComponent,
-  StyledType,
-  GrowthBehavior,
-  ErrorType,
-  errorRing,
-  styled,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, px2rem, calc, handleCsProp} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
-export interface TextInputProps extends Themeable, GrowthBehavior {
+export interface TextInputProps extends GrowthBehavior {
   /**
    * The type of error associated with the TextInput (if applicable).
    */
@@ -21,74 +14,103 @@ export interface TextInputProps extends Themeable, GrowthBehavior {
   width?: number | string;
 }
 
-const StyledTextInput = styled('input')<
-  Pick<TextInputProps, 'error' | 'grow' | 'width' | 'theme'> & StyledType
->(
-  {
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
+export const textInputStencil = createStencil({
+  vars: {
+    width: '',
+  },
+  base: ({width}) => ({
+    ...system.type.subtext.large,
     display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
+    border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
+    backgroundColor: system.color.bg.default,
+    borderRadius: system.shape.x1,
     boxSizing: 'border-box',
-    height: 40,
+    height: system.space.x10,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs, // Compensate for border
-    margin: 0, // Fix Safari
+    padding: system.space.x2, // Compensate for border
+    margin: px2rem(0), // Fix Safari
+    width: cssVar(width),
+    minWidth: cssVar(width, calc.add(calc.multiply(system.space.x20, 3), system.space.x10)),
+    color: system.color.text.default,
+    '::-ms-clear': {
+      display: 'none',
+    },
     '&::placeholder': {
-      color: inputColors.placeholder,
+      color: system.color.text.hint,
     },
     '&:hover, &.hover': {
-      borderColor: inputColors.hoverBorder,
+      borderColor: system.color.border.input.strong,
     },
-    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
-      borderColor: inputColors.focusBorder,
-      boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
+    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+      borderColor: brand.common.focusOutline,
+      boxShadow: `inset 0 0 0 1px ${cssVar(brand.common.focusOutline)}`,
       outline: 'none',
     },
-    '&:disabled': {
-      backgroundColor: inputColors.disabled.background,
-      borderColor: inputColors.disabled.border,
-      color: inputColors.disabled.text,
+    '&:disabled, .disabled': {
+      backgroundColor: system.color.bg.alt.softer,
+      borderColor: system.color.border.input.disabled,
+      color: system.color.text.disabled,
       '&::placeholder': {
-        color: inputColors.disabled.text,
+        color: system.color.text.disabled,
       },
     },
-    '::-ms-clear': {
-      display: 'none',
-    },
-  },
-  ({width}) => ({
-    minWidth: width || 280,
-    width,
   }),
-  ({grow}) =>
-    grow && {
-      width: '100%',
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        resize: 'vertical',
+      },
+      false: {
+        width: 'initial',
+      },
     },
-  ({theme, error}) => {
-    return {
-      '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
-        borderColor: theme.canvas.palette.common.focusOutline,
-        boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-        outline: 'none',
+
+    error: {
+      error: {
+        borderColor: brand.error.base,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}`,
+        '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])':
+          {
+            borderColor: brand.error.base,
+          },
+        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+          boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}, 0 0 0 2px ${
+            system.color.border.inverse
+          }, 0 0 0 4px ${brand.common.focusOutline}`,
+        },
+      },
+      alert: {
+        borderColor: brand.alert.darkest,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base}`,
+        '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])':
+          {
+            borderColor: brand.alert.darkest,
+          },
+
+        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base},
+        0 0 0 2px ${system.color.border.inverse},
+        0 0 0 4px ${brand.common.focusOutline}`,
+        },
       },
-      ...errorRing(error, theme),
-    };
-  }
-);
+    },
+  },
+  defaultModifiers: {
+    grow: 'false',
+  },
+});
 
 export const TextInput = createComponent('input')({
   displayName: 'TextInput',
   Component: ({grow, error, width, ...elemProps}: TextInputProps, ref, Element) => (
-    <StyledTextInput
+    <Element
       type="text"
       ref={ref}
-      as={Element}
-      grow={grow}
-      error={error}
-      width={width}
-      {...elemProps}
+      {...handleCsProp(
+        elemProps,
+        textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error})
+      )}
     />
   ),
   subComponents: {