@workday/canvas-kit-react 12.0.0-alpha.841-next.0 → 12.0.0-alpha.846-next.0

package/toast/lib/Toast.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {ToastCloseIcon} from './ToastCloseIcon';
@@ -10,6 +9,9 @@ import {ToastMessage} from './ToastMessage';
 import {ToastLink} from './ToastLink';
 import {ToastBody} from './ToastBody';
 import {useToastModel} from './hooks/useToastModel';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {}
 
@@ -45,6 +47,16 @@ const getAriaAttributes = (mode: string, id: string): React.HtmlHTMLAttributes<H
   }
 };
 
+const toastStencil = createStencil({
+  base: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: calc.add(calc.multiply(system.space.x20, 4), system.space.x10),
+    padding: system.space.zero,
+    gap: system.space.x1,
+  },
+});
+
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
  *
@@ -99,13 +111,8 @@ export const Toast = createContainer('div')({
 })<ToastProps>(({children, ...elemProps}, _, model) => {
   return (
     <Popup.Card
-      as={Flex}
-      width={360}
-      padding="0"
       {...getAriaAttributes(model.state.mode, model.state.id)}
-      flexDirection="row"
-      gap="xxxs"
-      {...elemProps}
+      {...mergeStyles(elemProps, toastStencil())}
     >
       {children}
     </Popup.Card>

package/toast/lib/ToastBody.tsx

@@ -2,25 +2,29 @@ import React from 'react';
 
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
 
+export const toastBodyStencil = createStencil({
+  base: {
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingTop: system.space.x4,
+    paddingBottom: system.space.x4,
+    flexGrow: 1,
+    gap: system.space.x1,
+  },
+});
+
 export const ToastBody = createComponent('div')({
   displayName: 'Toast.Body',
   Component: ({children, ...elemProps}: ToastBodyProps, ref, Element) => {
     return (
-      <Flex
-        alignItems="flex-start"
-        flexDirection="column"
-        justifyContent="center"
-        paddingY="s"
-        ref={ref}
-        as={Element}
-        flexGrow={1}
-        gap="xxxs"
-        {...elemProps}
-      >
+      <Flex ref={ref} as={Element} {...mergeStyles(elemProps, toastBodyStencil())}>
         {children}
       </Flex>
     );

package/toast/lib/ToastCloseIcon.tsx

@@ -1,14 +1,27 @@
 import React from 'react';
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
+export const toastCloseIconStencil = createStencil({
+  base: {
+    position: 'relative',
+  },
+});
+
 export const ToastCloseIcon = createComponent('button')({
   displayName: 'Toast.CloseIcon',
   Component: (elemProps: ToastCloseIconProps, ref, Element) => {
     return (
-      <Popup.CloseIcon as={Element} ref={ref} size="small" position="relative" {...elemProps} />
+      <Popup.CloseIcon
+        as={Element}
+        ref={ref}
+        size="small"
+        {...mergeStyles(elemProps, toastCloseIconStencil())}
+      />
     );
   },
 });

package/toast/lib/ToastIcon.tsx

@@ -2,22 +2,21 @@ import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
 
+export const toastIconStencil = createStencil({
+  base: {
+    alignSelf: 'start',
+    margin: `${system.space.x4} ${system.space.x3}`,
+  },
+});
+
 export const ToastIcon = createComponent('div')({
   displayName: 'Toast.Icon',
   Component: (elemProps: ToastIconProps, ref, Element) => {
-    return (
-      <SystemIcon
-        colorHover={elemProps.color}
-        marginY="s"
-        marginX="xs"
-        alignSelf="start"
-        ref={ref}
-        as={Element}
-        {...elemProps}
-      />
-    );
+    return <SystemIcon ref={ref} as={Element} {...handleCsProp(elemProps, toastIconStencil())} />;
   },
 });

package/toast/lib/ToastMessage.tsx

@@ -3,20 +3,29 @@ import React from 'react';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {useToastModel} from './hooks/useToastModel';
 import {Subtext} from '@workday/canvas-kit-react/text';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {}
 
+export const toastMessageStencil = createStencil({
+  base: {
+    wordBreak: 'break-word',
+    marginBlockStart: system.space.zero,
+    marginBlockEnd: system.space.zero,
+  },
+});
+
 export const ToastMessage = createSubcomponent('p')({
   modelHook: useToastModel,
 })<ToastMessageProps>(({children, ...elemProps}, Element, model) => {
   return (
     <Subtext
       size="large"
-      wordBreak="break-word"
-      marginY="zero"
       id={model.state.id}
       as={Element}
-      {...elemProps}
+      {...mergeStyles(elemProps, toastMessageStencil())}
     >
       {children}
     </Subtext>