feat(message): add non-dismissible Message

Signed-off-by: astagnol <[email protected]>

packages/ods/src/components/message/src/components/ods-message/ods-message.scss

@@ -14,7 +14,7 @@
     @include message.ods-message();
 
     &__icon {
-      padding: 0.125rem;
+      padding: 0.125rem 0;
       font-size: 1.25rem;
     }
 
@@ -24,6 +24,8 @@
     }
 
     &__close {
+      height: auto;
+
       &--critical::part(button) {
         @include message.ods-message-close('critical');
       }

packages/ods/src/components/message/src/components/ods-message/ods-message.tsx

@@ -14,6 +14,7 @@ export class OdsMessage {
   @Element() el!: HTMLElement;
 
   @Prop({ reflect: true }) public color: OdsMessageColor = ODS_MESSAGE_COLOR.information;
+  @Prop({ reflect: true }) public isDismissible: boolean = true;
   @Prop({ reflect: true }) public variant: OdsMessageVariant = ODS_MESSAGE_VARIANT.default;
 
   @Event() odsRemove!: EventEmitter<void>;
@@ -42,15 +43,18 @@ export class OdsMessage {
 
           <slot></slot>
 
-          <ods-button
-            class={ `ods-message__message__close ods-message__message__close--${this.color}` }
-            icon={ ODS_ICON_NAME.xmark }
-            label=""
-            onClick={ () => this.handleClick() }
-            onKeyUp={ (event: KeyboardEvent) => this.handleKeyUp(event) }
-            size={ ODS_BUTTON_SIZE.xs }
-            variant={ ODS_BUTTON_VARIANT.ghost }>
-          </ods-button>
+          {
+            this.isDismissible &&
+            <ods-button
+              class={ `ods-message__message__close ods-message__message__close--${this.color}` }
+              icon={ ODS_ICON_NAME.xmark }
+              label=""
+              onClick={ () => this.handleClick() }
+              onKeyUp={ (event: KeyboardEvent) => this.handleKeyUp(event) }
+              size={ ODS_BUTTON_SIZE.xs }
+              variant={ ODS_BUTTON_VARIANT.ghost }>
+            </ods-button>
+          }
         </div>
       </Host>
     );

packages/ods/src/components/message/src/index.html

@@ -59,6 +59,9 @@
   <ods-message color="success" variant="light">Success message</ods-message>
   <ods-message color="warning" variant="light">Warning message</ods-message>
 
+  <p>Not dismissible</p>
+  <ods-message is-dismissible="false">Not Dismissible Message</ods-message>
+
   <p>Custom style</p>
   <ods-message class="my-message">Custom Message</ods-message>
 

packages/ods/src/style/_message.scss

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-rows: min-content;
   grid-template-columns: max-content 1fr max-content;
-  column-gap: 0.625rem;
+  column-gap: 0.5rem;
   padding: 0.5rem;
 }
 

packages/storybook/stories/components/message/documentation.mdx

@@ -36,7 +36,7 @@ _**Message** component helps to communicate with users providing feedback or inf
 
 2. <StorybookLink kind="ODS Components/Text" label="Text" story="Documentation" />, which can be a plain text or contain a link
 
-3. A `cross` icon <StorybookLink kind="ODS Components/Button" label="Button" story="Documentation" />, which is a close button to dismiss the **Message**
+3. A `cross` icon <StorybookLink kind="ODS Components/Button" label="Button" story="Documentation" />, which is a close button to dismiss the **Message** (optional)
 
 <Heading label="Usage" level={ 2 } />
 
@@ -63,6 +63,7 @@ There are four different subtypes of standard **Messages**, in order of priority
     '- Messages must be displayed in the user language',
     '- Position a Message wherever it is visible for the user',
     '- Use a Message when an immediate action is required by the user',
+    '- Use non dismissible Message for mandatory warnings that need to be resolved',
   ]}
 />
 
@@ -76,7 +77,7 @@ They are positioned near their related items or right after the header and befor
 
 Based on its informational manner, the component default behavior is being read-only. You can only select its content if needed.
 
-A click on the `close` icon <StorybookLink kind="ODS Components/Button" label="Button" story="Documentation" /> will dismiss the **Message**.
+When a **Message** is dismissible, a click on the `close` icon <StorybookLink kind="ODS Components/Button" label="Button" story="Documentation" /> will dismiss the **Message**.
 
 <Heading label="Variation" level={ 2 } />
 

packages/storybook/stories/components/message/message.stories.ts

@@ -21,6 +21,7 @@ export const Demo: StoryObj = {
   render: (arg) => html`
 <ods-message class="my-message-demo"
          color="${arg.color}"
+         is-dismissible="${arg.isDismissible}"
          variant="${arg.variant}">
   ${unsafeHTML(arg.content)}
 </ods-message>
@@ -47,6 +48,14 @@ export const Demo: StoryObj = {
       control: { type: 'select' },
       options: ODS_MESSAGE_COLORS,
     },
+    isDismissible: {
+      table: {
+        category: CONTROL_CATEGORY.general,
+        defaultValue: { summary: true },
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
     variant: {
       table: {
         category: CONTROL_CATEGORY.design,
@@ -69,6 +78,7 @@ export const Demo: StoryObj = {
   args: {
     content: 'Some Message content',
     color: ODS_MESSAGE_COLOR.information,
+    isDismissible: true,
     variant: ODS_MESSAGE_VARIANT.default,
   },
 };
@@ -102,6 +112,13 @@ export const Color: StoryObj = {
   `,
 };
 
+export const NotDismissible: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-message is-dismissible="false">Default Message</ods-message>
+  `,
+};
+
 export const Variant: StoryObj = {
   tags: ['isHidden'],
   decorators: [(story) => html`<div style="display: flex; flex-direction: column; gap: 8px;">${story()}</div>`],

packages/storybook/stories/components/message/migration.from.17.x.mdx

@@ -21,11 +21,11 @@ Has been removed.
 
 Message is inline by default. If you need to change this, you can use the style customization.
 
-`removable` <OdsBadge color="critical" label="Removed" size="sm" />
+`removable` <OdsBadge color="information" label="Updated" size="sm" />
 
-Has been removed.
+Has been updated.
 
-Message is always removable.
+You can use the new `isDismissible` attribute to obtain the same behavior.
 
 `type` <OdsBadge color="critical" label="Removed" size="sm" />
 

packages/storybook/stories/components/message/technical-information.mdx

@@ -33,6 +33,10 @@ Custom CSS:
 
 <Canvas of={ MessageStories.Color } sourceState="shown" />
 
+<Heading label="Not Dismissible" level={ 3 } />
+
+<Canvas of={ MessageStories.NotDismissible } sourceState="shown" />
+
 <Heading label="Variant" level={ 3 } />
 
 <Canvas of={ MessageStories.Variant } sourceState="shown" />