feat(message): fix alignment & update doc

Signed-off-by: Stagnol <[email protected]>
ovh · Jul 29, 2024 · 46f6404 · 46f6404
1 parent 21d5f5f
commit 46f6404
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 26 deletions.
diff --git a/packages/ods/src/components/message/src/components/ods-message/ods-message.scss b/packages/ods/src/components/message/src/components/ods-message/ods-message.scss
@@ -3,11 +3,6 @@
 
 $colors: ('critical', 'danger', 'information', 'success', 'warning');
 
-slot:not([name]) {
-  display: flex;
-  align-self: center;
-}
-
 .ods-message {
   &__message {
     $message: &;
@@ -16,12 +11,20 @@ slot:not([name]) {
 
     padding: 0.5rem;
 
+    &__wrapper {
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+    }
+
     &__icon {
+      align-self: flex-start;
       margin-right: 0.5rem;
       font-size: 1.5rem;
     }
 
     &__close-wrapper {
+      align-self: flex-start;
       margin-left: auto;
     }
 

diff --git a/packages/ods/src/components/message/src/components/ods-message/ods-message.tsx b/packages/ods/src/components/message/src/components/ods-message/ods-message.tsx
@@ -33,21 +33,23 @@ export class OdsMessage {
         <div
           class={ `ods-message__message ods-message__message--${this.color} ods-message__message--${this.variant}` }
           part="message">
-          <ods-icon
-            class="ods-message__message__icon"
-            name={ getIconName(this.color) }>
-          </ods-icon>
-
-          <slot></slot>
-
-          <div class="ods-message__message__close-wrapper">
-            <button
-              class={`ods-message__message__close ods-message__message__close--${this.color}`}
-              onClick={this.handleClick.bind(this)}
-              onKeyUp={(event: KeyboardEvent) => handleKeySpace(event, this.handleKeyUp.bind(this))}>
-              <ods-icon name={ODS_ICON_NAME.cross}>
-              </ods-icon>
-            </button>
+          <div class={'ods-message__message__wrapper'}>
+            <ods-icon
+              class="ods-message__message__icon"
+              name={getIconName(this.color)}>
+            </ods-icon>
+
+            <slot></slot>
+
+            <div class="ods-message__message__close-wrapper">
+              <button
+                class={`ods-message__message__close ods-message__message__close--${this.color}`}
+                onClick={this.handleClick.bind(this)}
+                onKeyUp={(event: KeyboardEvent) => handleKeySpace(event, this.handleKeyUp.bind(this))}>
+                <ods-icon name={ODS_ICON_NAME.cross}>
+                </ods-icon>
+              </button>
+            </div>
           </div>
         </div>
       </Host>

diff --git a/packages/ods/src/components/message/src/globals.ts b/packages/ods/src/components/message/src/globals.ts
@@ -6,4 +6,5 @@
  *   import '../../text/src';
  */
 import '../../icon/src';
+import '../../text/src';
 import '../../tooltip/src';
diff --git a/packages/ods/src/components/message/src/index.html b/packages/ods/src/components/message/src/index.html
@@ -13,6 +13,27 @@
     .my-message::part(message) {
       background-color: yellow;
     }
+
+    .my-text::part(text) {
+      margin: 0;
+    }
+
+    .my-icon {
+      padding-left: 4px;
+      font-size: 18px;
+    }
+
+    .multiline {
+      width: 80px;
+    }
+
+    .width::part(message) {
+      width: 100%;
+    }
+
+    .height::part(message) {
+      height: 200px;
+    }
   </style>
 </head>
 
@@ -44,13 +65,18 @@
   <p>Interactive element in slot</p>
   <ods-message><button>Click me</button></ods-message>
 
-  <p>Tooltip in slot</p>
+  <p>Text & tooltip in slot</p>
   <ods-message>
-    <button id="tooltip-trigger">
-      Hover me
-    </button>
+    <ods-text preset="heading-5"
+              class="my-text">
+      Message content
+    </ods-text>
+    <ods-icon id="tooltip-trigger-2"
+              class="my-icon"
+              name="info-circle">
+    </ods-icon>
 
-    <ods-tooltip trigger-id="tooltip-trigger">
+    <ods-tooltip trigger-id="tooltip-trigger-2">
       Tooltip content
     </ods-tooltip>
   </ods-message>
@@ -64,5 +90,22 @@
       <option value="hamster">Hamster</option>
     </select>
   </ods-message>
+
+  <p>Multiline</p>
+  <div class="multiline">
+    <ods-message >
+      A long text in a small space
+    </ods-message>
+  </div>
+
+  <p>Message with defined width</p>
+  <ods-message class="width">
+    Message content
+  </ods-message>
+
+  <p>Message with defined height</p>
+  <ods-message class="height">
+    Message content
+  </ods-message>
 </body>
 </html>
diff --git a/packages/storybook/stories/components/message/message.stories.ts b/packages/storybook/stories/components/message/message.stories.ts
@@ -84,6 +84,7 @@ export const Default: StoryObj = {
 
 export const Color: StoryObj = {
   tags: ['isHidden'],
+  decorators: [(story) => html`<div style="display: flex; flex-direction: column; gap: 8px;">${story()}</div>`],
   render: () => html`
 <ods-message color="critical">Critical Message</ods-message>
 <ods-message color="danger">Danger Message</ods-message>
@@ -95,6 +96,7 @@ export const Color: StoryObj = {
 
 export const Variant: StoryObj = {
   tags: ['isHidden'],
+  decorators: [(story) => html`<div style="display: flex; flex-direction: column; gap: 8px;">${story()}</div>`],
   render: () => html`
 <ods-message variant="default">Default variant Message</ods-message>
 <ods-message variant="light">Light variant Message</ods-message>
@@ -107,7 +109,7 @@ export const CustomCSS: StoryObj = {
 <ods-message class="my-message">Custom CSS Message</ods-message>
 <style>
   .my-message::part(message) {
-    background-color: #ffff00;
+    background-color: #ac246f;
   }
 </style>
   `,