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

package/form-field/lib/FormFieldGroupLabel.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+import {useFormFieldLabel, useFormFieldModel} from './hooks';
+
+export interface FormFieldGroupLabelProps
+  extends FlexProps,
+    Omit<ExtractProps<typeof Text, never>, 'display'> {
+  /**
+   * The text of the label.
+   */
+  children: React.ReactNode;
+}
+
+export const formFieldGroupLabelStencil = createStencil({
+  extends: textStencil,
+  // @ts-ignore Still weird about CSS font variables
+  base: {
+    fontWeight: system.fontWeight.medium,
+    color: system.color.text.default,
+    paddingInlineStart: system.space.zero,
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: px2rem(180),
+  },
+  modifiers: {
+    isRequired: {
+      true: {
+        // @ts-ignore fonts
+        '&::after': {
+          content: '"*"',
+          fontSize: system.fontSize.body.large,
+          fontWeight: system.fontWeight.normal,
+          color: brand.error.base,
+          textDecoration: 'unset',
+          marginInlineStart: system.space.x1,
+        },
+      },
+    },
+    orientation: {
+      vertical: {
+        width: '100%',
+      },
+      horizontalStart: {
+        justifyContent: 'flex-start',
+        float: 'left',
+        maxHeight: system.space.x10,
+      },
+      horizontalEnd: {
+        maxHeight: system.space.x10,
+        float: 'left',
+        justifyContent: 'flex-end',
+      },
+    },
+  },
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+  },
+});
+
+export const FormFieldGroupLabel = createSubcomponent('div')({
+  displayName: 'FormFieldGroup.Label',
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldLabel,
+})<FormFieldGroupLabelProps>(({children, typeLevel, variant, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      id={model.state.id}
+      {...mergeStyles(
+        elemProps,
+        formFieldGroupLabelStencil({
+          typeLevel,
+          variant,
+          isRequired: model.state.isRequired as any,
+          orientation:
+            model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+        })
+      )}
+    >
+      {children}
+    </Element>
+  );
+});

package/form-field/lib/FormFieldGroupList.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {FlexProps} from '@workday/canvas-kit-react/layout';
+
+import {createStencil, CSProps, calc, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+import {useFormFieldModel} from './hooks';
+
+export interface FormFieldGroupListProps extends CSProps, FlexProps {}
+
+const formFieldGroupListStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: system.shape.x1,
+    gap: system.space.x2,
+    padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
+    margin: `0 ${calc.negate(system.space.x3)}`,
+    transition: '100ms box-shadow',
+    width: 'fit-content',
+  },
+  modifiers: {
+    error: {
+      error: {
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`,
+      },
+      alert: {
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.alert.darkest}, inset 0 0 0 ${px2rem(3)} ${
+          brand.alert.base
+        }`,
+      },
+    },
+  },
+});
+
+export const FormFieldGroupList = createSubcomponent('div')({
+  displayName: 'FormFieldGroup.List',
+  modelHook: useFormFieldModel,
+})<FormFieldGroupListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      data-width="ck-formfield-width"
+      {...handleCsProp(elemProps, formFieldGroupListStencil({error: model.state.error}))}
+    >
+      {children}
+    </Element>
+  );
+});

package/form-field/lib/FormFieldHint.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {system, brand} from '@workday/canvas-tokens-web';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+import {useFormFieldHint, useFormFieldModel} from './hooks';
+
+export const formFieldHintStencil = createStencil({
+  extends: textStencil,
+  base: {
+    margin: system.space.zero,
+  },
+  modifiers: {
+    error: {
+      error: {
+        color: brand.error.base,
+      },
+      alert: {},
+    },
+  },
+  defaultModifiers: {
+    typeLevel: 'subtext.medium',
+  },
+});
+
+export const FormFieldHint = createSubcomponent('p')({
+  displayName: 'FormField.Hint',
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldHint,
+})<ExtractProps<typeof Text, never>>(
+  ({children, typeLevel, variant, ...elemProps}, Element, model) => {
+    if (!children) {
+      // If there is no hint text just skip rendering
+      return null;
+    }
+
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          formFieldHintStencil({typeLevel, variant, error: model.state.error})
+        )}
+      >
+        {children}
+      </Element>
+    );
+  }
+);

package/form-field/lib/FormFieldInput.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
+
+import {useFormFieldInput, useFormFieldModel} from './hooks';
+
+export const FormFieldInput = createSubcomponent('input')({
+  displayName: 'FormField.Input',
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldInput,
+})<ExtractProps<typeof Box, never>>((elemProps, Element) => {
+  return <Box data-width="ck-formfield-width" as={Element} {...mergeStyles(elemProps)} />;
+});

package/form-field/lib/FormFieldLabel.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {Text, textStencil} from '@workday/canvas-kit-react/text';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+import {useFormFieldLabel, useFormFieldModel} from './hooks';
+
+export interface FormFieldLabelProps
+  extends FlexProps,
+    Omit<ExtractProps<typeof Text, never>, 'display'> {
+  /**
+   * The text of the label.
+   */
+  children: React.ReactNode;
+}
+
+export const formFieldLabelStencil = createStencil({
+  extends: textStencil,
+  // @ts-ignore Still weird about CSS font variables
+  base: {
+    fontWeight: system.fontWeight.medium,
+    color: system.color.text.default,
+    paddingInlineStart: system.space.zero,
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: px2rem(180),
+  },
+  modifiers: {
+    isRequired: {
+      true: {
+        // @ts-ignore Still weird about CSS font variables
+        '&::after': {
+          content: '"*"',
+          fontSize: system.fontSize.body.large,
+          fontWeight: system.fontWeight.normal,
+          color: brand.error.base,
+          textDecoration: 'unset',
+          marginInlineStart: system.space.x1,
+        },
+      },
+    },
+    orientation: {
+      horizontalStart: {
+        justifyContent: 'flex-start',
+        float: 'left',
+        maxHeight: system.space.x10,
+      },
+      horizontalEnd: {
+        maxHeight: system.space.x10,
+        float: 'left',
+        justifyContent: 'flex-end',
+      },
+      vertical: {
+        width: '100%',
+      },
+    },
+  },
+  defaultModifiers: {
+    typeLevel: 'subtext.large',
+    isRequired: 'false',
+  },
+});
+
+export const FormFieldLabel = createSubcomponent('label')({
+  displayName: 'FormField.Label',
+  modelHook: useFormFieldModel,
+  elemPropsHook: useFormFieldLabel,
+})<FormFieldLabelProps>(({children, typeLevel, variant, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      {...mergeStyles(
+        elemProps,
+        formFieldLabelStencil({
+          typeLevel,
+          variant,
+          isRequired: model.state.isRequired as any,
+          orientation:
+            model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
+        })
+      )}
+    >
+      {children}
+    </Element>
+  );
+});

package/form-field/lib/formFieldStencil.ts

@@ -0,0 +1,49 @@
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const formFieldStencil = createStencil({
+  base: {
+    display: 'flex',
+    border: 'none',
+    padding: system.space.zero,
+    margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
+  },
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        '[data-width="ck-formfield-width"]': {
+          width: '100%',
+        },
+        '&:has(div[data-width="ck-formfield-width"])': {
+          width: '100%',
+        },
+      },
+    },
+    orientation: {
+      horizontalStart: {
+        flexDirection: 'row',
+        gap: system.space.x8,
+      },
+      horizontalEnd: {
+        flexDirection: 'row',
+        gap: system.space.x8,
+      },
+      vertical: {
+        flexDirection: 'column',
+        gap: system.space.x1,
+        alignItems: 'flex-start',
+      },
+    },
+    required: {
+      true: {},
+    },
+    error: {
+      error: {},
+      alert: {},
+    },
+  },
+  defaultModifiers: {
+    orientation: 'vertical',
+  },
+});

package/form-field/lib/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useFormFieldOrientation';
+export * from './useFormFieldHint';
+export * from './useFormFieldInput';
+export * from './useFormFieldModel';
+export * from './useFormFieldLabel';

package/form-field/lib/hooks/useFormFieldHint.tsx

@@ -0,0 +1,12 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
+
+/**
+ * Adds the necessary props to a `Hint` component.
+ * Used by the FormField.Hint subcomponent and other input type components
+ */
+export const useFormFieldHint = createElemPropsHook(useFormFieldModel)(({state}) => {
+  return {
+    id: `hint-${state.id}`,
+  };
+});

package/form-field/lib/hooks/useFormFieldInput.tsx

@@ -0,0 +1,16 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
+
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({state}) => {
+  return {
+    required: state.isRequired ? true : undefined,
+    'aria-invalid': state.error === 'error' ? true : undefined,
+    'aria-describedby': state.id ? `hint-${state.id}` : undefined,
+    id: state.id ? `input-${state.id}` : undefined,
+    error: state.error,
+  };
+});

package/form-field/lib/hooks/useFormFieldLabel.tsx

@@ -0,0 +1,12 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useFormFieldModel} from './useFormFieldModel';
+
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export const useFormFieldLabel = createElemPropsHook(useFormFieldModel)(({state}) => {
+  return {
+    htmlFor: `input-${state.id}`,
+  };
+});

package/form-field/lib/hooks/useFormFieldModel.tsx

@@ -0,0 +1,42 @@
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
+export const useFormFieldModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Optional flag to denote if this field has an error or warning to display.
+     * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
+     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     */
+    error: undefined as undefined | 'error' | 'alert',
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default {useUniqueId}
+     */
+    id: '',
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     */
+    isRequired: false,
+
+    orientation: '' as 'vertical' | 'horizontal' | 'horizontalEnd' | 'horizontalStart',
+  },
+})(config => {
+  const id = useUniqueId(config.id);
+
+  const state = {
+    ...config,
+    id,
+  };
+
+  return {
+    state,
+    events: {},
+  };
+});

package/form-field/lib/hooks/useFormFieldOrientation.tsx

@@ -0,0 +1,31 @@
+import {FlexProps} from '@workday/canvas-kit-react/layout';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ *
+ * @deprecated
+ */
+export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical') => {
+  let layoutProps: {
+    flexDirection: FlexProps['flexDirection'];
+    alignItems: FlexProps['alignItems'];
+    gap: FlexProps['gap'];
+  };
+
+  if (orientation === 'horizontal') {
+    layoutProps = {
+      flexDirection: 'row',
+      gap: space.l,
+      alignItems: undefined,
+    };
+  } else {
+    layoutProps = {
+      flexDirection: 'column',
+      gap: space.xxxs,
+      alignItems: 'flex-start',
+    };
+  }
+
+  return layoutProps;
+};

package/icon/lib/SystemIcon.tsx

@@ -152,10 +152,10 @@ export const systemIconStencil = createStencil({
      */
     color: '',
     accentColor: '',
-    backgroundColor: 'transparent',
+    backgroundColor: '',
   },
   base: ({accentColor, backgroundColor, color}) => ({
-    [backgroundColor]: 'transparent',
+    [backgroundColor]: cssVar(backgroundColor, 'transparent'),
     '& .wd-icon-fill': {
       fill: cssVar(color, base.licorice200),
     },
@@ -163,7 +163,7 @@ export const systemIconStencil = createStencil({
       fill: cssVar(accentColor, cssVar(color, base.licorice200)),
     },
     '& .wd-icon-background': {
-      fill: backgroundColor,
+      fill: cssVar(backgroundColor, 'transparent'),
     },
     // will be removed eventually
     '&:where(:hover, .hover) .wd-icon-fill': {
@@ -182,7 +182,10 @@ export const systemIconStencil = createStencil({
       ),
     },
     '&:where(:hover, .hover) .wd-icon-background': {
-      fill: cssVar(deprecatedSystemIconVars.backgroundHover, backgroundColor),
+      fill: cssVar(
+        deprecatedSystemIconVars.backgroundHover,
+        cssVar(backgroundColor, 'transparent')
+      ),
     },
   }),
 });

package/menu/lib/MenuList.tsx

@@ -10,9 +10,8 @@ import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
 import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface MenuListProps<T = any>
   extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
@@ -62,8 +61,7 @@ export const MenuList = createSubcomponent('div')({
       as={Element}
       model={model}
       marginY={cssVar(system.space.x2)}
-      overflowY="auto"
-      {...mergeStyles(elemProps, menuListStencil({orientation: model.state.orientation}))}
+      {...handleCsProp(elemProps, menuListStencil({orientation: model.state.orientation}))}
     >
       {children}
     </ListBox>

package/modal/lib/Modal.tsx

@@ -42,7 +42,7 @@ export const Modal = createContainer()({
     /**
      * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
      * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
-     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * `aria-modal="false"` and sets the `aria-labelledby` that points to the `id` of the
      * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
      * instead. The default element is a `div` and can be changed via the `as` prop.
      */

package/modal/lib/hooks/useModalCard.ts

@@ -5,7 +5,14 @@ export const useModalCard = composeHooks(
   usePopupCard,
   createElemPropsHook(usePopupModel)(() => {
     return {
-      'aria-modal': true,
+      /**
+       * `aria-modal` was added with the intent that screen readers would add support to properly define content within a modal,
+       * including popups like a Select. However, when aria-modal is true, it will hide other elements from screen readers,
+       * including popups owned by the modal because these popups are siblings to the modal and not ancestors. There is no defined time when Apple/VoiceOver
+       * might change this behavior and better support aria-owns, so for the time being we'll explicitly set this to false to provide a better
+       * VoiceOver experience.
+       */
+      'aria-modal': false,
     };
   })
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.0-alpha.862-next.0",
+  "version": "12.0.0-alpha.898-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,10 +49,10 @@
     "@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.862-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.898-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.898-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.0",
+    "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "csstype": "^3.0.2",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "3b7726adda5b24aff4229e4ee8ca9f4f83522be3"
+  "gitHead": "f66aa921d2b0742a656b8e51364fa5b159b03d35"
 }

package/popup/lib/hooks/focus-trap-js.ts

@@ -91,7 +91,7 @@ function tabTrappingKey(
   }
 
   if (!parentElem || !parentElem.contains) {
-    if (process && process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === 'development') {
       console.warn('focus-trap-js: parent element is not defined');
     }
     return false;

package/popup/lib/hooks/useAssistiveHideSiblings.ts

@@ -23,7 +23,7 @@ export const useAssistiveHideSiblings = createElemPropsHook(usePopupModel)(model
     }
 
     const siblings = [
-      ...((model.state.stackRef.current?.parentElement?.children as any) as HTMLElement[]),
+      ...((model.state.stackRef.current?.parentElement?.children || []) as HTMLElement[]),
     ].filter(el => el !== model.state.stackRef.current);
     const prevAriaHidden = siblings.map(el => el.getAttribute('aria-hidden'));
     siblings.forEach(el => {

package/radio/lib/RadioGroup.tsx

@@ -39,7 +39,7 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
     boxSizing: 'border-box',
     borderRadius: borderRadius.m,
     padding: `${space.xxxs} ${space.xs}`,
-    margin: `-${space.xxxs} -${space.xs}`,
+    margin: `0 -${space.xs}`,
     '& > div': {
       margin: `${space.xxs} ${space.zero}`,
       alignItems: 'flex-start',