feat(core/message-bar): add new message-bar types

.changeset/curly-mice-build.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+Add new `message-bar` tyes: `critical`, `success`, `primary`, `neutral`.

packages/core/component-doc.json

@@ -14066,19 +14066,33 @@
         },
         {
           "name": "type",
-          "type": "\"danger\" | \"info\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"danger\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
           "complexType": {
-            "original": "'danger' | 'warning' | 'info'",
-            "resolved": "\"danger\" | \"info\" | \"warning\"",
+            "original": "| 'alarm'\n    | 'danger'\n    | 'critical'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'neutral'\n    | 'primary'",
+            "resolved": "\"alarm\" | \"critical\" | \"danger\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
             "references": {}
           },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
           "docs": "Specifies the type of the alert.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Type `danger` will be removed in 4.0. Use `alarm` instead."
+            }
+          ],
           "default": "'info'",
+          "deprecation": "Type `danger` will be removed in 4.0. Use `alarm` instead.",
           "values": [
+            {
+              "value": "alarm",
+              "type": "string"
+            },
+            {
+              "value": "critical",
+              "type": "string"
+            },
             {
               "value": "danger",
               "type": "string"
@@ -14087,6 +14101,18 @@
               "value": "info",
               "type": "string"
             },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
             {
               "value": "warning",
               "type": "string"

packages/core/src/components.d.ts

@@ -2059,8 +2059,16 @@ export namespace Components {
         "dismissible": boolean;
         /**
           * Specifies the type of the alert.
+          * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.
          */
-        "type": 'danger' | 'warning' | 'info';
+        "type": | 'alarm'
+    | 'danger'
+    | 'critical'
+    | 'warning'
+    | 'success'
+    | 'info'
+    | 'neutral'
+    | 'primary';
     }
     interface IxModal {
         /**
@@ -7343,8 +7351,16 @@ declare namespace LocalJSX {
         "onClosedChange"?: (event: IxMessageBarCustomEvent<any>) => void;
         /**
           * Specifies the type of the alert.
+          * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.
          */
-        "type"?: 'danger' | 'warning' | 'info';
+        "type"?: | 'alarm'
+    | 'danger'
+    | 'critical'
+    | 'warning'
+    | 'success'
+    | 'info'
+    | 'neutral'
+    | 'primary';
     }
     interface IxModal {
         /**

packages/core/src/components/message-bar/message-bar.scss

@@ -30,20 +30,23 @@
     background-color: var(--theme-messagebar--background);
   }
 
-  .danger {
-    border: solid var(--theme-message-bar--border-thickness)
-      var(--theme-color-alarm);
-  }
+  $message-types: (
+    'alarm': var(--theme-color-alarm),
+    'danger': var(--theme-color-alarm),
+    'critical': var(--theme-color-critical),
+    'warning': var(--theme-color-warning),
+    'success': var(--theme-color-success),
+    'info': var(--theme-color-info),
+    'neutral': var(--theme-color-neutral),
+    'primary': var(--theme-color-primary)
+  );
 
-  .warning {
-    border: solid var(--theme-message-bar--border-thickness)
-      var(--theme-color-warning);
+  @each $type, $color in $message-types {
+    .#{$type} {
+      border: solid var(--theme-message-bar--border-thickness) $color;
+    }
   }
 
-  .info {
-    border: solid var(--theme-message-bar--border-thickness)
-      var(--theme-color-info);
-  }
 
   .message-content {
     @include ellipsis;

packages/core/src/components/message-bar/message-bar.tsx

@@ -19,6 +19,17 @@ import {
 import anime from 'animejs';
 import { NotificationColor } from '../utils/notification-color';
 
+interface MessageTypeConfig {
+  icon?:
+    | 'error'
+    | 'warning'
+    | 'info'
+    | 'success'
+    | 'notification'
+    | 'warning-rhomb';
+  color: NotificationColor;
+}
+
 @Component({
   tag: 'ix-message-bar',
   styleUrl: 'message-bar.scss',
@@ -27,8 +38,17 @@ import { NotificationColor } from '../utils/notification-color';
 export class MessageBar {
   /**
    * Specifies the type of the alert.
+   * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.
    */
-  @Prop() type: 'danger' | 'warning' | 'info' = 'info';
+  @Prop() type:
+    | 'alarm'
+    | 'danger'
+    | 'critical'
+    | 'warning'
+    | 'success'
+    | 'info'
+    | 'neutral'
+    | 'primary' = 'info';
 
   /**
    * If true, close button is enabled and alert can be dismissed by the user
@@ -45,28 +65,38 @@ export class MessageBar {
    */
   @Event() closeAnimationCompleted!: EventEmitter;
 
-  @State() icon?: 'error' | 'warning' | 'info';
+  @State() icon?:
+    | 'error'
+    | 'warning'
+    | 'info'
+    | 'success'
+    | 'notification'
+    | 'warning-rhomb';
 
   @State() color?: NotificationColor;
 
   private static readonly duration = 300;
+  private static readonly messageTypeConfigs: Record<
+    string,
+    MessageTypeConfig
+  > = {
+    alarm: { icon: 'error', color: 'color-alarm' },
+    danger: { icon: 'error', color: 'color-alarm' },
+    critical: { icon: 'warning-rhomb', color: 'color-critical' },
+    warning: { icon: 'warning', color: 'color-warning' },
+    success: { icon: 'success', color: 'color-success' },
+    info: { icon: 'info', color: 'color-info' },
+    neutral: { icon: 'notification', color: 'color-neutral' },
+    primary: { icon: 'notification', color: 'color-primary' },
+  };
 
   private divElement?: HTMLElement;
 
   componentWillRender() {
-    if (this.type === 'danger') {
-      this.icon = 'error';
-      this.color = 'color-alarm';
-    }
-
-    if (this.type === 'info') {
-      this.icon = 'info';
-      this.color = 'color-info';
-    }
-
-    if (this.type === 'warning') {
-      this.icon = 'warning';
-      this.color = 'color-warning';
+    const config = MessageBar.messageTypeConfigs[this.type];
+    if (config) {
+      this.icon = config.icon;
+      this.color = config.color;
     }
   }
 

packages/core/src/components/utils/notification-color.ts

@@ -13,6 +13,9 @@
 export type NotificationColor =
   | 'color-std-text'
   | 'color-info'
+  | 'color-critical'
   | 'color-warning'
   | 'color-success'
-  | 'color-alarm';
+  | 'color-alarm'
+  | 'color-neutral'
+  | 'color-primary';

packages/core/src/tests/message-bar/basic/index.html

@@ -15,14 +15,19 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-  <div style="margin: 0.5rem; display: block">
-    <ix-message-bar style="margin-bottom: 0.5rem; display: block">Message text</ix-message-bar>
-    <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</ix-message-bar>
-    <ix-message-bar style="display: block" type="danger">
-      <div class="d-flex align-items-center justify-content-between">
-        Message text <ix-button>Action</ix-button>
-      </div>
-    </ix-message-bar>
+    <div style="margin: 0.5rem; display: block">
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="critical">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="success">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="neutral">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="primary">Message text</ix-message-bar>
+      <ix-message-bar style="display: block" type="danger">
+        <div class="d-flex align-items-center justify-content-between">
+          Message text <ix-button>Action</ix-button>
+        </div>
+      </ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="alarm">Message text1</ix-message-bar>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/storybook-docs/src/stories/message-bar.stories.ts

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 type Element = {
-  type: 'danger' | 'warning' | 'info';
+  type: 'alarm' | 'danger' | 'warning' | 'success' | 'info' | 'critical' | 'neutral' | 'primary';
   dismissible: boolean;
 };
 
@@ -29,7 +29,7 @@ const meta = {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: ['danger', 'warning', 'info'],
+      options: ['alarm', 'danger', 'warning', 'success', 'info', 'critical', 'neutral', 'primary'],
     },
     dismissible: {
       control: { type: 'boolean' },
@@ -66,3 +66,38 @@ export const Danger: Story = {
     dismissible: true,
   },
 };
+
+export const Success: Story = {
+  args: {
+    type: 'success',
+    dismissible: true,
+  },
+};
+
+export const Critical: Story = {
+  args: {
+    type: 'critical',
+    dismissible: true,
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    type: 'neutral',
+    dismissible: true,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    type: 'success',
+    dismissible: true,
+  },
+};
+
+export const Alarm: Story = {
+  args: {
+    type: 'alarm',
+    dismissible: true,
+  },
+};