@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
20 lines (19 loc) • 1.43 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Avatar, avatarStencil } from '@workday/canvas-kit-react/avatar';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { usePillModel } from './usePillModel';
export const pillAvatarStencil = createStencil({
extends: avatarStencil,
base: { name: "3es3fk", styles: "box-sizing:border-box;flex:0 0 auto;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}" }
}, "pill-avatar-b59a58");
export const PillAvatar = createSubcomponent('div')({
modelHook: usePillModel,
})(({ size, ...elemProps }, Element, _model) => {
return (_jsx(Avatar, { isDecorative: true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [
pillAvatarStencil(),
_model.state.disabled ? 'disabled' : undefined,
]) }));
});