@workday/canvas-kit-react 11.0.0-alpha.671-next.0 → 11.0.0-alpha.682-next.0

package/checkbox/lib/CheckBackground.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {createComponent, ErrorType} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, createVars, px2rem, cssVar} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+
+interface CheckBackgroundProps {
+  children: React.ReactNode;
+  error?: ErrorType;
+}
+
+export const backgroundVars = createVars('inner', 'outer');
+
+const checkboxBackgroundStencil = createStencil({
+  base: {
+    alignItems: 'center',
+    backgroundColor: base.frenchVanilla100,
+    borderRadius: system.shape.half,
+    boxSizing: 'border-box',
+    display: 'flex',
+    height: calc.add(system.space.x4, px2rem(2)),
+    justifyContent: 'center',
+    padding: `${system.space.zero} ${calc.divide(system.space.x1, 2)}`,
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: 'border 200ms ease, background 200ms',
+    width: calc.add(system.space.x4, px2rem(2)),
+    border: `${px2rem(1)} solid ${base.licorice200}`,
+  },
+  modifiers: {
+    error: {
+      error: {
+        [backgroundVars.inner]: cssVar(brand.error.base, base.cinnamon500),
+        [backgroundVars.outer]: 'transparent',
+      },
+      alert: {
+        [backgroundVars.inner]: cssVar(brand.alert.base, base.cantaloupe600),
+        [backgroundVars.outer]: cssVar(brand.alert.darkest, base.cantaloupe400),
+      },
+    },
+  },
+});
+
+export const CheckBackground = createComponent('div')({
+  displayName: 'CheckBackground',
+  Component: ({error, children}: CheckBackgroundProps) => {
+    return <div {...checkboxBackgroundStencil({error})}>{children}</div>;
+  },
+});

package/checkbox/lib/Checkbox.tsx

@@ -1,328 +1,22 @@
 import * as React from 'react';
 import {
   createComponent,
-  StyledType,
   ErrorType,
   useUniqueId,
-  focusRing,
-  mouseFocusBehavior,
-  getErrorColors,
-  styled,
-  useTheme,
-  Themeable,
   useLocalRef,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {checkSmallIcon} from '@workday/canvas-system-icons-web';
-import {LabelText} from '@workday/canvas-kit-react/text';
-import {base} from '@workday/canvas-tokens-web';
-import {cssVar} from '@workday/canvas-kit-styling';
-
-export interface CheckboxProps extends Themeable {
-  /**
-   * If true, set the Checkbox to the checked state.
-   * @default false
-   */
-  checked?: boolean;
-  /**
-   * If true, set the Checkbox to the disabled state.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-   * @default {useUniqueId}
-   */
-  id?: string;
-  /**
-   * The text of the Checkbox label.
-   * @default ''
-   */
-  label?: string;
-  /**
-   * The function called when the Checkbox state changes.
-   */
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * The value of the Checkbox.
-   */
-  value?: string;
-  /**
-   * The type of error associated with the Checkbox (if applicable).
-   */
-  error?: ErrorType;
-  /**
-   * If true, set the Checkbox to an indeterminate state. Use this on a Checkbox with nested child Checkboxes to denote that some (but not all) child Checkboxes are checked.
-   * @default false
-   */
-  indeterminate?: boolean;
-  /**
-   * The variant for the checkbox
-   */
-  variant?: 'inverse' | undefined;
-}
-
-const CheckboxContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  minHeight: space.m,
-  position: 'relative',
-});
-
-/**
- * Using a wrapper prevents the browser default behavior of trigging
- * :hover on the checkbox when you hover on it's corresponding label.
- * This stops the ripple from showing when you hover on the label.
- */
-const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
-  display: 'flex',
-  height: `calc(${space.s} + 2px)`,
-  minWidth: `calc(${space.s} + 2px)`,
-  marginTop: '3px',
-  alignSelf: 'flex-start',
-});
-
-const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'>>(
-  {
-    borderRadius: borderRadius.circle,
-    boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: `calc(${space.s} + 2px)`,
-    transition: 'box-shadow 150ms ease-out',
-    width: `calc(${space.s} + 2px)`,
-    position: 'absolute',
-    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  },
-  ({variant}) => ({
-    opacity: variant === 'inverse' ? '0.4' : '1',
-  })
-);
-
-/**
- * Note: `~ div:first-of-type` refers to `CheckboxBackground`
- * and was easier to use than a component selector in this case.
- */
-const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
-  ({
-    theme: {
-      canvas: {
-        palette: {
-          primary: themePrimary,
-          common: {focusOutline: themeFocusOutline},
-        },
-      },
-    },
-    variant,
-  }) => ({
-    borderRadius: borderRadius.s,
-    width: space.m,
-    height: space.m,
-    margin: 0,
-    marginTop: '-3px',
-    marginLeft: '-3px',
-    position: 'absolute',
-    opacity: 0,
-
-    '&:not(:disabled)': {
-      cursor: 'pointer',
-    },
-
-    // States
-    '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
-      {
-        '~ div:first-of-type': {
-          borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
-        },
-      },
-    '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
-      borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
-      backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
-    },
-    '&:disabled ~ div:first-of-type': {
-      borderColor: cssVar(base.licorice100),
-      backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
-      opacity: variant === 'inverse' ? '.4' : '1',
-    },
-    '&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
-      borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
-      backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.light,
-    },
-
-    // Focus
-    '&:focus, &:active': {
-      outline: 'none',
-    },
-    '&:focus ~ div:first-of-type': {
-      borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main,
-      borderWidth: '2px',
-      boxShadow: 'none',
-      ...focusRing({
-        width: variant === 'inverse' ? 2 : 0,
-        separation: 0,
-        animate: false,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
-      }),
-    },
-    '&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
-      ...focusRing({
-        width: 2,
-        separation: 2,
-        animate: false,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-      }),
-      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
-      borderWidth: '2px',
-      '& span': {
-        marginLeft: '-7px',
-      },
-    },
-    ...mouseFocusBehavior({
-      '&:focus ~ div:first-of-type': {
-        border:
-          variant === 'inverse'
-            ? `1px solid ${colors.soap300}`
-            : `1px solid ${inputColors.hoverBorder}`,
-        boxShadow: 'none',
-        '& span': {
-          marginLeft: '-6px',
-        },
-      },
-      '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
-        borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
-      },
-      '&:disabled:checked ~ div:first-of-type, &:disabled:indeterminate ~ div:first-of-type': {
-        borderColor: themePrimary.light,
-        backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.light,
-      },
-    }),
-  }),
-  ({disabled}) => ({
-    '&:hover ~ span:first-of-type': {
-      boxShadow: disabled
-        ? undefined
-        : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`,
-    },
-  }),
-  ({theme, error, variant}) => {
-    const errorColors = getErrorColors(error, theme);
-
-    if (errorColors.outer === errorColors.inner) {
-      errorColors.outer = 'transparent';
-    }
-
-    const errorStyles = {
-      '& ~ div:first-of-type': {
-        border:
-          variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
-        boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
-      },
-      '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
-        {
-          '~ div:first-of-type': {
-            borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
-          },
-        },
-      '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
-        borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
-        boxShadow: `
-              0 0 0 2px ${colors.frenchVanilla100},
-              0 0 0 4px ${errorColors.inner},
-              0 0 0 5px ${errorColors.outer}`,
-      },
-    };
-    return {
-      // Error rings take precedence over focus
-      ...mouseFocusBehavior({
-        ...errorStyles,
-        '&:not(:checked):not(:indeterminate):focus ~ div:first-of-type': {
-          border: `1px solid ${errorColors.inner}`,
-          boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
-        },
-      }),
-      ...errorStyles,
-    };
-  }
-);
-
-const CheckboxBackground = styled('div')<CheckboxProps>(
-  {
-    alignItems: 'center',
-    backgroundColor: colors.frenchVanilla100,
-    borderRadius: borderRadius.s,
-    boxSizing: 'border-box',
-    display: 'flex',
-    height: `calc(${space.s} + 2px)`,
-    justifyContent: 'center',
-    padding: '0px 2px',
-    pointerEvents: 'none',
-    position: 'absolute',
-    transition: 'border 200ms ease, background 200ms',
-    width: `calc(${space.s} + 2px)`,
-  },
-  ({variant}) => ({
-    border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
-  })
-);
-
-const CheckboxCheck = styled('div')<Pick<CheckboxProps, 'checked' | 'indeterminate'>>(
-  {
-    display: 'flex',
-    flexDirection: 'column',
-    // When using align-items: center on a flex container in the column direction,
-    // the contents of flex item, if too big, will overflow their container in IE 10-11.
-    // max-width: 100%; is a workaround
-    // https://github.com/philipwalton/flexbugs#flexbug-2
-    maxWidth: '100%',
-    pointerEvents: 'none',
-    transition: 'transform 200ms ease, opacity 200ms ease',
-    span: {
-      // This is necessary because we're using max-width: 100% in the CheckboxCheck container
-      // in order for the Checkbox to render properly on IE 11
-      marginLeft: '-6px',
-      transition: 'margin 200ms ease',
-    },
-  },
-  ({checked, indeterminate}) => ({
-    opacity: checked || indeterminate ? 1 : 0,
-    transform: checked || indeterminate ? 'scale(1)' : 'scale(0.5)',
-  })
-);
-
-const IndeterminateBox = styled('div')<CheckboxProps>(
-  {
-    width: '10px',
-    height: '2px',
-  },
-  ({theme, variant}) => ({
-    backgroundColor:
-      variant === 'inverse'
-        ? theme.canvas.palette.primary.main
-        : theme.canvas.palette.primary.contrast,
-  })
-);
+import {CheckboxRipple} from './CheckboxRipple';
+import {CheckboxContainer} from './CheckboxContainer';
+import {CheckboxCheck} from './CheckboxCheck';
+import {CheckboxInput, CheckboxProps} from './CheckboxInput';
 
 export const Checkbox = createComponent('input')({
   displayName: 'Checkbox',
-  Component: (
-    {
-      checked = false,
-      label = '',
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
-      id,
-      disabled,
-      indeterminate,
-      variant,
-      ...elemProps
-    }: CheckboxProps,
-    ref,
-    Element
-  ) => {
+  Component: ({id, label = '', ...elemProps}: CheckboxProps, ref, Element) => {
+    const {checked = false, disabled, error, indeterminate, variant} = elemProps;
     const inputId = useUniqueId(id);
     const {localRef, elementRef} = useLocalRef(ref);
+
     React.useEffect(() => {
       if (typeof indeterminate === 'boolean' && localRef.current) {
         localRef.current.indeterminate = indeterminate;
@@ -330,48 +24,15 @@ export const Checkbox = createComponent('input')({
     }, [indeterminate, localRef]);
 
     return (
-      <CheckboxContainer>
-        <CheckboxInputWrapper disabled={disabled}>
-          <CheckboxInput
-            as={Element}
-            checked={checked}
-            disabled={disabled}
-            id={inputId}
-            ref={elementRef}
-            type="checkbox"
-            variant={variant}
-            aria-checked={indeterminate ? 'mixed' : checked}
-            {...elemProps}
-          />
-          <CheckboxRipple variant={variant} />
-          <CheckboxBackground variant={variant} checked={checked} disabled={disabled}>
-            <CheckboxCheck checked={checked} indeterminate={indeterminate}>
-              {indeterminate ? (
-                <IndeterminateBox variant={variant} />
-              ) : checked ? (
-                <SystemIcon
-                  icon={checkSmallIcon}
-                  color={
-                    variant === 'inverse'
-                      ? theme.canvas.palette.primary.main
-                      : theme.canvas.palette.primary.contrast
-                  }
-                />
-              ) : null}
-            </CheckboxCheck>
-          </CheckboxBackground>
-        </CheckboxInputWrapper>
-        {label && (
-          <LabelText
-            htmlFor={inputId}
-            disabled={disabled}
-            variant={variant}
-            paddingInlineStart={space.xs}
-            cursor="pointer"
-          >
-            {label}
-          </LabelText>
-        )}
+      <CheckboxContainer label={label} disabled={disabled} id={inputId} variant={variant}>
+        <CheckboxInput as={Element} id={inputId} ref={elementRef} {...elemProps} />
+        <CheckboxRipple />
+        <CheckboxCheck
+          variant={variant}
+          checked={checked}
+          indeterminate={indeterminate}
+          error={error}
+        />
       </CheckboxContainer>
     );
   },
@@ -379,3 +40,5 @@ export const Checkbox = createComponent('input')({
     ErrorType,
   },
 });
+
+export {CheckboxProps};

package/checkbox/lib/CheckboxCheck.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, createStyles, cssVar, calc, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+import {CheckBackground} from './CheckBackground';
+
+interface CheckboxCheckProps {
+  checked: boolean;
+  error?: ErrorType;
+  indeterminate?: boolean;
+  variant?: 'inverse';
+}
+
+const checkboxCheckStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxWidth: '100%',
+    pointerEvents: 'none',
+    transition: 'transform 200ms ease, opacity 200ms ease',
+    span: {
+      marginInlineStart: calc.negate(px2rem(6)),
+      transition: 'margin 200ms ease',
+    },
+    opacity: 0,
+    transform: 'scale(0.5)',
+  },
+  modifiers: {
+    checked: {
+      true: {
+        opacity: 1,
+        transform: 'scale(1)',
+      },
+    },
+    indeterminate: {
+      true: {
+        opacity: 1,
+        transform: 'scale(1)',
+      },
+    },
+    variant: {
+      inverse: {
+        '& > div': {
+          backgroundColor: brand.primary.base,
+        },
+      },
+    },
+  },
+});
+
+const indeterminateBoxStyles = createStyles({
+  width: calc.add(system.space.x2, px2rem(2)),
+  height: calc.divide(system.space.x1, 2),
+  backgroundColor: brand.primary.accent,
+});
+
+export const CheckboxCheck = createComponent('div')({
+  displayName: 'CheckboxCheck',
+  Component: ({checked, error, indeterminate, variant}: CheckboxCheckProps) => {
+    return (
+      <CheckBackground error={error}>
+        <div {...checkboxCheckStencil({checked, indeterminate, variant})}>
+          {indeterminate ? (
+            <div className={indeterminateBoxStyles} />
+          ) : (
+            checked && (
+              <SystemIcon
+                icon={checkSmallIcon}
+                color={
+                  variant === 'inverse' ? cssVar(brand.primary.base) : cssVar(brand.primary.accent)
+                }
+              />
+            )
+          )}
+        </div>
+      </CheckBackground>
+    );
+  },
+});

package/checkbox/lib/CheckboxContainer.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, calc, createStyles, cssVar, px2rem, createVars} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {LabelText} from '@workday/canvas-kit-react/text';
+
+interface CheckboxContainerProps extends CSProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  id: string;
+  label: string;
+  variant?: 'inverse';
+}
+
+export const inputVars = createVars('errorInner', 'errorOuter', 'alertInner', 'alertOuter');
+
+const checkboxContainerStyles = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: system.space.x6,
+  position: 'relative',
+  /**
+   * Using a wrapper prevents the browser default behavior of trigging
+   * :hover on the checkbox when you hover on it's corresponding label.
+   * This stops the ripple from showing when you hover on the label.
+   */
+  '&>div': {
+    display: 'flex',
+    height: calc.add(system.space.x4, px2rem(2)),
+    minWidth: calc.add(system.space.x4, px2rem(2)),
+    marginTop: px2rem(3),
+    alignSelf: 'flex-start',
+  },
+  '& > label': {
+    paddingInlineStart: cssVar(system.space.x3),
+  },
+});
+
+export const CheckboxContainer = createComponent('div')({
+  displayName: 'CheckboxContainer',
+  Component: ({children, disabled, id, label, variant}: CheckboxContainerProps) => {
+    return (
+      <div className={checkboxContainerStyles}>
+        <div>{children}</div>
+        {label && (
+          <LabelText
+            htmlFor={id}
+            disabled={disabled}
+            variant={variant}
+            style={{cursor: disabled ? 'default' : 'pointer'}}
+          >
+            {label}
+          </LabelText>
+        )}
+      </div>
+    );
+  },
+});