feat(message): add is-dismissible related tests & fix gap issue

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

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

@@ -24,6 +24,7 @@
     }
 
     &__close {
+      grid-column: 3;
       height: auto;
 
       &--critical::part(button) {

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

@@ -77,7 +77,7 @@
       </ods-text>
       <ods-icon id="tooltip-trigger-2"
                 class="my-icon"
-                name="info-circle">
+                name="circle-question">
       </ods-icon>
 
       <ods-tooltip trigger-id="tooltip-trigger-2">

packages/ods/src/components/message/tests/rendering/ods-message.e2e.ts

@@ -72,6 +72,24 @@ describe('ods-message rendering', () => {
     });
   });
 
+  describe('isDismissible', () => {
+    it('should render with close button by default', async() => {
+      await setup('<ods-message></ods-message>');
+
+      const closeButton = await page.find('ods-message >>> .ods-message__message__close');
+
+      expect(closeButton).not.toBeNull();
+    });
+
+    it('should render without close button if set to false', async() => {
+      await setup('<ods-message is-dismissible="false"></ods-message>');
+
+      const closeButton = await page.find('ods-message >>> .ods-message__message__close');
+
+      expect(closeButton).toBeNull();
+    });
+  });
+
   describe('part', () => {
     it('should render with custom style applied', async() => {
       const customBackgroundColor = '#ff0000';

packages/ods/src/components/message/tests/rendering/ods-message.spec.ts

@@ -31,6 +31,22 @@ describe('ods-message rendering', () => {
     });
   });
 
+  describe('isDismissible', () => {
+    it('should be reflected', async() => {
+      const isDismissibleValue = 'true';
+
+      await setup(`<ods-message is-dismissible="${isDismissibleValue}"></ods-message>`);
+
+      expect(root?.getAttribute('is-dismissible')).toBe(isDismissibleValue);
+    });
+
+    it('should be set by default', async() => {
+      await setup('<ods-message></ods-message>');
+
+      expect(root?.getAttribute('is-dismissible')).not.toBeNull();
+    });
+  });
+
   describe('variant', () => {
     it('should be reflected', async() => {
       const dummyValue = 'dummy value';

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 max-content;
+  grid-template-columns: max-content 1fr;
   column-gap: 0.5rem;
   padding: 0.5rem;
 }