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

package/pill/lib/Pill.tsx

@@ -0,0 +1,285 @@
+import {buttonStencil} from '@workday/canvas-kit-react/button';
+import {createContainer, focusRing} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {px2rem, createStencil, cssVar} from '@workday/canvas-kit-styling';
+
+import {usePillModel} from './usePillModel';
+
+import {PillIcon} from './PillIcon';
+import {PillIconButton} from './PillIconButton';
+import {PillCount, pillCountStencil} from './PillCount';
+import {PillAvatar} from './PillAvatar';
+import {PillLabel} from './PillLabel';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {system} from '@workday/canvas-tokens-web';
+
+export interface PillProps extends BoxProps {
+  /**
+   * Defines what kind of pill to render stylistically and its interaction states
+   * @default 'default'
+   */
+  variant?: 'readOnly' | 'removable';
+  /**
+   * 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?: string | number;
+}
+
+export const pillStencil = createStencil({
+  extends: buttonStencil,
+  vars: {
+    maxWidth: '',
+  },
+  base: ({maxWidth}) => ({
+    display: 'initial',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: system.shape.x1,
+    ...system.type.subtext.large,
+    lineHeight: system.lineHeight.subtext.small, // ensure correct line height when there's no elements and just text
+    boxShadow: 'none',
+    outline: 'none',
+    fontWeight: system.fontWeight.medium,
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    width: 'fit-content',
+    padding: `${px2rem(2)} ${cssVar(system.space.x2)}`,
+    height: system.space.x6,
+    position: 'relative',
+    gap: system.space.x1,
+    maxWidth,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    [buttonStencil.vars.background]: system.color.bg.alt.default,
+    [buttonStencil.vars.border]: system.color.border.input.default,
+    [buttonStencil.vars.label]: system.color.fg.strong,
+    [systemIconStencil.vars.color]: 'currentColor',
+    [pillCountStencil.vars.borderColor]: 'transparent',
+
+    '&:has(span)': {
+      display: 'flex',
+      lineHeight: system.lineHeight.subtext.large, // ensure correct line height
+    },
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.border]: system.color.border.input.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.backgroundColor]: system.color.bg.muted.softer,
+      [pillCountStencil.vars.borderColor]: 'transparent',
+    },
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
+      [buttonStencil.vars.border]: system.color.border.input.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.backgroundColor]: system.color.bg.muted.softer,
+      [pillCountStencil.vars.borderColor]: 'transparent',
+    },
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      [buttonStencil.vars.border]: system.color.border.primary.default,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      borderColor: system.color.border.primary.default,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.borderColor]: system.color.border.primary.default,
+
+      ...focusRing({
+        width: 0,
+        inset: 'inner',
+        innerColor: system.color.border.primary.default,
+        outerColor: system.color.border.primary.default,
+        separation: 1,
+      }),
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      [buttonStencil.vars.border]: system.color.border.input.disabled,
+      [buttonStencil.vars.label]: system.color.fg.disabled,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.backgroundColor]: system.color.bg.alt.strong,
+      [pillCountStencil.vars.borderColor]: 'transparent',
+    },
+  }),
+  modifiers: {
+    variant: {
+      readOnly: {
+        border: `${px2rem(1)} solid ${system.color.border.container}`,
+        cursor: 'default',
+        [buttonStencil.vars.background]: system.color.bg.default,
+        '&:hover, &.hover': {
+          borderColor: system.color.border.container,
+          [buttonStencil.vars.background]: system.color.bg.default,
+        },
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+        },
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+        },
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+        },
+      },
+      removable: {
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.color.bg.alt.default,
+          [buttonStencil.vars.border]: system.color.border.input.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          boxShadow: 'none',
+        },
+        '&:hover, &.hover': {
+          [buttonStencil.vars.background]: system.color.bg.alt.strong,
+        },
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.color.bg.alt.stronger,
+        },
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.background]: system.color.bg.alt.default,
+          [systemIconStencil.vars.color]: 'currentColor',
+        },
+        cursor: 'default',
+        overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
+        position: 'relative',
+      },
+    },
+  },
+});
+
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
+export const Pill = createContainer('button')({
+  displayName: 'Pill',
+  modelHook: usePillModel,
+  subComponents: {
+    /**
+     * This component renders an avatar. It supports all props of the `Avatar` component.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Avatar url={avatarUrl} />
+     *    <Pill.Label>Regina Skeltor</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
+     * </Pill>
+     * ```
+     */
+    Avatar: PillAvatar,
+    /**
+     * This component renders its `children` as the count.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *    <Pill.Label>Shoes</Pill.Label>
+     *   <Pill.Count>30</Pill.Count>
+     * </Pill>
+     * ```
+     */
+    Count: PillCount,
+    /**
+     * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   <Pill.Icon aria-label='Add user' />
+     *   <Pill.Label>Regina Skeltor</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Icon: PillIcon,
+    /**
+     * This component renders a custom icon button. It is only intended to be used with the
+     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+     * an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Label>Pink Shirts</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
+     * </Pill>
+     * ```
+     */
+    IconButton: PillIconButton,
+    /**
+     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+     * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
+     *
+     * ```tsx
+     * <Pill variant="readOnly">
+     *   <Pill.Label>Read-only</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Label: PillLabel,
+  },
+})<PillProps>(({variant, maxWidth = 200, children, ...elemProps}, Element, model) => {
+  const maxWidthCSSValue = typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth;
+
+  const isReadOnly = variant === 'readOnly';
+
+  return variant?.match(/^(readOnly|removable)$/) ? (
+    <Box
+      as={Element !== 'button' ? Element : 'span'}
+      id={isReadOnly ? model.state.id : undefined}
+      {...mergeStyles(elemProps, [
+        model.state.disabled ? 'disabled' : undefined,
+        pillStencil({maxWidth: maxWidthCSSValue, variant}),
+      ])}
+    >
+      {isReadOnly ? <PillLabel>{children}</PillLabel> : children}
+    </Box>
+  ) : (
+    <Element
+      disabled={model.state.disabled}
+      {...mergeStyles(elemProps, [
+        model.state.disabled ? 'disabled' : undefined,
+        pillStencil({maxWidth: maxWidthCSSValue}),
+      ])}
+    >
+      {children}
+    </Element>
+  );
+});

package/pill/lib/PillAvatar.tsx

@@ -0,0 +1,35 @@
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-preview-react/avatar';
+import {usePillModel} from './usePillModel';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export interface PillAvatarProps extends AvatarProps {}
+
+export const pillAvatarStencil = createStencil({
+  extends: avatarStencil,
+  base: {
+    flex: '0 0 auto',
+    ...system.type.subtext.small,
+    '&:disabled, &.disabled': {
+      opacity: system.opacity.disabled,
+    },
+  },
+});
+
+export const PillAvatar = createSubcomponent('div')({
+  modelHook: usePillModel,
+})<PillAvatarProps>(({size, ...elemProps}: PillAvatarProps, Element, _model) => {
+  return (
+    <Avatar
+      isDecorative
+      as={Element}
+      size={px2rem(18)}
+      {...mergeStyles(elemProps, [
+        pillAvatarStencil(),
+        _model.state.disabled ? 'disabled' : undefined,
+      ])}
+    />
+  );
+});

package/pill/lib/PillCount.tsx

@@ -0,0 +1,44 @@
+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 {}
+
+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.Count',
+  Component: ({children, ...elemProps}: PillCountProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, pillCountStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});

package/pill/lib/PillIcon.tsx

@@ -0,0 +1,32 @@
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {usePillModel} from './usePillModel';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+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 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>(({icon, ...elemProps}, Element) => {
+  return (
+    <SystemIcon
+      as={Element}
+      role="img"
+      icon={icon || plusIcon}
+      {...mergeStyles(elemProps, pillIconStencil())}
+    />
+  );
+});

package/pill/lib/PillIconButton.tsx

@@ -0,0 +1,86 @@
+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 {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 Partial<SystemIconProps> {
+  /**
+   * The aria label for the removable icon. You must provide a valid string to represent the action.
+   */
+  'aria-label'?: string;
+}
+
+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.default,
+    [systemIconStencil.vars.color]: system.color.fg.strong,
+    [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',
+    },
+
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      ...focusRing({
+        innerColor: system.color.border.transparent,
+      }),
+    },
+    '&:hover, &.hover': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+    },
+    '&:active, &.active': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      [systemIconStencil.vars.color]: system.color.fg.disabled,
+    },
+  },
+});
+
+export const PillIconButton = createSubcomponent('button')({
+  modelHook: usePillModel,
+})<PillIconButtonProps>(
+  ({size, icon, children, 'aria-label': ariaLabel = '', ...elemProps}, Element, model) => {
+    return (
+      <Element
+        disabled={model.state.disabled}
+        aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
+        {...mergeStyles(elemProps, pillIconButtonStencil())}
+      >
+        <SystemIcon
+          aria-label={ariaLabel}
+          id={`removable-${model.state.id}`}
+          icon={icon || xSmallIcon}
+          aria-hidden // This works for Chrome but not needed in Safari
+          role="img"
+        />
+      </Element>
+    );
+  }
+);

package/pill/lib/PillLabel.tsx

@@ -0,0 +1,32 @@
+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 {createStencil} from '@workday/canvas-kit-styling';
+
+export interface PillLabelProps extends BoxProps {
+  tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
+}
+
+export const pillLabelStencil = createStencil({
+  base: {
+    flexShrink: 1,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+});
+
+export const PillLabel = createSubcomponent('span')({
+  modelHook: usePillModel,
+})<PillLabelProps>(({tooltipProps, children, ...elemProps}, Element, model) => {
+  return (
+    <OverflowTooltip {...tooltipProps}>
+      <Element id={`label-${model.state.id}`} {...mergeStyles(elemProps, pillLabelStencil())}>
+        {children}
+      </Element>
+    </OverflowTooltip>
+  );
+});

package/pill/lib/usePillModel.tsx

@@ -0,0 +1,23 @@
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
+export const usePillModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Used to disable a pill and apply the correct styles.
+     */
+    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/segmented-control/lib/SegmentedControl.tsx

@@ -26,7 +26,7 @@ export interface SegmentedControlProps {
  *   items: [],
  * });
  *
- * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>
  * ```
  */
 export const SegmentedControl = createContainer()({