@getflip/swirl-components 0.77.0 → 0.78.1

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

@@ -1,4 +1,5 @@
 :host {
+  position: relative;
   display: inline-flex;
   max-width: 100%;
 }
@@ -36,6 +37,18 @@
       background-color: var(--s-surface-raised-hovered);
     }
 
+.chip--interactive:hover + .chip__remove-button {
+      background-color: var(--s-surface-raised-default);
+    }
+
+.chip--interactive:hover + .chip__remove-button:hover {
+        background-color: var(--s-surface-raised-hovered);
+      }
+
+.chip--interactive:hover + .chip__remove-button:active {
+        background-color: var(--s-surface-raised-pressed);
+      }
+
 .chip--interactive:active {
     background-color: var(--s-surface-overlay-pressed);
   }
@@ -44,6 +57,10 @@
       background-color: var(--s-surface-raised-pressed);
     }
 
+.chip--removable {
+  padding-right: calc(2rem + var(--s-space-12));
+}
+
 .chip--intent-critical {
   border-color: var(--s-border-critical);
   color: var(--s-text-critical);
@@ -53,6 +70,10 @@
     color: var(--s-icon-critical);
   }
 
+.chip--border-radius-sm {
+  border-radius: var(--s-border-radius-sm);
+}
+
 .chip--intent-success {
   border-color: var(--s-border-success);
   color: var(--s-text-success);
@@ -114,3 +135,29 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.chip__remove-button {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-4);
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 50%;
+  color: var(--s-icon-default);
+  background-color: var(--s-surface-overlay-default);
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.chip__remove-button:hover {
+    background-color: var(--s-surface-overlay-hovered);
+  }
+
+.chip__remove-button:active {
+    background-color: var(--s-surface-overlay-pressed);
+  }

package/dist/collection/components/swirl-chip/swirl-chip.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";
 /**
@@ -10,10 +10,13 @@ export class SwirlChip {
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
     };
+    this.borderRadius = "pill";
     this.icon = undefined;
     this.intent = "default";
     this.interactive = false;
     this.label = undefined;
+    this.removable = undefined;
+    this.removeButtonLabel = "Remove";
     this.variant = "outline";
   }
   componentDidLoad() {
@@ -35,10 +38,11 @@ export class SwirlChip {
     const Tag = this.interactive ? "button" : "span";
     const showAvatar = Boolean(this.el.querySelector('[slot="avatar"]'));
     const showIcon = !showAvatar && Boolean(this.icon);
-    const className = classnames("chip", `chip--intent-${this.intent}`, `chip--variant-${this.variant}`, {
+    const className = classnames("chip", `chip--border-radius-${this.borderRadius}`, `chip--intent-${this.intent}`, `chip--variant-${this.variant}`, {
       "chip--interactive": this.interactive,
+      "chip--removable": this.removable,
     });
-    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, showAvatar && (h("span", { class: "chip__avatar" }, h("slot", { name: "avatar" }))), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label))));
+    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, showAvatar && (h("span", { class: "chip__avatar" }, h("slot", { name: "avatar" }))), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label)), this.removable && (h("button", { "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { size: 20 })))));
   }
   static get is() { return "swirl-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -54,6 +58,29 @@ export class SwirlChip {
   }
   static get properties() {
     return {
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlChipBorderRadius",
+          "resolved": "\"pill\" | \"sm\"",
+          "references": {
+            "SwirlChipBorderRadius": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-chip/swirl-chip.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border-radius",
+        "reflect": false,
+        "defaultValue": "\"pill\""
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -129,6 +156,41 @@ export class SwirlChip {
         "attribute": "label",
         "reflect": false
       },
+      "removable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "removable",
+        "reflect": false
+      },
+      "removeButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "remove-button-label",
+        "reflect": false,
+        "defaultValue": "\"Remove\""
+      },
       "variant": {
         "type": "string",
         "mutable": false,
@@ -154,5 +216,27 @@ export class SwirlChip {
       }
     };
   }
+  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"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }

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

@@ -9,7 +9,7 @@ describe("swirl-chip", () => {
     expect(page.root).toEqualHtml(`
       <swirl-chip intent="critical" label="Label">
         <mock:shadow-root>
-          <span class="chip chip--intent-critical chip--variant-outline">
+          <span class="chip chip--border-radius-pill chip--intent-critical chip--variant-outline">
             <span class="chip__label">Label</span>
           </span>
         </mock:shadow-root>
@@ -24,7 +24,7 @@ describe("swirl-chip", () => {
     expect(page.root).toEqualHtml(`
       <swirl-chip interactive="true" label="Label">
         <mock:shadow-root>
-          <button class="chip chip--intent-default chip--interactive chip--variant-outline" type="button">
+          <button class="chip chip--border-radius-pill chip--intent-default chip--interactive chip--variant-outline" type="button">
             <span class="chip__label">Label</span>
           </button>
         </mock:shadow-root>
@@ -39,7 +39,7 @@ describe("swirl-chip", () => {
     expect(page.root).toEqualHtml(`
       <swirl-chip label="Label">
         <mock:shadow-root>
-          <span class="chip chip--intent-default chip--variant-outline">
+          <span class="chip chip--border-radius-pill chip--intent-default chip--variant-outline">
             <span class="chip__label">
               Label
             </span>

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

@@ -27,4 +27,5 @@ const Template = (args) => {
 export const SwirlChip = Template.bind({});
 SwirlChip.args = {
   label: "Label",
+  removable: true,
 };