UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

68 lines 3.11 kB
import { ExtractProps } from '@workday/canvas-kit-react/common'; import { Popup } from '@workday/canvas-kit-react/popup'; export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> { } /** * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility * * ```tsx * import { Toast } from "@workday/canvas-kit-react/toast"; * * const MyToast = (props: CardProps) => ( * <Toast mode="dialog" aria-label="notifcation"> * <Toast.Icon icon={checkIcon} color={colors.greenApple400} /> * <Toast.Body> * <Toast.Message>Your workbook was successfully processed.</Toast.Message> * <Toast.Link href="#hreflink">Custom Link</Toast.Link> * </Toast.Body> * <Toast.CloseIcon aria-label="Close" onClick={handleClose} /> * </Toast> * ); *``` */ export declare const Toast: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ToastProps & Partial<{ mode: import("./hooks/useToastModel").AriaRoleMode; id: string; }> & {} & {}, { state: { id: string; mode: import("./hooks/useToastModel").AriaRoleMode; }; events: {}; }> & { /** * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements. * * ```tsx * <Toast.Body> * <Toast.Message>Your workbook was successfully processed.</Toast.Message> * <Toast.Link href="#hreflink">Custom Link</Toast.Link> * </Toast.Body> * ``` */ Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastBody").ToastBodyProps>; /** * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`. */ CloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ToastCloseIcon").ToastCloseIconProps>; /** * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`. */ Icon: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastIcon").ToastIconProps>; /** * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties. * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component. */ Message: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("./ToastMessage").ToastMessageProps, { state: { id: string; mode: import("./hooks/useToastModel").AriaRoleMode; }; events: {}; }>; /** * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component. */ Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("./ToastLink").ToastLinkProps>; }; //# sourceMappingURL=Toast.d.ts.map