Informer: add type option and styles for info type

Zedwag · web-flow · commit 5a7fd83ef578 · 2025-05-23T16:49:53.000+02:00
diff --git a/apps/react-storybook/stories/informer/Informer.stories.tsx b/apps/react-storybook/stories/informer/Informer.stories.tsx
@@ -7,10 +7,10 @@ import { wrapDxWithReact } from '../utils';
 const Informer = wrapDxWithReact(dxInformer);
 
 const textOptions = {
-    error: 'error',
-    biggerError: 'bigger error',
-    bigError: 'really really big and huge error that takes really much space',
-    superBigError: 'error that will never be able to fit into one line because it is so big and even if it tried to fit it would still not be able to be displayed properly due to its excessive length',
+    error: 'message',
+    biggerError: 'bigger message',
+    bigError: 'really really big and huge message that takes really much space',
+    superBigError: 'message that will never be able to fit into one line because it is so big and even if it tried to fit it would still not be able to be displayed properly due to its excessive length',
 };
 
 const meta: Meta<typeof Informer> = {
@@ -32,6 +32,7 @@ export const DefaultInformer: Story = {
         contentAlignment: 'center',
         icon: 'errorcircle',
         text: 'error',
+        type: 'error',
         visible: true,
         rtlEnabled: false,
         disabled: false,
@@ -57,6 +58,10 @@ export const DefaultInformer: Story = {
             mapping: textOptions,
             control: { type: 'select' }
         },
+        type: {
+            options: ['error', 'info'],
+            control: { type: 'select' }
+        },
         visible: {
             control: 'boolean'
         },
@@ -73,6 +78,7 @@ export const DefaultInformer: Story = {
         contentAlignment,
         icon,
         text,
+        type,
         visible,
         rtlEnabled,
         disabled,
@@ -85,6 +91,7 @@ export const DefaultInformer: Story = {
                     rtlEnabled={rtlEnabled}
                     visible={visible}
                     text={text}
+                    type={type}
                     icon={icon}
                     showBackground={showBackground}
                     contentAlignment={contentAlignment}
diff --git a/packages/devextreme-scss/scss/widgets/base/informer/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/informer/_mixins.scss
@@ -1,26 +1,42 @@
 @use "../icons" as *;
 
 @mixin informer(
-  $color,
-  $background-color,
+  $error-color,
+  $error-background-color,
+  $info-color,
+  $info-background-color,
   $border-radius,
   $icon-size,
   $padding-inline,
   $padding-block,
   $column-gap,
 ) {
   .dx-informer {
-    color: $color;
     padding-inline: $padding-inline;
     padding-block: $padding-block;
     column-gap: $column-gap;
   }
 
   .dx-informer-bg {
-    background-color: $background-color;
     border-radius: $border-radius;
   }
 
+  .dx-informer-error {
+    color: $error-color;
+
+    &.dx-informer-bg {
+      background-color: $error-background-color;
+    }
+  }
+
+  .dx-informer-info {
+    color: $info-color;
+
+    &.dx-informer-bg {
+      background-color: $info-background-color;
+    }
+  }
+
   .dx-informer-icon {
     & * {
       @include dx-icon-sizing($icon-size);
diff --git a/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/informer/_colors.scss
@@ -3,13 +3,17 @@
 
 // adduse
 
-$informer-color: $base-invalid-color !default;
-$informer-background-color: null !default;
+$informer-error-color: $base-invalid-color !default;
+$informer-error-background-color: null !default;
+$informer-info-color: $base-text-color !default;
+$informer-info-background-color: null !default;
 
 @if $mode == "light" {
-  $informer-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67);
+  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, -358), 0.58), 46.67);
+  $informer-info-background-color: lighten($base-text-color, 74.90);
 }
 
 @if $mode == "dark" {
-  $informer-background-color: darken(desaturate($base-danger, 5.06), 53.53);
+  $informer-error-background-color: darken(desaturate($base-danger, 5.06), 53.53);
+  $informer-info-background-color: darken($base-text-color, 76.08);
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/informer/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/informer/_index.scss
@@ -6,8 +6,10 @@
 // adduse
 
 @include informer(
-  $informer-color,
-  $informer-background-color,
+  $informer-error-color,
+  $informer-error-background-color,
+  $informer-info-color,
+  $informer-info-background-color,
   $informer-border-radius,
   $informer-icon-size,
   $informer-padding-inline,
diff --git a/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/informer/_colors.scss
@@ -3,45 +3,63 @@
 
 // adduse
 
-$informer-color: $base-invalid-color !default;
-$informer-background-color: null !default;
+$informer-error-color: null !default;
+$informer-error-background-color: null !default;
+$informer-info-color: null !default;
+$informer-info-background-color: null !default;
 
 @if $color == "carmine" {
-  $informer-color: darken(desaturate(adjust-hue($base-danger, -351), 26.91), 5.49);
-  $informer-background-color: lighten(desaturate(adjust-hue($base-danger, -347), 26.69), 33.14);
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 26.91), 5.49);
+  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -347), 26.69), 33.14);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: lighten($base-text-color, 72.16);
 }
 
 @if $color == "contrast" {
-  $informer-color: darken(desaturate(adjust-hue($base-danger, 2), 16.93), 6.08);
-  $informer-background-color: rgba(212, 63, 58, 0.1);
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, 2), 16.93), 6.08);
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: darken($base-text-color, 12.94);
+  $informer-info-background-color: darken($base-text-color, 68.63);;
 }
 
 @if $color == "dark" {
-  $informer-color: $base-danger;
-  $informer-background-color: rgba(212, 63, 58, 0.1);
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: darken($base-text-color, 55.69)
 }
 
 @if $color == "darkmoon" {
-  $informer-color: darken(desaturate(adjust-hue($base-danger, -342), 28.85), 6.67);
-  $informer-background-color: rgba(212, 63, 58, 0.1);
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -342), 28.85), 6.67);
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: darken($base-text-color, 12.94);
+  $informer-info-background-color: darken($base-text-color, 68.63);
 }
 
 @if $color == "darkviolet" {
-  $informer-color: $base-danger;
-  $informer-background-color: rgba(212, 63, 58, 0.1);
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: rgba(212, 63, 58, 0.1);
+  $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 9.41);
+  $informer-info-background-color: darken(desaturate(adjust-hue($base-text-color, -210), 11.11), 65.10);
 }
 
 @if $color == "greenmist" {
-  $informer-color: darken(desaturate(adjust-hue($base-danger, -351), 27.05), 4.90);
-  $informer-background-color: lighten(desaturate(adjust-hue($base-danger, -348), 26.83), 33.73);
+  $informer-error-color: darken(desaturate(adjust-hue($base-danger, -351), 27.05), 4.90);
+  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, -348), 26.83), 33.73);
+  $informer-info-color: darken(desaturate(adjust-hue($base-text-color, -191), 32.77), 3.33);
+  $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -191), 32.77), 68.82)
 }
 
 @if $color == "light" {
-  $informer-color: $base-danger;
-  $informer-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: lighten($base-text-color, 72.16);
 }
 
 @if $color == "softblue" {
-  $informer-color: $base-danger;
-  $informer-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-error-color: $base-danger;
+  $informer-error-background-color: lighten(saturate(adjust-hue($base-danger, 4), 0.22), 38.63);
+  $informer-info-color: $base-text-color;
+  $informer-info-background-color: lighten($base-text-color, 72.16);
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/informer/_index.scss b/packages/devextreme-scss/scss/widgets/generic/informer/_index.scss
@@ -6,8 +6,10 @@
 // adduse
 
 @include informer(
-  $informer-color,
-  $informer-background-color,
+  $informer-error-color,
+  $informer-error-background-color,
+  $informer-info-color,
+  $informer-info-background-color,
   $informer-border-radius,
   $informer-icon-size,
   $informer-padding-inline,
diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/material/informer/_colors.scss
@@ -3,13 +3,17 @@
 
 // adduse
 
-$informer-color: $base-danger !default;
-$informer-background-color: null !default;
+$informer-error-color: $base-danger !default;
+$informer-error-background-color: null !default;
+$informer-info-color: $base-text-color !default;
+$informer-info-background-color: null !default;
 
 @if $mode == "light" {
-  $informer-background-color: lighten(desaturate(adjust-hue($base-danger, 1), 24.92), 38.24);
+  $informer-error-background-color: lighten(desaturate(adjust-hue($base-danger, 1), 24.92), 38.24);
+  $informer-info-background-color: lighten(desaturate(adjust-hue($base-text-color, -240), 100.00), 48.63);
 }
 
 @if $mode == "dark" {
-  $informer-background-color: darken(desaturate(adjust-hue($base-danger, 1), 41.80), 53.92);
+  $informer-error-background-color: darken(desaturate(adjust-hue($base-danger, 1), 41.80), 53.92);
+  $informer-info-background-color: darken(saturate(adjust-hue($base-text-color, 240), 6.04), 70.78);
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/informer/_index.scss b/packages/devextreme-scss/scss/widgets/material/informer/_index.scss
@@ -6,8 +6,10 @@
 // adduse
 
 @include informer(
-  $informer-color,
-  $informer-background-color,
+  $informer-error-color,
+  $informer-error-background-color,
+  $informer-info-color,
+  $informer-info-background-color,
   $informer-border-radius,
   $informer-icon-size,
   $informer-padding-inline,
diff --git a/packages/devextreme/js/__internal/ui/informer/informer.ts b/packages/devextreme/js/__internal/ui/informer/informer.ts
@@ -7,6 +7,8 @@ import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 export const INFORMER_CLASS = 'dx-informer';
+const INFORMER_ERROR_CLASS = 'dx-informer-error';
+const INFORMER_INFO_CLASS = 'dx-informer-info';
 const INFORMER_ALIGNMENT_START_CLASS = 'dx-informer-alignment-start';
 const INFORMER_ALIGNMENT_CENTER_CLASS = 'dx-informer-alignment-center';
 const INFORMER_ALIGNMENT_END_CLASS = 'dx-informer-alignment-end';
@@ -19,6 +21,7 @@ export interface Properties extends WidgetOptions<Informer> {
   icon?: string;
   showBackground?: boolean;
   text?: string;
+  type?: 'error' | 'info';
 }
 
 class Informer extends Widget<Properties> {
@@ -33,6 +36,7 @@ class Informer extends Widget<Properties> {
       icon: '',
       showBackground: true,
       text: '',
+      type: 'error',
     };
   }
 
@@ -42,6 +46,7 @@ class Informer extends Widget<Properties> {
     this.$element().addClass(INFORMER_CLASS);
     this.$element().toggleClass(INFORMER_BG_CLASS, showBackground);
     this._setAlignmentClass();
+    this._setTypeClass();
 
     super._initMarkup();
 
@@ -71,6 +76,24 @@ class Informer extends Widget<Properties> {
     }
   }
 
+  _setTypeClass(): void {
+    this.$element()
+      .removeClass(INFORMER_ERROR_CLASS)
+      .removeClass(INFORMER_INFO_CLASS);
+
+    const { type } = this.option();
+
+    switch (type) {
+      case 'info':
+        this.$element().addClass(INFORMER_INFO_CLASS);
+        break;
+      case 'error':
+      default:
+        this.$element().addClass(INFORMER_ERROR_CLASS);
+        break;
+    }
+  }
+
   _renderIcon(): void {
     this._$icon?.remove();
 
@@ -119,6 +142,9 @@ class Informer extends Widget<Properties> {
       case 'text':
         this._updateText();
         break;
+      case 'type':
+        this._setTypeClass();
+        break;
       default:
         super._optionChanged(args);
     }
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/informer.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/informer.markup.tests.js
@@ -3,6 +3,8 @@ import $ from 'jquery';
 import Informer from 'ui/informer';
 
 const INFORMER_CLASS = 'dx-informer';
+const INFORMER_ERROR_CLASS = 'dx-informer-error';
+const INFORMER_INFO_CLASS = 'dx-informer-info';
 const INFORMER_ALIGNMENT_START_CLASS = 'dx-informer-alignment-start';
 const INFORMER_ALIGNMENT_CENTER_CLASS = 'dx-informer-alignment-center';
 const INFORMER_ALIGNMENT_END_CLASS = 'dx-informer-alignment-end';
@@ -96,5 +98,37 @@ QUnit.module('Informer', moduleConfig, () => {
             assert.strictEqual(this.$element.hasClass(INFORMER_ALIGNMENT_START_CLASS), false, 'previous alignment class is removed');
             assert.strictEqual(this.$element.hasClass(INFORMER_ALIGNMENT_END_CLASS), true, 'new alignment class is added');
         });
+
+        QUnit.test(`should have ${INFORMER_ERROR_CLASS} class by default`, function(assert) {
+            assert.strictEqual(this.$element.hasClass(INFORMER_ALIGNMENT_CENTER_CLASS), true);
+        });
+
+        [
+            {
+                type: 'error',
+                className: INFORMER_ERROR_CLASS,
+            },
+            {
+                type: 'info',
+                className: INFORMER_INFO_CLASS,
+            },
+        ].forEach(({ type, className }) => {
+            QUnit.test(`should have ${className} class when type=${type}`, function(assert) {
+                this.reinit({ type });
+
+                assert.strictEqual(this.$element.hasClass(className), true);
+            });
+        });
+
+        QUnit.test('should add actual type class and remove the old one on type option runtime change', function(assert) {
+            this.reinit({ type: 'info' });
+
+            assert.strictEqual(this.$element.hasClass(INFORMER_INFO_CLASS), true, 'info type class is added on init');
+
+            this.instance.option('type', 'error');
+
+            assert.strictEqual(this.$element.hasClass(INFORMER_INFO_CLASS), false, 'previous type info class is removed');
+            assert.strictEqual(this.$element.hasClass(INFORMER_ERROR_CLASS), true, 'new type error class is added');
+        });
     });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js
@@ -766,6 +766,7 @@ testComponentDefaults(Informer,
         icon: '',
         showBackground: true,
         text: '',
+        type: 'error',
     }
 );
 
