@workday/canvas-kit-preview-react 13.0.0-alpha.996-next.0 → 13.0.0

package/pill/lib/PillCount.tsx

@@ -1,39 +1,44 @@
-import React from 'react';
-
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface PillCountProps extends FlexProps {}
 
-const StyledCountContainer = styled(Flex.as('span'))<StyledType>({
-  borderTopLeftRadius: borderRadius.zero,
-  borderTopRightRadius: borderRadius.m,
-  borderBottomLeftRadius: borderRadius.zero,
-  borderBottomRightRadius: borderRadius.m,
+export const pillCountStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+    borderColor: '',
+  },
+  base: ({backgroundColor, borderColor}) => ({
+    borderStartStartRadius: system.shape.zero,
+    borderStartEndRadius: system.shape.x1,
+    borderEndStartRadius: system.shape.zero,
+    borderEndEndRadius: system.shape.x1,
+    borderWidth: px2rem(1),
+    borderInlineStartWidth: system.space.zero,
+    borderStyle: 'solid',
+    borderColor: cssVar(borderColor, system.color.border.transparent),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: px2rem(22),
+    width: system.space.x6,
+    padding: `${system.space.zero} ${system.space.x1}`,
+    marginInlineEnd: calc.negate(system.space.x2),
+    marginInlineStart: system.space.x1,
+    backgroundColor: cssVar(backgroundColor, system.color.bg.alt.stronger),
+    flex: '0 0 auto',
+  }),
 });
 
 export const PillCount = createComponent('span')({
-  displayName: 'Pill.Avatar',
+  displayName: 'Pill.Count',
   Component: ({children, ...elemProps}: PillCountProps, ref, Element) => {
     return (
-      <StyledCountContainer
-        display="inline-flex"
-        alignItems="center"
-        justifyContent="center"
-        as={Element}
-        height={22}
-        minWidth={22}
-        padding={`0  ${space.xxxs}`}
-        marginInlineEnd={`-${space.xxs}`} // Remove excess margin at the end
-        marginInlineStart={`${space.xxxs}`}
-        backgroundColor={colors.soap500}
-        data-count="ck-pill-count"
-        ref={ref}
-        {...elemProps}
-      >
+      <Element ref={ref} {...mergeStyles(elemProps, pillCountStencil())}>
         {children}
-      </StyledCountContainer>
+      </Element>
     );
   },
 });

package/pill/lib/PillIcon.tsx

@@ -1,34 +1,32 @@
-import React from 'react';
-
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
-import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {usePillModel} from './usePillModel';
 import {plusIcon} from '@workday/canvas-system-icons-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+export interface PillIconProps extends Partial<SystemIconProps> {}
 
-export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
-  /**
-   * The system icon rendered by the component
-   * @default `plusIcon`
-   */
-  icon?: CanvasSystemIcon;
-}
+export const pillIconStencil = createStencil({
+  extends: systemIconStencil,
+  base: {
+    marginInlineStart: calc.negate(system.space.x1),
+    [systemIconStencil.vars.size]: px2rem(20),
+    flex: '0 0 auto',
+  },
+});
 
 export const PillIcon = createSubcomponent('span')({
   modelHook: usePillModel,
-})<PillIconProps>(({size, icon, ...elemProps}, Element) => {
+})<PillIconProps>(({icon, ...elemProps}, Element) => {
   return (
     <SystemIcon
-      marginInlineStart={`-${space.xxxs}`} // remove excess margin from the start
-      display="flex"
       as={Element}
-      size={20}
       role="img"
-      aria-label="add"
       icon={icon || plusIcon}
-      {...elemProps}
+      {...mergeStyles(elemProps, pillIconStencil())}
     />
   );
 });

package/pill/lib/PillIconButton.tsx

@@ -1,102 +1,78 @@
-import React from 'react';
-
-import {focusRing, styled, StyledType, createSubcomponent} from '@workday/canvas-kit-react/common';
-
-import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {focusRing, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {usePillModel} from './usePillModel';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
+import {buttonStencil} from '@workday/canvas-kit-react/button';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
-export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
-  /**
-   * The system icon rendered by the button
-   * @default `xSmallIcon`
-   */
-  icon?: CanvasSystemIcon;
+export interface PillIconButtonProps extends Partial<SystemIconProps> {
   /**
-   * The aria label for the removable icon
-   * @default 'remove'
+   * The aria label for the removable icon. You must provide a valid string to represent the action.
    */
   'aria-label'?: string;
 }
 
-const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
-  marginInlineEnd: '-7px', // visually pull in the pill to the right size
-  marginInlineStart: `-2px`, // visually create space between label and the button
-  overflow: 'visible',
-  [buttonStencil.vars.background]: colors.soap300,
-  [buttonStencil.vars.border]: 'transparent',
-  [buttonStencil.vars.label]: colors.blackPepper400,
-  '::after': {
-    content: '""',
-    height: space.l,
-    width: space.l,
-    position: 'absolute',
-    left: '-7px',
-    bottom: '-7px',
-    margin: 0,
-    pointerEvents: 'all',
-  },
-
-  '&:focus-visible, &.focus': {
-    ...focusRing({
-      innerColor: 'transparent',
-    }),
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: 'transparent',
-    [buttonStencil.vars.label]: colors.blackPepper400,
-  },
-
-  '&:hover, &.hover': {
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: 'transparent',
-    [buttonStencil.vars.label]: colors.blackPepper400,
-  },
-
-  '&:active, &.active': {
-    [buttonStencil.vars.background]: colors.soap500,
-    [buttonStencil.vars.border]: 'transparent',
-    [buttonStencil.vars.label]: colors.blackPepper400,
-  },
+export const pillIconButtonStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    marginInlineEnd: calc.negate(px2rem(7)), // visually pull in the pill to the right size  by -7px
+    marginInlineStart: calc.negate(px2rem(2)), // visually create space between label and the button by -2px
+    borderRadius: system.shape.half,
+    height: calc.add(system.space.x4, system.space.x1),
+    width: calc.add(system.space.x4, system.space.x1),
+    padding: system.space.zero,
+    overflow: 'visible',
+    flex: '0 0 auto',
+    [buttonStencil.vars.border]: system.color.border.transparent,
+    [buttonStencil.vars.background]: system.color.bg.alt.soft,
+    [systemIconStencil.vars.color]: system.color.icon.default,
+    [systemIconStencil.vars.size]: system.space.x6,
+    '::after': {
+      content: '""',
+      height: system.space.x8,
+      width: system.space.x8,
+      position: 'absolute',
+      left: calc.negate(px2rem(7)),
+      bottom: calc.negate(px2rem(7)),
+      margin: system.space.zero,
+      pointerEvents: 'all',
+    },
 
-  '&:disabled, &.disabled': {
-    [buttonStencil.vars.background]: colors.soap100,
-    [buttonStencil.vars.label]: colors.licorice100,
-    [buttonStencil.vars.border]: 'transparent',
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      ...focusRing({
+        innerColor: system.color.border.transparent,
+      }),
+    },
+    '&:hover, &.hover': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+    },
   },
 });
 
 export const PillIconButton = createSubcomponent('button')({
   modelHook: usePillModel,
 })<PillIconButtonProps>(
-  (
-    {size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps},
-    Element,
-    model
-  ) => {
+  ({size, icon, children, 'aria-label': ariaLabel = '', ...elemProps}, Element, model) => {
     return (
-      <StyledIconButton
-        borderRadius="s"
-        height={20}
-        width={20}
-        padding="zero"
+      <Element
         disabled={model.state.disabled}
         aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
-        as={Element}
-        position="relative"
-        {...elemProps}
+        {...mergeStyles(elemProps, pillIconButtonStencil())}
       >
         <SystemIcon
           aria-label={ariaLabel}
           id={`removable-${model.state.id}`}
-          icon={icon}
-          size={space.m}
+          icon={icon || xSmallIcon}
           aria-hidden // This works for Chrome but not needed in Safari
           role="img"
         />
-      </StyledIconButton>
+      </Element>
     );
   }
 );

package/pill/lib/PillLabel.tsx

@@ -1,36 +1,32 @@
-import React from 'react';
-
-import {createSubcomponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
 
 import {usePillModel} from './usePillModel';
-import {colors} from '@workday/canvas-kit-react/tokens';
+
+import {createStencil} from '@workday/canvas-kit-styling';
 
 export interface PillLabelProps extends BoxProps {
   tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
 }
-const StyledLabelContainer = styled(Box.as('span'))<StyledType>({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  display: 'block',
+
+export const pillLabelStencil = createStencil({
+  base: {
+    flexShrink: 1,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
 });
 
 export const PillLabel = createSubcomponent('span')({
   modelHook: usePillModel,
-})<PillLabelProps>(({tooltipProps, ...elemProps}, Element, model) => {
+})<PillLabelProps>(({tooltipProps, children, ...elemProps}, Element, model) => {
   return (
     <OverflowTooltip {...tooltipProps}>
-      <StyledLabelContainer
-        color={model.state.disabled ? colors.licorice100 : 'inherit'}
-        maxWidth={model.state.maxWidth}
-        as={Element}
-        id={`label-${model.state.id}`}
-        {...elemProps}
-      >
-        {elemProps.children}
-      </StyledLabelContainer>
+      <Element id={`label-${model.state.id}`} {...mergeStyles(elemProps, pillLabelStencil())}>
+        {children}
+      </Element>
     </OverflowTooltip>
   );
 });

package/pill/lib/usePillModel.tsx

@@ -3,12 +3,7 @@ import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 export const usePillModel = createModelHook({
   defaultConfig: {
     /**
-     * Determines the max width of the pill. If the pill text is longer than the max width,
-     * text will be truncated and a tooltip will show the rest of the content when hovered over
-     */
-    maxWidth: 200 as string | number,
-    /**
-     * Use to disable a pill.
+     * Used to disable a pill and apply the correct styles.
      */
     disabled: false,
     /**

package/radio/lib/RadioButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {useRadioModel} from './hooks/useRadioModel';
 import {RadioGroup} from './RadioGroup';

package/radio/lib/RadioGroup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {createContainer, Themeable, ErrorType} from '@workday/canvas-kit-react/common';
 import {useRadioModel} from './hooks/useRadioModel';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';

package/segmented-control/lib/hooks/useSegmentedControlModel.tsx

@@ -44,7 +44,7 @@ export const useSegmentedControlModel = createModelHook({
       items,
       onRegisterItem(data) {
         if (!initialSelectedRef.current) {
-          initialSelectedRef.current = getId(data.item);
+          initialSelectedRef.current = data.id;
           events.select({id: initialSelectedRef.current});
         }
       },

package/side-panel/lib/SidePanel.tsx

@@ -1,9 +1,7 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
 import * as React from 'react';
-import {createComponent, styled} from '@workday/canvas-kit-react/common';
-import {jsx, keyframes, CSSObject} from '@emotion/react';
-import {colors, depth} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 import {SidePanelContext} from './hooks';
 import {SidePanelToggleButton} from './SidePanelToggleButton';
 
@@ -61,44 +59,48 @@ export interface SidePanelProps {
    */
   touched: boolean;
   children?: React.ReactNode;
-  onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
-  onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+  onAnimationEnd?: React.TransitionEvent<HTMLElement>;
 }
 
-const createKeyframes = (from: number | string, to: number | string) => {
-  const normalized = {
-    from: typeof from === 'number' ? from + 'px' : from,
-    to: typeof to === 'number' ? to + 'px' : to,
-  };
-
-  return keyframes`
-    from {
-      width: ${normalized.from};
-      min-width: ${normalized.from};
-      max-width: ${normalized.from};
-    } to {
-      width: ${normalized.to};
-      min-width: ${normalized.to};
-      max-width: ${normalized.to};
-    }
-  `;
-};
-
-const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
-  alternate: {
-    backgroundColor: colors.frenchVanilla100,
-    ...depth[5],
+export const panelStencil = createStencil({
+  vars: {
+    expandedWidth: '',
+    collapsedWidth: '',
   },
-  standard: {
-    backgroundColor: colors.soap100,
+  base: () => ({
+    overflow: 'hidden',
+    position: 'relative',
+    height: '100%',
+    outline: `${px2rem(1)} solid transparent`,
+    transition: 'width ease-out 200ms, max-width ease-out 200ms',
+  }),
+  modifiers: {
+    variant: {
+      alternate: {
+        backgroundColor: system.color.bg.default,
+        boxShadow: system.depth[5],
+      },
+      standard: {
+        backgroundColor: system.color.bg.alt.softer,
+      },
+    },
+    expanded: {
+      true: ({expandedWidth}) => ({
+        width: expandedWidth,
+        maxWidth: expandedWidth,
+      }),
+      false: ({collapsedWidth}) => ({
+        width: collapsedWidth,
+        maxWidth: collapsedWidth,
+      }),
+    },
+    touched: {
+      true: {},
+      false: {
+        animation: 'none',
+      },
+    },
   },
-};
-
-const Panel = styled('section')({
-  overflow: 'hidden',
-  position: 'relative',
-  boxSizing: 'border-box',
-  height: '100%',
 });
 
 export const SidePanel = createComponent('section')({
@@ -110,7 +112,6 @@ export const SidePanel = createComponent('section')({
       expanded = true,
       expandedWidth = 320,
       onAnimationEnd,
-      onAnimationStart,
       onExpandedChange,
       onStateTransition,
       origin = 'left',
@@ -137,71 +138,50 @@ export const SidePanel = createComponent('section')({
       }
     }, [state, onStateTransition]);
 
-    const motion = {
-      collapse: createKeyframes(expandedWidth, collapsedWidth),
-      expand: createKeyframes(collapsedWidth, expandedWidth),
-    };
-
-    const handleAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
-      if (event.currentTarget === event.target) {
-        if (event.animationName === motion.collapse.name) {
-          setState('collapsed');
-        }
-
-        if (event.animationName === motion.expand.name) {
+    const handleAnimationEnd = (event: React.TransitionEvent<HTMLDivElement>) => {
+      if (event.propertyName === 'width') {
+        if (state === 'expanding') {
           setState('expanded');
+        } else if (state === 'collapsing') {
+          setState('collapsed');
         }
       }
-
-      if (typeof onAnimationEnd !== 'undefined') {
-        onAnimationEnd(event);
-      }
     };
 
-    const handleAnimationStart = (event: React.AnimationEvent<HTMLDivElement>) => {
-      if (event.currentTarget === event.target) {
-        if (
-          event.animationName === motion.collapse.name ||
-          event.animationName === motion.expand.name
-        ) {
-          setState(expanded ? 'expanding' : 'collapsing');
-        }
-      }
-
-      if (typeof onAnimationStart !== 'undefined') {
-        onAnimationStart(event);
+    const handleAnimationStart = () => {
+      if (state === 'collapsed' || state === 'collapsing') {
+        setState('expanding');
+      } else if (state === 'expanded' || state === 'expanding') {
+        setState('collapsing');
       }
+      return undefined;
     };
 
     return (
-      <Panel
+      <Element
         ref={ref}
-        as={Element}
-        css={[
-          {
-            width: expanded ? expandedWidth : collapsedWidth,
-            maxWidth: expanded ? expandedWidth : collapsedWidth,
-            // mounted.current will be false on the first render, thus you won't get an unwanted animation here
-            // Will animate again if you force a re-render (like in Storybook)
-            animation: touched
-              ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
-              : undefined,
-          },
-          containerVariantStyle[variant],
-        ]}
-        onAnimationEnd={handleAnimationEnd}
-        onAnimationStart={handleAnimationStart}
-        {...elemProps}
+        onTransitionEnd={handleAnimationEnd}
+        {...handleCsProp(elemProps, [
+          panelStencil({
+            expanded,
+            variant,
+            expandedWidth:
+              typeof expandedWidth === 'number' ? px2rem(expandedWidth) : expandedWidth,
+            collapsedWidth:
+              typeof collapsedWidth === 'number' ? px2rem(collapsedWidth) : collapsedWidth,
+          }),
+        ])}
       >
         <SidePanelContext.Provider
           value={{
             state,
             origin,
+            handleAnimationStart,
           }}
         >
           {children}
         </SidePanelContext.Provider>
-      </Panel>
+      </Element>
     );
   },
   subComponents: {