@workday/canvas-kit-preview-react/dist/es6/pill/lib/Pill.d.ts

Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.

import { BoxProps } from '@workday/canvas-kit-react/layout';
export interface PillProps extends BoxProps {
    /**
     * Defines what kind of pill to render stylistically and its interaction states
     * @default 'default'
     */
    variant?: 'default' | 'readOnly' | 'removable';
}
/**
 * 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 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 onClick={() => console.log('handle remove')} />
 * </Pill>
 * ```
 */
export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
    maxWidth: string | number;
    disabled: boolean;
    id: string;
}> & {} & {}, {
    state: {
        id: string;
        maxWidth: string | number;
        disabled: boolean;
    };
    events: {};
}> & {
    /**
     * This component renders an avatar. It supports all props of the `Avatar` component.
     *
     * ```tsx
     * <Pill variant="removable">
     *   <Pill.Avatar url={avatarUrl} />
     *   Regina Skeltor
     *   <Pill.IconButton onClick={() => console.log('handle remove')} />
     * </Pill>
     * ```
     */
    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
        state: {
            id: string;
            maxWidth: string | number;
            disabled: boolean;
        };
        events: {};
    }>;
    /**
     * This component renders its `children` as the count.
     *
     * ```tsx
     * <Pill onClick={() => console.warn('clicked')}>
     *   Shoes
     *   <Pill.Count>30</Pill.Count>
     * </Pill>
     * ```
     */
    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
    /**
     * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
     * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
     * providing an icon to the `icon` prop.
     *
     * ```tsx
     * <Pill onClick={() => console.warn('clicked')}>
     *   <Pill.Icon />
     *   <Pill.Label>Regina Skeltor</Pill.Label>
     * </Pill>
     * ```
     */
    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
        state: {
            id: string;
            maxWidth: string | number;
            disabled: boolean;
        };
        events: {};
    }>;
    /**
     * 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">
     *   Pink Shirts
     *   <Pill.IconButton onClick={() => console.warn('clicked')} />
     * </Pill>
     * ```
     */
    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
        state: {
            id: string;
            maxWidth: string | number;
            disabled: boolean;
        };
        events: {};
    }>;
    /**
     * 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.
     *
     * ```tsx
     * <Pill variant="readOnly">
     *   <Pill.Label>Read-only</Pill.Label>
     * </Pill>
     * ```
     */
    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
        state: {
            id: string;
            maxWidth: string | number;
            disabled: boolean;
        };
        events: {};
    }>;
};
//# sourceMappingURL=Pill.d.ts.map