@workday/canvas-kit-preview-react 7.0.0-alpha.95-next.21 → 7.0.0

package/pill/lib/Pill.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import {CSSObject} from '@emotion/react';
+
+import {BaseButton} from '@workday/canvas-kit-react/button';
+import {
+  createContainer,
+  focusRing,
+  mouseFocusBehavior,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {BoxProps, boxStyleFn, HStack, Stack} from '@workday/canvas-kit-react/layout';
+import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {usePillModel} from './usePillModel';
+
+import {PillIcon} from './PillIcon';
+import {PillIconButton} from './PillIconButton';
+import {PillCount} from './PillCount';
+import {PillAvatar} from './PillAvatar';
+import {PillLabel} from './PillLabel';
+
+export interface PillProps extends BoxProps {
+  /**
+   * Defines what kind of pill to render stylistically and its interaction states
+   * @default 'default'
+   */
+  variant?: 'default' | 'readOnly' | 'removable';
+}
+
+const getButtonPillColors = () => {
+  return {
+    default: {
+      background: colors.soap300,
+      icon: colors.licorice200,
+      label: colors.blackPepper400,
+      border: colors.licorice200,
+    },
+    hover: {
+      icon: colors.licorice500,
+      background: colors.soap400,
+      border: colors.licorice400,
+    },
+    active: {
+      icon: colors.licorice500,
+      background: colors.soap500,
+      border: colors.licorice500,
+    },
+    focus: {
+      icon: colors.licorice500,
+      background: colors.soap300,
+      border: colors.blueberry400,
+      focusRing: focusRing({
+        width: 0,
+        inset: 'inner',
+        innerColor: colors.blueberry400,
+        outerColor: colors.blueberry400,
+        separation: 1,
+      }),
+    },
+    disabled: {
+      icon: colors.licorice100,
+      label: colors.licorice100,
+      background: colors.soap100,
+      border: colors.licorice100,
+      opacity: '1',
+    },
+  };
+};
+
+const getRemovablePillColors = (disabled?: boolean) => {
+  return {
+    default: {
+      background: disabled ? colors.soap100 : colors.soap300,
+      icon: disabled ? colors.licorice100 : colors.licorice200,
+      label: disabled ? colors.licorice100 : colors.blackPepper400,
+      border: disabled ? colors.licorice100 : colors.licorice200,
+    },
+    hover: {
+      icon: disabled ? colors.licorice100 : colors.licorice500,
+      background: disabled ? colors.soap100 : colors.soap300,
+      border: disabled ? colors.licorice100 : colors.licorice200,
+      label: disabled ? colors.licorice100 : colors.blackPepper400,
+    },
+    active: {
+      icon: disabled ? colors.licorice100 : colors.licorice500,
+      background: disabled ? colors.soap100 : colors.soap500,
+      border: disabled ? colors.licorice100 : colors.licorice500,
+      label: disabled ? colors.licorice100 : colors.blackPepper400,
+    },
+    focus: {
+      icon: colors.licorice200,
+      background: colors.soap300,
+      label: colors.blackPepper400,
+      focusRing: focusRing({
+        width: 0,
+        innerColor: 'transparent',
+        outerColor: 'transparent',
+      }),
+    },
+    disabled: {},
+  };
+};
+
+const pillBaseStyles: CSSObject = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  borderRadius: borderRadius.m,
+  flexShrink: 0,
+  ...type.levels.subtext.large,
+  color: colors.blackPepper400,
+  boxShadow: 'none',
+  outline: 'none',
+  fontWeight: type.properties.fontWeights.medium,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  width: 'fit-content',
+  padding: `2px ${space.xxs}`,
+  height: space.m,
+  position: 'relative',
+};
+
+const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
+  {
+    ...pillBaseStyles,
+    '&:focus': {
+      borderColor: colors.blueberry400,
+      'span[data-count="ck-pill-count"]': {
+        borderTop: `1px solid ${colors.blueberry400}`,
+        borderBottom: `1px solid ${colors.blueberry400}`,
+        borderRight: `1px solid ${colors.blueberry400}`,
+      },
+    },
+    '&:active, &:active:hover, &:active:focus': {
+      'span[data-count="ck-pill-count"]': {
+        backgroundColor: colors.soap600,
+        border: 'none',
+      },
+    },
+
+    ...mouseFocusBehavior({
+      '&:focus': {
+        'span[data-count="ck-pill-count"]': {
+          border: 'none',
+        },
+      },
+    }),
+  },
+  boxStyleFn
+);
+
+const StyledNonInteractivePill = styled(StyledBasePill)({
+  cursor: 'default',
+  overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
+});
+
+export const Pill = createContainer('button')({
+  modelHook: usePillModel,
+  subComponents: {
+    Icon: PillIcon,
+    Avatar: PillAvatar,
+    Count: PillCount,
+    Label: PillLabel,
+    IconButton: PillIconButton,
+  },
+})<PillProps>(({variant = 'default', maxWidth, ...elemProps}, Element, model) => {
+  return (
+    <>
+      {variant === 'readOnly' && (
+        <StyledNonInteractivePill
+          maxWidth={model.state.maxWidth}
+          as={Element !== 'button' ? Element : 'span'}
+          border={`1px solid ${colors.licorice200}`}
+          {...elemProps}
+        >
+          <PillLabel>{elemProps.children}</PillLabel>
+        </StyledNonInteractivePill>
+      )}
+      {variant === 'default' && (
+        <StyledBasePill
+          colors={getButtonPillColors()}
+          as={Element}
+          {...elemProps}
+          disabled={model.state.disabled}
+        >
+          <HStack spacing="xxxs" display="inline-flex" alignItems="center">
+            {React.Children.map(elemProps.children, (child, index) => {
+              if (typeof child === 'string') {
+                return <PillLabel key={index}>{child}</PillLabel>;
+              }
+              return (
+                <Stack.Item key={index} display="inline-flex">
+                  {child}
+                </Stack.Item>
+              );
+            })}
+          </HStack>
+        </StyledBasePill>
+      )}
+      {variant === 'removable' && (
+        <StyledNonInteractivePill
+          colors={getRemovablePillColors(model.state.disabled)}
+          as={Element !== 'button' ? Element : 'span'}
+          {...elemProps}
+        >
+          <HStack spacing="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
+            {React.Children.map(elemProps.children, (child, index) => {
+              if (typeof child === 'string') {
+                return <PillLabel key={index}>{child}</PillLabel>;
+              }
+              return <Stack.Item key={index}>{child}</Stack.Item>;
+            })}
+          </HStack>
+        </StyledNonInteractivePill>
+      )}
+    </>
+  );
+});

package/pill/lib/PillAvatar.tsx

@@ -0,0 +1,26 @@
+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}
+      {...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,32 @@
+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}
+      icon={icon || plusIcon}
+      {...elemProps}
+    />
+  );
+});

package/pill/lib/PillIconButton.tsx

@@ -0,0 +1,96 @@
+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 {borderRadius, 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;
+}
+
+const getIconColors = () => {
+  return {
+    default: {
+      icon: colors.licorice200,
+    },
+
+    hover: {
+      icon: colors.licorice500,
+    },
+    active: {
+      icon: colors.licorice500,
+    },
+    focus: {
+      icon: colors.licorice500,
+
+      focusRing: focusRing({
+        width: 0,
+        innerColor: 'transparent',
+        outerColor: 'transparent',
+      }),
+    },
+    disabled: {
+      icon: colors.licorice100,
+      opacity: '1',
+    },
+  };
+};
+
+const StyledFocusTarget = styled('span')<StyledType & PillIconButtonProps>({
+  height: 20,
+  position: 'absolute',
+  right: '5px',
+  left: space.xxxs,
+  margin: 0,
+  borderRadius: borderRadius.m,
+  '&:focus': {
+    outline: 'none',
+    ...focusRing({
+      outerColor: colors.blueberry400,
+      innerColor: 'transparent',
+      separation: 0,
+      width: 2,
+      inset: 'inner',
+    }),
+  },
+});
+
+const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
+  marginInlineEnd: '-14px !important', // visually pull in the pill to the right size
+  paddingInlineEnd: space.xxxs, // add 4px padding outside the pill for click target
+  marginInlineStart: `-${space.xxs} !important`, // visually create space between label and the button
+});
+
+export const PillIconButton = createSubcomponent('button')({
+  modelHook: usePillModel,
+})<PillIconButtonProps>(
+  ({size, icon = xSmallIcon, maxWidth, children, ...elemProps}, Element, model) => {
+    return (
+      <StyledIconButton
+        borderRadius="s"
+        height={space.l}
+        width={space.l}
+        padding="zero"
+        disabled={model.state.disabled}
+        colors={getIconColors()}
+        tabIndex={-1}
+        as={Element}
+        position="relative"
+        {...elemProps}
+      >
+        {/* We made the clickable element in this case the button larger, and have the span be the visible focus area */}
+        <StyledFocusTarget aria-hidden="true" tabIndex={model.state.disabled ? -1 : 0} />
+        <SystemIcon icon={icon} size={24} />
+      </StyledIconButton>
+    );
+  }
+);

package/pill/lib/PillLabel.tsx

@@ -0,0 +1,35 @@
+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}
+        {...elemProps}
+      >
+        {elemProps.children}
+      </StyledLabelContainer>
+    </OverflowTooltip>
+  );
+});

package/pill/lib/usePillModel.tsx

@@ -0,0 +1,21 @@
+import {createModelHook} 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,
+  },
+})(config => {
+  const state = {
+    ...config,
+  };
+
+  return {state, events: {}};
+});

package/pill/package.json

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

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

@@ -49,6 +49,10 @@ export interface NormalizedOption extends Option {
   label: string;
 }
 
+export interface RenderSelectedFunction {
+  (option: NormalizedOption): React.ReactNode;
+}
+
 export interface RenderableOption extends NormalizedOption {
   focused: boolean;
   selected: boolean;
@@ -86,6 +90,22 @@ export interface CoreSelectBaseProps
    * @default defaultRenderOption
    */
   renderOption?: RenderOptionFunction;
+  /**
+   * The function called to render the selected option.
+   *
+   * The `option` argument passed to the function is an object which contains the following:
+   *
+   * * `data: object` (data object carried over from the corresponding option originally passed into the component)
+   * * `disabled: boolean`
+   * * `id: string`
+   * * `label: string`
+   * * `value: string`
+   *
+   * If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
+   *
+   * @default defaultRenderSelected
+   */
+  renderSelected?: RenderSelectedFunction;
   /**
    * The value of the Select.
    */
@@ -261,7 +281,11 @@ const SelectWrapper = styled('div')<Pick<SelectBaseProps, 'grow' | 'disabled'>>(
 );
 
 const defaultRenderOption: RenderOptionFunction = option => {
-  return <div>{option.label}</div>;
+  return <div>{defaultRenderSelected(option)}</div>;
+};
+
+const defaultRenderSelected: RenderSelectedFunction = option => {
+  return option.label;
 };
 
 const SelectBase = ({
@@ -284,6 +308,7 @@ const SelectBase = ({
   onOptionSelection,
   options,
   renderOption = defaultRenderOption,
+  renderSelected = defaultRenderSelected,
   required,
   shouldMenuAutoFlip = true,
   shouldMenuAutoFocus = true,
@@ -393,7 +418,6 @@ const SelectBase = ({
   // Do a bit of error-checking in case options weren't provided
   const hasOptions = options.length > 0;
   const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
-  const selectedOptionLabel = selectedOption ? selectedOption.label : '';
   const selectedOptionValue = selectedOption ? selectedOption.value : '';
 
   return (
@@ -419,7 +443,7 @@ const SelectBase = ({
         value={selectedOptionValue}
         {...elemProps}
       >
-        {selectedOptionLabel}
+        {!!selectedOption && renderSelected(selectedOption)}
       </SelectButton>
       <SelectInput onChange={onChange} ref={inputRef} type="text" value={selectedOptionValue} />
       {hasOptions && menuVisibility !== 'closed' && (