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

package/side-panel/lib/useSidePanelModel.ts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
+/**
+ * The transition states of the SidePanel during expand/collapse animations.
+ * - `expanded`: Panel is fully expanded
+ * - `expanding`: Panel is animating from collapsed to expanded
+ * - `collapsed`: Panel is fully collapsed
+ * - `collapsing`: Panel is animating from expanded to collapsed
+ */
+export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
+
+export const useSidePanelModel = createModelHook({
+  defaultConfig: {
+    /**
+     * The initial transition state of the SidePanel.
+     * @default 'expanded'
+     */
+    initialTransitionState: 'expanded' as SidePanelTransitionStates,
+    /**
+     * Which side the SidePanel originates from. Uses logical properties for RTL support.
+     * - `start`: Left side in LTR, right side in RTL
+     * - `end`: Right side in LTR, left side in RTL
+     * @default 'start'
+     */
+    origin: 'start' as 'start' | 'end',
+    /**
+     * The unique ID for the panel element. If not provided, a unique ID will be generated.
+     * This ID is used for the `aria-controls` attribute on the toggle button.
+     */
+    panelId: '',
+    /**
+     * The unique ID for the panel's label element. If not provided, a unique ID will be generated.
+     * This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
+     */
+    labelId: '',
+    /**
+     * Callback fired when the SidePanel's transition state changes.
+     * Use this to react to state changes including animation states.
+     * @param state The new transition state
+     */
+    onStateTransition(state: SidePanelTransitionStates) {
+      // no-op by default
+    },
+  },
+})(config => {
+  const panelId = useUniqueId(config.panelId);
+  const labelId = useUniqueId(config.labelId);
+  const [transitionState, setTransitionStateInternal] = React.useState<SidePanelTransitionStates>(
+    config.initialTransitionState
+  );
+
+  // Wrap setTransitionState to call the onStateTransition callback
+  const setTransitionState = React.useCallback(
+    (newState: SidePanelTransitionStates) => {
+      setTransitionStateInternal(newState);
+      config.onStateTransition(newState);
+    },
+    [config]
+  );
+
+  const state = {
+    ...config,
+    /**
+     * The unique ID for the panel element. Used for `aria-controls` on the toggle button.
+     */
+    panelId,
+    /**
+     * The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
+     * and toggle button to provide an accessible name.
+     */
+    labelId,
+    /**
+     * The current transition state of the SidePanel. This tracks both the expanded/collapsed
+     * state and the animation states (expanding/collapsing).
+     */
+    transitionState,
+  };
+
+  const events = {
+    /**
+     * Expand the SidePanel. This sets the state directly to `expanded` without animation.
+     * For animated expansion, use the toggle button which triggers `setExpandingState`.
+     */
+    expand() {
+      setTransitionState('expanded');
+    },
+
+    /**
+     * Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
+     * For animated collapse, use the toggle button which triggers `setCollapsingState`.
+     */
+    collapse() {
+      setTransitionState('collapsed');
+    },
+
+    /**
+     * Handler for the CSS transition end event. This should be called when the width
+     * transition completes to finalize the state from `expanding` to `expanded` or
+     * from `collapsing` to `collapsed`.
+     */
+    handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>) {
+      if (event.propertyName === 'width') {
+        if (transitionState === 'expanding') {
+          setTransitionState('expanded');
+        } else if (transitionState === 'collapsing') {
+          setTransitionState('collapsed');
+        }
+      }
+      return event;
+    },
+
+    /**
+     * Triggers the start of a transition animation. This toggles between expanding
+     * and collapsing states based on the current state.
+     */
+    handleAnimationStart() {
+      if (transitionState === 'collapsed' || transitionState === 'collapsing') {
+        setTransitionState('expanding');
+      } else if (transitionState === 'expanded' || transitionState === 'expanding') {
+        setTransitionState('collapsing');
+      }
+      return undefined;
+    },
+  };
+
+  return {state, events};
+});

package/skeleton/lib/parts/SkeletonHeader.tsx

@@ -1,13 +1,7 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {
-  createStencil,
-  handleCsProp,
-  px2rem,
-  cssVar,
-  calc,
-  CSProps,
-} from '@workday/canvas-kit-styling';
+import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+
 import {SkeletonShape} from './SkeletonShape';
 
 export interface SkeletonHeaderProps extends CSProps {
@@ -35,11 +29,11 @@ export const skeletonHeaderStencil = createStencil({
     backgroundColor: '',
   },
   base: ({width, backgroundColor, height}) => ({
-    backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
-    borderRadius: 0,
-    height: cssVar(height, calc.multiply(system.space.x1, 7)),
+    backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
+    borderRadius: system.legacy.shape.md,
+    height: cssVar(height, system.legacy.size.xs),
     width: width,
-    marginBottom: system.space.x4,
+    marginBottom: system.legacy.size.xxxs,
   }),
 });
 

package/skeleton/lib/parts/SkeletonShape.tsx

@@ -1,5 +1,5 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, CSProps, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface SkeletonShapeProps extends CSProps {
@@ -33,11 +33,11 @@ export const skeletonShapeStencil = createStencil({
     backgroundColor: '',
   },
   base: ({width, height, borderRadius, backgroundColor}) => ({
-    backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
-    borderRadius: cssVar(borderRadius, system.space.zero),
+    backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
+    borderRadius: cssVar(borderRadius, '0'),
     height: cssVar(height, '100%'),
     width: width,
-    marginBottom: system.space.x4,
+    marginBottom: system.legacy.size.xxxs,
   }),
 });
 

package/skeleton/lib/parts/SkeletonText.tsx

@@ -1,8 +1,8 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-export interface SkeletonTextProps {
+export interface SkeletonTextProps extends CSProps {
   /**
    * The number of "lines" that SkeletonText will display. If there is more than one line, the last line will have a width of `60%`.
    * @default 2
@@ -20,12 +20,13 @@ export const skeletonTextStencil = createStencil({
     backgroundColor: '',
   },
   base: ({backgroundColor}) => ({
-    marginBottom: system.space.x6,
+    marginBottom: system.legacy.size.xs,
     '& [data-part="skeleton-text-lines"]': {
-      backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
-      height: px2rem(21),
-      marginBlockEnd: system.space.x3,
-      borderRadius: system.shape.half,
+      backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
+      height: system.legacy.size.xxxs,
+      // We do not have a `gap` token for 0.75rem so `padding` is being used here
+      marginBlockEnd: system.legacy.padding.sm,
+      borderRadius: system.legacy.shape.md,
       width: '100%',
     },
     '& [data-part="skeleton-text-lines"]:last-child': {

package/status-indicator/lib/StatusIndicator.tsx

@@ -1,9 +1,10 @@
+import styled from '@emotion/styled';
 import * as React from 'react';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
+
 import {GenericStyle, PickRequired} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, type, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
-import styled from '@emotion/styled';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {CSSProperties, borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
+import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
 
 /**
  * @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.
@@ -182,13 +183,7 @@ export class StatusIndicator extends React.Component<StatusIndicatorProps> {
     return (
       <Container type={type} emphasis={emphasis} maxWidth={maxWidth} {...elemProps}>
         {icon && (
-          <SystemIcon
-            colorHover={variant.color}
-            color={variant.color}
-            icon={icon}
-            size={14}
-            style={{paddingRight: space.xxxs}}
-          />
+          <SystemIcon color={variant.color} icon={icon} size={14} cs={{paddingRight: space.xxxs}} />
         )}
         <StatusLabel>{label}</StatusLabel>
       </Container>

package/switch/lib/Switch.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
-import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
+
+import {ErrorType, createComponent, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '../../layout';
+import {base, system} from '@workday/canvas-tokens-web';
 
+/**
+ * @deprecated ⚠️ `SwitchProps` in Main has been deprecated in v15 and will be removed in a future major version. Please use [`Switch` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs) instead.
+ */
 export interface SwitchProps {
   /**
    * If true, set the Switch to the on state.
@@ -37,8 +41,8 @@ export interface SwitchProps {
 const switchContainerStencil = createStencil({
   base: {
     position: 'relative',
-    height: system.space.x6,
-    width: system.space.x8,
+    height: system.legacy.size.xs,
+    width: system.legacy.size.sm,
   },
 });
 
@@ -57,16 +61,14 @@ const switchInputStencil = createStencil({
   base: {
     display: 'flex',
     position: 'absolute',
-    height: system.space.x6,
-    width: system.space.x8,
-    margin: system.space.zero,
-    marginLeft: system.space.x1,
-    borderRadius: system.shape.round,
+    height: system.legacy.size.xs,
+    width: system.legacy.size.sm,
+    borderRadius: system.legacy.shape.full,
     opacity: '0',
     cursor: 'pointer',
     '&:checked, &.checked': {
       '& ~ div:first-of-type': {
-        backgroundColor: brand.primary.base,
+        backgroundColor: system.legacy.color.brand.accent.primary,
       },
       '&:disabled, &.disabled': {
         '& ~ div:first-of-type': {
@@ -92,17 +94,17 @@ const switchInputStencil = createStencil({
       error: {
         '& ~ div:first-of-type': {
           boxShadow: `
-              0 0 0 ${px2rem(2)} ${system.color.border.inverse},
-              0 0 0 ${system.space.x1} ${brand.common.errorInner},
+              0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse},
+              0 0 0 ${px2rem(4)} ${system.legacy.color.brand.focus.critical},
               0 0 0 ${px2rem(5)} transparent`,
         },
       },
       caution: {
         '& ~ div:first-of-type': {
           boxShadow: `
-          0 0 0 ${px2rem(2)} ${system.color.border.inverse},
-          0 0 0 ${system.space.x1} ${brand.common.alertInner},
-          0 0 0 ${px2rem(5)} ${brand.common.alertOuter}`,
+          0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse},
+          0 0 0 ${px2rem(4)} ${system.legacy.color.brand.focus.caution.inner},
+          0 0 0 ${px2rem(5)} ${system.legacy.color.brand.border.caution}`,
         },
       },
     },
@@ -122,13 +124,13 @@ const switchBackgroundStencil = createStencil({
     display: 'flex',
     alignItems: 'center',
     pointerEvents: 'none',
-    marginTop: system.space.x1,
-    width: system.space.x8,
-    height: system.space.x4,
-    borderRadius: system.shape.round,
-    padding: `${system.space.zero} ${px2rem(2)}`,
+    marginTop: system.legacy.gap.xs,
+    width: system.legacy.size.sm,
+    height: system.legacy.size.xxxs,
+    borderRadius: system.legacy.shape.full,
+    padding: `0 ${px2rem(2)}`,
     transition: 'background-color 200ms ease',
-    backgroundColor: system.color.bg.muted.soft,
+    backgroundColor: system.legacy.color.accent.muted.soft,
   },
 });
 
@@ -145,21 +147,21 @@ const SwitchBackground = createComponent('div')({
 
 const switchCircleStencil = createStencil({
   base: {
-    width: system.space.x3,
-    height: system.space.x3,
-    borderRadius: system.shape.round,
+    width: base.legacy.size150,
+    height: base.legacy.size150,
+    borderRadius: system.legacy.shape.full,
     boxShadow: system.depth[1],
     transition: 'transform 150ms ease',
     pointerEvents: 'none',
-    backgroundColor: brand.primary.accent,
-    transform: `translateX(${system.space.zero})`,
+    backgroundColor: system.color.fg.inverse,
+    transform: `translateX(0)`,
   },
   modifiers: {
     checked: {
       true: {
-        transform: `translateX(${system.space.x4})`,
+        transform: `translateX(${system.legacy.size.xxxs})`,
         ':dir(rtl)': {
-          transform: `translateX(${calc.negate(system.space.x4)})`,
+          transform: `translateX(${calc.negate(system.legacy.size.xxxs)})`,
         },
       },
     },
@@ -173,6 +175,9 @@ const SwitchCircle = createComponent('div')<Pick<SwitchProps, 'checked'>>({
   },
 });
 
+/**
+ * @deprecated ⚠️ `Switch` in Main has been deprecated in v15 and will be removed in a future major version. Please use [`Switch` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs) instead.
+ */
 export const Switch = createComponent('input')({
   displayName: 'Switch',
   Component: (

package/table/lib/BaseTable.tsx

@@ -1,24 +1,31 @@
-import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {BaseTableHead} from './parts/BaseTableHead';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {BaseTableBody} from './parts/BaseTableBody';
-import {BaseTableRow} from './parts/BaseTableRow';
-import {BaseTableHeader} from './parts/BaseTableHeader';
+import {BaseTableCaption} from './parts/BaseTableCaption';
 import {BaseTableCell} from './parts/BaseTableCell';
 import {BaseTableFooter} from './parts/BaseTableFooter';
-import {BaseTableCaption} from './parts/BaseTableCaption';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {BaseTableHead} from './parts/BaseTableHead';
+import {BaseTableHeader} from './parts/BaseTableHeader';
+import {BaseTableRow} from './parts/BaseTableRow';
 
 export interface BaseTableProps extends Omit<BoxProps, 'ref'> {}
 
 export const baseTableStencil = createStencil({
   base: {
-    ...system.type.subtext.large,
-    border: `${px2rem(1)} solid ${system.color.border.container}`,
-    borderRadius: system.shape.x2,
+    // ...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,
+    border: `${px2rem(1)} solid ${system.legacy.color.border.strong}`,
+    borderRadius: system.legacy.shape.md,
     overflow: 'auto',
-    color: system.color.text.default,
+    color: system.color.fg.default,
   },
 });
 

package/table/lib/Table.tsx

@@ -1,14 +1,15 @@
-import {GridProps, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {baseTableStencil} from './BaseTable';
-import {TableRow} from './parts/css-grid-table/TableRow';
+import {FlexProps, GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {baseTableStencil} from './BaseTable';
 import {baseTableBodyStencil} from './parts/BaseTableBody';
 import {baseTableCaptionStencil} from './parts/BaseTableCaption';
 import {baseTableCellStencil} from './parts/BaseTableCell';
 import {baseTableHeadStencil} from './parts/BaseTableHead';
 import {baseTableHeaderStencil} from './parts/BaseTableHeader';
-import {system} from '@workday/canvas-tokens-web';
+import {TableRow} from './parts/css-grid-table/TableRow';
 
 export interface TableProps extends GridProps {}
 

package/table/lib/parts/BaseTableBody.tsx

@@ -1,5 +1,5 @@
-import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
 
 export const baseTableBodyStencil = createStencil({

package/table/lib/parts/BaseTableCaption.tsx

@@ -1,11 +1,11 @@
-import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export const baseTableCaptionStencil = createStencil({
   base: {
-    padding: `${system.space.x2} ${system.space.x4}`,
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,
   },
 });
 

package/table/lib/parts/BaseTableCell.tsx

@@ -1,5 +1,5 @@
-import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -7,11 +7,11 @@ export const baseTableCellStencil = createStencil({
   base: {
     alignItems: 'center',
     backgroundColor: system.color.bg.default,
-    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
+    borderBottom: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     gridTemplateColumns: '1fr',
     justifyContent: 'start',
     minHeight: '3.5rem',
-    padding: `${system.space.x2} ${system.space.x4}`,
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,
     wordBreak: 'break-word',
   },
 });

package/table/lib/parts/BaseTableHead.tsx

@@ -1,12 +1,12 @@
-import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {calc, createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export const baseTableHeadStencil = createStencil({
   base: {
-    backgroundColor: system.color.bg.alt.softer,
-    minHeight: calc.subtract(system.space.x16, system.space.x4),
+    backgroundColor: system.legacy.color.surface.raised,
+    minHeight: calc.subtract(system.legacy.size.xxl, system.legacy.size.xxxs),
     'th ': {
       '&:first-of-type': {
         borderInlineStart: 'none',

package/table/lib/parts/BaseTableHeader.tsx

@@ -1,15 +1,15 @@
-import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export const baseTableHeaderStencil = createStencil({
   base: {
     backgroundColor: system.color.bg.default,
-    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
+    borderBottom: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     justifyContent: 'start',
-    minHeight: calc.subtract(system.space.x16, system.space.x2),
-    padding: `${system.space.x2} ${system.space.x4}`,
+    minHeight: calc.subtract(system.legacy.size.xxl, base.legacy.size100),
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,
     wordBreak: 'break-word',
     fontWeight: system.fontWeight.medium,
   },

package/table/lib/parts/css-grid-table/TableRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, createVars} from '@workday/canvas-kit-styling';
 
 const tableRowChildrenVars = createVars('cellNumber');

package/tabs/lib/Tabs.tsx

@@ -5,11 +5,11 @@ import {Menu} from '@workday/canvas-kit-react/menu';
 
 import {TabsItem} from './TabsItem';
 import {TabsList} from './TabsList';
-import {TabsPanel} from './TabsPanel';
-import {useTabsModel} from './useTabsModel';
-import {TabsOverflowButton} from './TabsOverflowButton';
 import {TabsMenuPopper} from './TabsMenuPopper';
+import {TabsOverflowButton} from './TabsOverflowButton';
+import {TabsPanel} from './TabsPanel';
 import {TabsPanels} from './TabsPanels';
+import {useTabsModel} from './useTabsModel';
 
 // use `T = any` here because there's no way to pass generics to a compound component...
 export interface TabsProps {
@@ -42,7 +42,7 @@ export interface TabsProps {
  * ```
  *
  * See [Configuring a
- * Model](/getting-started/for-developers/resources/compound-components/#configuring-a-model) for
+ * Model](/get-started/for-developers/documentation/compound-components/#configuring-a-model) for
  * more information on model configuration.
  */
 export const Tabs = createContainer()({