feat(split-button): add loading properties

etc/lime-elements.api.md

@@ -613,6 +613,8 @@ export namespace Components {
         "icon": string;
         "items": Array<MenuItem | ListSeparator>;
         "label": string;
+        "loading": boolean;
+        "loadingFailed": boolean;
         "primary": boolean;
     }
     export interface LimelSwitch {
@@ -1574,6 +1576,8 @@ namespace JSX_2 {
         "icon"?: string;
         "items"?: Array<MenuItem | ListSeparator>;
         "label"?: string;
+        "loading"?: boolean;
+        "loadingFailed"?: boolean;
         "onSelect"?: (event: LimelSplitButtonCustomEvent<MenuItem>) => void;
         "primary"?: boolean;
     }

src/components/split-button/examples/split-button-loading.tsx

@@ -0,0 +1,70 @@
+import { Component, h, State } from '@stencil/core';
+import { ListSeparator, MenuItem } from '@limetech/lime-elements';
+
+/**
+ * Split button with loading
+ *
+ *
+ */
+@Component({
+    tag: 'limel-example-split-button-loading',
+    shadow: true,
+})
+export class SplitButtonLoadingExample {
+    @State()
+    private loading = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private loadingFailed = false;
+    private items: Array<ListSeparator | MenuItem> = [
+        { text: 'Later today', secondaryText: 'at 16:45' },
+        { text: 'Tomorrow', secondaryText: 'at 08:00' },
+    ];
+
+    public render() {
+        return (
+            <limel-split-button
+                primary={true}
+                loading={this.loading}
+                loadingFailed={this.loadingFailed}
+                disabled={this.disabled}
+                label="Send"
+                icon="send"
+                items={this.items}
+                onClick={this.onClick}
+                onSelect={this.handleSelect}
+            />
+        );
+    }
+
+    private onClick = () => {
+        console.log('Button clicked.');
+        this.disabled = true;
+        this.loading = true;
+        this.loadingFailed = false;
+
+        const TIME_LOADING = 2000;
+        setTimeout(() => {
+            this.loading = false;
+            this.disabled = false;
+            this.loadingFailed = false;
+        }, TIME_LOADING);
+    };
+
+    private handleSelect = (event: CustomEvent<MenuItem>) => {
+        console.log('Menu item chosen', event.detail.text);
+        this.loading = true;
+        this.disabled = true;
+        this.loadingFailed = false;
+
+        const TIME_LOADING = 2000;
+        setTimeout(() => {
+            this.loading = false;
+            this.disabled = false;
+            this.loadingFailed = false;
+        }, TIME_LOADING);
+    };
+}

src/components/split-button/split-button.scss

@@ -2,6 +2,7 @@
 
 :host(limel-split-button.has-menu) {
     --button-padding-right: 2rem;
+    --button-padding-left: 1rem;
 }
 
 :host(limel-split-button) {

src/components/split-button/split-button.tsx

@@ -16,6 +16,7 @@ import { MenuItem } from '../menu/menu.types';
  * :::
  *
  * @exampleComponent limel-example-split-button-basic
+ * @exampleComponent limel-example-split-button-loading
  * @exampleComponent limel-example-split-button-repeat-default-command
  */
 @Component({
@@ -48,6 +49,20 @@ export class SplitButton {
     @Prop({ reflect: true })
     public disabled = false;
 
+    /**
+     * Set to `true` to put the button in the `loading` state.
+     * This also disables the button.
+     */
+    @Prop({ reflect: true })
+    public loading = false;
+
+    /**
+     * Set to `true` to indicate failure instead of success when the button is
+     * no longer in the `loading` state.
+     */
+    @Prop({ reflect: true })
+    public loadingFailed = false;
+
     /**
      * A list of items and separators to show in the menu.
      */
@@ -73,6 +88,8 @@ export class SplitButton {
                     primary={this.primary}
                     icon={this.icon}
                     disabled={this.disabled}
+                    loading={this.loading}
+                    loadingFailed={this.loadingFailed}
                 />
                 {this.renderMenu()}
             </Host>
@@ -89,7 +106,7 @@ export class SplitButton {
                 class={{
                     primary: this.primary,
                 }}
-                disabled={this.disabled}
+                disabled={this.disabled || this.loading}
                 items={this.items}
                 openDirection="bottom"
             >