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

package/pagination/lib/Pagination/Controls.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {
-  chevronLeftSmallIcon,
   chevron2xLeftSmallIcon,
-  chevronRightSmallIcon,
   chevron2xRightSmallIcon,
+  chevronLeftSmallIcon,
+  chevronRightSmallIcon,
 } from '@workday/canvas-system-icons-web';
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {system} from '@workday/canvas-tokens-web';
 
-import {useRTL} from './common/utils/useRTL';
 import {PaginationContext} from './usePaginationModel';
 
 export interface ControlButtonProps extends ExtractProps<typeof TertiaryButton, never> {
@@ -23,11 +23,21 @@ export interface PaginationControlsProps {}
 export const paginationControlsStencil = createStencil({
   base: {
     display: 'flex',
-    gap: system.space.x1,
+    gap: system.legacy.gap.xs,
     alignItems: 'center',
   },
 });
 
+const controlButtonStencil = createStencil({
+  base: {
+    '&:dir(rtl)': {
+      '& .wd-icon': {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+});
+
 export const PaginationControls = createComponent('div')({
   displayName: 'Pagination.Controls',
   Component(elemProps: PaginationControlsProps, ref, Element) {
@@ -47,8 +57,6 @@ export const JumpToFirstButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.firstPage);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
 
     return (
       <TertiaryButton
@@ -56,9 +64,9 @@ export const JumpToFirstButton = createComponent('button')({
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevron2xLeftSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -76,17 +84,16 @@ export const StepToPreviousButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.currentPage - 1);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevronLeftSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -104,17 +111,16 @@ export const StepToNextButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.currentPage + 1);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevronRightSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -132,17 +138,16 @@ export const JumpToLastButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.lastPage);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevron2xRightSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-import {GoToContext, useGoToForm} from './useGoToForm';
 import {PaginationContext} from '../usePaginationModel';
+import {GoToContext, useGoToForm} from './useGoToForm';
 
 export interface GoToFormProps extends FlexProps {
   onSubmit?: React.FormEventHandler<HTMLFormElement>;
@@ -16,10 +16,9 @@ export const paginationGoToFormStencil = createStencil({
   base: {
     display: 'flex',
     alignItems: 'center',
-    gap: system.space.x2,
+    gap: system.legacy.gap.sm,
     ':dir(rtl)': {
-      paddingInlineStart: system.space.x2,
-      paddingInlineEnd: system.space.x2,
+      paddingInline: system.legacy.padding.xs,
     },
   },
 });

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {Subtext} from '@workday/canvas-kit-react/text';
-import {PaginationContext} from '../usePaginationModel';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+
 import {PaginationModel} from '../types';
+import {PaginationContext} from '../usePaginationModel';
 
 export interface GoToLabelProps {
   /**

package/pagination/lib/Pagination/GoTo/TextInput.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {TextInput, TextInputProps} from '@workday/canvas-kit-react/text-input';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 
 import {GoToContext} from './useGoToForm';
 

package/pagination/lib/Pagination/Nav.tsx

@@ -1,6 +1,6 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react';
 
-import {brand, system} from '@workday/canvas-tokens-web';
 import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {PaginationContext} from './usePaginationModel';
 
 export const paginationPageButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
-    minWidth: system.space.x8,
-    padding: system.space.zero,
+    minWidth: system.legacy.size.sm,
+    height: system.legacy.size.sm,
+    padding: 0,
     fontWeight: system.fontWeight.normal,
     [buttonStencil.vars.label]: system.color.fg.default,
 
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+      [buttonStencil.vars.background]: system.legacy.color.surface.alt.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
     },
 
@@ -31,11 +33,13 @@ export const paginationPageButtonStencil = createStencil({
     toggled: {
       true: {
         fontWeight: system.fontWeight.bold,
-        [buttonStencil.vars.background]: brand.primary.base,
+        [buttonStencil.vars.background]: system.legacy.color.brand.accent.primary,
+
         [buttonStencil.vars.label]: system.color.fg.inverse,
 
         '&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus': {
-          [buttonStencil.vars.background]: brand.primary.base,
+          [buttonStencil.vars.background]: system.legacy.color.brand.accent.primary,
+
           [buttonStencil.vars.label]: system.color.fg.inverse,
         },
 

package/pagination/lib/Pagination/PageList.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 
-import {PaginationModel} from './types';
-import {ListItem, ListItemProps} from './common/List';
-import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {PaginationContext} from './usePaginationModel';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+import {ListItem, ListItemProps} from './common/List';
+import {PaginationModel} from './types';
+import {PaginationContext} from './usePaginationModel';
+
 export interface PageListProps extends Omit<FlexProps, 'as' | 'children'> {
   model?: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
@@ -16,10 +17,9 @@ export interface PageListProps extends Omit<FlexProps, 'as' | 'children'> {
 export const paginationPageListStencil = createStencil({
   base: {
     display: 'flex',
-    margin: system.space.zero,
-    paddingInlineStart: system.space.zero,
-    paddingInlineEnd: system.space.zero,
-    gap: system.space.x1,
+    margin: 0,
+    paddingInline: 0,
+    gap: system.legacy.gap.xs,
   },
 });
 
@@ -35,13 +35,13 @@ export const PageList = createComponent('ol')({
   },
 });
 
-export interface PageListItemProps extends ListItemProps {}
+export interface PageListItemProps extends ListItemProps, CSProps {}
 
 export const PageListItem = createComponent('li')({
   displayName: 'Pagination.PageListItem',
   Component({children, ...elemProps}: PageListItemProps, ref, Element) {
     return (
-      <ListItem ref={ref} as={Element} {...elemProps}>
+      <ListItem ref={ref} as={Element} {...handleCsProp(elemProps)}>
         {children}
       </ListItem>
     );

package/pagination/lib/Pagination/Pagination.tsx

@@ -1,28 +1,26 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 
-import {PaginationModel} from './types';
-import {
-  usePaginationModel,
-  UsePaginationModelConfig,
-  PaginationContext,
-} from './usePaginationModel';
-
+import {AdditionalDetails} from './AdditionalDetails';
 import {
   JumpToFirstButton,
-  StepToPreviousButton,
-  StepToNextButton,
   JumpToLastButton,
   PaginationControls,
+  StepToNextButton,
+  StepToPreviousButton,
 } from './Controls';
-
-import {PageList, PageListItem} from './PageList';
-import {PageButton} from './PageButton';
-import {AdditionalDetails} from './AdditionalDetails';
 import {GoToForm} from './GoTo/Form';
-import {GoToTextInput} from './GoTo/TextInput';
 import {GoToLabel} from './GoTo/Label';
+import {GoToTextInput} from './GoTo/TextInput';
+import {PageButton} from './PageButton';
+import {PageList, PageListItem} from './PageList';
+import {PaginationModel} from './types';
+import {
+  PaginationContext,
+  UsePaginationModelConfig,
+  usePaginationModel,
+} from './usePaginationModel';
 
 export {PaginationContext};
 

package/pagination/lib/Pagination/common/List.tsx

@@ -1,16 +1,14 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 export interface ListProps extends FlexProps {}
 
 export const paginationListStencil = createStencil({
   base: {
     display: 'flex',
-    marginBlock: system.space.zero,
-    marginInline: system.space.zero,
-    padding: system.space.zero,
+    margin: 0,
+    padding: 0,
     listStyle: 'none',
   },
 });

package/pagination/lib/Pagination/common/utils/useRTL.ts

@@ -1,7 +1,7 @@
 import {
-  useTheme,
-  PartialEmotionCanvasTheme,
   ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
 } from '@workday/canvas-kit-react/common';
 
 export const useRTL = (partialTheme?: PartialEmotionCanvasTheme) => {

package/pill/index.ts

@@ -0,0 +1,7 @@
+export * from './lib/Pill';
+export * from './lib/usePillModel';
+export * from './lib/PillCount';
+export * from './lib/PillIconButton';
+export * from './lib/PillIcon';
+export * from './lib/PillLabel';
+export * from './lib/Pill';

package/pill/lib/Pill.tsx

@@ -0,0 +1,301 @@
+import {buttonStencil} from '@workday/canvas-kit-react/button';
+import {createContainer, focusRing} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {colorSpace, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {PillAvatar} from './PillAvatar';
+import {PillCount, pillCountStencil} from './PillCount';
+import {PillIcon} from './PillIcon';
+import {PillIconButton} from './PillIconButton';
+import {PillLabel} from './PillLabel';
+import {usePillModel} from './usePillModel';
+
+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.legacy.shape.sm,
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.sm, // 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)} ${system.legacy.padding.xs}`,
+    height: system.legacy.size.xs,
+    position: 'relative',
+    gap: system.legacy.gap.xs,
+    maxWidth,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    [buttonStencil.vars.background]: system.legacy.color.surface.alt.strong,
+    [buttonStencil.vars.border]: system.color.border.transparent,
+    [buttonStencil.vars.label]: system.color.fg.strong,
+    [systemIconStencil.vars.color]: 'currentColor',
+    [pillCountStencil.vars.borderColor]: 'transparent',
+
+    '&:has(span)': {
+      display: 'flex',
+      lineHeight: system.legacy.lineHeight.subtext.lg, // ensure correct line height
+    },
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.alt.strong,
+        fallback: system.color.bg.alt.strong,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.hover,
+      }),
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      [buttonStencil.vars.label]: system.color.fg.stronger,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.borderColor]: 'transparent',
+    },
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.alt.strong,
+        fallback: system.color.bg.alt.stronger,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.pressed,
+      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.borderColor]: 'transparent',
+    },
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.border]: system.legacy.color.brand.border.primary,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      borderColor: system.legacy.color.brand.border.primary,
+      [systemIconStencil.vars.color]: 'currentColor',
+
+      ...focusRing({
+        width: 0,
+        innerColor: system.legacy.color.brand.border.primary,
+        outerColor: system.legacy.color.brand.border.primary,
+        separation: 1,
+      }),
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: system.legacy.color.surface.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.disabled,
+      [systemIconStencil.vars.color]: 'currentColor',
+      [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.alt.strong,
+      [pillCountStencil.vars.borderColor]: 'transparent',
+    },
+  }),
+  modifiers: {
+    variant: {
+      readOnly: {
+        border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+        cursor: 'default',
+        [buttonStencil.vars.background]: system.color.bg.default,
+        '&:hover, &.hover': {
+          borderColor: system.legacy.color.border.default,
+          [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]: colorSpace.darken({
+            color: system.legacy.color.surface.alt.strong,
+            fallback: system.color.bg.alt.strong,
+            mixinColor: system.legacy.color.surface.overlay.mixin,
+            mixinValue: system.legacy.opacity.surface.hover,
+          }),
+          [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.transparent,
+        },
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: colorSpace.darken({
+            color: system.legacy.color.surface.alt.strong,
+            fallback: system.color.bg.alt.stronger,
+            mixinColor: system.legacy.color.surface.overlay.mixin,
+            mixinValue: system.legacy.opacity.surface.pressed,
+          }),
+          [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.transparent,
+        },
+        '&: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>
+  );
+});