Avoid stretching of the closable icon button

shoelace-style · Feb 13, 2025 · 58fc9c8 · 58fc9c8
1 parent 960de96
commit 58fc9c8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 4 deletions.
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
@@ -94,7 +94,8 @@ export default css`
     display: flex;
     align-items: center;
     font-size: var(--sl-font-size-medium);
-    padding-inline-end: var(--sl-spacing-medium);
+    margin-inline-end: var(--sl-spacing-medium);
+    align-self: center;
   }
 
   .alert__countdown {

diff --git a/src/components/alert/alert.test.ts b/src/components/alert/alert.test.ts
@@ -123,21 +123,83 @@ describe('<sl-alert>', () => {
   });
 
   describe('close button', () => {
-    it('shows a close button if the alert has the closable attribute', () => async () => {
+    it('shows a close button if the alert has the closable attribute', async () => {
       const alert = await fixture<SlAlert>(html` <sl-alert open closable>I am an alert</sl-alert> `);
       const closeButton = getCloseButton(alert);
 
       expect(closeButton).to.be.visible;
     });
 
-    it('clicking the close button closes the alert', () => async () => {
+    it('clicking the close button closes the alert', async () => {
       const alert = await fixture<SlAlert>(html` <sl-alert open closable>I am an alert</sl-alert> `);
       const closeButton = getCloseButton(alert);
 
       await expectHideAndAfterHideToBeEmittedInCorrectOrder(alert, () => {
         clickOnElement(closeButton!);
       });
     });
+
+    it('clicking above close button does not close the alert', async () => {
+      const wrapper = await fixture<HTMLDivElement>(html`<div class="wrapper" style="padding: 24px; background-color:red;"><sl-alert open closable>I am an alert</sl-alert></div>`);
+      const alert = wrapper.querySelector('sl-alert')!;
+
+      const clickTargetPromise = new Promise<HTMLElement>((resolve) => {
+        const clickHandler = sinon.spy((event: MouseEvent) => {
+          resolve(event.target as HTMLElement);
+        });
+        alert.shadowRoot!.addEventListener('click', clickHandler);
+        wrapper.addEventListener('click', clickHandler);
+      });
+
+      const closeButton = getCloseButton(alert);
+      await clickOnElement(closeButton!, 'top', 0, -4);
+      const clickTarget = await clickTargetPromise;
+      await expect(clickTarget.tagName.toLowerCase()).to.not.be.equal('sl-icon-button');
+      expect(clickTarget.classList.contains('alert')).to.be.true;
+      expect(clickTarget.classList.contains('wrapper'), 'The click should happen in the alert and not outside of it').to.be.false;
+    });
+
+    it('clicking under close button does not close the alert', async () => {
+      const wrapper = await fixture<HTMLDivElement>(html`<div class="wrapper" style="padding: 24px; background-color:red;"><sl-alert open closable>I am an alert</sl-alert></div>`);
+      const alert = wrapper.querySelector('sl-alert')!;
+
+      const clickTargetPromise = new Promise<HTMLElement>((resolve) => {
+        const clickHandler = sinon.spy((event: MouseEvent) => {
+          resolve(event.target as HTMLElement);
+        });
+        alert.shadowRoot!.addEventListener('click', clickHandler);
+        wrapper.addEventListener('click', clickHandler);
+      });
+
+      const closeButton = getCloseButton(alert);
+      await clickOnElement(closeButton!, 'bottom', 0, 4);
+      const clickTarget = await clickTargetPromise;
+
+      await expect(clickTarget.tagName.toLowerCase()).to.not.be.equal('sl-icon-button');
+      expect(clickTarget.classList.contains('alert')).to.be.true;
+      expect(clickTarget.classList.contains('wrapper'), 'The click should happen in the alert and not outside of it').to.be.false;
+    });
+
+    it('clicking on the right side of the close button does not close the alert', async () => {
+      const wrapper = await fixture<HTMLDivElement>(html`<div class="wrapper" style="padding: 24px; background-color:red;"><sl-alert open closable>I am an alert</sl-alert></div>`);
+      const alert = wrapper.querySelector('sl-alert')!;
+
+      const clickTargetPromise = new Promise<HTMLElement>((resolve) => {
+        const clickHandler = sinon.spy((event: MouseEvent) => {
+          resolve(event.target as HTMLElement);
+        });
+        alert.shadowRoot!.addEventListener('click', clickHandler);
+        wrapper.addEventListener('click', clickHandler);
+      });
+
+      const closeButton = getCloseButton(alert);
+      await clickOnElement(closeButton!, 'right', 4, 0);
+      const clickTarget = await clickTargetPromise;
+
+      await expect(clickTarget.tagName.toLowerCase()).to.not.be.equal('sl-icon-button');
+      expect(clickTarget.classList.contains('alert')).to.be.true;
+      expect(clickTarget.classList.contains('wrapper'), 'The click should happen in the alert and not outside of it').to.be.false;
+    });
   });
 
   describe('toast', () => {

diff --git a/src/internal/test.ts b/src/internal/test.ts
@@ -47,7 +47,7 @@ export async function clickOnElement(
 ) {
   const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
 
-  await sendMouse({ type: 'click', position: [clickX, clickY] });
+  await sendMouse({ type: 'click', position: [Math.round(clickX), Math.round(clickY)] });
 }
 
 /** A testing utility that moves the mouse onto an element. */