fix(Toast): middle dot color TET-524

VirtusLab · Nov 8, 2023 · f565c91 · f565c91
1 parent 05e5227
commit f565c91
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/components/Toast/Toast.styles.ts b/src/components/Toast/Toast.styles.ts
@@ -1,5 +1,4 @@
 import type { ToastEmphasis, ToastIntent } from './types';
-import { BareButtonProps } from '../Button/Button.props';
 
 import type { BaseProps } from '@/types/BaseProps';
 import type { IconName } from '@/utility-types/IconName';
@@ -19,9 +18,8 @@ export type ToastConfig = {
     } & BaseProps;
     actionContainer?: BaseProps;
     middleDot?: {
-      emphasis: Partial<
-        Record<ToastEmphasis, BaseProps | Partial<BareButtonProps>>
-      >;
+      emphasis: Partial<Record<ToastEmphasis, BaseProps>>;
+      intent: Partial<Record<ToastIntent, BaseProps>>;
     } & BaseProps;
     closeButton?: BaseProps;
   };
@@ -136,6 +134,15 @@ export const defaultConfig = {
           color: '$color-content-tertiary',
         },
       },
+      intent: {
+        neutral: {},
+        informative: {},
+        success: {},
+        warning: {
+          color: '$color-content-secondary',
+        },
+        negative: {},
+      },
     },
     closeButton: {
       ml: '$space-component-padding-large',

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -57,9 +57,9 @@ export const Toast: FC<ToastProps & MarginProps> = ({
           <Button variant="bare" appearance={appearance} {...firstAction} />
           {secondAction && (
             <>
-              <tet.div {...styles.middleDot} data-testid="toast-middleDot">
+              <tet.span {...styles.middleDot} data-testid="toast-middleDot">
                 &middot;
-              </tet.div>
+              </tet.span>
               <Button
                 variant="bare"
                 appearance={appearance}

diff --git a/src/components/Toast/stylesBuilder/stylesBuilder.ts b/src/components/Toast/stylesBuilder/stylesBuilder.ts
@@ -52,8 +52,11 @@ export const stylesBuilder = ({
     ...restIconContainerStyles,
   };
 
-  const { emphasis: emphasisMiddleDotStyles, ...restMiddleDotStyles } =
-    middleDot;
+  const {
+    emphasis: emphasisMiddleDotStyles,
+    intent: intentMiddleDotStyles,
+    ...restMiddleDotStyles
+  } = middleDot;
 
   return {
     container,
@@ -63,6 +66,7 @@ export const stylesBuilder = ({
     middleDot: {
       ...restMiddleDotStyles,
       ...emphasisMiddleDotStyles[props.emphasis],
+      ...intentMiddleDotStyles[props.intent],
     },
   };
 };