@getflip/swirl-components 0.84.0 → 0.85.0

package/dist/collection/components/swirl-table/swirl-table.stories.js

@@ -54,7 +54,9 @@ const Template = (args) => {
           <swirl-tag label="Active" intent="success"></swirl-tag>
         </swirl-table-cell>
         <swirl-table-cell>
-          <swirl-button hide-label icon="<swirl-icon-more-vertikal></swirl-icon-more-vertikal>" label="Options"></swirl-button>
+          <swirl-tooltip position="left" content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
+            <swirl-button label="Test"></swirl-button>
+          </swirl-tooltip>
         </swirl-table-cell>
       </swirl-table-row>
       <swirl-table-row-group label="Pending users">

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.js

@@ -18,7 +18,7 @@ export class SwirlThumbnail {
     const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
       "thumbnail--has-progress": this.progress !== undefined,
     });
-    return (h(Host, null, h("span", { class: className, role: "group" }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (h("span", { class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { class: "thumbnail__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
+    return (h(Host, null, h("span", { class: className, role: "group" }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (h("span", { class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { class: "thumbnail__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
   }
   static get is() { return "swirl-thumbnail"; }
   static get encapsulation() { return "shadow"; }
@@ -203,4 +203,26 @@ export class SwirlThumbnail {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "remove",
+        "name": "remove",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
 }

package/dist/collection/components/swirl-tooltip/swirl-tooltip.css

@@ -31,7 +31,10 @@
   color: var(--s-text-on-status);
   background-color: var(--s-surface-neutral-default);
   line-height: var(--s-line-height-base);
-  animation: tooltip-fade-in 0.1s;
+  animation: tooltip-fade-in 0.2s;
+  animation-delay: 0.1s;
+  animation-fill-mode: forwards;
+  opacity: 0;
 }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

package/dist/collection/components/swirl-tooltip/swirl-tooltip.js

@@ -1,4 +1,4 @@
-import { computePosition, flip, offset, shift, } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { h, Host } from "@stencil/core";
 export class SwirlTooltip {
   constructor() {
@@ -17,6 +17,7 @@ export class SwirlTooltip {
       this.visible = true;
       requestAnimationFrame(() => {
         this.reposition();
+        this.disableAutoUpdate = autoUpdate(this.referenceEl, this.popperEl, this.reposition.bind(this));
       });
     };
     this.showWithDelay = () => {
@@ -34,6 +35,7 @@ export class SwirlTooltip {
         this.showTimeout = undefined;
       }
       this.visible = false;
+      this.disableAutoUpdate?.();
     };
     this.updateOptions = () => {
       const margin = +getComputedStyle(document.documentElement)

package/dist/collection/components/swirl-tooltip/swirl-tooltip.spec.js

@@ -22,6 +22,14 @@ const expectedHidden = `
   <span class="tooltip__popper" style="top: 0px; left: NaNpx;"></span>
 </span>`;
 describe("swirl-tooltip", () => {
+  beforeAll(() => {
+    class ResizeObserver {
+      observe() { }
+      unobserve() { }
+      disconnect() { }
+    }
+    global.ResizeObserver = ResizeObserver;
+  });
   it("renders the reference", async () => {
     const page = await newSpecPage({
       components: [SwirlTooltip],