@getflip/swirl-components 0.179.0 → 0.180.0

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -135,6 +135,30 @@
 }
   }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control--label-position-outside .form-control__label-text {
+      display: flex;
+      align-items: center
+  }
+    }
+
+.form-control--label-position-outside .form-control__label-text .form-control__tooltip {
+      display: none;
+    }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control--label-position-outside .form-control__label-text .form-control__tooltip {
+        display: flex;
+        margin-left: var(--s-space-4)
+    }
+
+        .form-control--label-position-outside .form-control__label-text .form-control__tooltip:hover {
+          cursor: default;
+        }
+      }
+
 .form-control--invalid.form-control--has-focus:not(.form-control--disabled) .form-control__label {
       border-color: var(--s-border-critical);
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -43,6 +43,7 @@ export class SwirlFormControl {
     this.invalid = undefined;
     this.label = undefined;
     this.labelPosition = "inside";
+    this.tooltip = undefined;
     this.hasFocus = undefined;
     this.inputValue = undefined;
   }
@@ -152,7 +153,7 @@ export class SwirlFormControl {
       "form-control--is-select": isSelect,
     });
     const LabelTag = hasContenteditableControl ? "div" : "label";
-    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("span", { class: "form-control__controls" }, h("span", { class: "form-control__prefix" }, h("slot", { name: "prefix" })), h(LabelTag, { class: "form-control__label", onClick: this.onLabelClick }, h("span", { class: "form-control__label-text", id: this.labelId }, this.label), h("span", { class: "form-control__input" }, h("slot", null)))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
+    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("span", { class: "form-control__controls" }, h("span", { class: "form-control__prefix" }, h("slot", { name: "prefix" })), h(LabelTag, { class: "form-control__label", onClick: this.onLabelClick }, h("span", { class: "form-control__label-text", id: this.labelId }, this.label, this.tooltip && this.labelPosition === "outside" && (h("span", { class: "form-control__tooltip" }, h("swirl-tooltip", { content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { size: 16, tabindex: "0" }))))), h("span", { class: "form-control__input" }, h("slot", null)))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
   }
   static get is() { return "swirl-form-control"; }
   static get encapsulation() { return "scoped"; }
@@ -309,6 +310,23 @@ export class SwirlFormControl {
         "attribute": "label-position",
         "reflect": false,
         "defaultValue": "\"inside\""
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/swirl-form-control/swirl-form-control.spec.js

@@ -94,7 +94,7 @@ describe("swirl-form-control", () => {
     page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
     await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
-    expect(formControl.classList.contains('form-control--has-focus')).toBeTruthy();
+    expect(formControl.classList.contains("form-control--has-focus")).toBeTruthy();
   });
   it("doesn't keep focus when Tab is pressed and the active element is not descendent of the input", async () => {
     const page = await newSpecPage({
@@ -113,6 +113,18 @@ describe("swirl-form-control", () => {
     page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
     await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
-    expect(formControl.classList.contains('form-control--has-focus')).toBeFalsy();
+    expect(formControl.classList.contains("form-control--has-focus")).toBeFalsy();
+  });
+  it("renders a tooltip icon when tooltip is set an label position is outside", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control label="Label" label-position="outside" tooltip="This is a tooltip">
+          <swirl-text-input></swirl-text-input>
+        </swirl-form-control>
+      `,
+    });
+    const tooltip = page.root.querySelector("swirl-tooltip");
+    expect(tooltip).not.toBeNull();
   });
 });

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

@@ -144,7 +144,7 @@
     }
 
 .modal--variant-drawer .modal__content {
-    min-height: 100%;
+    height: 100%;
   }
 
 @media (min-width: 768px) {

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
 export class SwirlTextInput {

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

@@ -71,6 +71,10 @@
 }
   }
 
+.tooltip__content {
+  white-space: normal;
+}
+
 .tooltip__arrow {
   position: absolute;
   width: 0.6875rem;