Fixes closable sl-alert can be closed on whole vertical area without visual indication (#2375)

* Avoid stretching of the closable icon button

* Fix prettier

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 {

src/components/alert/alert.test.ts

@@ -123,14 +123,14 @@ 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);
 
@@ -138,6 +138,83 @@ describe('<sl-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', () => {

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. */