@workday/canvas-kit-preview-react 15.0.0-alpha.1326-next.0 → 15.0.1

package/multi-select/lib/MultiSelectInput.tsx

@@ -1,55 +1,58 @@
 import React from 'react';
 
-import {brand, system} from '@workday/canvas-tokens-web';
-import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web';
-
+import {getCursor} from '@workday/canvas-kit-react/collection';
+import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
 import {
   ErrorType,
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {createStencil, CSProps, handleCsProp, px2rem, calc} from '@workday/canvas-kit-styling';
-import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {getCursor} from '@workday/canvas-kit-react/collection';
-import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
+import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
-import {useMultiSelectModel} from './useMultiSelectModel';
 import {MultiSelectedItemProps} from './MultiSelectedItem';
 import {MultiSelectedList} from './MultiSelectedList';
+import {useMultiSelectModel} from './useMultiSelectModel';
 
 export const multiSelectInputStencil = createStencil({
   base: {
     border: `1px solid ${system.color.border.input.default}`,
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: system.color.bg.default,
-    borderRadius: system.shape.x1Half,
+    backgroundColor: system.legacy.color.surface.default,
+    borderRadius: system.legacy.shape.md,
     boxSizing: 'border-box',
-    minHeight: system.space.x10,
+    minHeight: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
     margin: 0, // Fix Safari
     [textInputStencil.vars.width]: '100%',
+    [systemIconStencil.vars.color]: system.color.fg.default,
 
     '&:hover, &.hover': {
-      borderColor: system.color.border.input.strong,
+      borderColor: system.legacy.color.border.input.hover,
     },
 
     '&:has(:focus-visible:not([disabled])), &.focus': {
-      borderColor: system.color.border.primary.default,
-      boxShadow: `inset 0 0 0 1px ${system.color.border.primary.default}`,
+      borderColor: system.legacy.color.brand.border.primary,
+      boxShadow: `inset 0 0 0 1px ${system.legacy.color.brand.focus.primary}`,
     },
 
     '& [data-part="user-input"]': {
-      ...system.type.subtext.large,
-      backgroundColor: system.color.bg.transparent.default,
-      borderRadius: system.shape.x1,
+      fontFamily: system.fontFamily.default,
+      fontSize: system.legacy.fontSize.subtext.lg,
+      fontWeight: system.fontWeight.normal,
+      lineHeight: system.legacy.lineHeight.subtext.lg,
+      backgroundColor: system.legacy.color.surface.transparent,
+      borderRadius: system.legacy.shape.md,
 
       // collapse the height of the input by the border width so that an empty multi-select
       // is the same height as a `TextInput`
       '&:where([data-part="user-input"], [data-part="form-input"])': {
-        height: calc.subtract(system.space.x10, px2rem(2)),
+        height: px2rem(38),
       },
 
       // Remove the focus ring - it is handled at the container level
@@ -66,67 +69,78 @@ export const multiSelectInputStencil = createStencil({
       },
     },
 
+    '&:has(:disabled, .disabled) :where([data-part="user-input"])': {
+      opacity: system.opacity.disabled,
+      [systemIconStencil.vars.color]: system.color.fg.disabled,
+    },
+
     '&:has(:disabled, .disabled)': {
-      borderColor: system.color.border.input.disabled,
-      color: system.color.text.disabled,
-      backgroundColor: system.color.bg.alt.softer,
+      opacity: system.opacity.disabled,
+      [systemIconStencil.vars.color]: system.color.fg.disabled,
+    },
+
+    '&:has(:disabled, .disabled) :where([data-part="form-input"])': {
+      opacity: 0,
       [systemIconStencil.vars.color]: system.color.fg.disabled,
     },
 
     '& :where([data-part="form-input"])': {
       position: 'absolute',
-      top: system.space.zero,
-      bottom: system.space.zero,
-      left: system.space.zero,
-      right: system.space.zero,
-      opacity: system.opacity.zero,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      opacity: 0,
       cursor: 'default',
       pointerEvents: 'none',
     },
 
     '& :where([data-part="separator"])': {
-      backgroundColor: system.color.border.divider,
+      backgroundColor: system.legacy.color.border.default,
       height: 1,
-      margin: `${system.space.zero} ${system.space.x2}`,
+      margin: `0 ${system.legacy.gap.sm}`,
     },
 
     '& :where([data-part="list"])': {
       display: 'flex',
-      gap: system.space.x2,
-      padding: system.space.x2,
+      gap: system.legacy.gap.sm,
+      padding: system.legacy.padding.xs,
       flexWrap: 'wrap',
     },
   },
   modifiers: {
     error: {
       error: {
-        borderColor: brand.common.errorInner,
-        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.errorInner}`,
-        backgroundColor: brand.error.lightest,
+        borderColor: system.legacy.color.brand.border.critical,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.critical}`,
+        backgroundColor: system.legacy.color.brand.surface.critical.default,
         '&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus)': {
-          borderColor: brand.common.errorInner,
+          borderColor: system.legacy.color.brand.border.critical,
         },
         '&:has(:focus-visible:not([disabled])), &.focus': {
-          borderColor: brand.common.errorInner,
-          boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.errorInner}, 0 0 0 2px ${
-            system.color.border.inverse
-          }, 0 0 0 4px ${brand.common.focusOutline}`,
+          borderColor: system.legacy.color.brand.border.critical,
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.critical}, 0 0 0 2px ${
+            system.legacy.color.focus.inverse
+          }, 0 0 0 4px ${system.legacy.color.brand.border.primary}`,
           outlineOffset: px2rem(2),
         },
       },
       caution: {
-        borderColor: brand.common.alertOuter,
-        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner}`,
-        backgroundColor: brand.alert.lightest,
+        borderColor: system.legacy.color.brand.border.caution,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner}`,
+        backgroundColor: system.legacy.color.brand.surface.caution.default,
         '&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled]))':
           {
-            borderColor: brand.common.alertOuter,
+            borderColor: system.legacy.color.brand.border.caution,
           },
+        '&:hover, &.hover': {
+          borderColor: system.legacy.color.brand.border.caution,
+        },
 
         '&:has(:focus-visible, .focus):not(:has([disabled]))': {
-          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner},
-        0 0 0 2px ${system.color.border.inverse},
-        0 0 0 4px ${brand.common.focusOutline}`,
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner},
+        0 0 0 2px ${system.legacy.color.focus.inverse},
+        0 0 0 4px ${system.legacy.color.brand.border.primary}`,
         },
         outlineOffset: px2rem(2),
       },
@@ -211,7 +225,7 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
             {...elemProps}
           />
           <InputGroup.InnerEnd pointerEvents="none">
-            <SystemIcon icon={caretDownSmallIcon} />
+            <SystemIcon icon={caretDownSmallIcon} size="md" />
           </InputGroup.InnerEnd>
         </InputGroup>
         <MultiSelectedList disabled={disabled} removeLabel={removeLabel} />
@@ -242,8 +256,8 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
     return (
       <div {...handleCsProp({className, cs, style}, multiSelectInputStencil({}))}>
         <InputGroup>
-          <InputGroup.InnerStart pointerEvents="none" width={system.space.x8}>
-            <SystemIcon icon={searchIcon} size={system.space.x4} />
+          <InputGroup.InnerStart pointerEvents="none" width={system.legacy.size.sm}>
+            <SystemIcon icon={searchIcon} size="xs" />
           </InputGroup.InnerStart>
           <InputGroup.Input
             data-part="form-input"
@@ -258,11 +272,11 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
             error={error}
             {...elemProps}
           />
-          <InputGroup.InnerEnd width={system.space.x4}>
+          <InputGroup.InnerEnd width={system.legacy.size.xxxs}>
             <InputGroup.ClearButton />
           </InputGroup.InnerEnd>
           <InputGroup.InnerEnd pointerEvents="none">
-            <SystemIcon icon={caretDownSmallIcon} />
+            <SystemIcon icon={caretDownSmallIcon} size="md" />
           </InputGroup.InnerEnd>
         </InputGroup>
         <MultiSelectedList removeLabel={removeLabel} disabled={disabled} />

package/multi-select/lib/MultiSelectItem.tsx

@@ -1,13 +1,12 @@
-import {handleCsProp} from '@workday/canvas-kit-styling';
-
+import {Combobox, useComboboxMenuItem} from '@workday/canvas-kit-react/combobox';
 import {
+  ExtractProps,
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
-  ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {Combobox, useComboboxMenuItem} from '@workday/canvas-kit-react/combobox';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+import {handleCsProp} from '@workday/canvas-kit-styling';
 
 import {useMultiSelectModel} from './useMultiSelectModel';
 

package/multi-select/lib/MultiSelectedItem.tsx

@@ -1,11 +1,11 @@
+import {useListItemRegister, useListItemRovingFocus} from '@workday/canvas-kit-react/collection';
 import {
   composeHooks,
   createElemPropsHook,
   createSubModelElemPropsHook,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {useListItemRegister, useListItemRovingFocus} from '@workday/canvas-kit-react/collection';
-import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {Pill} from '@workday/canvas-kit-react/pill';
 
 import {useMultiSelectItemRemove} from './useMultiSelectItemRemove';
 import {useMultiSelectModel} from './useMultiSelectModel';

package/multi-select/lib/MultiSelectedList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {ListBox} from '@workday/canvas-kit-react/collection';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
-import {useMultiSelectModel} from './useMultiSelectModel';
 import {MultiSelectedItem, MultiSelectedItemProps} from './MultiSelectedItem';
+import {useMultiSelectModel} from './useMultiSelectModel';
 
 export interface MultiSelectedListProps
   extends MultiSelectedItemProps,

package/multi-select/lib/useMultiSelectItemRemove.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+
+import {focusOnCurrentCursor, listItemRemove} from '@workday/canvas-kit-react/collection';
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
 import {useMultiSelectModel} from './useMultiSelectModel';
-import {focusOnCurrentCursor, listItemRemove} from '@workday/canvas-kit-react/collection';
 
 /**
  * This elemProps hook is used when a menu item is expected to be removed. It will advance the cursor to

package/multi-select/lib/useMultiSelectModel.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import {createModelHook} from '@workday/canvas-kit-react/common';
+import {Item, useListModel} from '@workday/canvas-kit-react/collection';
 import {useComboboxModel} from '@workday/canvas-kit-react/combobox';
-import {useListModel, Item} from '@workday/canvas-kit-react/collection';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 
 /**
  * `MultiSelectModel` extends the {@link ComboboxModel}. Selecting items from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "15.0.0-alpha.1326-next.0",
+  "version": "15.0.1",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,7 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/workday/canvas-kit.git",
+    "url": "https://github.com/Workday/canvas-kit.git",
     "directory": "modules/preview-react"
   },
   "files": [
@@ -48,11 +48,11 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.1326-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.1326-next.0",
-    "@workday/canvas-system-icons-web": "^3.0.36",
-    "@workday/canvas-tokens-web": "4.0.0-alpha.1",
-    "@workday/design-assets-types": "^0.2.10"
+    "@workday/canvas-kit-react": "^15.0.1",
+    "@workday/canvas-kit-styling": "^15.0.1",
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-tokens-web": "4.3.0",
+    "@workday/design-assets-types": "^0.3.0"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
@@ -60,5 +60,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "9cdfd5792eab2f74d194662da6b9957fdf573654"
+  "gitHead": "9ec38622220ba76c6e93205341a86595475d9f45"
 }

package/radio/lib/RadioButton.tsx

@@ -1,7 +1,8 @@
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
-import {useRadioModel} from './hooks/useRadioModel';
+
 import {RadioGroup} from './RadioGroup';
 import {RadioLabelProps} from './RadioLabel';
+import {useRadioModel} from './hooks/useRadioModel';
 
 export const RadioButton = createSubcomponent('input')({
   displayName: 'Radio',

package/radio/lib/RadioGroup.tsx

@@ -1,10 +1,11 @@
-import {createContainer, Themeable, ErrorType} from '@workday/canvas-kit-react/common';
-import {useRadioModel} from './hooks/useRadioModel';
+import {ErrorType, Themeable, createContainer} from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {RadioLabel} from './RadioLabel';
+import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
 import {RadioButton} from './RadioButton';
-import {createStencil, CSProps, calc, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {RadioLabel} from './RadioLabel';
+import {useRadioModel} from './hooks/useRadioModel';
 
 export interface RadioGroupProps extends Themeable, CSProps, FlexProps {
   /**
@@ -20,24 +21,22 @@ const radioGroupStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: system.shape.x1Half,
-    gap: system.space.x2,
-    padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
-    margin: `0 ${calc.negate(system.space.x3)}`,
+    borderRadius: system.legacy.shape.md,
+    gap: system.legacy.gap.sm,
+    padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
+    margin: `0 ${calc.negate(base.legacy.size150)}`,
     transition: '100ms box-shadow',
     width: 'fit-content',
   },
   modifiers: {
     error: {
       error: {
-        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`,
-        backgroundColor: brand.error.lightest,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
+        backgroundColor: system.legacy.color.brand.surface.critical.default,
       },
       caution: {
-        backgroundColor: brand.alert.lightest,
-        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.alertInner}, inset 0 0 0 ${px2rem(3)} ${
-          brand.common.alertOuter
-        }`,
+        backgroundColor: system.legacy.color.brand.surface.caution.default,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.focus.caution.inner}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.border.caution}`,
       },
     },
   },

package/radio/lib/RadioInput.tsx

@@ -1,25 +1,29 @@
 import React from 'react';
-import {createSubcomponent, createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {useRadioModel} from './hooks/useRadioModel';
-import {RadioLabelProps, RadioLabelContext} from './RadioLabel';
+
+import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {RadioLabelContext, RadioLabelProps} from './RadioLabel';
 import {StyledRadioButton} from './StyledRadioButton';
+import {useRadioModel} from './hooks/useRadioModel';
 
-const useRadioInput = createElemPropsHook(useRadioModel)(
-  (model, _ref, elemProps: {value?: string; checked?: boolean} = {}) => {
-    const {disabled, variant} = React.useContext(RadioLabelContext);
-    return {
-      'aria-describedby': model.state['aria-describedby'],
-      disabled: disabled,
-      variant: variant,
-      checked: elemProps.value === model.state.value,
-      'aria-checked': elemProps.value === model.state.value,
-      onChange(event: React.ChangeEvent<HTMLInputElement>) {
-        model.onChange(event);
-      },
-      name: model.state.name,
-    };
-  }
-);
+const useRadioInput = createElemPropsHook(useRadioModel)((
+  model,
+  _ref,
+  elemProps: {value?: string; checked?: boolean} = {}
+) => {
+  const {disabled, variant} = React.useContext(RadioLabelContext);
+  return {
+    'aria-describedby': model.state['aria-describedby'],
+    disabled: disabled,
+    variant: variant,
+    checked: elemProps.value === model.state.value,
+    'aria-checked': elemProps.value === model.state.value,
+    onChange(event: React.ChangeEvent<HTMLInputElement>) {
+      model.onChange(event);
+    },
+    name: model.state.name,
+  };
+});
 export const RadioInput = createSubcomponent('input')({
   modelHook: useRadioModel,
   elemPropsHook: useRadioInput,

package/radio/lib/RadioLabel.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import {Themeable, createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {useRadioModel} from './hooks/useRadioModel';
+import {ExtractProps, Themeable, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {CSProps, createStencil} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
 import {RadioInput} from './RadioInput';
 import {RadioText} from './RadioText';
-import {createStencil, CSProps} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {useRadioModel} from './hooks/useRadioModel';
 
 interface RadioLabelContextInterface {
   disabled?: boolean | undefined;
@@ -27,9 +28,9 @@ export interface RadioLabelProps
 const radioLabelStencil = createStencil({
   base: {
     alignItems: 'flex-start',
-    minHeight: system.space.x6,
+    minHeight: base.legacy.size225,
     position: 'relative',
-    gap: system.space.x3,
+    gap: system.legacy.gap.sm,
   },
 });
 

package/radio/lib/RadioText.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {useRadioModel} from './hooks/useRadioModel';
-import {RadioLabelContext} from './RadioLabel';
+
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Text, textStencil} from '@workday/canvas-kit-react/text';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+import {RadioLabelContext} from './RadioLabel';
+import {useRadioModel} from './hooks/useRadioModel';
 
 const radioTextStencil = createStencil({
   extends: textStencil,
@@ -15,25 +17,16 @@ const radioTextStencil = createStencil({
   modifiers: {
     variant: {
       inverse: {
-        color: system.color.text.inverse,
+        color: system.color.fg.inverse,
       },
     },
     disabled: {
       true: {
         cursor: 'default',
-        color: system.color.text.disabled,
-      },
-    },
-  },
-  compound: [
-    {
-      modifiers: {variant: 'inverse', disabled: true},
-      styles: {
-        color: system.color.text.inverse,
         opacity: system.opacity.disabled,
       },
     },
-  ],
+  },
   defaultModifiers: {
     typeLevel: 'subtext.large',
   },