@workday/canvas-kit-react 8.6.0-360-next.0 → 8.6.0

package/icon/lib/AccentIcon.tsx

@@ -3,14 +3,15 @@ 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
@@ -18,9 +19,7 @@ export interface AccentIconStyles {
   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,

package/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 {

package/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,

package/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;
-}

package/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'],

package/menu/lib/MenuItem.tsx

@@ -44,11 +44,10 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
   ({theme}) => {
     return {
       ...type.levels.subtext.large,
-      '& > *:not(style) ~ *:not(style)': {
-        marginLeft: space.xxs,
-      },
-      display: 'block',
+      display: 'grid',
+      alignItems: 'center',
       width: '100%',
+      gap: space.s,
       padding: `${space.xxs} ${space.s}`,
       boxSizing: 'border-box',
       cursor: 'pointer',
@@ -174,7 +173,7 @@ export const MenuItem = createSubcomponent('button')({
   modelHook: useMenuModel,
   elemPropsHook: useMenuItem,
   subComponents: {
-    Icon: SystemIcon,
+    Icon: styled(SystemIcon)({alignSelf: 'start'}),
     Text: styled('span')({flexGrow: 1, alignSelf: 'center'}),
   },
 })<MenuItemProps>(({children, ...elemProps}, Element) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.6.0-360-next.0+976bd42a",
+  "version": "8.6.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,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.6.0-360-next.0+976bd42a",
+    "@workday/canvas-kit-popup-stack": "^8.6.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "976bd42a81605b07988c33eb61cb6574345e6181"
+  "gitHead": "63db571e6d052f6c8d4a3ae6b39d16c3d7d6720f"
 }

package/popup/lib/PopupCard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
+import {space, type} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -62,6 +62,35 @@ const StyledPopupCard = styled(Card)<
   };
 });
 
+function getSpace(value?: string | number) {
+  if (value && value in space) {
+    return space[value as keyof typeof space];
+  } else {
+    return value;
+  }
+}
+
+function getMaxHeight(margin?: string | number) {
+  // set the default margin offset to space.xl
+  let marginOffset: string | number = space.xl;
+
+  if (margin) {
+    // parse the margin prop
+    if (typeof margin === 'string') {
+      const marginValues = margin.split(' ');
+      const marginTop = getSpace(marginValues[0]);
+      // If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
+      const marginBottom = getSpace(marginValues[2]) || marginTop;
+
+      marginOffset = `(${marginTop} + ${marginBottom})`;
+    } else {
+      // if margin is a number, double it to get the offset
+      marginOffset = `${margin * 2}px`;
+    }
+  }
+  return `calc(100vh - ${marginOffset})`;
+}
+
 export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
   modelHook: usePopupModel,
@@ -73,7 +102,6 @@ export const PopupCard = createSubcomponent('div')({
 
   // As is a Flex that will render an element of `Element`
   const As = useConstant(() => Flex.as(Element));
-
   return (
     <StyledPopupCard
       as={As}
@@ -84,9 +112,7 @@ export const PopupCard = createSubcomponent('div')({
       flexDirection="column"
       minHeight={0}
       padding="m"
-      maxHeight={`calc(100vh - ${
-        elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
-      } * 2)`}
+      maxHeight={getMaxHeight(elemProps.margin)}
       overflowY="auto"
       {...type.levels.subtext.large}
       {...elemProps}

package/tokens/index.ts

@@ -63,9 +63,6 @@ export {
   fontFamily,
   monoFontFamily,
   BrandingColor,
-  CanvasDepth,
-  CanvasDepthValues,
-  CSSProperties,
 };
 
 export type {
@@ -73,6 +70,8 @@ export type {
   CanvasBorderRadiusKeys,
   CanvasBorderRadiusValues,
   CanvasColor,
+  CanvasDepth,
+  CanvasDepthValues,
   CanvasSpace,
   CanvasSpaceKeys,
   CanvasSpaceValues,
@@ -82,4 +81,5 @@ export type {
   CanvasTypeProperties,
   CanvasTypeVariants,
   CanvasTypeHierarchy,
+  CSSProperties,
 }