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

package/layout/lib/utils/position.ts

@@ -0,0 +1,96 @@
+import {
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {PropertyPosition, PropertyZIndex} from './types';
+
+/** style props to for standard position properties */
+export type PositionStandardProps = {
+  /** sets `position` property  */
+  position?: PropertyPosition;
+  /** sets `zIndex` property  */
+  zIndex?: PropertyZIndex;
+  /** sets `top` property  */
+  top?: number | string;
+  /** sets `right` property (no bidirectional support) */
+  right?: number | string;
+  /** sets `bottom` property  */
+  bottom?: number | string;
+  /** sets `left` property (no bidirectional support)  */
+  left?: number | string;
+};
+
+export type PositionLogicalProps = {
+  /** sets `left` property (bidirectional support)  */
+  insetInlineStart?: number | string;
+  /** sets `right` property (bidirectional support) */
+  insetInlineEnd?: number | string;
+};
+
+const getInsetInlineStartStyle = (value: number | string, isRTL = false) => {
+  const attr = isRTL ? 'right' : 'left';
+  return {[attr]: value};
+};
+
+const getInsetInlineEndStyle = (value: number | string, isRTL = false) => {
+  const attr = isRTL ? 'left' : 'right';
+  return {[attr]: value};
+};
+
+const standardPositionProps = {
+  position: 'position',
+  zIndex: 'zIndex',
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+};
+
+const logicalPositionProps = {
+  insetInlineStart: getInsetInlineStartStyle,
+  insetInlineEnd: getInsetInlineEndStyle,
+};
+
+export type PositionStyleProps = PositionStandardProps & PositionLogicalProps;
+
+/**
+ * A style prop function that takes components props and returns position styles.
+ * If no `PositionProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `position` with low-level, styled components
+ * const BoxExample = () => (
+ *   <Box position="absolute" top="50%">
+ *     Hello, positions!
+ *   </Box>
+ * );
+ *
+ */
+export function position<P extends PositionStyleProps & {theme?: PartialEmotionCanvasTheme}>(
+  props: P
+) {
+  // position 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 (key in props) {
+      if (key in standardPositionProps) {
+        const value = props[key];
+        const attr = standardPositionProps[key as keyof PositionStandardProps];
+        // @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;
+        continue;
+      }
+      if (key in logicalPositionProps) {
+        const value = props[key as keyof PositionLogicalProps] as string | number;
+        const styleFn = logicalPositionProps[key as keyof PositionLogicalProps];
+        const isRTL = canvas.direction === ContentDirection.RTL;
+        const style = styleFn(value, isRTL);
+        styles = {...styles, ...style};
+      }
+    }
+  }
+  return styles;
+}

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/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} margin="xl" {...props}>
+      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...props}>
         {children}
       </Popup.Card>
     );

package/modal/lib/ModalOverflowOverlay.tsx

@@ -17,7 +17,7 @@ export const ModalOverflowOverlay = createComponent('div')({
     Element
   ) => {
     return (
-      <StyledOverlay as={Element} ref={ref} overflow="auto" {...elemProps}>
+      <StyledOverlay as={Element} ref={ref} overflowX="hidden" overflowY="auto" {...elemProps}>
         {children}
       </StyledOverlay>
     );

package/modal/lib/ModalOverlay.tsx

@@ -12,7 +12,7 @@ import {
 import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
-import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 export interface ModalOverlayProps extends BoxProps {
   model?: PopupModel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.0-next.6+54a4c8c1",
+  "version": "7.0.0-alpha.79-next.7+578f91ad",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -57,12 +57,13 @@
     "@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.6+54a4c8c1",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.6+54a4c8c1",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.79-next.7+578f91ad",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.79-next.7+578f91ad",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.79-next.7+578f91ad",
     "@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",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
@@ -76,5 +77,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "54a4c8c15a1863d7560dc5a1397028c0e6d72236"
+  "gitHead": "578f91adfde267929daf4f55b7a6463f8739421e"
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {
   chevronLeftSmallIcon,
   chevron2xLeftSmallIcon,
@@ -8,10 +8,10 @@ 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 &
+export type ControlButtonProps = TertiaryButtonProps &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
   };
@@ -38,9 +38,8 @@ export const JumpToFirstButton = ({model, onClick, ...restProps}: ControlButtonP
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -61,9 +60,8 @@ export const StepToPreviousButton = ({onClick, model, ...restProps}: ControlButt
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -84,9 +82,8 @@ export const StepToNextButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -107,9 +104,8 @@ export const JumpToLastButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}

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;