@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

package/tabs/lib/TabsItem.tsx

@@ -1,31 +1,32 @@
 import * as React from 'react';
 
+import {buttonStencil} from '@workday/canvas-kit-react/button';
+import {
+  isSelected,
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
 import {
-  focusRing,
-  slugify,
-  createElemPropsHook,
-  composeHooks,
-  ExtractProps,
   EllipsisText,
+  ExtractProps,
+  composeHooks,
+  createComponent,
+  createElemPropsHook,
   createSubcomponent,
+  focusRing,
+  slugify,
   useModalityType,
-  createComponent,
 } from '@workday/canvas-kit-react/common';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Box, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {
-  useListItemRegister,
-  useListItemRovingFocus,
-  isSelected,
-  useListItemSelect,
-  useOverflowListItemMeasure,
-} from '@workday/canvas-kit-react/collection';
 import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, component, system} from '@workday/canvas-tokens-web';
 
 import {useTabsModel} from './useTabsModel';
-import {buttonStencil} from '@workday/canvas-kit-react/button';
-import {system, brand} from '@workday/canvas-tokens-web';
+
 export interface TabsItemProps
   extends ExtractProps<typeof Box, never>,
     Partial<Pick<FlexProps, 'gap'>> {
@@ -83,75 +84,80 @@ export interface TabsItemProps
 
 const tabItemStencil = createStencil({
   base: {
-    ...system.type.subtext.large,
-    fontFamily: `${system.fontFamily.default}, Helvetica Neue, Helvetica, Arial, sans-serif`,
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
     fontWeight: system.fontWeight.medium,
     border: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: system.legacy.color.surface.transparent,
     flex: '0 0 auto',
-    minWidth: system.space.zero,
+    minWidth: 0,
     alignItems: 'center',
-    padding: `${system.space.x3} ${system.space.x4}`,
-    height: px2rem(52),
+    padding: `0 ${system.legacy.padding.md}`,
+    height: system.legacy.size.lg,
     cursor: 'pointer',
     color: system.color.fg.muted.default,
     position: 'relative',
-    borderRadius: `${system.space.x1} ${system.space.x1} ${system.space.zero} ${system.space.zero}`,
+    borderRadius: `${system.legacy.shape.md} ${system.legacy.shape.md} ${system.legacy.shape.none} ${system.legacy.shape.none}`,
     transition: 'background 150ms ease, color 150ms ease',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     [systemIconStencil.vars.color]: 'currentColor',
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
 
     '&:has(span)': {
       display: 'flex',
-      gap: system.space.x2,
+      gap: system.legacy.gap.sm,
     },
 
     '&:hover, &.hover, &:focus-visible, &.focus': {
-      backgroundColor: system.color.bg.alt.default,
-      color: system.color.fg.contrast.default,
-      [systemIconStencil.vars.color]: system.color.fg.contrast.default,
+      backgroundColor: system.legacy.color.surface.overlay.hover.default,
+      color: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
     },
 
     '&:focus-visible, &.focus': {
       // focus outline for Windows high contrast theme
       outline: `${px2rem(2)} solid transparent`,
       ...focusRing({inset: 'outer', width: 0, separation: 2}),
-      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
-      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: system.color.icon.strong,
+      [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
+      [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
+      color: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
     },
 
+    // Using opacity token applied to container to achieve disabled state instead of 'disabled" color tokens for
+    // icon and text colors
     '&:disabled, &.disabled, &[aria-disabled]': {
-      color: system.color.text.disabled,
-      [systemIconStencil.vars.color]: system.color.fg.disabled,
+      opacity: system.opacity.disabled,
       '&:hover': {
         cursor: 'auto',
-        backgroundColor: system.color.bg.transparent.default,
-        [systemIconStencil.vars.color]: system.color.fg.disabled,
+        backgroundColor: system.legacy.color.surface.transparent,
+        [systemIconStencil.vars.color]: system.color.fg.muted.default,
       },
     },
 
     '&[aria-selected=true]': {
-      color: brand.primary.base,
+      color: system.legacy.color.brand.fg.primary.default,
       cursor: 'default',
-      [systemIconStencil.vars.color]: brand.primary.base,
+      [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.default,
       '&:after': {
         position: 'absolute',
         // selected state for Windows high contrast theme
-        borderBottom: `${system.space.x1} solid transparent`,
-        borderRadius: `${system.shape.x1} ${system.shape.x1} ${system.shape.zero} ${system.shape.zero}`,
-        backgroundColor: brand.primary.base,
-        bottom: system.space.zero,
+        borderBottom: `${base.legacy.size50} solid transparent`,
+        borderRadius: `${system.legacy.shape.md} ${system.legacy.shape.md} ${system.legacy.shape.none} ${system.legacy.shape.none}`,
+        backgroundColor: system.legacy.color.brand.fg.primary.default,
+        bottom: 0,
         content: `''`,
-        left: system.space.zero,
-        marginBlockStart: `${calc.negate(calc.divide(system.space.x2, system.space.x1))}`,
+        left: 0,
+        marginBlockStart: `${calc.negate(calc.divide(system.legacy.padding.xs, system.legacy.padding.xxs))}`,
         width: '100%',
       },
       '&:hover, &.hover, &:focus-visible, &.focus': {
-        backgroundColor: system.color.bg.transparent.default,
-        color: brand.primary.base,
+        backgroundColor: system.legacy.color.surface.transparent,
+        color: system.legacy.color.brand.fg.primary.default,
       },
     },
   },

package/tabs/lib/TabsList.tsx

@@ -1,23 +1,23 @@
 import * as React from 'react';
 
 import {
+  useListRenderItems,
+  useListResetCursorOnBlur,
+  useOverflowListMeasure,
+} from '@workday/canvas-kit-react/collection';
+import {
+  ExtractProps,
   composeHooks,
-  createSubcomponent,
   createElemPropsHook,
-  ExtractProps,
-  useModalityType,
+  createSubcomponent,
   useLocalRef,
+  useModalityType,
 } from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {
-  useOverflowListMeasure,
-  useListRenderItems,
-  useListResetCursorOnBlur,
-} from '@workday/canvas-kit-react/collection';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useTabsModel} from './useTabsModel';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
   /**
@@ -58,10 +58,10 @@ function getScrollPosition(
   return percentage <= -1
     ? undefined
     : percentage > 0.99
-    ? 'end'
-    : percentage > 0.01
-    ? 'middle'
-    : 'start';
+      ? 'end'
+      : percentage > 0.01
+        ? 'middle'
+        : 'start';
 }
 
 function setScrollPosition(elem: HTMLDivElement, scrollPosition?: 'start' | 'middle' | 'end') {
@@ -72,35 +72,33 @@ function setScrollPosition(elem: HTMLDivElement, scrollPosition?: 'start' | 'mid
   }
 }
 
-export const useTabOverflowScroll = createElemPropsHook(useTabsModel)(
-  (
-    _model,
-    ref,
-    elemProps: {
-      'aria-orientation'?: 'vertical' | 'horizontal';
-    } = {}
-  ) => {
-    const direction = elemProps['aria-orientation'] || 'vertical';
+export const useTabOverflowScroll = createElemPropsHook(useTabsModel)((
+  _model,
+  ref,
+  elemProps: {
+    'aria-orientation'?: 'vertical' | 'horizontal';
+  } = {}
+) => {
+  const direction = elemProps['aria-orientation'] || 'vertical';
 
-    const {localRef, elementRef} = useLocalRef<HTMLDivElement>(ref as React.Ref<HTMLDivElement>);
+  const {localRef, elementRef} = useLocalRef<HTMLDivElement>(ref as React.Ref<HTMLDivElement>);
 
-    React.useLayoutEffect(() => {
-      if (!localRef.current) {
-        return;
-      }
+  React.useLayoutEffect(() => {
+    if (!localRef.current) {
+      return;
+    }
 
-      setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
-    }, [localRef, direction]);
+    setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
+  }, [localRef, direction]);
 
-    return {
-      ref: elementRef,
-      onScroll: (event: React.UIEvent<HTMLDivElement>) => {
-        const elem = event.currentTarget;
-        setScrollPosition(elem, getScrollPosition(elem, direction));
-      },
-    };
-  }
-);
+  return {
+    ref: elementRef,
+    onScroll: (event: React.UIEvent<HTMLDivElement>) => {
+      const elem = event.currentTarget;
+      setScrollPosition(elem, getScrollPosition(elem, direction));
+    },
+  };
+});
 
 export const useTabsList = composeHooks(
   useTabOverflowScroll,
@@ -118,15 +116,20 @@ export const tabsListStencil = createStencil({
   base: {
     display: 'flex',
     position: 'relative',
-    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
-    gap: system.space.x3,
-    paddingInline: system.space.x6,
+    borderBottom: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+    gap: system.legacy.gap.xs,
+    // TODO: update this to use a grid token if we make those available as tokens
+    paddingInline: base.legacy.size500,
+
+    '@media screen and (max-width: 768px)': {
+      paddingInline: system.legacy.padding.md,
+    },
   },
   modifiers: {
     modality: {
       touch: {
         overflowX: 'auto',
-        paddingInline: system.space.zero,
+        paddingInline: 0,
         // data attributes are needed until scroll-driven animations are supported. Once they are,
         // we can use a CSS-only solution:
         // https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/

package/tabs/lib/TabsMenuPopper.tsx

@@ -1,6 +1,7 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
+import {Popper, usePopupPopper} from '@workday/canvas-kit-react/popup';
+
 export interface TabsMenuPopperProps extends ExtractProps<typeof Popper> {}
 
 export const useTabsMenuPopper = usePopupPopper;

package/tabs/lib/TabsOverflowButton.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
 
-import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 import {
-  createElemPropsHook,
   composeHooks,
+  createElemPropsHook,
   createSubModelElemPropsHook,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
-
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {useMenuTarget} from '@workday/canvas-kit-react/menu';
-import {useTabsModel} from './useTabsModel';
-import {StyledTabItem} from './TabsItem';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
+
+import {StyledTabItem} from './TabsItem';
+import {useTabsModel} from './useTabsModel';
 
 export interface OverflowButtonProps {
   /**
@@ -28,7 +27,7 @@ const tabsOverflowButtonStencil = createStencil({
   base: {
     '&:has([data-part="tabs-overflow-button-icon"])': {
       display: 'flex',
-      gap: system.space.zero,
+      gap: 0,
     },
   },
 });

package/tabs/lib/TabsPanel.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React from 'react';
 
+import {ListRenderItemContext} from '@workday/canvas-kit-react/collection';
 import {
-  createSubcomponent,
-  useMountLayout,
-  createElemPropsHook,
   ExtractProps,
   StyledType,
+  createElemPropsHook,
+  createSubcomponent,
   slugify,
+  useMountLayout,
 } from '@workday/canvas-kit-react/common';
-import {ListRenderItemContext} from '@workday/canvas-kit-react/collection';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 import {useTabsModel} from './useTabsModel';
@@ -37,34 +37,36 @@ export interface TabPanelProps extends ExtractProps<typeof Box, never> {
 
 const StyledTabsPanel = styled(Box)<StyledType>();
 
-export const useTabsPanel = createElemPropsHook(useTabsModel)(
-  ({state, events}, _, elemProps: {'data-id'?: string} = {}) => {
-    const {item} = React.useContext(ListRenderItemContext);
-    const [localId, setLocalId] = React.useState(elemProps['data-id'] || item?.id || '');
+export const useTabsPanel = createElemPropsHook(useTabsModel)((
+  {state, events},
+  _,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const {item} = React.useContext(ListRenderItemContext);
+  const [localId, setLocalId] = React.useState(elemProps['data-id'] || item?.id || '');
 
-    useMountLayout(() => {
-      if (item) {
-        return;
-      }
-      const defaultId = state.panelIndexRef.current;
-      const itemId = localId || String(defaultId);
-      events.registerPanel({id: itemId, textValue: ''});
-      setLocalId(itemId);
+  useMountLayout(() => {
+    if (item) {
+      return;
+    }
+    const defaultId = state.panelIndexRef.current;
+    const itemId = localId || String(defaultId);
+    events.registerPanel({id: itemId, textValue: ''});
+    setLocalId(itemId);
 
-      return () => {
-        events.unregisterPanel({id: itemId});
-      };
-    });
-
-    return {
-      role: 'tabpanel' as const,
-      'aria-labelledby': slugify(`${state.id}-${localId}`),
-      hidden: !!localId && localId !== state.selectedIds[0],
-      id: slugify(`tabpanel-${state.id}-${localId}`),
-      tabIndex: 0 as const,
+    return () => {
+      events.unregisterPanel({id: itemId});
     };
-  }
-);
+  });
+
+  return {
+    role: 'tabpanel' as const,
+    'aria-labelledby': slugify(`${state.id}-${localId}`),
+    hidden: !!localId && localId !== state.selectedIds[0],
+    id: slugify(`tabpanel-${state.id}-${localId}`),
+    tabIndex: 0 as const,
+  };
+});
 
 export const TabsPanel = createSubcomponent('div')({
   displayName: 'Tabs.Panel',

package/tabs/lib/TabsPanels.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
 import {useTabsModel} from './useTabsModel';
 

package/tabs/lib/useTabsModel.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import {createModelHook, useModalityType} from '@workday/canvas-kit-react/common';
+
 import {
   defaultGetId,
   useListModel,
   useOverflowListModel,
 } from '@workday/canvas-kit-react/collection';
-
+import {createModelHook, useModalityType} from '@workday/canvas-kit-react/common';
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
 
 /**
  * The TabsModel extends the [Collection
- * System](/getting-started/for-developers/resources/collection-api/). Tabs have tab items and
+ * System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
  * panels. Tabs can be overflowed if there isn't enough room to render and will overflow to a
  * {@link MenuModel} sub-model.
  *
@@ -67,8 +67,8 @@ export const useTabsModel = createModelHook({
       initialSelectedIds: config.initialTab
         ? [config.initialTab]
         : config.items?.length
-        ? [getId(config.items![0])]
-        : [],
+          ? [getId(config.items![0])]
+          : [],
       shouldVirtualize: false,
     })
   );

package/testing/lib/ComponentStatesTable.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import {styled} from '@workday/canvas-kit-react/common';
+
 import {PropCombination, Props} from './propTypes';
 
 /**
@@ -28,14 +30,14 @@ export interface ComponentStatesTableProps {
 const Table = styled('table')({
   width: '100%',
   thead: {
-    textAlign: 'left',
-    paddingBottom: 16,
+    textAlign: 'start',
+    paddingBlockEnd: 16,
   },
   'td, th': {
     minWidth: 100,
-    paddingBottom: 16,
-    paddingRight: 16,
-    textAlign: 'left',
+    paddingBlockEnd: 16,
+    paddingInlineEnd: 16,
+    textAlign: 'start',
   },
 });
 

package/testing/lib/StaticStates.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
+
 import {
-  useTheme,
   CanvasProvider,
   EmotionCanvasTheme,
   PartialEmotionCanvasTheme,
   StyleRewriteFn,
+  useTheme,
 } from '@workday/canvas-kit-react/common';
 import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
@@ -30,14 +31,19 @@ export const convertToStaticStates: StyleRewriteFn = obj => {
   }, {} as CSSProperties);
 };
 
-export const StaticStates: React.FC<React.PropsWithChildren<
-  {theme?: PartialEmotionCanvasTheme} & React.HTMLAttributes<HTMLElement>
->> = ({children, theme, ...elemProps}) => {
+export const StaticStates: React.FC<
+  React.PropsWithChildren<
+    {
+      theme?: PartialEmotionCanvasTheme;
+      className?: React.HTMLAttributes<HTMLElement>['className'];
+    } & React.HTMLAttributes<HTMLElement>
+  >
+> = ({children, theme, className, ...elemProps}) => {
   const localTheme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn} = useTheme(theme);
   localTheme._styleRewriteFn = convertToStaticStates;
 
   return (
-    <CanvasProvider theme={localTheme} {...elemProps}>
+    <CanvasProvider theme={localTheme} className={className} {...elemProps}>
       {children}
     </CanvasProvider>
   );

package/text/lib/LabelText.tsx

@@ -1,7 +1,8 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {system} from '@workday/canvas-tokens-web';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {textStencil} from './Text';
 
 /**
@@ -30,20 +31,26 @@ export interface TypeLabelProps extends BoxProps {
 const labelTextStencil = createStencil({
   extends: textStencil,
   base: {
-    ...system.type.subtext.large,
-    color: system.color.text.default,
+    // ...system.legacy.type.subtext.lg,
+    // components do not support spreading for legacy type token
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    color: system.color.fg.default,
   },
   modifiers: {
     disabled: {
       true: {
         cursor: 'default',
-        color: system.color.text.disabled,
+        color: system.color.fg.disabled,
       },
     },
     variant: {
-      inverse: {color: system.color.text.inverse},
-      error: {color: system.color.text.critical.default},
-      hint: {color: system.color.text.hint},
+      inverse: {color: system.color.fg.inverse},
+      error: {color: system.legacy.color.brand.fg.critical.default},
+      hint: {color: system.color.fg.muted.default},
     },
   },
   compound: [
@@ -51,7 +58,7 @@ const labelTextStencil = createStencil({
       modifiers: {variant: 'inverse', disabled: true},
       styles: {
         opacity: system.opacity.disabled,
-        color: system.color.text.inverse,
+        color: system.color.fg.inverse,
       },
     },
   ],