@getflip/swirl-components 0.181.0 → 0.183.0

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

@@ -143,10 +143,6 @@
   }
     }
 
-.modal--variant-drawer .modal__content {
-    height: 100%;
-  }
-
 @media (min-width: 768px) {
 
 .modal--variant-drawer.modal--padded .modal__content {
@@ -402,7 +398,7 @@
 .modal__content {
   overflow-x: hidden;
   overflow-y: auto;
-  min-height: 100%;
+  height: 100%;
 }
 
 .modal__content ::slotted(*) {

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -1,7 +1,7 @@
-import { h, Host, } from "@stencil/core";
-import classnames from "classnames";
-import { v4 as uuid } from "uuid";
-import { getDesktopMediaQuery } from "../../utils";
+import classnames from 'classnames';
+import { v4 as uuid } from 'uuid';
+import { h, Host } from '@stencil/core';
+import { getDesktopMediaQuery } from '../../utils';
 /**
  * @slot control - Used to add a menu button to the item
  * @slot badges - Badges displayed inside the item
@@ -44,6 +44,7 @@ export class SwirlResourceListItem {
     };
     this.active = undefined;
     this.allowDrag = undefined;
+    this.allowHtml = true;
     this.checked = false;
     this.compact = undefined;
     this.description = undefined;
@@ -149,7 +150,7 @@ export class SwirlResourceListItem {
       "resource-list-item--wrap-description": this.descriptionWrap,
       "resource-list-item--wrap-label": this.labelWrap,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "scoped"; }
@@ -199,6 +200,24 @@ export class SwirlResourceListItem {
         "attribute": "allow-drag",
         "reflect": false
       },
+      "allowHtml": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-html",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "checked": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.spec.js

@@ -101,4 +101,17 @@ describe("swirl-resource-list-item", () => {
       .getAttribute("aria-label")).toBe('Move item "Resource List Item"');
     expect(spy).toHaveBeenCalled();
   });
+  it("renders a plain text", async () => {
+    const page = await newSpecPage({
+      components: [SwirlResourceListItem],
+      html: `
+        <swirl-resource-list-item label="<button>Button</button>" allow-html="false" description="<button>Description</button>">
+        </swirl-resource-list-item>
+      `,
+    });
+    expect(page.root.querySelector(".resource-list-item__label")
+      .innerText).toBe("<button>Button</button>");
+    expect(page.root.querySelector(".resource-list-item__description")
+      .innerText).toBe("<button>Description</button>");
+  });
 });