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

package/pill/lib/Pill.tsx

@@ -1,285 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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