@workday/canvas-kit-react 7.0.0-alpha.0-next.3 → 7.0.0-alpha.0-next.7

package/layout/lib/utils/space.ts

@@ -0,0 +1,207 @@
+import {
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {space as spaceTokens, CanvasSpace, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
+
+type SpacePropValues = CanvasSpaceKeys | number | (string & {});
+
+/** These props automatically adjust for bidirectionality (LTR & RTL) */
+export type SpaceLogicalProps = {
+  /** sets margin-left property (bidirectional support) */
+  marginInlineStart?: SpacePropValues;
+  /** sets margin-right property (bidirectional support) */
+  marginInlineEnd?: SpacePropValues;
+  /** sets padding-left property (bidirectional support) */
+  paddingInlineStart?: SpacePropValues;
+  /** sets padding-right property (bidirectional support) */
+  paddingInlineEnd?: SpacePropValues;
+};
+
+/** These props do not adjust for bidirectionality (LTR & RTL) */
+export type SpaceStandardProps = {
+  /** sets margin property */
+  margin?: SpacePropValues;
+  /** sets margin-left and margin-right properties */
+  marginX?: SpacePropValues;
+  /** sets margin-top and margin-bottom properties */
+  marginY?: SpacePropValues;
+  /** sets margin-top property */
+  marginTop?: SpacePropValues;
+  /** sets margin-right property (no bidirectional support) */
+  marginRight?: SpacePropValues;
+  /** sets margin-bottom property */
+  marginBottom?: SpacePropValues;
+  /** sets margin-left property (no bidirectional support) */
+  marginLeft?: SpacePropValues;
+  /** sets padding property */
+  padding?: SpacePropValues;
+  /** sets padding-left and margin-right properties */
+  paddingX?: SpacePropValues;
+  /** sets padding-top and padding-bottom properties */
+  paddingY?: SpacePropValues;
+  /** sets padding-top property */
+  paddingTop?: SpacePropValues;
+  /** sets padding-right property (no bidirectional support) */
+  paddingRight?: SpacePropValues;
+  /** sets padding-bottom */
+  paddingBottom?: SpacePropValues;
+  /** sets padding-left property (no bidirectional support) */
+  paddingLeft?: SpacePropValues;
+};
+
+export type SpaceStyleProps = SpaceStandardProps & SpaceLogicalProps;
+
+const margin = (value: SpacePropValues) => {
+  return {margin: spaceTokens[value as keyof CanvasSpace] || value};
+};
+
+const marginX = (value: SpacePropValues) => {
+  return {
+    marginLeft: spaceTokens[value as CanvasSpaceKeys] || value,
+    marginRight: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const marginY = (value: SpacePropValues) => {
+  return {
+    marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
+    marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const marginTop = (value: SpacePropValues) => {
+  return {
+    marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const marginRight = (value: SpacePropValues, isRTL = false) => {
+  const attr = isRTL ? 'marginLeft' : 'marginRight';
+  return {
+    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const marginBottom = (value: SpacePropValues) => {
+  return {
+    marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const marginLeft = (value: SpacePropValues, isRTL = false) => {
+  const attr = isRTL ? 'marginRight' : 'marginLeft';
+  return {
+    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const padding = (value: SpacePropValues) => {
+  return {
+    padding: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const paddingX = (value: SpacePropValues) => {
+  return {
+    paddingLeft: spaceTokens[value as CanvasSpaceKeys] || value,
+    paddingRight: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const paddingY = (value: SpacePropValues) => {
+  return {
+    paddingTop: spaceTokens[value as CanvasSpaceKeys] || value,
+    paddingBottom: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const paddingTop = (value: SpacePropValues) => {
+  return {
+    paddingTop: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const paddingRight = (value: SpacePropValues, isRTL = false) => {
+  const attr = isRTL ? 'paddingLeft' : 'paddingRight';
+  return {
+    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const paddingBottom = (value: SpacePropValues) => {
+  return {
+    paddingBottom: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const paddingLeft = (value: SpacePropValues, isRTL = false) => {
+  const attr = isRTL ? 'paddingRight' : 'paddingLeft';
+  return {
+    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const logicalSpaceStyleProps = {
+  marginInlineStart: marginLeft,
+  marginInlineEnd: marginRight,
+  paddingInlineStart: paddingLeft,
+  paddingInlineEnd: paddingRight,
+};
+
+const standardSpaceStyleProps = {
+  margin,
+  marginX,
+  marginY,
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft,
+  padding,
+  paddingX,
+  paddingY,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+};
+
+/**
+ * A style prop function that takes component props and returns space styles.
+ * If no `SpaceStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `space` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box padding="xs" margin="m">
+ *     Hello, space!
+ *   </Box>
+ * );
+ *
+ */
+export function space<P extends SpaceStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
+  // space will always be used within the context of a component, but eslint doesn't know that
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const {canvas} = useTheme(props.theme);
+  let styles = {};
+  for (const key in props) {
+    if (props.hasOwnProperty(key)) {
+      if (key in standardSpaceStyleProps) {
+        const value = props[key as keyof SpaceStandardProps] as SpacePropValues;
+        const spaceFn = standardSpaceStyleProps[key as keyof SpaceStandardProps];
+        const style = spaceFn(value);
+        styles = {...styles, ...style};
+        continue;
+      }
+      if (key in logicalSpaceStyleProps) {
+        const value = props[key as keyof SpaceLogicalProps] as SpacePropValues;
+        const spaceFn = logicalSpaceStyleProps[key as keyof SpaceLogicalProps];
+        const isRTL = canvas.direction === ContentDirection.RTL;
+        const style = spaceFn(value, isRTL);
+        styles = {...styles, ...style};
+      }
+    }
+  }
+  return styles;
+}

package/layout/lib/utils/stack.ts

@@ -0,0 +1,78 @@
+import {
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {space as spaceTokens, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
+
+export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+
+const selector = '& > *:not(style) ~ *:not(style)';
+
+export type StackSpacing = CanvasSpaceKeys | number | (string & {});
+
+export type StackStyleProps = {
+  /** sets space values between child elements (bidirectional support) */
+  spacing: StackSpacing;
+  /**
+   * sets the direction for the stack
+   * @default "row"
+   * */
+  flexDirection?: StackDirection;
+  /**
+   * when `true` wraps each child element in a `Stack.Item`
+   * @default false
+   * */
+  shouldWrapChildren?: boolean;
+};
+
+const column = (value: StackSpacing) => ({
+  marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
+});
+
+const columnReverse = (value: StackSpacing) => ({
+  marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
+});
+
+const row = (value: StackSpacing, isRTL = false) => {
+  const attr = isRTL ? 'marginRight' : 'marginLeft';
+  return {
+    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const rowReverse = (value: StackSpacing, isRTL = false) => {
+  const attr = isRTL ? 'marginLeft' : 'marginRight';
+  return {
+    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
+  };
+};
+
+const stackDirectionProps = {
+  column,
+  'column-reverse': columnReverse,
+  row,
+  'row-reverse': rowReverse,
+};
+
+export function stack<P extends StackStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
+  let styles = {};
+  const {flexDirection = 'row', spacing} = props;
+  if (flexDirection === 'column' || flexDirection === 'column-reverse') {
+    const stackFn = stackDirectionProps[flexDirection];
+    styles = stackFn(spacing);
+  }
+
+  if (flexDirection === 'row' || flexDirection === 'row-reverse') {
+    // stack will always be used within the context of a component, but eslint doesn't know that
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const {canvas} = useTheme(props.theme);
+    const stackFn = stackDirectionProps[flexDirection];
+    const isRTL = canvas.direction === ContentDirection.RTL;
+    styles = stackFn(spacing, isRTL);
+  }
+
+  return {
+    [selector]: styles,
+  };
+}

package/layout/lib/utils/types.ts

@@ -0,0 +1,148 @@
+import {
+  Globals,
+  GlobalsNumber,
+  SelfPosition,
+  DisplayOutside,
+  DisplayInside,
+  DisplayInternal,
+  DisplayLegacy,
+  LineStyle,
+  ContentDistribution,
+  ContentPosition,
+} from 'csstype';
+
+// We're temporarily creating these types from csstype
+// to improve type completion until we move to csstype v3.
+
+// Border
+export type PropertyBorder = Globals | LineStyle | (string & {});
+
+// Flex Item
+export type PropertyJustifySelf =
+  | Globals
+  | SelfPosition
+  | 'auto'
+  | 'baseline'
+  | 'left'
+  | 'normal'
+  | 'right'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyAlignSelf =
+  | Globals
+  | SelfPosition
+  | 'auto'
+  | 'baseline'
+  | 'normal'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyOrder = GlobalsNumber;
+
+// Layout
+export type PropertyDisplay =
+  | Globals
+  | DisplayOutside
+  | DisplayInside
+  | DisplayInternal
+  | DisplayLegacy
+  | 'contents'
+  | 'list-item'
+  | 'none'
+  | (string & {});
+
+export type PropertyListStyle = Globals | 'inside' | 'none' | 'outside' | (string & {});
+
+export type PropertyOverflow =
+  | Globals
+  | '-moz-hidden-unscrollable'
+  | 'auto'
+  | 'clip'
+  | 'hidden'
+  | 'scroll'
+  | 'visible'
+  | (string & {});
+
+export type PropertyOverflowX =
+  | Globals
+  | '-moz-hidden-unscrollable'
+  | 'auto'
+  | 'clip'
+  | 'hidden'
+  | 'scroll'
+  | 'visible';
+
+export type PropertyOverflowY =
+  | Globals
+  | '-moz-hidden-unscrollable'
+  | 'auto'
+  | 'clip'
+  | 'hidden'
+  | 'scroll'
+  | 'visible';
+
+export type PropertyVerticalAlign =
+  | Globals
+  | 'baseline'
+  | 'bottom'
+  | 'middle'
+  | 'sub'
+  | 'super'
+  | 'text-bottom'
+  | 'text-top'
+  | 'top'
+  | (string & {});
+
+// Position
+export type PropertyPosition =
+  | Globals
+  | '-webkit-sticky'
+  | 'absolute'
+  | 'fixed'
+  | 'relative'
+  | 'static'
+  | 'sticky';
+
+export type PropertyZIndex = GlobalsNumber | 'auto';
+
+// Flex
+export type PropertyAlignItems =
+  | Globals
+  | SelfPosition
+  | 'baseline'
+  | 'normal'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyAlignContent =
+  | Globals
+  | ContentDistribution
+  | ContentPosition
+  | 'baseline'
+  | 'normal'
+  | (string & {});
+
+export type PropertyJustifyItems =
+  | Globals
+  | SelfPosition
+  | 'baseline'
+  | 'left'
+  | 'legacy'
+  | 'normal'
+  | 'right'
+  | 'stretch'
+  | (string & {});
+
+export type PropertyJustifyContent =
+  | Globals
+  | ContentDistribution
+  | ContentPosition
+  | 'left'
+  | 'normal'
+  | 'right'
+  | (string & {});
+
+export type PropertyFlexWrap = Globals | 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export type PropertyFlexDirection = Globals | 'column' | 'column-reverse' | 'row' | 'row-reverse';

package/loading-animation/lib/LoadingDots.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {styled} from '@workday/canvas-kit-react/common';
 

package/modal/lib/Modal.tsx

@@ -6,6 +6,7 @@ import {ModalOverlay} from './ModalOverlay';
 import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
+import {ModalOverflowOverlay} from './ModalOverflowOverlay';
 
 export interface ModalProps extends ExtractProps<typeof Dialog, never> {
   /** The contents of the Modal. Can be `Modal` subcomponents or any valid elements. */
@@ -27,6 +28,7 @@ export const Modal = createComponent()({
     Target: Popup.Target,
     Heading: ModalHeading,
     Overlay: ModalOverlay,
+    OverflowOverlay: ModalOverflowOverlay,
     CloseButton: Popup.CloseButton,
   },
 });

package/modal/lib/ModalCard.tsx

@@ -14,7 +14,7 @@ export const ModalCard = createComponent('div')({
 
     const props = useModalCard(localModel, elemProps, ref);
     return (
-      <Popup.Card as={Element} width={440} borderWidth={0} {...props}>
+      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" {...props}>
         {children}
       </Popup.Card>
     );

package/modal/lib/ModalOverflowOverlay.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+
+import {ModalOverlay} from './ModalOverlay';
+import styled from '@emotion/styled';
+
+const StyledOverlay = styled(ModalOverlay)<StyledType>({
+  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+});
+
+export const ModalOverflowOverlay = createComponent('div')({
+  displayName: 'Modal.OverflowOverlay',
+  Component: (
+    {children, model, ...elemProps}: ExtractProps<typeof ModalOverlay, never>,
+    ref,
+    Element
+  ) => {
+    return (
+      <StyledOverlay as={Element} ref={ref} overflow="auto" {...elemProps}>
+        {children}
+      </StyledOverlay>
+    );
+  },
+});

package/modal/lib/ModalOverlay.tsx

@@ -10,10 +10,11 @@ import {
   useForkRef,
 } from '@workday/canvas-kit-react/common';
 import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
-export interface ModalOverlayProps {
+export interface ModalOverlayProps extends BoxProps {
   model?: PopupModel;
   children: React.ReactNode;
 }
@@ -27,7 +28,7 @@ const fadeIn = keyframes`
   }
 `;
 
-const Container = styled('div')<StyledType>({
+const Container = styled(Box)<StyledType>({
   position: 'fixed',
   top: 0,
   left: 0,
@@ -47,13 +48,20 @@ const Container = styled('div')<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const CenteringContainer = styled('div')({
-  height: '100vh',
+  maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+
+  // IE11 fix for setting min-height in a flex container
+  ':before': {
+    display: 'block',
+    content: "''",
+    height: '100vh',
+  },
 });
 
 export const ModalOverlay = createComponent('div')({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.0-next.3+14a81c7e",
+  "version": "7.0.0-alpha.0-next.7+23568685",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,19 +52,19 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "@emotion/is-prop-valid": "^0.8.2",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.1.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.3+14a81c7e",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.3+14a81c7e",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.3+14a81c7e",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.7+23568685",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.7+23568685",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.7+23568685",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
+    "csstype": "^2.6.17",
     "element-closest": "^3.0.2",
-    "emotion-theming": "^10.0.10",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
@@ -77,5 +77,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "14a81c7ef3deb9efaf67fa3ec9cc2d2a3161b00b"
+  "gitHead": "23568685fec785046d37cb320289d8ab9e74e283"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -3,7 +3,7 @@ import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
 import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
-import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
 export interface AdditionalDetailsProps extends FlexProps {

package/pagination/lib/Pagination/Controls.tsx

@@ -8,7 +8,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {PaginationModel} from './types';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
 export type ControlButtonProps = IconButtonProps &

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-react/layout';
 import {useRTL} from '../common/utils/useRTL';
 
 export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> &

package/pagination/lib/Pagination/Nav.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;

package/pagination/lib/Pagination/PageList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {PaginationModel} from './types';
 import {ListItem, ListItemProps} from './common/List';
-import {HStack, HStackProps} from '@workday/canvas-kit-labs-react/layout';
+import {HStack, HStackProps} from '@workday/canvas-kit-react/layout';
 
 export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
   model: PaginationModel;

package/pagination/lib/Pagination/common/List.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {StyledType, styled, createComponent} from '@workday/canvas-kit-react/common';
 
 export interface ListProps extends FlexProps {}

package/popup/lib/Popup.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {Card} from '@workday/canvas-kit-react/card';
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
 
 import {PopupModel, usePopupModel, PopupModelContext} from './hooks';
@@ -10,6 +9,7 @@ import {PopupPopper} from './PopupPopper';
 import {PopupHeading} from './PopupHeading';
 import {PopupCloseIcon} from './PopupCloseIcon';
 import {PopupCloseButton} from './PopupCloseButton';
+import {PopupBody} from './PopupBody';
 
 export interface PopupProps {
   /**
@@ -30,7 +30,7 @@ export const Popup = createComponent()({
   },
   subComponents: {
     Heading: PopupHeading,
-    Body: Card.Body,
+    Body: PopupBody,
     Card: PopupCard,
     CloseIcon: PopupCloseIcon,
     Target: PopupTarget,

package/popup/lib/PopupBody.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+
+export const PopupBody = createComponent('div')({
+  displayName: 'Popup.Body',
+  Component: (props: ExtractProps<typeof Card.Body, never>, ref) => {
+    return <Card.Body overflowY="auto" {...props} />;
+  },
+});