@workday/canvas-kit-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

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/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.5+b69254c7",
+  "version": "7.0.0-alpha.78-next.6+400ffc0b",
   "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.5+b69254c7",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.5+b69254c7",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.5+b69254c7",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.78-next.6+400ffc0b",
     "@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": "b69254c752dc3fcc508e3b93164f8f7a83b005bb"
+  "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
 }

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;

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,30 +1,52 @@
 import * as React from 'react';
 import {styled} from '@workday/canvas-kit-react/common';
-import canvas, {type} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {BaseButton} from '@workday/canvas-kit-react/button';
 
 import {PaginationModel} from './types';
 
-const toggledStyles = {
-  color: canvas.colors.frenchVanilla100,
-  fontWeight: 700,
-  pointerEvents: 'none',
-};
-
-const StyledPageButton = styled(IconButton)<{toggled?: boolean}>(
+const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
   {
-    ...type.levels.subtext.large,
+    minWidth: space.l,
+    width: space.l,
+    borderRadius: borderRadius.circle,
+    height: space.l,
   },
   ({toggled}) => {
-    return toggled ? toggledStyles : {};
+    return {
+      fontWeight: toggled ? 700 : 'normal',
+    };
   }
 );
 
-export type PageButtonProps = IconButtonProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    model: PaginationModel;
-    pageNumber: number;
+const getPaginationButtonColors = (toggled: boolean) => {
+  return {
+    default: {
+      background: toggled ? colors.blueberry400 : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    hover: {
+      background: toggled ? colors.blueberry400 : colors.soap300,
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    active: {
+      background: toggled ? colors.blueberry400 : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    focus: {
+      background: toggled ? colors.blueberry400 : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    disabled: {
+      background: colors.licorice100,
+    },
   };
+};
+
+export type PageButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  model: PaginationModel;
+  pageNumber: number;
+};
 
 export const PageButton = ({
   model,
@@ -43,11 +65,10 @@ export const PageButton = ({
   return (
     <StyledPageButton
       aria-current={isCurrentPage ? 'page' : undefined}
+      colors={getPaginationButtonColors(isCurrentPage)}
       aria-pressed={undefined}
       onClick={handleClick}
-      size="small"
       toggled={isCurrentPage}
-      variant="square"
       {...elemProps}
     >
       {children || pageNumber}

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;