Toast(fluent theme) - Change height & text color (#25907)

Co-authored-by: EugeniyKiyashko <[email protected]>

packages/devextreme/scss/widgets/base/_toast.scss

@@ -46,7 +46,6 @@
 .dx-toast-stack {
   position: fixed;
   display: flex;
-  overflow: hidden;
   gap: 3px;
   align-items: center;
   z-index: 9500;

packages/devextreme/scss/widgets/fluent/toast/_colors.scss

@@ -4,19 +4,28 @@
 
 // adduse
 
+$toast-default-bg: $base-bg !default;
+$warning-color: null !default;
+
+@if $mode == "light" {
+  $warning-color: $base-text-color !default;
+}
+
+@if $mode == "dark" {
+  $warning-color: $base-inverted-text-color !default;
+}
+
 /**
-* $name 10. Text color
+* $name 10. Info background color
 * $type color
 */
-$toast-color: color.change(#fff, $alpha: 0.87) !default;
-$toast-border-radius: $base-border-radius !default;
-$toast-default-bg: color.change(#000, $alpha: 0.87) !default;
+$toast-info-bg: $toast-default-bg !default;
 
 /**
-* $name 20. Info background color
+* $name 20. Info text color
 * $type color
 */
-$toast-info-bg: $toast-default-bg !default;
+$toast-info-color: $base-text-color !default;
 
 /**
 * $name 30. Warning background color
@@ -25,13 +34,31 @@ $toast-info-bg: $toast-default-bg !default;
 $toast-warning-bg: $base-warning !default;
 
 /**
-* $name 40. Error background color
+* $name 40. Warning text color
+* $type color
+*/
+$toast-warning-color: $warning-color !default;
+
+/**
+* $name 50. Error background color
 * $type color
 */
 $toast-error-bg: $base-danger !default;
 
 /**
-* $name 50. Success background color
+* $name 60. Error text color
+* $type color
+*/
+$toast-error-color: $base-inverted-text-color !default;
+
+/**
+* $name 70. Success background color
 * $type color
 */
 $toast-success-bg: $base-success !default;
+
+/**
+* $name 80. Success text color
+* $type color
+*/
+$toast-success-color: $base-inverted-text-color !default;

packages/devextreme/scss/widgets/fluent/toast/_index.scss

@@ -9,13 +9,16 @@
 @use "../overlay";
 
 
+.dx-toast-stack {
+  gap: $fluent-toast-item-gap;
+}
+
 .dx-toast-content {
-  color: $toast-color;
   font-size: $fluent-base-font-size;
   font-weight: 400;
-  padding: $fluent-toast-content-padding;
+  padding: $fluent-toast-content-vertical-padding $fluent-toast-content-horizontal-padding;
   border-radius: $toast-border-radius;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, $fluent-toast-shadow-color);
+  box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 8px 16px 0 color.change($base-shadow-color, $alpha: 0.14);
   min-height: $fluent-toast-height;
   display: flex;
   align-items: center;
@@ -31,16 +34,20 @@
 
 .dx-toast-info {
   background-color: $toast-info-bg;
+  color: $toast-info-color;
 }
 
 .dx-toast-warning {
   background-color: $toast-warning-bg;
+  color: $toast-warning-color;
 }
 
 .dx-toast-error {
   background-color: $toast-error-bg;
+  color: $toast-error-color;
 }
 
 .dx-toast-success {
   background-color: $toast-success-bg;
+  color: $toast-success-color;
 }

packages/devextreme/scss/widgets/fluent/toast/_sizes.scss

@@ -2,18 +2,20 @@
 
 // adduse
 
-$fluent-toast-content-padding: null !default;
+$toast-border-radius: $fluent-base-border-radius !default;
 $fluent-toast-height: null !default;
-$fluent-toast-shadow-color: null !default;
+$fluent-toast-item-gap: null !default;
+$fluent-toast-content-vertical-padding: null !default;
+$fluent-toast-content-horizontal-padding: 12px !default;
 
 @if $size == "default" {
-  $fluent-toast-content-padding: 0 16px !default;
-  $fluent-toast-height: 48px !default;
-  $fluent-toast-shadow-color: 0.25 !default;
+  $fluent-toast-content-vertical-padding: 12px !default;
+  $fluent-toast-height: 44px !default;
+  $fluent-toast-item-gap: 12px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-toast-content-padding: 0 12px !default;
+  $fluent-toast-content-vertical-padding: 8px !default;
   $fluent-toast-height: 36px !default;
-  $fluent-toast-shadow-color: 0.15 !default;
+  $fluent-toast-item-gap: 8px !default;
 }

packages/devextreme/testing/testcafe/helpers/themeUtils.ts

@@ -14,7 +14,9 @@ export const isFluent = (): boolean => process.env.theme === 'fluent.blue.light'
 
 export const isMaterialBased = (): boolean => isMaterial() || isFluent();
 
-export const getThemeName = (): string => (process.env.theme ?? defaultThemeName).split('.')[0];
+export const getFullThemeName = (): string => process.env.theme ?? defaultThemeName;
+
+export const getThemeName = (): string => getFullThemeName().split('.')[0];
 
 export async function testScreenshot(
   t: TestController,

packages/devextreme/testing/testcafe/tests/editors/overlays/toast.ts

@@ -0,0 +1,64 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../../helpers/getPageUrl';
+import { getFullThemeName, getThemeName, testScreenshot } from '../../../helpers/themeUtils';
+import { insertStylesheetRulesToPage, setClassAttribute } from '../../../helpers/domUtils';
+
+fixture.disablePageReloads`Toast`
+  .page(url(__dirname, '../../container.html'));
+
+const types = ['info', 'warning', 'error', 'success'];
+const STACK_CONTAINER_SELECTOR = '.dx-toast-stack';
+
+const showToast = ClientFunction(
+  (type) => {
+    (window as any).DevExpress.ui.notify(
+      {
+        message: `Toast ${type}`,
+        type,
+        displayTime: 35000000,
+        animation: {
+          show: {
+            type: 'fade', duration: 0,
+          },
+          hide: { type: 'fade', duration: 0 },
+        },
+      },
+      {
+        position: 'top center',
+        direction: 'down-push',
+      },
+    );
+  },
+);
+
+const hideAllToasts = ClientFunction(() => {
+  (window as any).DevExpress.ui.hideToasts();
+});
+
+test('Toasts', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Toasts.png', { element: STACK_CONTAINER_SELECTOR, shouldTestInCompact: true });
+  await testScreenshot(t, takeScreenshot, 'Toasts.png', {
+    element: STACK_CONTAINER_SELECTOR,
+    theme: `${getFullThemeName().replace('light', 'dark')}`,
+  });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await Promise.all(types.map((type) => showToast(type)));
+
+  await insertStylesheetRulesToPage(`${STACK_CONTAINER_SELECTOR} { padding: 20px; }`);
+  await setClassAttribute(Selector(STACK_CONTAINER_SELECTOR), `dx-theme-${getThemeName()}-typography`);
+}).after(async () => {
+  await hideAllToasts();
+
+  await ClientFunction(() => {
+    $(STACK_CONTAINER_SELECTOR).remove();
+  }, {
+    dependencies: { STACK_CONTAINER_SELECTOR },
+  })();
+});