chore: Merge master into prerelease/minor

modules/react/common/lib/utils/colorUtils.ts

@@ -1,6 +1,18 @@
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
 
+/**
+ * The function takes in a color string or an enum value of CanvasColor and returns its hex value color.
+ * @param value a string or an enum value of CanvasColor
+ * @returns the hex value color
+ */
+export function getColor(value?: CanvasColor | string) {
+  if (value! in colors) {
+    return colors[value as keyof typeof colors];
+  }
+  return value;
+}
+
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
 export const expandHex = (hex: string) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -31,16 +43,17 @@ export const pickForegroundColor = (
   darkColor?: string,
   lightColor?: string
 ) => {
-  if (chroma.valid(background)) {
-    if (lightColor && chroma.contrast(background, lightColor) >= 4.5) {
-      return lightColor;
-    } else if (darkColor && chroma.contrast(background, darkColor) >= 4.5) {
-      return darkColor;
+  const [bg, dark, light] = [getColor(background), getColor(darkColor), getColor(lightColor)];
+  if (bg && chroma.valid(bg)) {
+    if (light && chroma.contrast(bg, light) >= 4.5) {
+      return light;
+    } else if (dark && chroma.contrast(bg, dark) >= 4.5) {
+      return dark;
     } else {
       for (let i = 0; i < colorPriority.length; i++) {
         const color = colorPriority[i];
 
-        if (chroma.contrast(background, color) >= 4.5) {
+        if (chroma.contrast(bg, color) >= 4.5) {
           return color;
         }
       }

modules/react/common/spec/colorUtils.spec.tsx

@@ -1,5 +1,5 @@
 import {colors} from '@workday/canvas-kit-react/tokens';
-import {pickForegroundColor} from '../index';
+import {getColor, pickForegroundColor} from '../index';
 
 describe('Color Utils methods', () => {
   describe('pickForegroundColor', () => {
@@ -8,6 +8,11 @@ describe('Color Utils methods', () => {
         colors.blueberry100
       );
     });
+    it('should use lightColor if luminicance is dark with color token as string', () => {
+      expect(pickForegroundColor('black', 'blueberry600', 'blueberry100')).toEqual(
+        colors.blueberry100
+      );
+    });
     it('should use darkColor if luminicance is light', () => {
       expect(pickForegroundColor('white', colors.blueberry600, colors.blueberry100)).toEqual(
         colors.blueberry600
@@ -29,4 +34,17 @@ describe('Color Utils methods', () => {
       expect(pickForegroundColor('#777')).toEqual(colors.blackPepper600);
     });
   });
+  describe('getColor', () => {
+    it('should return as-is if value is not in colors', () => {
+      expect(getColor('newColor')).toEqual('newColor');
+    });
+
+    it('should return correct hex value for color token as string', () => {
+      expect(getColor('peach300')).toEqual('#ff957a');
+    });
+
+    it('should return correct hex value for color token', () => {
+      expect(getColor(colors.peach300)).toEqual('#ff957a');
+    });
+  });
 });

modules/react/icon/lib/AccentIcon.tsx

@@ -3,24 +3,23 @@ import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import {Icon, IconProps} from './Icon';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface AccentIconStyles {
   /**
    * The fill color of the AccentIcon.
    * @default colors.blueberry500
    */
-  color?: string;
+  color?: SystemPropValues['color'];
   /**
    * If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `colors.frenchVanilla100`.
    * @default false
    */
   transparent?: boolean;
 }
 
-export interface AccentIconProps
-  extends AccentIconStyles,
-    Omit<IconProps, 'src' | 'type' | 'color'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
   /**
    *  The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -37,7 +36,7 @@ export const accentIconStyles = ({
   transparent = false,
 }: AccentIconStyles): CSSObject => ({
   '& .color-500': {
-    fill: color,
+    fill: getColor(color),
   },
   '& .french-vanilla-100': {
     fill: transparent ? 'transparent' : colors.frenchVanilla100,

modules/react/icon/lib/SystemIcon.tsx

@@ -3,8 +3,7 @@ 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} from '@workday/canvas-kit-react/common';
-import {getColor} from './utils';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
 import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface SystemIconStyles {

modules/react/icon/lib/SystemIconCircle.tsx

@@ -4,7 +4,8 @@ import isPropValid from '@emotion/is-prop-valid';
 import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon, SystemIconProps} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -20,7 +21,7 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
    * @default colors.soap300
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -50,7 +51,7 @@ const Container = styled('div', {
     },
   },
   ({background}) => ({
-    background: background,
+    background: getColor(background),
   }),
   ({size}) => ({
     width: size,

modules/react/icon/lib/utils.ts

@@ -1,15 +1,7 @@
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 
 export function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes) {
   if (icon.type !== expectedType) {
     throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
   }
 }
-
-export function getColor(value?: CanvasColor | string) {
-  if (value! in colors) {
-    return colors[value as keyof typeof colors];
-  }
-  return value;
-}

modules/react/icon/spec/AccentIcon.spec.tsx

@@ -22,6 +22,11 @@ describe('Accent Icon', () => {
     expect(componentStyle['& .color-500']).toHaveProperty('fill', colors.cinnamon500);
   });
 
+  test('Can set icon color correctly with token color as string', () => {
+    const componentStyle = accentIconStyles({color: 'cinnamon500'});
+    expect(componentStyle['& .color-500']).toHaveProperty('fill', colors.cinnamon500);
+  });
+
   it('should spread extra props to the icon element', () => {
     const {container} = render(<AccentIcon icon={shieldIcon} data-propspread="test" />);
 

modules/react/icon/spec/SystemIcon.spec.tsx

@@ -3,9 +3,8 @@ import {render} from '@testing-library/react';
 
 import {colors, iconColors} from '@workday/canvas-kit-react/tokens';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-
+import {getColor} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStyles} from '../lib/SystemIcon';
-import {getColor} from '../lib/utils';
 
 describe('System Icon', () => {
   test('Defaults styles are set correctly', () => {

modules/react/layout/lib/utils/position.ts

@@ -30,6 +30,10 @@ export type PositionStyleProps = {
    * - no bidirectional support
    * */
   left?: number | string;
+  /**
+   * - sets [CSS inset property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
+   */
+  inset?: number | string;
   /**
    * - sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start)
    * - bidirectional support
@@ -73,6 +77,11 @@ export const positionStyleFnConfigs: StyleFnConfig[] = [
     properties: ['left'],
     system: 'none',
   },
+  {
+    name: 'inset',
+    properties: ['inset'],
+    system: 'none',
+  },
   {
     name: 'insetInlineStart',
     properties: ['insetInlineStart'],