@getflip/swirl-components 0.85.1 → 0.87.0

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

@@ -25,7 +25,16 @@ const Template = (args) => {
   const control = document.createElement("span");
   const element = generateStoryElement("swirl-resource-list-item", args);
   element.innerHTML = `
-      <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" slot="media"></swirl-avatar>
+      <swirl-avatar
+        slot="media"
+        label="Jane Doe"
+        src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144"></swirl-avatar>
+
+      <swirl-stack slot="badges" align="center" orientation="horizontal" spacing="8">
+        <swirl-icon-notifications-off size="16"></swirl-icon-notifications-off>
+        <swirl-badge label="1" size="s"></swirl-badge>
+      </swirl-stack>
+
   `;
   control.slot = "control";
   control.innerHTML = `
@@ -33,8 +42,9 @@ const Template = (args) => {
           <swirl-button
             hide-label
             icon="<swirl-icon-more-horizontal></swirl-icon-more-horizontal>"
-            intent="primary"
-            label="Show menu"></swirl-button>
+            label="Show menu"
+            size="s"
+            variant="flat"></swirl-button>
         </swirl-popover-trigger>
       `;
   list.setAttribute("aria-label", "List");
@@ -57,11 +67,12 @@ const Template = (args) => {
   `;
   element.append("    ", control, "\n    ");
   list.append("\n    ", element, "\n  ");
-  container.append("\n  ", list, "\n  ", popover, "\n");
+  container.append("\n  ", list, "\n\n  ", popover, "\n");
   return container;
 };
 export const SwirlResourceListItem = Template.bind({});
 SwirlResourceListItem.args = {
   description: "With a description",
   label: "This is a resource item",
+  meta: "Today",
 };

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

@@ -23,9 +23,10 @@
 
 .select--multi .select__input {
     position: absolute;
-    visibility: hidden;
     width: 100%;
     height: 100%;
+    pointer-events: none;
+    opacity: 0;
   }
 
 .select--multi .select__multi-select-values {

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

@@ -30,7 +30,7 @@ export class SwirlSelect {
     this.onKeyDown = (event) => {
       if (event.code === "Space" || event.code === "Enter") {
         event.preventDefault();
-        this.popover.open();
+        this.popover.open(this.el);
       }
     };
     this.allowDeselect = true;

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

@@ -3,6 +3,7 @@ import classnames from "classnames";
 export class SwirlTab {
   constructor() {
     this.active = undefined;
+    this.icon = undefined;
     this.label = undefined;
     this.tabId = undefined;
   }
@@ -41,6 +42,23 @@ export class SwirlTab {
         "attribute": "active",
         "reflect": false
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "label": {
         "type": "string",
         "mutable": false,

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

@@ -18,6 +18,7 @@ const Template = (args) => {
 export const SwirlTab = Template.bind({});
 SwirlTab.args = {
   active: true,
+  icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
   label: "Label",
   tabId: "tab-id",
 };

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css

@@ -17,10 +17,11 @@
 
 .tab-bar__tab {
   position: relative;
-  display: block;
+  display: flex;
   min-width: 0;
   margin: 0;
   padding: var(--s-space-4) var(--s-space-8);
+  align-items: center;
   border: none;
   color: var(--s-interactive-neutral-default);
   background-color: transparent;
@@ -60,8 +61,12 @@
 }
   }
 
+.tab-bar__tab-icon {
+  display: inline-flex;
+}
+
 .tab-bar__tab-label {
-  display: block;
+  display: inline-flex;
   overflow: hidden;
   width: 100%;
   padding: var(--s-space-8) var(--s-space-8);

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js

@@ -27,7 +27,7 @@ export class SwirlTabBar {
             ? "true"
             : "false", class: className, id: `tab-${tab.id}`, key: tab.id,
         // eslint-disable-next-line react/jsx-no-bind
-        onClick: () => this.activateTab.emit(tab.id), role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, h("span", { class: "tab-bar__tab-label" }, tab.label)));
+        onClick: () => this.activateTab.emit(tab.id), role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: "tab-bar__tab-label" }, tab.label)));
     }))));
   }
   static get is() { return "swirl-tab-bar"; }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.stories.js

@@ -24,11 +24,13 @@ SwirlTabBar.args = {
     },
     {
       active: true,
+      icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
       id: "tab2",
       label: "Tab #2",
     },
     {
       active: false,
+      icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
       id: "tab3",
       label: "Tab #3",
     },

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

@@ -64,6 +64,7 @@ export class SwirlTabs {
   }
   updateTabBarTabs() {
     this.tabBarTabs = this.tabs.map((tab) => ({
+      icon: tab.icon,
       id: tab.tabId,
       label: tab.label,
       active: this.activeTab === tab.tabId,

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

@@ -13,8 +13,8 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-tabs", args);
   element.innerHTML = `
-    <swirl-tab label="Tab #1" tab-id="tab-1"><swirl-text>Tab 1</swirl-text></swirl-tab>
-    <swirl-tab label="Tab #2" tab-id="tab-2"><swirl-text>Tab 2</swirl-text></swirl-tab>
+    <swirl-tab icon="<swirl-icon-emoji-satisfied></swirl-icon-emoji-satisfied>" label="Tab #1" tab-id="tab-1"><swirl-text>Tab 1</swirl-text></swirl-tab>
+    <swirl-tab icon="<swirl-icon-emoji-mood></swirl-icon-emoji-mood>" label="Tab #2" tab-id="tab-2"><swirl-text>Tab 2</swirl-text></swirl-tab>
     <swirl-tab label="Tab Number 3" tab-id="tab-3"><swirl-text>Tab 3</swirl-text></swirl-tab>
   `;
   return element;

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

@@ -127,6 +127,14 @@
     -moz-appearance: textfield;
   }
 
+.text-input__input::-moz-placeholder {
+    font-size: var(--swirl-text-input-placeholder-size);
+  }
+
+.text-input__input::placeholder {
+    font-size: var(--swirl-text-input-placeholder-size);
+  }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .text-input__input {

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

@@ -14,6 +14,7 @@ const Template = (args) => {
   const formControl = document.createElement("swirl-form-control");
   const element = generateStoryElement("swirl-text-input", args);
   formControl.setAttribute("label", "Input");
+  formControl.setAttribute("disabled", args.disabled ? "true" : "false");
   formControl.append("\n  ", element, "\n");
   return formControl;
 };