feat(message): add dismissible class to manage grid columns

Signed-off-by: astagnol <[email protected]>
ovh · Nov 4, 2024 · 9a2be2e · 9a2be2e
1 parent a5156f3
commit 9a2be2e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 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
@@ -13,6 +13,10 @@
 
     @include message.ods-message();
 
+    &__dismissible {
+      grid-template-columns: max-content 1fr;
+    }
+
     &__icon {
       padding: 0.125rem 0;
       font-size: 1.25rem;
@@ -24,7 +28,6 @@
     }
 
     &__close {
-      grid-column: 3;
       height: auto;
 
       &--critical::part(button) {

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
@@ -34,7 +34,7 @@ export class OdsMessage {
     return (
       <Host class="ods-message">
         <div
-          class={ `ods-message__message ods-message__message--${this.color} ods-message__message--${this.variant}` }
+          class={ `ods-message__message ods-message__message--${this.color} ods-message__message--${this.variant} ${this.isDismissible ? '' : 'ods-message__message__dismissible'}` }
           part="message">
           <ods-icon
             class="ods-message__message__icon"

diff --git a/packages/ods/src/style/_message.scss b/packages/ods/src/style/_message.scss
@@ -1,7 +1,7 @@
 @mixin ods-message() {
   display: grid;
   grid-template-rows: min-content;
-  grid-template-columns: max-content 1fr;
+  grid-template-columns: max-content 1fr max-content;
   column-gap: 0.5rem;
   padding: 0.5rem;
 }