feat: spinner component (#877)

closes #866

src/baklava.ts

@@ -25,6 +25,7 @@ export { default as BlDropdown } from "./components/dropdown/bl-dropdown";
 export { default as BlDropdownItem } from "./components/dropdown/item/bl-dropdown-item";
 export { default as BlDropdownGroup } from "./components/dropdown/group/bl-dropdown-group";
 export { default as BlSwitch } from "./components/switch/bl-switch";
+export { default as BlSpinner } from "./components/spinner/bl-spinner";
 export { default as BlNotification } from "./components/notification/bl-notification";
 export { default as BlNotificationCard } from "./components/notification/card/bl-notification-card";
 export { default as BlTable } from "./components/table/bl-table";

src/components/button/bl-button.css

@@ -1,13 +1,3 @@
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(359deg);
-  }
-}
-
 :host {
   display: var(--bl-button-display, inline-block);
   max-width: 100%;
@@ -91,11 +81,6 @@
   inset: -4px;
 }
 
-.loading-icon {
-  animation: spin 1s linear infinite;
-  font-size: var(--icon-size);
-}
-
 :host ::slotted(bl-icon) {
   font-size: var(--icon-size);
 }
@@ -143,10 +128,6 @@
   cursor: wait;
 }
 
-:host([loading]) bl-icon:not(.loading-icon) {
-  display: none;
-}
-
 :host .button[aria-disabled="true"] {
   --main-color: var(--bl-color-neutral-lightest);
   --main-hover-color: var(--bl-color-neutral-lightest);

src/components/button/bl-button.stories.mdx

@@ -38,12 +38,12 @@ import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
       }
     },
     href: {
-       control: {
+        control: {
         type: 'text'
       }
     },
     target: {
-       control: {
+        control: {
         type: 'text'
       }
     },
@@ -206,7 +206,7 @@ If button has a limited width and a long text that can not fit in a single line,
 
 ## Loading Buttons
 
-Button can be set in loading state. In this state button becomes disabled with a loading indicator. You can set this state by setting `loading` attribute. Additionally, button icons are overridden by the spinner during the loading state.
+Button can be set in loading state. In this state button becomes disabled with a loading indicator. You can set this state by setting `loading` attribute. Additionally, button icons are overridden by the bl-spinner during the loading state.
 
 A custom loading text can be also set with `loading-label` attribute. It's suggested to use `loading-label` to inform the user about the process.
 

src/components/button/bl-button.test.ts

@@ -95,19 +95,23 @@ describe("bl-button", () => {
       expect(el.getAttribute("target")).to.eq("_self");
     });
 
-    it("is disabled button during loading state", async () => {
+    it("is disabled button during loading state with spinner", async () => {
       const el = await fixture<typeOfBlButton>(html`<bl-button loading>Test</bl-button>`);
 
-      expect(el.shadowRoot?.querySelector(".loading-icon")).to.exist;
       expect(el).to.have.attribute("loading");
       expect(el.shadowRoot?.querySelector("button")).to.have.attribute("disabled");
+      const spinner = el.shadowRoot?.querySelector("bl-spinner");
+
+      expect(spinner).to.exist;
 
       el.removeAttribute("loading");
       await elementUpdated(el);
 
-      expect(el.shadowRoot?.querySelector(".loading-icon")).not.to.exist;
       expect(el).not.have.attribute("loading");
-      expect(el.shadowRoot?.querySelector("button")).not.have.attribute("disabled");
+      expect(el.shadowRoot?.querySelector("button")).not.to.have.attribute("disabled");
+      const spinnerAfterLoading = el.shadowRoot?.querySelector("bl-spinner");
+
+      expect(spinnerAfterLoading).not.to.exist;
     });
   });
   describe("Slot", () => {
@@ -225,4 +229,48 @@ describe("bl-button", () => {
       expect(ev).to.exist;
     });
   });
+
+  describe("Spinner on bl-button", () => {
+
+    it("should render bl-spinner when loading is true", async () => {
+      const el = await fixture<BlButton>(html`
+        <bl-button loading loading-label="Loading...">Submit</bl-button>
+      `);
+
+      const spinner = el.shadowRoot?.querySelector(".loading-spinner");
+
+      expect(spinner).to.exist;
+    });
+
+    it("should not render bl-spinner when loading is false", async () => {
+      const el = await fixture<BlButton>(html`
+        <bl-button>Submit</bl-button>
+      `);
+
+      const spinner = el.shadowRoot?.querySelector(".loading-spinner");
+
+      expect(spinner).to.not.exist;
+    });
+
+    it("should render loading label when loading is true and loadingLabel is set", async () => {
+      const el = await fixture<BlButton>(html`
+        <bl-button loading loading-label="Loading...">Submit</bl-button>
+      `);
+
+      const label = el.shadowRoot?.querySelector(".label")?.textContent;
+
+      expect(label).to.equal("Loading...");
+    });
+
+    it("should not render loading label when loading is false", async () => {
+      const el = await fixture<BlButton>(html`
+        <bl-button loading-label="Loading...">Submit</bl-button>
+      `);
+
+      const label = el.shadowRoot?.querySelector(".label")?.textContent;
+
+      expect(label).not.to.equal("Loading...");
+    });
+
+  });
 });

src/components/button/bl-button.ts

@@ -6,6 +6,7 @@ import { submit } from "@open-wc/form-helpers";
 import { event, EventDispatcher } from "../../utilities/event";
 import "../icon/bl-icon";
 import { BaklavaIcon } from "../icon/icon-list";
+import "../spinner/bl-spinner";
 import style from "./bl-button.css";
 
 export type ButtonVariant = "primary" | "secondary" | "tertiary";
@@ -191,10 +192,13 @@ export default class BlButton extends LitElement {
     const label = this.loading && this.loadingLabel ? this.loadingLabel : html`<slot></slot>`;
     const isAnchor = !!this.href;
     const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : "";
-    const loadingIcon = this.loading
-      ? html`<bl-icon class="loading-icon" name="loading"></bl-icon>`
-      : "";
-    const slots = html`<slot name="icon">${icon}</slot> <span class="label">${label}</span>`;
+    const loadingIcon = html`<bl-spinner
+      class="loading-spinner"
+      ?disabled="${isDisabled}"
+      size="${this.size}"
+    ></bl-spinner>`;
+    const slots = html`<slot name="icon">${this.loading ? loadingIcon : icon}</slot>
+      <span class="label">${label}</span>`;
     const caret = this.dropdown ? this.caretTemplate() : "";
     const classes = classMap({
       "button": true,
@@ -212,7 +216,7 @@ export default class BlButton extends LitElement {
           href=${ifDefined(this.href)}
           target=${ifDefined(this.target)}
           role="button"
-          >${loadingIcon} ${slots}
+          >${slots}
         </a>`
       : html`<button
           class=${classes}
@@ -222,7 +226,7 @@ export default class BlButton extends LitElement {
           ?disabled=${isDisabled}
           @click="${this._handleClick}"
         >
-          ${loadingIcon} ${slots} ${caret}
+          ${slots} ${caret}
         </button>`;
   }
 }

src/components/input/bl-input.stories.mdx

@@ -91,6 +91,7 @@ export const SingleInputTemplate = (args) => html`<bl-input
     label='${ifDefined(args.label)}'
     placeholder='${ifDefined(args.placeholder)}'
     value='${ifDefined(args.value)}'
+    ?loading=${ifDefined(args.loading)}
     ?required='${args.required}'
     ?disabled='${args.disabled}'
     ?readonly='${args.readonly}'
@@ -107,29 +108,6 @@ export const SingleInputTemplate = (args) => html`<bl-input
     size='${ifDefined(args.size)}'
   >${args.slot?.()}</bl-input>`
 
-export const SingleInputTemplateWithSpinner = (args) => html`
-<style>
-  .spinner {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-</style>
-
-${SingleInputTemplate({
-  ...args,
-  slot: () => html`<bl-icon slot="icon" name="loading" class="spinner"></bl-icon>`,
-})}
-`
-
 export const SizeVariantsTemplate = args => html`
 ${SingleInputTemplate({ size: 'large', ...args })}
 ${SingleInputTemplate({ size: 'medium', ...args })}
@@ -229,13 +207,9 @@ Input also supports slot icons for more complex use cases. You can use `icon` sl
 
 <Canvas>
   <Story name="Input With Slot Icon"
-         args={{ placeholder: 'Name', slot: () => html`<bl-icon slot="icon" name="flash"></bl-icon>` }}>
+        args={{ placeholder: 'Name', slot: () => html`<bl-icon slot="icon" name="flash"></bl-icon>` }}>
     {SingleInputTemplate.bind({})}
   </Story>
-  <Story name="Input With Spinner"
-         args={{ placeholder: 'Name' }}>
-    {SingleInputTemplateWithSpinner.bind({})}
-  </Story>
 </Canvas>
 
 Inputs with type of date, time, datetime-local, month, week and search have default icons. You can override these icons with `icon` attribute.
@@ -333,6 +307,25 @@ Input can be set as disabled by adding `disabled` attribute.
   </Story>
 </Canvas>
 
+## Search Input with Loading Attribute
+
+This example demonstrates how to use the `bl-spinner` component inside a search input field. The spinner is displayed to indicate that a search operation is in progress.
+The `loading` attribute is set to `true` to show the spinner inside the input field.
+
+<Canvas>
+  <Story name="Input with Loading Spinner" args={{ placeholder: 'Search Loading Example', type: 'search', loading: true }}>
+    {args => html`
+      <bl-input
+        id="searchInput"
+        placeholder=${ifDefined(args.placeholder)}
+        type=${ifDefined(args.type)}
+        label=${ifDefined(args.label)}
+        loading=${ifDefined(args.loading)}
+      ></bl-input>
+    `}
+  </Story>
+</Canvas>
+
 ## Using within a form
 
 Input component uses [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals) to associate with it's parent form automatically. When you use `bl-input` within a form with a `name` attribute, input's value will be automatically set parent form's FormData. Check the example below:

src/components/input/bl-input.test.ts

@@ -352,4 +352,51 @@ describe("bl-input", () => {
       expect(ev).to.exist;
     });
   });
+
+  describe("loading state and custom icons", () => {
+    it("shows spinner when loading and type is search with non-empty value", async () => {
+      const el = await fixture<BlInput>(html`<bl-input loading type="search" value="test"></bl-input>`);
+      const spinner = el.shadowRoot?.querySelector("bl-spinner");
+
+      expect(spinner).to.exist;
+      expect(spinner?.getAttribute("size")).to.equal("var(--bl-font-size-m)");
+    });
+
+    it("shows custom icon when loading is false", async () => {
+      const el = await fixture<BlInput>(html`<bl-input icon="info"></bl-input>`);
+      const customIcon = el.shadowRoot?.querySelector('bl-icon[name="info"]');
+
+      expect(customIcon).to.exist;
+      expect(customIcon?.getAttribute("name")).to.equal("info");
+    });
+
+    it("shows error icon when no custom icon is set and loading is false", async () => {
+      const el = await fixture<BlInput>(html`<bl-input></bl-input>`);
+      const errorIcon = el.shadowRoot?.querySelector('bl-icon[name="alert"]');
+
+      expect(errorIcon).to.exist;
+      expect(errorIcon?.getAttribute("name")).to.equal("alert");
+    });
+
+    it("does not show spinner when loading is true but type is not search", async () => {
+      const el = await fixture<BlInput>(html`<bl-input loading type="text" value="test"></bl-input>`);
+      const spinner = el.shadowRoot?.querySelector("bl-spinner");
+
+      expect(spinner).to.not.exist;
+    });
+
+    it("does not show spinner when loading is true but value is empty", async () => {
+      const el = await fixture<BlInput>(html`<bl-input loading type="search" value=""></bl-input>`);
+      const spinner = el.shadowRoot?.querySelector("bl-spinner");
+
+      expect(spinner).to.not.exist;
+    });
+
+    it("does not show spinner when loading is false", async () => {
+      const el = await fixture<BlInput>(html`<bl-input type="search" value="test"></bl-input>`);
+      const spinner = el.shadowRoot?.querySelector("bl-spinner");
+
+      expect(spinner).to.not.exist;
+    });
+  });
 });

src/components/input/bl-input.ts

@@ -110,6 +110,12 @@ export default class BlInput extends FormControlMixin(LitElement) {
   @property({ reflect: true })
   min?: number | string;
 
+  /**
+   * Sets the loading value for the input
+   */
+  @property({ type: Boolean, reflect: true })
+  loading = false;
+
   /**
    * Sets the maximum acceptable value for the input
    */
@@ -325,7 +331,9 @@ export default class BlInput extends FormControlMixin(LitElement) {
 
     const icon = html`
       <slot name="icon">
-        ${this.icon
+        ${this.loading && this.type === "search" && this.value !== "" && this.value !== null
+          ? html`<bl-spinner></bl-spinner>`
+          : this.icon
           ? html`<bl-icon name="${this.icon}"></bl-icon>`
           : html`<bl-icon class="error-icon" name="alert"></bl-icon>`}
       </slot>

src/components/select/bl-select.css

@@ -396,8 +396,8 @@ legend span {
   outline: none;
 }
 
-.search-loading-icon {
-  animation: spin 1s linear infinite;
+.search-spinner {
+  padding-inline-end: var(--bl-font-size-2xs);
 }
 
 .action-divider {
@@ -411,16 +411,6 @@ legend span {
   background-color: var(--bl-color-neutral-lighter);
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .actions bl-icon {
   padding: 4px;
 }