@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
288 lines • 10.2 kB
TypeScript
import { Property } from 'csstype';
import { CSProps } from '@workday/canvas-kit-styling';
import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
/**
* @deprecated `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
*/
export declare enum AvatarVariant {
Light = 0,
Dark = 1
}
export interface AvatarProps extends CSProps {
/**
* The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
* @default "light"
*/
variant?: 'light' | 'dark' | AvatarVariant;
/**
* The size of the Avatar.
* - `extraExtraLarge`: 7.5rem x 7.5rem (120px x 120px)
* - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
* - `large`: 2.5rem x 2.5rem (40px x 40px)
* - `medium`: 2rem x 2rem (32px x 32px)
* - `small`: 1.5rem x 1.5rem (24px x 24px)
* - `small`: 1rem x 1rem (16px x 16px)
* @default "medium"
*/
size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {}) | SystemIconCircleSize | number;
/**
* The alt text of the Avatar image. This prop is also used for the aria-label.
* @default Avatar
*/
altText?: string;
/**
* The URL of the user's photo. For best fit, use square images.
*/
url?: string;
/**
* An objectFit property that can customize how to resize your image to fit its container.
* @default "contain"
*/
objectFit?: Property.ObjectFit;
}
export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
variant: {
light: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
backgroundColor: "--cnvs-sys-color-bg-alt-default";
"[data-part=\"avatar-icon\"]": {
[x: string]: "--cnvs-sys-color-fg-default";
};
};
dark: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
backgroundColor: "--cnvs-sys-color-bg-primary-default";
"[data-part=\"avatar-icon\"]": {
[x: string]: "--cnvs-sys-color-fg-inverse";
};
};
};
size: {
extraSmall: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
width: "--cnvs-sys-space-x4";
height: "--cnvs-sys-space-x4";
"[data-part=\"avatar-icon\"]": {
[x: string]: string;
};
};
small: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
width: "--cnvs-sys-space-x6";
height: "--cnvs-sys-space-x6";
"[data-part=\"avatar-icon\"]": {
[x: string]: string;
};
};
medium: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
width: "--cnvs-sys-space-x8";
height: "--cnvs-sys-space-x8";
"[data-part=\"avatar-icon\"]": {
[x: string]: string;
};
};
large: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
width: "--cnvs-sys-space-x10";
height: "--cnvs-sys-space-x10";
"[data-part=\"avatar-icon\"]": {
[x: string]: string;
};
};
extraLarge: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
width: "--cnvs-sys-space-x16";
height: "--cnvs-sys-space-x16";
"[data-part=\"avatar-icon\"]": {
[x: string]: string;
};
};
extraExtraLarge: ({ iconPart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
width: string;
height: string;
"[data-part=\"avatar-icon\"]": {
[x: string]: string;
};
};
};
objectFit: {
contain: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "contain";
};
};
fill: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "fill";
};
};
cover: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "cover";
};
};
"scale-down": ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "scale-down";
};
};
none: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "none";
};
};
"-moz-initial": ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "-moz-initial";
};
};
initial: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "initial";
};
};
inherit: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "inherit";
};
};
revert: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "revert";
};
};
unset: ({ imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-image\"]": {
objectFit: "unset";
};
};
};
isImageLoaded: {
true: ({ iconPart, imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-icon\"]": {
opacity: number;
};
"[data-part=\"avatar-image\"]": {
opacity: number;
};
};
false: ({ iconPart, imagePart }: {
size: string;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}>) => {
"[data-part=\"avatar-icon\"]": {
opacity: number;
};
"[data-part=\"avatar-image\"]": {
opacity: number;
};
};
};
}, {
readonly icon: "avatar-icon";
readonly image: "avatar-image";
}, {
size: string;
}, never, never>;
export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps> & {
/**
* @deprecated `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
*/
Variant: typeof AvatarVariant;
/**
* @deprecated `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
*/
Size: typeof SystemIconCircleSize;
};
//# sourceMappingURL=Avatar.d.ts.map