@workday/canvas-kit-preview-react 6.9.0-next.0 → 6.9.0-next.2

package/pill/lib/PillAvatar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Avatar, AvatarProps} from '@workday/canvas-kit-react/avatar';
+import {usePillModel} from './usePillModel';
+
+export interface PillAvatarProps extends AvatarProps {}
+
+// When the component is created, it needs to be a button element to match AvatarProps.
+// Once Avatar becomes a `createComponent` we can default the element type to a `div`
+// and the types should be properly extracted
+export const PillAvatar = createSubcomponent('button')({
+  modelHook: usePillModel,
+})<PillAvatarProps>((elemProps, Element, model) => {
+  return (
+    <Avatar
+      style={{opacity: model.state.disabled ? '.7' : '1'}}
+      as="div"
+      size={18}
+      altText={undefined}
+      {...elemProps}
+      disabled={model.state.disabled}
+    >
+      {elemProps.children}
+    </Avatar>
+  );
+});

package/pill/lib/PillCount.tsx

@@ -0,0 +1,39 @@
+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';
+
+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 PillCount = createComponent('span')({
+  displayName: 'Pill.Avatar',
+  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 padding from HStack on the right side
+        marginInlineStart={`${space.xxxs}`}
+        backgroundColor={colors.soap500}
+        data-count="ck-pill-count"
+        ref={ref}
+        {...elemProps}
+      >
+        {children}
+      </StyledCountContainer>
+    );
+  },
+});

package/pill/lib/PillIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {SystemIcon, SystemIconProps} 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';
+
+export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
+  /**
+   * The system icon rendered by the component
+   * @default `plusIcon`
+   */
+  icon?: CanvasSystemIcon;
+}
+
+export const PillIcon = createSubcomponent('span')({
+  modelHook: usePillModel,
+})<PillIconProps>(({size, icon, ...elemProps}, Element) => {
+  return (
+    <SystemIcon
+      marginInlineStart={`-${space.xxxs}`} // remove padding on the left from HStack
+      display="flex"
+      as={Element}
+      size={20}
+      role="img"
+      aria-label="add"
+      icon={icon || plusIcon}
+      {...elemProps}
+    />
+  );
+});

package/pill/lib/PillIconButton.tsx

@@ -0,0 +1,100 @@
+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 {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} from '@workday/canvas-kit-react/button';
+
+export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
+  /**
+   * The system icon rendered by the button
+   * @default `xSmallIcon`
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * The aria label for the removable icon
+   * @default 'remove'
+   */
+  'aria-label'?: string;
+}
+
+const getIconColors = () => {
+  return {
+    default: {
+      icon: colors.licorice200,
+    },
+
+    hover: {
+      icon: colors.licorice500,
+    },
+    active: {
+      icon: colors.licorice500,
+    },
+    focus: {
+      icon: colors.licorice500,
+
+      focusRing: focusRing({
+        innerColor: 'transparent',
+      }),
+    },
+    disabled: {
+      icon: colors.licorice100,
+      opacity: '1',
+    },
+  };
+};
+
+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',
+  '::after': {
+    content: '""',
+    height: space.l,
+    width: space.l,
+    position: 'absolute',
+    left: '-7px',
+    bottom: '-7px',
+    margin: 0,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+  },
+});
+
+export const PillIconButton = createSubcomponent('button')({
+  modelHook: usePillModel,
+})<PillIconButtonProps>(
+  (
+    {size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps},
+    Element,
+    model
+  ) => {
+    return (
+      <StyledIconButton
+        borderRadius="s"
+        height={20}
+        width={20}
+        padding="zero"
+        disabled={model.state.disabled}
+        colors={getIconColors()}
+        aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
+        as={Element}
+        position="relative"
+        {...elemProps}
+      >
+        <SystemIcon
+          aria-label={ariaLabel}
+          id={`removable-${model.state.id}`}
+          icon={icon}
+          size={space.m}
+          aria-hidden // This works for Chrome but not needed in Safari
+          role="img"
+        />
+      </StyledIconButton>
+    );
+  }
+);

package/pill/lib/PillLabel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {createSubcomponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} 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';
+
+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 PillLabel = createSubcomponent('span')({
+  modelHook: usePillModel,
+})<PillLabelProps>(({tooltipProps, ...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>
+    </OverflowTooltip>
+  );
+});

package/pill/lib/usePillModel.tsx

@@ -0,0 +1,28 @@
+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.
+     */
+    disabled: false,
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: '',
+  },
+})(config => {
+  const id = useUniqueId(config.id);
+  const state = {
+    ...config,
+    id,
+  };
+
+  return {state, events: {}};
+});

package/pill/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/pill",
+  "module": "../dist/es6/pill",
+  "sideEffects": false,
+  "types": "../dist/es6/pill"
+}

package/select/index.ts

@@ -4,4 +4,9 @@ export default Select;
 export {Select};
 export * from './lib/Select';
 
-export {Option, RenderableOption, RenderOptionFunction} from './lib/SelectBase';
+export {
+  Option,
+  RenderableOption,
+  RenderOptionFunction,
+  RenderSelectedFunction,
+} from './lib/SelectBase';

package/select/lib/Select.tsx

@@ -368,6 +368,7 @@ class SelectContainer extends React.Component<SelectContainerProps, SelectContai
     // (2) Either update the current value of buttonRef if it was a ref object,
     //     or call buttonRef with the underlying button element if it was a
     //     callback ref.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     this.forwardedButtonRef = useForkRef(props.buttonRef, this.localButtonRef);
   }
 

package/select/lib/SelectMenu.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useLayoutEffect, useCallback} from 'react';
 
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import {EmotionCanvasTheme, ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
 import {
   Placement,

package/select/lib/SelectOption.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import {
   EmotionCanvasTheme,
   ErrorType,

package/select/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/select",
   "module": "../dist/es6/select",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/select"
 }

package/side-panel/lib/SidePanel.tsx

@@ -1,10 +1,12 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
 import {styled, useIsRTL} from '@workday/canvas-kit-react/common';
-import {css, CSSObject, jsx, keyframes} from '@emotion/core';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {css, jsx, keyframes, CSSObject} from '@emotion/react';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
 import {transformationImportIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -54,7 +56,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   onStateTransition?: (state?: SidePanelTransitionStates) => void;
   /**
-   * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+   * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
    *
    * @default 'standard'
    */
@@ -89,7 +91,7 @@ const createKeyframes = (from: number | string, to: number | string) => {
 const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
   alternate: {
     backgroundColor: colors.frenchVanilla100,
-    ...depth[3],
+    ...depth[5],
   },
   standard: {
     backgroundColor: colors.soap100,
@@ -206,14 +208,27 @@ const SidePanel = ({
   );
 };
 
-export type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
+export type ToggleButtonProps = TertiaryButtonProps & {
+  /**
+   * The tooltip text to expand the side panel
+   * @default 'Expand'
+   */
+  tooltipTextExpand?: string;
+  /**
+   * The tooltip text to collapse the side panel
+   * @default 'Collapse'
+   */
+  tooltipTextCollapse?: string;
+};
 
 /**
  * A toggle button styled specifically for the side panel container.
  */
 const ToggleButton = ({
-  variant = 'plain',
+  variant = undefined,
   icon = transformationImportIcon,
+  tooltipTextExpand: expandLabel = 'Expand',
+  tooltipTextCollapse: collapseLabel = 'Collapse',
   ...rest
 }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const context = React.useContext(SidePanelContext);
@@ -234,17 +249,21 @@ const ToggleButton = ({
   const buttonStyle = css({
     position: 'absolute',
     top: space.m,
+    width: space.l,
     right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
     left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
-    margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for IconButton.Plain
+    margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for TertiaryButton.Plain
     transform:
       context.state === 'collapsed' || context.state === 'collapsing'
         ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
         : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
   });
 
-  // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
-  return <IconButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />;
+  return (
+    <Tooltip title={context.state === 'collapsed' ? expandLabel : collapseLabel} type="muted">
+      <TertiaryButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
+    </Tooltip>
+  );
 };
 
 SidePanel.ToggleButton = ToggleButton;

package/side-panel/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/side-panel",
   "module": "../dist/es6/side-panel",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/side-panel"
 }

package/text-area/lib/TextArea.tsx

@@ -1,47 +1,33 @@
 import React from 'react';
 
-import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {
-  FormField,
-  FormFieldModelContext,
-  useFormFieldOrientation,
-} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-labs-react/layout';
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
+import {Stack} from '@workday/canvas-kit-react/layout';
 
-import {TextAreaModel, useTextAreaModel} from './hooks';
+import {useTextAreaModel} from './hooks';
 import {TextAreaField} from './TextAreaField';
-import {TextAreaLabel} from './TextAreaLabel';
-import {TextAreaHint} from './TextAreaHint';
-
-export const TextAreaModelContext = FormFieldModelContext;
 
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
-  model?: TextAreaModel;
   /**
    * Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
    */
   children: React.ReactNode;
 }
 
-export const TextArea = createComponent()({
+export const TextArea = createContainer('div')({
   displayName: 'TextArea',
-  Component: ({children, model, orientation, ...props}: TextAreaProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props;
-    const value = useDefaultModel(model, {hasError, id, isRequired}, useTextAreaModel);
-
-    const layoutProps = useFormFieldOrientation(orientation);
-
-    return (
-      <TextAreaModelContext.Provider value={value}>
-        <Stack ref={ref} {...layoutProps} {...elemProps}>
-          {children}
-        </Stack>
-      </TextAreaModelContext.Provider>
-    );
-  },
+  modelHook: useTextAreaModel,
   subComponents: {
     Field: TextAreaField,
-    Label: TextAreaLabel,
-    Hint: TextAreaHint,
+    Label: FormField.Label,
+    Hint: FormField.Hint,
   },
+})<TextAreaProps>(({children, orientation, ...elemProps}, Element) => {
+  const layoutProps = useFormFieldOrientation(orientation);
+
+  return (
+    <Stack as={Element} {...layoutProps} {...elemProps}>
+      {children}
+    </Stack>
+  );
 });

package/text-area/lib/TextAreaField.tsx

@@ -1,5 +1,6 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
-import {jsx} from '@emotion/core';
+import {jsx} from '@emotion/react';
 
 import {
   borderRadius,
@@ -8,21 +9,10 @@ import {
   spaceNumbers,
   type,
 } from '@workday/canvas-kit-react/tokens';
-import {
-  createComponent,
-  ExtractProps,
-  useModelContext,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-import {TextAreaModelContext} from './TextArea';
-import {TextAreaModel} from './hooks';
-
-export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
-  model?: TextAreaModel;
-}
+import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
 
 const baseStyles: CSSProperties = {
   ...type.levels.subtext.large,
@@ -50,38 +40,35 @@ const baseStyles: CSSProperties = {
   },
 };
 
-export const TextAreaField = createComponent('textarea')({
+export const TextAreaField = createSubcomponent('textarea')({
   displayName: 'TextArea.Field',
-  Component: ({model, ...elemProps}: TextAreaFieldProps, ref) => {
-    const localModel = useModelContext(TextAreaModelContext, model);
+  modelHook: useTextInputModel,
+})<ExtractProps<typeof FormField.Input, never>>(({...elemProps}, Element, model) => {
+  const theme = useTheme();
+  const errorRing = useThemedRing('error');
 
-    const theme = useTheme();
-    const errorRing = useThemedRing('error');
+  const focusStyles = model.state.hasError
+    ? errorRing
+    : {
+        '&:focus:not([disabled])': {
+          borderColor: theme.canvas.palette.common.focusOutline,
+          boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
+        },
+      };
 
-    const focusStyles = localModel.state.hasError
-      ? errorRing
-      : {
-          '&:focus:not([disabled])': {
-            borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-          },
-        };
-
-    return (
-      <FormField.Input
-        as="textarea"
-        ref={ref}
-        css={[baseStyles, focusStyles]}
-        {...elemProps}
-        border={`1px solid ${inputColors.border}`}
-        display="block"
-        backgroundColor={inputColors.background}
-        borderRadius={borderRadius.m}
-        minHeight={64}
-        minWidth={280}
-        padding={spaceNumbers.xxs} // Compensate for border
-        margin={0} // Fix Safari
-      />
-    );
-  },
+  return (
+    <FormField.Input
+      as={Element}
+      css={[baseStyles, focusStyles]}
+      {...elemProps}
+      border={`1px solid ${inputColors.border}`}
+      display="block"
+      backgroundColor={inputColors.background}
+      borderRadius={borderRadius.m}
+      minHeight={64}
+      minWidth={280}
+      padding={spaceNumbers.xxs} // Compensate for border
+      margin={0} // Fix Safari
+    />
+  );
 });

package/text-area/lib/hooks/useTextAreaModel.ts

@@ -1,5 +1,3 @@
-import {useFormFieldModel, FormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
+import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
 
 export const useTextAreaModel = useFormFieldModel;
-
-export type TextAreaModel = FormFieldModel;

package/text-area/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/text-area",
   "module": "../dist/es6/text-area",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/text-area"
 }

package/text-input/lib/TextInput.tsx

@@ -1,47 +1,33 @@
 import React from 'react';
 
-import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {
-  FormField,
-  FormFieldModelContext,
-  useFormFieldOrientation,
-} from '@workday/canvas-kit-preview-react/form-field';
-import {Stack} from '@workday/canvas-kit-labs-react/layout';
+import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
+import {Stack} from '@workday/canvas-kit-react/layout';
 
-import {useTextInputModel, TextInputModel} from './hooks';
+import {useTextInputModel} from './hooks';
 import {TextInputField} from './TextInputField';
-import {TextInputLabel} from './TextInputLabel';
-import {TextInputHint} from './TextInputHint';
-
-export const TextInputModelContext = FormFieldModelContext;
 
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
-  model?: TextInputModel;
   /**
    * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
    */
   children: React.ReactNode;
 }
 
-export const TextInput = createComponent()({
+export const TextInput = createContainer('div')({
   displayName: 'TextInput',
-  Component: ({children, model, orientation, ...props}: TextInputProps, ref) => {
-    const {hasError, id, isRequired, ...elemProps} = props;
-    const value = useDefaultModel(model, {hasError, id, isRequired}, useTextInputModel);
-
-    const layoutProps = useFormFieldOrientation(orientation);
-
-    return (
-      <TextInputModelContext.Provider value={value}>
-        <Stack ref={ref} {...layoutProps} {...elemProps}>
-          {children}
-        </Stack>
-      </TextInputModelContext.Provider>
-    );
-  },
+  modelHook: useTextInputModel,
   subComponents: {
     Field: TextInputField,
-    Label: TextInputLabel,
-    Hint: TextInputHint,
+    Label: FormField.Label,
+    Hint: FormField.Hint,
   },
+})<ExtractProps<typeof FormField, never>>(({children, orientation, ...elemProps}, Element) => {
+  const layoutProps = useFormFieldOrientation(orientation);
+
+  return (
+    <Stack as={Element} {...layoutProps} {...elemProps}>
+      {children}
+    </Stack>
+  );
 });