diff --git a/.changeset/curly-mice-build.md b/.changeset/curly-mice-build.md new file mode 100644 index 00000000000..a8f7a0ab083 --- /dev/null +++ b/.changeset/curly-mice-build.md @@ -0,0 +1,6 @@ +--- +'@siemens/ix': minor +--- + +`ix-message-bar`: Add new types `critical`, `success`, `primary`, and `neutral`, and deprecate type `danger`. +Additionally, add new `NotificationColor` colors `color-critical`, `color-alarm`, `color-neutral`, and `color-primary`. diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index aff0bbaad70..afeaa78c114 100644 --- a/packages/core/component-doc.json +++ b/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" diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index b268723ec47..d2f38297bd5 100644 --- a/packages/core/src/components.d.ts +++ b/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) => 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 { /** diff --git a/packages/core/src/components/message-bar/message-bar.scss b/packages/core/src/components/message-bar/message-bar.scss index 0d252866274..fab65209749 100644 --- a/packages/core/src/components/message-bar/message-bar.scss +++ b/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; diff --git a/packages/core/src/components/message-bar/message-bar.tsx b/packages/core/src/components/message-bar/message-bar.tsx index 0c0518db2e1..1d1d600ea67 100644 --- a/packages/core/src/components/message-bar/message-bar.tsx +++ b/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; } } diff --git a/packages/core/src/components/utils/notification-color.ts b/packages/core/src/components/utils/notification-color.ts index 2775a8f23d0..eacadcf6bc5 100644 --- a/packages/core/src/components/utils/notification-color.ts +++ b/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'; diff --git a/packages/core/src/tests/message-bar/basic/index.html b/packages/core/src/tests/message-bar/basic/index.html index 6c9c39fb427..fc58b44cc34 100644 --- a/packages/core/src/tests/message-bar/basic/index.html +++ b/packages/core/src/tests/message-bar/basic/index.html @@ -15,14 +15,19 @@ Stencil Component Starter -
- Message text - Message text - -
- Message text Action -
-
+
+ Message text + Message text + Message text + Message text + Message text + Message text + +
+ Message text Action +
+
+ Message text1
diff --git a/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-dark-linux.png index 949ff48b214..fd73e6d9f0f 100644 Binary files a/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-light-linux.png index 735cd16a34b..d5f8c33752c 100644 Binary files a/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/message-bar/message-bar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/storybook-docs/src/stories/message-bar.stories.ts b/packages/storybook-docs/src/stories/message-bar.stories.ts index af988e53c09..0dcc6488bf1 100644 --- a/packages/storybook-docs/src/stories/message-bar.stories.ts +++ b/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, + }, +};