@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.758-next.0

package/icon/lib/SystemIcon.tsx

@@ -2,52 +2,81 @@ import * as React from 'react';
 import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Icon, IconProps} from './Icon';
 import {createComponent, getColor} from '@workday/canvas-kit-react/common';
-import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {cssVar, createStencil, handleCsProp, px2rem, createVars} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {Svg, SvgProps, svgStencil, transformColorNameToToken} from './Svg';
 
+/**
+ * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
+ */
 export interface SystemIconStyles {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
-  accent?: SystemPropValues['color'];
+  accent?: string;
   /**
    * The accent color of the SystemIcon on hover. This overrides `colorHover`.
+   * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
+   * }
+   * ```
    */
-  accentHover?: SystemPropValues['color'];
+  accentHover?: string;
   /**
    * The background color of the SystemIcon.
    * @default transparent
    */
-  background?: SystemPropValues['color'];
+  background?: string;
   /**
    * The background color of the SystemIcon on hover.
    * @default transparent
+   * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+   * }
+   * ```
    */
-  backgroundHover?: SystemPropValues['color'];
+  backgroundHover?: string;
   /**
-   * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
-   * @default iconColors.standard
+   * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
+   * @default base.licorice200
    */
-  color?: SystemPropValues['color'];
+  color?: string;
   /**
-   * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
-   * @default iconColors.hover
+   * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
+   * @default base.licorice200
+   * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.color]: desiredColorHoverColor
+   * }
+   * ```
    */
-  colorHover?: SystemPropValues['color'];
+  colorHover?: string;
   /**
    * The fill color of the SystemIcon. This overrides `color`.
+   * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
    */
-  fill?: SystemPropValues['color'];
+  fill?: string;
   /**
    * The fill color of the SystemIcon on hover. This overrides `colorHover`.
+   * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.fill]: desiredFillHoverColor
+   * }
+   * ```
    */
-  fillHover?: SystemPropValues['color'];
+  fillHover?: string;
 }
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'fill' | 'type'> {
+    Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -55,9 +84,18 @@ export interface SystemIconProps
   /**
    * The size of the SystemIcon in `px`.
    */
-  size?: number | string | undefined;
+  size?: number | string;
 }
 
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 export const systemIconStyles = ({
   accent,
   accentHover,
@@ -88,47 +126,104 @@ export const systemIconStyles = ({
   },
 });
 
+/**
+ * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
+ * ```tsx
+ * '&:hover': {
+ *   [systemIconStencil.vars.color]: desiredHoverColor
+ * }
+ * ```
+ */
+const deprecatedSystemIconVars = createVars(
+  'colorHover',
+  'fillHover',
+  'accentHover',
+  'backgroundHover'
+);
+
+export const systemIconStencil = createStencil({
+  extends: svgStencil,
+  vars: {
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: '',
+    accentColor: '',
+    backgroundColor: 'transparent',
+  },
+  base: ({accentColor, backgroundColor, color}) => ({
+    '& .wd-icon-fill': {
+      fill: cssVar(color, base.licorice200),
+    },
+    '& .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(accentColor, cssVar(color, base.licorice200)),
+    },
+    '& .wd-icon-background': {
+      fill: backgroundColor,
+    },
+    // will be removed eventually
+    '&:where(:hover, .hover) .wd-icon-fill': {
+      fill: cssVar(
+        deprecatedSystemIconVars.fillHover,
+        cssVar(deprecatedSystemIconVars.colorHover, cssVar(color, base.licorice200))
+      ),
+    },
+    '&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(
+        deprecatedSystemIconVars.accentHover,
+        cssVar(
+          deprecatedSystemIconVars.colorHover,
+          cssVar(accentColor, cssVar(color, base.licorice200))
+        )
+      ),
+    },
+    '&:where(:hover, .hover) .wd-icon-background': {
+      fill: cssVar(deprecatedSystemIconVars.backgroundHover, backgroundColor),
+    },
+  }),
+});
+
 export const SystemIcon = createComponent('span')({
   displayName: 'SystemIcon',
   Component: (
     {
-      background = 'transparent',
-      backgroundHover = 'transparent',
-      color = iconColors.standard,
-      colorHover = iconColors.hover,
+      size,
+      background,
+      backgroundHover,
+      color,
+      colorHover,
       icon,
       accent,
       accentHover,
       fill,
       fillHover,
-      size,
-      shouldMirror,
       ...elemProps
     }: SystemIconProps,
     ref,
     Element
   ) => {
-    const style = systemIconStyles({
-      accent,
-      accentHover,
-      background,
-      backgroundHover,
-      color,
-      colorHover,
-      fill,
-      fillHover,
-    });
-
     return (
-      <Icon
+      <Svg
+        as={Element}
         src={icon}
         type={CanvasIconTypes.System}
-        size={size}
-        as={Element}
-        shouldMirror={shouldMirror}
         ref={ref}
-        styles={style}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          systemIconStencil({
+            size: typeof size === 'number' ? px2rem(size) : size,
+            color: transformColorNameToToken(fill || color),
+            accentColor: transformColorNameToToken(accent || color),
+            backgroundColor: transformColorNameToToken(background),
+          }),
+          {
+            [deprecatedSystemIconVars.colorHover]: colorHover && cssVar(colorHover),
+            [deprecatedSystemIconVars.fillHover]: fillHover && cssVar(fillHover),
+            [deprecatedSystemIconVars.accentHover]: accentHover && cssVar(accentHover),
+            [deprecatedSystemIconVars.backgroundHover]: backgroundHover && cssVar(backgroundHover),
+          },
+        ])}
       />
     );
   },

package/icon/lib/SystemIconCircle.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, SystemIconProps} from './SystemIcon';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon, SystemIconProps, systemIconStencil} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
-import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {transformColorNameToToken} from './Svg';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -19,9 +19,9 @@ export enum SystemIconCircleSize {
 export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
   /**
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
-   * @default colors.soap300
+   * @default base.soap300
    */
-  background?: SystemPropValues['color'];
+  background?: string;
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -33,60 +33,55 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
   size?: SystemIconCircleSize | number;
 }
 
-const Container = styled('div', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<Pick<SystemIconCircleProps, 'background' | 'size'>>(
-  {
+const systemIconCircleStencil = createStencil({
+  vars: {
+    containerSize: '',
+    backgroundColor: '',
+    iconColor: '',
+  },
+  base: ({backgroundColor, containerSize, iconColor}) => ({
+    background: cssVar(backgroundColor, base.soap200),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    borderRadius: borderRadius.circle,
+    padding: system.space.zero,
+    border: 'none',
+    borderRadius: system.shape.round,
     boxSizing: 'border-box',
     overflow: 'hidden',
+    width: cssVar(containerSize, system.space.x10),
+    height: cssVar(containerSize, system.space.x10),
+    [systemIconStencil.vars.size]: calc.multiply(cssVar(containerSize, system.space.x10), 0.625),
+    [systemIconStencil.vars.color]: iconColor,
     '& img': {
       width: '100%',
       height: '100%',
     },
-  },
-  ({background}) => ({
-    background: getColor(background),
   }),
-  ({size}) => ({
-    width: size,
-    height: size,
-  })
-);
+});
 
 export const SystemIconCircle = createComponent('span')({
   displayName: 'SystemIconCircle',
-  Component: (
-    {
-      background = colors.soap200,
-      size = SystemIconCircleSize.l,
-      icon,
+  Component: ({background, size, icon, shouldMirror}: SystemIconCircleProps, ref, Element) => {
+    // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
+    const backgroundFallback =
+      background && !background.startsWith('--') ? background : colors.soap200;
+    const iconColor = pickForegroundColor(
+      backgroundFallback,
+      'rgba(0,0,0,0.65)',
+      colors.frenchVanilla100
+    );
 
-      shouldMirror,
-      ...elemProps
-    }: SystemIconCircleProps,
-    ref,
-    Element
-  ) => {
-    const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
-    const iconSize = size * 0.625;
     return (
-      <Container background={background} size={size} {...elemProps}>
-        <SystemIcon
-          icon={icon}
-          color={iconColor}
-          colorHover={iconColor}
-          as={Element}
-          size={iconSize}
-          ref={ref}
-          shouldMirror={shouldMirror}
-        />
-      </Container>
+      <div
+        {...systemIconCircleStencil({
+          containerSize: typeof size === 'number' ? px2rem(size) : size,
+          backgroundColor: transformColorNameToToken(background),
+          iconColor,
+        })}
+      >
+        <SystemIcon as={Element} ref={ref} icon={icon} shouldMirror={shouldMirror} />
+      </div>
     );
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.726-next.0",
+  "version": "11.0.0-alpha.758-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": "^11.0.0-alpha.726-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.726-next.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.758-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.758-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.2",
+    "@workday/canvas-tokens-web": "^1.3.0",
     "@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": "92313a01b7703822a67e7c7f7aff5460237f8ce7"
+  "gitHead": "8d03e85b517b28f0f8dbf4918b9bda35a3e5d893"
 }

package/select/lib/hooks/useSelectInput.ts

@@ -14,12 +14,16 @@ import {
 } from '@workday/canvas-kit-react/combobox';
 import {useSelectModel} from './useSelectModel';
 
+function noop() {
+  // Do nothing
+}
+
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(
   createElemPropsHook(useSelectModel)(
-    (model, ref, elemProps: {keySofar?: string; placeholder?: string} = {}) => {
+    (model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
       const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
       const textInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -30,6 +34,7 @@ export const useSelectInput = composeHooks(
           Object.getPrototypeOf(textInputRef.current),
           'value'
         );
+
         if (nativeInputValue && nativeInputValue.set) {
           nativeInputValue.set.call(textInputRef.current, value);
         }
@@ -54,6 +59,19 @@ export const useSelectInput = composeHooks(
           model.state.selectedIds[0]
         ) {
           const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+
+          // force the hidden input to have the correct value
+          if (model.state.inputRef.current.value !== value) {
+            const nativeInputValue = Object.getOwnPropertyDescriptor(
+              Object.getPrototypeOf(model.state.inputRef.current),
+              'value'
+            );
+
+            if (nativeInputValue && nativeInputValue.set) {
+              nativeInputValue.set.call(model.state.inputRef.current, value);
+            }
+          }
+
           if (
             model.state.selectedIds[0] !== value &&
             model.state.inputRef.current.value !== value
@@ -130,15 +148,13 @@ export const useSelectInput = composeHooks(
         },
         textInputProps: {
           ref: textInputRef,
+          onChange: noop,
+          value:
+            model.state.selectedIds.length > 0 && model.state.items.length > 0
+              ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
+              : '',
         },
         ref: elementRef,
-
-        // Account for the case where an initial item is selected when the Select first renders
-        defaultValue:
-          model.state.selectedIds.length > 0 && model.state.items.length > 0
-            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
-              model.state.value
-            : undefined,
       } as const;
     }
   ),

package/tabs/lib/TabsItem.tsx

@@ -17,7 +17,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Box, FlexProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {
   useListItemRegister,
   useListItemRovingFocus,
@@ -104,9 +104,8 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
     '&:hover, &:focus': {
       backgroundColor: colors.soap200,
       color: colors.blackPepper400,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.hover,
-      },
+
+      [systemIconStencil.vars.color]: iconColors.hover,
     },
 
     '&:focus': {
@@ -116,24 +115,18 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
 
     '&:disabled, &[aria-disabled]': {
       color: colors.licorice100,
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: iconColors.disabled,
-      },
+      [systemIconStencil.vars.color]: iconColors.disabled,
       '&:hover': {
         cursor: 'auto',
         backgroundColor: `transparent`,
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.disabled,
-        },
+        [systemIconStencil.vars.color]: iconColors.disabled,
       },
     },
 
     '&[aria-selected=true]': {
       color: theme.canvas.palette.primary.main,
       cursor: 'default',
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: theme.canvas.palette.primary.main,
-      },
+      [systemIconStencil.vars.color]: theme.canvas.palette.primary.main,
       '&:after': {
         position: 'absolute',
         height: space.xxxs,

package/tabs/lib/useTabsModel.tsx

@@ -54,7 +54,6 @@ export const useTabsModel = createModelHook({
   const getId = config.getId || defaultGetId;
   const modality = useModalityType();
 
-
   const model = useOverflowListModel(
     useOverflowListModel.mergeConfig(config, {
       shouldCalculateOverflow: modality !== 'touch',

package/text/lib/LabelText.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {textStencil} from './Text';
 
 /**
  * @deprecated ⚠️ `TypeLabelProps` has been deprecated and will be removed in a future major version.
@@ -28,83 +29,30 @@ export interface TypeLabelProps extends BoxProps {
 }
 
 const labelTextStencil = createStencil({
+  extends: textStencil,
   base: {
     ...system.type.subtext.large,
-    color: base.blackPepper300,
+    color: system.color.text.default,
   },
   modifiers: {
-    typeLevel: {
-      // Title level styles
-      'title.large': {
-        ...system.type.title.large,
-        color: base.blackPepper400,
-      },
-      'title.medium': {
-        ...system.type.title.medium,
-        color: base.blackPepper400,
-      },
-      'title.small': {
-        ...system.type.title.small,
-        color: base.blackPepper400,
-      },
-      // Heading level styles
-      'heading.large': {
-        ...system.type.heading.large,
-        color: base.blackPepper400,
-      },
-      'heading.medium': {
-        ...system.type.heading.medium,
-        color: base.blackPepper400,
-      },
-      'heading.small': {
-        ...system.type.heading.small,
-        color: base.blackPepper400,
-      },
-      // Body level styles
-      'body.large': {
-        ...system.type.body.large,
-        color: base.blackPepper300,
-      },
-      'body.medium': {
-        ...system.type.body.medium,
-        color: base.blackPepper300,
-      },
-      'body.small': {
-        ...system.type.body.small,
-        color: base.blackPepper300,
-      },
-      // Subtext level styles
-      'subtext.large': {
-        ...system.type.subtext.large,
-        color: base.blackPepper300,
-      },
-      'subtext.medium': {
-        ...system.type.subtext.medium,
-        color: base.blackPepper300,
-      },
-      'subtext.small': {
-        ...system.type.subtext.small,
-        color: base.blackPepper300,
-      },
-    },
-    variant: {
-      error: {color: base.cinnamon500},
-      hint: {color: base.licorice300},
-      inverse: {color: base.frenchVanilla100},
-    },
     disabled: {
       true: {
         cursor: 'default',
-        color: base.licorice100,
+        color: system.color.text.disabled,
       },
     },
+    variant: {
+      inverse: {color: system.color.text.inverse},
+      error: {color: system.color.text.critical.default},
+      hint: {color: system.color.text.hint},
+    },
   },
   compound: [
     {
       modifiers: {variant: 'inverse', disabled: true},
       styles: {
         opacity: system.opacity.disabled,
-        color: base.frenchVanilla100,
+        color: system.color.text.inverse,
       },
     },
   ],