@workday/canvas-kit-react 8.0.0-alpha.180-next.0 → 8.0.0-alpha.184-next.0

package/layout/lib/utils/grid.ts

@@ -1,4 +1,7 @@
 import {Property} from 'csstype';
+import {space as spaceTokens, CanvasSpace, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
+
+export type GridSpacePropsValues = CanvasSpaceKeys | number | (string & {});
 
 /** style props to for grid container properties */
 export type GridStyleProps = {
@@ -25,12 +28,12 @@ export type GridStyleProps = {
   gridTemplateColumns?: Property.GridTemplateColumns;
   /** sets `grid-template-rows` property */
   gridTemplateRows?: Property.GridTemplateRows;
-  /** sets `gap` property */
-  gridGap?: Property.GridGap;
   /** sets `column-gap` property */
-  gridColumnGap?: Property.GridColumnGap;
+  gridColumnGap?: Property.GridColumnGap | GridSpacePropsValues;
   /** sets `row-gap` property */
-  gridRowGap?: Property.GridRowGap;
+  gridRowGap?: Property.GridRowGap | GridSpacePropsValues;
+  /** sets `gap` property */
+  gridGap?: Property.GridGap | GridSpacePropsValues;
   /** sets `place-items` property */
   gridPlaceItems?: Property.PlaceItems;
   /** sets `grid-auto-columns` property */
@@ -45,6 +48,29 @@ export type GridStyleProps = {
   grid?: Property.Grid;
 };
 
+export type gridSpaceProps = {
+  /** sets `gap` property */
+  gridGap?: Property.GridGap | GridSpacePropsValues;
+};
+
+const gridGap = (value: GridSpacePropsValues) => {
+  return {gridGap: spaceTokens[value as keyof CanvasSpace] || value};
+};
+const gridRowGap = (value: GridSpacePropsValues) => {
+  return {gridRowGap: spaceTokens[value as keyof CanvasSpace] || value};
+};
+const gridColumnGap = (value: GridSpacePropsValues) => {
+  return {gridColumnGap: spaceTokens[value as keyof CanvasSpace] || value};
+};
+
+const gridSpaceStyleProps = {
+  gridGap,
+  gridRowGap,
+  gridColumnGap,
+};
+
+export type SpaceStyleProps = gridSpaceProps & GridStyleProps;
+
 const gridProps = {
   alignContent: 'alignContent',
   alignItems: 'alignItems',
@@ -55,9 +81,9 @@ const gridProps = {
   gridTemplate: 'gridTemplate',
   gridTemplateColumns: 'gridTemplateColumns',
   gridTemplateRows: 'gridTemplateRows',
-  gridGap: 'gridGap',
   gridColumnGap: 'gridColumnGap',
   gridRowGap: 'gridRowGap',
+  gridGap: 'gridGap',
   gridPlaceItems: 'gridPlaceItems',
   gridAutoColumns: 'gridAutoColumns',
   gridAutoRows: 'gridAutoRows',
@@ -69,6 +95,8 @@ const gridProps = {
 /**
  * A style prop function that takes component props and returns grid styles.
  * If no `GridStyleProps` are found, it returns an empty object.
+ * Space tokens are available for `gridGap`, `gridRowGap`, `gridColumnGap` (`zero`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`).
+ * Values: `zero: 0px`, `xxxs: 4px`, `xxs: 8px`, `xs: 12px`, `s: 16px`, `m: 24px`, `l: 32px`, `xl: 40px`, `xxl: 64px`, `xxxl: 80px`.
  *
  * @example
  * // You'll most likely use `grid` with low-level, styled components
@@ -79,14 +107,22 @@ const gridProps = {
  * );
  *
  */
-export function grid<P extends GridStyleProps>(props: P) {
-  const styles = {};
+export function grid<P extends SpaceStyleProps>(props: P) {
+  let styles = {};
   for (const key in props) {
-    if (key in gridProps) {
-      const attr = gridProps[key as keyof GridStyleProps];
-      const value = props[key];
-      // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-      styles[attr] = value;
+    if (props.hasOwnProperty(key)) {
+      if (key in gridProps) {
+        const attr = gridProps[key as keyof GridStyleProps];
+        const value = props[key];
+        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
+        styles[attr] = value;
+      }
+      if (key in gridSpaceStyleProps) {
+        const value = props[key as keyof gridSpaceProps] as GridSpacePropsValues;
+        const spaceFn = gridSpaceStyleProps[key as keyof gridSpaceProps];
+        const style = spaceFn(value);
+        styles = {...styles, ...style};
+      }
     }
   }
   return styles;

package/menu/lib/MenuCard.tsx

@@ -61,6 +61,7 @@ export const MenuCard = createSubcomponent('div')({
       maxWidth={`calc(100vw - ${space.l})`}
       transformOrigin={transformOrigin}
       padding="zero"
+      depth={3}
       {...elemProps}
     >
       {elemProps.children}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.180-next.0+b4047c4e",
+  "version": "8.0.0-alpha.184-next.0+9277b9ca",
   "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.0.0-alpha.180-next.0+b4047c4e",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.184-next.0+9277b9ca",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "b4047c4eca7a87327093767ea2af3fde03d686af"
+  "gitHead": "9277b9cababf447cdd3dcb7bceefbe92172d0a0a"
 }

package/popup/lib/PopupBody.tsx

@@ -8,5 +8,5 @@ export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
   modelHook: usePopupModel,
 })<ExtractProps<typeof Card.Body>>(elemProps => {
-  return <Card.Body overflowY="auto" {...elemProps} />;
+  return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
 });

package/popup/lib/PopupCard.tsx

@@ -12,12 +12,13 @@ import {
   useConstant,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
+import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
 
-export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
+export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
+export interface PopupCardProps extends FlexAndBoxProps {
   children?: React.ReactNode;
 }
 
@@ -70,20 +71,19 @@ export const PopupCard = createSubcomponent('div')({
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
 
-  // As is a Stack that will render an element of `Element`
-  const As = useConstant(() => Stack.as(Element));
+  // As is a Flex that will render an element of `Element`
+  const As = useConstant(() => Flex.as(Element));
 
   return (
     <StyledPopupCard
       as={As}
       transformOrigin={transformOrigin}
       position="relative"
-      padding="l"
       depth={5}
       maxWidth={`calc(100vw - ${space.l})`}
-      spacing={0}
       flexDirection="column"
       minHeight={0}
+      padding="m"
       maxHeight={`calc(100vh - ${
         elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
       } * 2)`}

package/popup/lib/PopupHeading.tsx

@@ -15,7 +15,7 @@ export const PopupHeading = createSubcomponent('h2')({
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
   return (
-    <Card.Heading as={Element} marginBottom="s" {...elemProps}>
+    <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
       {children}
     </Card.Heading>
   );

package/toast/lib/Toast.tsx

@@ -92,11 +92,11 @@ export const Toast = createComponent('div')({
         ref={ref}
         as={Element}
         width={toastWidth}
-        padding="s"
         depth={5}
         role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
         aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
         aria-atomic={!isInteractive}
+        padding="xxs"
         {...elemProps}
       >
         {onClose && <Popup.CloseIcon aria-label="Close" onClick={onClose} size="small" />}