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

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/Pagination.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 
 import {PaginationModel} from './types';
 import {usePaginationModel, UsePaginationModelConfig} from './usePaginationModel';
@@ -78,7 +78,7 @@ Pagination.Controls = (props: ControlsProps) => {
 };
 
 Pagination.JumpToFirstButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -87,7 +87,7 @@ Pagination.JumpToFirstButton = (
 };
 
 Pagination.StepToPreviousButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -96,7 +96,7 @@ Pagination.StepToPreviousButton = (
 };
 
 Pagination.StepToNextButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -105,7 +105,7 @@ Pagination.StepToNextButton = (
 };
 
 Pagination.JumpToLastButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks

package/popup/lib/PopupCard.tsx

@@ -78,7 +78,7 @@ export const PopupCard = createComponent('div')({
         transformOrigin={transformOrigin}
         position="relative"
         padding="l"
-        depth={2}
+        depth={5}
         maxWidth={`calc(100vw - ${space.l})`}
         spacing={0}
         flexDirection="column"

package/popup/lib/PopupCloseIcon.tsx

@@ -8,14 +8,13 @@ import {
   useModelContext,
   ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 
 import {usePopupCloseButton, PopupModel, PopupModelContext} from './hooks';
 
-const closeIconSpacing = 11;
-const closeIconSpacingSmall = 9;
+const closeIconSpacing = 4;
 
-export interface PopupCloseIconProps extends ExtractProps<typeof IconButton, never> {
+export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {
   /**
    * Optionally pass a model directly to this component. Default is to implicitly use the same
    * model as the container component which uses React context. Only use this for advanced use-cases
@@ -23,13 +22,13 @@ export interface PopupCloseIconProps extends ExtractProps<typeof IconButton, nev
   model?: PopupModel;
 }
 
-const StyledCloseIcon = styled(IconButton)<StyledType & PopupCloseIconProps>(
+const StyledCloseIcon = styled(TertiaryButton)<StyledType & PopupCloseIconProps>(
   {
     position: 'absolute',
   },
   ({size}) => ({
-    right: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-    top: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
+    right: closeIconSpacing,
+    top: closeIconSpacing,
   })
 );
 
@@ -42,6 +41,6 @@ export const PopupCloseIcon = createComponent('button')({
   ) => {
     const localModel = useModelContext(PopupModelContext, model);
     const props = usePopupCloseButton(localModel, elemProps, ref);
-    return <StyledCloseIcon as={Element} variant="plain" size={size} icon={xIcon} {...props} />;
+    return <StyledCloseIcon as={Element} size={size} icon={xIcon} {...props} />;
   },
 });

package/popup/lib/hooks/useDisableBodyScroll.ts

@@ -16,11 +16,17 @@ export const useDisableBodyScroll = (model: PopupModel, elemProps = {}) => {
     if (!visible) {
       return;
     }
+
+    const overflowY = document.body.style.overflowY;
+    const overflowX = document.body.style.overflowX;
     const overflow = document.body.style.overflow;
+
     document.body.style.overflow = 'hidden';
 
     return () => {
       document.body.style.overflow = overflow;
+      document.body.style.overflowY = overflowY;
+      document.body.style.overflowX = overflowX;
     };
   }, [visible]);
 

package/segmented-control/README.md

@@ -14,17 +14,16 @@ yarn add @workday/canvas-kit-react
 ```tsx
 import * as React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
-import {IconButton} from '@workday/canvas-kit-react/button';
 import {listViewIcon, worksheetsIcon} from '@workday/canvas-system-icons-web';
 
 <SegmentedControl>
-  <IconButton icon={listViewIcon} aria-label="List View" value="list-view" />
-  <IconButton icon={worksheetsIcon} aria-label="Table view" value="table-view" />
+  <SegmentedControl.Button icon={listViewIcon} aria-label="List View" value="list-view" />
+  <SegmentedControl.Button icon={worksheetsIcon} aria-label="Table view" value="table-view" />
 </SegmentedControl>;
 ```
 
-**Note:** while managing state using a unique `value` for each `IconButton` child is encouraged, you
-can also use indexes and omit the `value` field. It is strongly recommended to not mix these two
+**Note:** while managing state using a unique `value` for each `Button` child is encouraged, you can
+also use indexes and omit the `value` field. It is strongly recommended to not mix these two
 methods.
 
 ## Static Properties
@@ -35,9 +34,9 @@ methods.
 
 ### Required
 
-#### `children: React.ReactElement<IconButton>[]`
+#### `children:React.ReactElement<SegmentedControlButtonProps>[]`
 
-> Icon buttons to toggle between.
+> Buttons to toggle between.
 
 ---
 
@@ -45,8 +44,8 @@ methods.
 
 #### `value: string | number`
 
-> Identify which item is selected (toggled=true). If a string is passed, the IconButton with the
-> corresponding value will be selected. If a number is passed, the IconButton with the corresponding
+> Identify which item is selected (toggled=true). If a string is passed, the Button with the
+> corresponding value will be selected. If a number is passed, the Button with the corresponding
 > index will be selected.
 
 ---

package/segmented-control/lib/SegmentedControl.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
-import {mouseFocusBehavior, styled} from '@workday/canvas-kit-react/common';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SegmentedControlButton, SegmentedControlButtonProps} from './SegmentedControlButton';
 
 export interface SegmentedControlProps {
   /**
-   * The IconButton children of the SegmentedControl (must be at least two).
+   * The Button children of the SegmentedControl (must be at least two).
    * TODO: Add support for text children
    */
-  children: React.ReactElement<IconButtonProps>[];
+  children: React.ReactElement<SegmentedControlButtonProps>[];
 
   /**
-   * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-   * If a string is provided, the IconButton with the corresponding value will be selected.
-   * If a number is provided, the IconButton with the corresponding index will be selected.
+   * The value or index of the Button that the SegmentedControl should be toggled on to.
+   * If a string is provided, the Button with the corresponding value will be selected.
+   * If a number is provided, the Button with the corresponding index will be selected.
    * @default 0
    */
   value?: string | number;
@@ -26,54 +26,6 @@ export interface SegmentedControlProps {
   onChange?: (value: string | number) => void;
 }
 
-const SegmentedControlContainer = styled('div')(
-  {
-    '& button': {
-      borderRadius: borderRadius.zero,
-      border: `1px solid ${colors.soap500}`,
-      borderLeft: 'none',
-      '&[aria-pressed="true"]': {
-        borderColor: colors.blueberry400,
-        '&:hover, &:focus:hover': {
-          background: colors.blueberry400,
-        },
-      },
-      '&:first-of-type': {
-        borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-        borderLeft: `1px solid ${colors.soap500}`,
-      },
-      '&:last-of-type': {
-        borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-      },
-      '&:focus': {
-        borderRadius: borderRadius.m,
-        zIndex: 1,
-        animation: 'none', // reset focusRing animation
-        transition: 'all 120ms, border-radius 1ms',
-        ...mouseFocusBehavior({
-          '&': {
-            borderRadius: borderRadius.zero,
-            '&:first-of-type': {
-              borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-            },
-            '&:last-of-type': {
-              borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-            },
-          },
-        }),
-      },
-    },
-  },
-  ({theme}) => ({
-    '& button[aria-pressed="true"]': {
-      borderColor: theme.canvas.palette.primary.main,
-      '&:hover, &:focus:hover': {
-        background: theme.canvas.palette.primary.main,
-      },
-    },
-  })
-);
-
 const onButtonClick = (
   existingOnClick: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined,
   onChange: ((value: string | number) => void) | undefined,
@@ -94,28 +46,37 @@ const onButtonClick = (
   }
 };
 
-const SegmentedControl = ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps) => (
-  <SegmentedControlContainer {...elemProps}>
-    {React.Children.map(
-      children,
-      (
-        child: React.ReactElement<
-          IconButtonProps & {onClick?: React.MouseEventHandler<HTMLButtonElement>} // IconButton will have correct props
-        >,
-        index: number
-      ) => {
-        if (typeof child.type === typeof IconButton) {
-          return React.cloneElement(child, {
-            toggled: typeof value === 'number' ? index === value : child.props.value === value,
-            variant: 'squareFilled',
-            onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-          });
-        }
+export const SegmentedControl = createComponent('div')({
+  displayName: 'SegmentedControl',
+  Component: ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps, ref) => {
+    return (
+      <div {...elemProps}>
+        {React.Children.map(
+          children,
+          (
+            child: React.ReactElement<
+              SegmentedControlButtonProps & {
+                onClick?: React.MouseEventHandler<HTMLButtonElement>;
+              } & React.HTMLAttributes<HTMLButtonElement> // segmented control button will have correct props
+            >,
+            index: number
+          ) => {
+            if (typeof child.type === typeof SegmentedControlButton) {
+              return React.cloneElement(child, {
+                toggled: typeof value === 'number' ? index === value : child.props.value === value,
+                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
+              });
+            }
 
-        return child;
-      }
-    )}
-  </SegmentedControlContainer>
-);
+            return child;
+          }
+        )}
+      </div>
+    );
+  },
+  subComponents: {
+    Button: SegmentedControlButton,
+  },
+});
 
 export default SegmentedControl;

package/segmented-control/lib/SegmentedControlButton.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
+import {
+  createComponent,
+  mouseFocusBehavior,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {colors, borderRadius, space} from '@workday/canvas-kit-react/tokens';
+
+const getIconButtonColors = (toggled?: boolean): ButtonColors => {
+  return {
+    default: {
+      background: toggled ? colors.blueberry400 : colors.soap200,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
+    },
+    hover: {
+      background: toggled ? colors.blueberry400 : colors.soap300,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    active: {
+      background: toggled ? colors.blueberry400 : colors.soap500,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    focus: {
+      background: toggled ? colors.blueberry400 : undefined,
+      icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+    },
+    disabled: {
+      background: toggled ? colors.soap100 : colors.soap100,
+      icon: colors.soap600,
+      opacity: '1',
+    },
+  };
+};
+
+const StyledButton = styled(BaseButton)<StyledType>(
+  {
+    borderRadius: borderRadius.zero,
+    border: `1px solid ${colors.soap500}`,
+    borderLeft: 'none',
+    minWidth: space.xl,
+    '&:first-of-type': {
+      borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+      borderLeft: `1px solid ${colors.soap500}`,
+    },
+    '&:last-of-type': {
+      borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+    },
+    '&[aria-pressed="true"]': {
+      borderColor: `${colors.blueberry400} !important`,
+      '&:hover, &:focus:hover': {
+        background: colors.blueberry400,
+      },
+    },
+    '&:focus': {
+      borderRadius: borderRadius.m,
+      zIndex: 1,
+      animation: 'none', // reset focusRing animation
+      transition: 'all 120ms, border-radius 1ms',
+      ...mouseFocusBehavior({
+        '&': {
+          borderRadius: borderRadius.zero,
+          '&:first-of-type': {
+            borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
+          },
+          '&:last-of-type': {
+            borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
+          },
+        },
+      }),
+    },
+  },
+  ({theme}) => ({
+    '[aria-pressed="true"]': {
+      borderColor: theme.canvas.palette.primary.main,
+      '&:hover, &:focus:hover': {
+        background: theme.canvas.palette.primary.main,
+      },
+    },
+  })
+);
+
+export interface SegmentedControlButtonProps {
+  toggled?: boolean;
+  icon: CanvasSystemIcon;
+  value?: string | number;
+}
+
+export const SegmentedControlButton = createComponent('button')({
+  displayName: 'Button',
+  Component: ({value, icon, toggled, ...props}: SegmentedControlButtonProps, ref, Element) => {
+    console.warn(props);
+    return (
+      <StyledButton
+        as={Element}
+        aria-pressed={toggled}
+        value={value}
+        colors={getIconButtonColors(toggled)}
+        fillIcon={toggled}
+        ref={ref}
+        {...props}
+      >
+        <BaseButton.Icon size="large" icon={icon} />
+      </StyledButton>
+    );
+  },
+});

package/side-panel/README.md

@@ -15,7 +15,7 @@ yarn add @workday/canvas-kit-react
 
 ```tsx
 import * as React from 'react';
-import {SecondaryButton, IconButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import SidePanel from '@workday/canvas-kit-react/side-panel';
 
 interface SidePanelState {
@@ -41,9 +41,9 @@ class SidePanelExample extends React.Component<{}, SidePanelState> {
         {open ? (
           <SecondaryButton variant="primary">Add New</SecondaryButton>
         ) : (
-          <IconButton size="small" variant="filled">
+          <TertiaryButton size="small" variant="filled">
             <SystemIcon icon={plusIcon} />
-          </IconButton>
+          </TertiaryButton>
         )}
         <ul>
           <li css={listItemStyles}>{open && <span>Home</span>}</li>

package/side-panel/lib/SidePanel.tsx

@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle';
 
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {colors, space, type, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {chevronLeftIcon, chevronRightIcon} from '@workday/canvas-system-icons-web';
 
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -141,7 +141,9 @@ const ChildrenContainer = styled('div')<Pick<SidePanelProps, 'openWidth' | 'open
   })
 );
 
-const ToggleButton = styled(IconButton)<IconButtonProps & Pick<SidePanelProps, 'openDirection'>>(
+const ToggleButton = styled(TertiaryButton)<
+  TertiaryButtonProps & Pick<SidePanelProps, 'openDirection'>
+>(
   {
     position: 'absolute',
     bottom: space.s,
@@ -220,11 +222,8 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
             <ToggleButton
               openDirection={openDirection}
               aria-label={open ? closeNavigationAriaLabel : openNavigationAriaLabel}
-              toggled={false}
-              size="small"
               onClick={this.onToggleClick}
               icon={this.toggleButtonDirection(open, openDirection)}
-              variant="circleFilled"
             />
           )}
         </SidePanelFooter>

package/tabs/lib/TabsList.tsx

@@ -47,7 +47,7 @@ export const TabsList = createComponent('div')({
         as={Element}
         position="relative"
         borderBottom={`1px solid ${commonColors.divider}`}
-        marginX="m"
+        paddingX="m"
         spacing="xxxs"
         {...props}
       >

package/text-input/lib/InputIconContainer.tsx

@@ -5,7 +5,7 @@ import {space} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
 export interface InputIconContainerProps extends GrowthBehavior {
-  icon?: React.ReactElement<SystemIcon>;
+  icon?: React.ReactElement<typeof SystemIcon>;
 }
 
 const Container = styled('div')<InputIconContainerProps>(({grow}) => ({

package/toast/lib/Toast.tsx

@@ -92,6 +92,7 @@ export const Toast = createComponent('div')({
         as={Element}
         width={toastWidth}
         padding="s"
+        depth={5}
         role={isInteractive ? 'dialog' : 'status'}
         aria-live={isInteractive ? 'off' : 'polite'}
         aria-atomic={!isInteractive}

package/tokens/README.md

@@ -174,16 +174,19 @@ const buttonSyles = {
 
 ## Depth
 
-Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and priority with shadows and layering. There are five depth levels, `inset`, `1`, `2`, `3`, and `4`. Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and
+priority with shadows and layering. There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5`
+and `6`. `none` is a special value to remove depth styles. All other levels only apply box-shadow
+styles.
 
 ### Usage
 
 ```tsx
-import { depth } from '@workday/canvas-kit-react/tokens';
+import {depth} from '@workday/canvas-kit-react/tokens';
 
 const CustomCard = () => {
-  return <div css={depth[2]}>A standard-depth card</div>;
-}
+  return <div css={depth[1]}>A standard-depth card</div>;
+};
 ```
 
 ## Type
@@ -211,8 +214,8 @@ To use the Canvas Kit font
 
 Canvas Kit v5 introduced `rem` units (instead of `px`) to our type tokens. This update follows the
 guidance [from the WCAG spec](https://www.w3.org/TR/WCAG21/#resize-text) and provides better support
-for users who change their browser's default font size. If you'd like to learn more about `rem` and relative units, you can
-review this
+for users who change their browser's default font size. If you'd like to learn more about `rem` and
+relative units, you can review this
 [documentation](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems).
 
 > **Note:** We are using `16px` as our base font-size for these values. This is a browser standard
@@ -299,8 +302,8 @@ _Intended for standard body text_
 
 _Intended for small subtext content or in tight spaces_
 
-| Size     | Properties                                            |
-| -------- | ----------------------------------------------------- |
+| Size     | Properties                                                   |
+| -------- | ------------------------------------------------------------ |
 | `large`  | fontSize: `14px` (`0.875rem`), fontWeight: `regular` (`400`) |
 | `medium` | fontSize: `12px` (`0.75rem`), fontWeight: `regular` (`400`)  |
 | `small`  | fontSize: `10px` (`0.625rem`), fontWeight: `regular` (`400`) |