feat(button): adds pending button, fixes #3162

packages/button/package.json

@@ -87,6 +87,7 @@
         "@spectrum-web-components/close-button": "^0.3.12",
         "@spectrum-web-components/icon": "^0.12.11",
         "@spectrum-web-components/icons-ui": "^0.9.12",
+        "@spectrum-web-components/progress-circle": "^0.7.9",
         "@spectrum-web-components/shared": "^0.15.7"
     },
     "devDependencies": {

packages/button/src/Button.ts

@@ -12,8 +12,10 @@ governing permissions and limitations under the License.
 
 import {
     CSSResultArray,
+    html,
     PropertyValues,
     SizedMixin,
+    TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ButtonBase } from './ButtonBase.js';
@@ -51,6 +53,45 @@ export class Button extends SizedMixin(ButtonBase) {
         return [...super.styles, buttonStyles];
     }
 
+    protected pendingCooldown = -1;
+
+    constructor() {
+        super();
+        this.addEventListener(
+            'click',
+            (event: Event): void | boolean => {
+                if (this.pending) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    event.stopPropagation();
+                    return false;
+                }
+            },
+            {
+                capture: true,
+            }
+        );
+    }
+
+    protected disabledByPending = false;
+
+    @property({ type: Boolean, reflect: true })
+    public set pending(value: boolean) {
+        if (value) {
+            this.pendingCooldown = window.setTimeout(() => {
+                if (!this.disabled) {
+                    this.disabledByPending = true;
+                }
+                this.disabled = true;
+            }, 1000);
+        } else {
+            window.clearTimeout(this.pendingCooldown);
+            if (this.disabledByPending) {
+                this.disabled = false;
+            }
+        }
+    }
+
     /**
      * The visual variant to apply to this button.
      */
@@ -136,4 +177,15 @@ export class Button extends SizedMixin(ButtonBase) {
             this.setAttribute('variant', this.variant);
         }
     }
+
+    protected override renderButton(): TemplateResult {
+        return html`
+            ${this.buttonContent}
+            <sp-progress-circle
+                indeterminate
+                static="white"
+                size="s"
+            ></sp-progress-circle>
+        `;
+    }
 }

packages/button/src/button.css

@@ -25,3 +25,24 @@ governing permissions and limitations under the License.
 ::slotted([slot='icon']) {
     inset: unset;
 }
+
+#container {
+    position: relative;
+    display: flex;
+}
+
+sp-progress-circle {
+    display: none;
+}
+
+:host([pending][disabled]) sp-progress-circle {
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+:host([pending][disabled]) slot[name='icon'],
+:host([pending][disabled]) #label {
+    visibility: hidden;
+}

packages/button/stories/button-accent-fill-pending.stories.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { TemplateResult } from '@spectrum-web-components/base';
+import { Properties, renderButtonSet } from './index.js';
+import { args, argTypes } from './index.js';
+
+const variant = 'accent';
+const treatment = 'fill';
+const pending = true;
+
+export default {
+    component: 'sp-button',
+    title: 'Button/Accent/Fill/Pending',
+    args: {
+        ...args,
+        variant,
+        treatment,
+        pending,
+    },
+    argTypes,
+};
+
+export const s = (args: Properties): TemplateResult => renderButtonSet(args);
+s.args = {
+    size: 's',
+};
+
+export const m = (args: Properties): TemplateResult => renderButtonSet(args);
+m.args = {
+    size: 'm',
+};
+
+export const l = (args: Properties): TemplateResult => renderButtonSet(args);
+l.args = {
+    size: 'l',
+};
+
+export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
+XL.args = {
+    size: 'xl',
+};

packages/button/stories/button-accent-outline-pending.stories.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { TemplateResult } from '@spectrum-web-components/base';
+import { Properties, renderButtonSet } from './index.js';
+import { args, argTypes } from './index.js';
+
+const variant = 'accent';
+const treatment = 'outline';
+const pending = true;
+
+export default {
+    component: 'sp-button',
+    title: 'Button/Accent/Outline/Pending',
+    args: {
+        ...args,
+        variant,
+        treatment,
+        pending,
+    },
+    argTypes,
+};
+
+export const s = (args: Properties): TemplateResult => renderButtonSet(args);
+s.args = {
+    size: 's',
+};
+
+export const m = (args: Properties): TemplateResult => renderButtonSet(args);
+m.args = {
+    size: 'm',
+};
+
+export const l = (args: Properties): TemplateResult => renderButtonSet(args);
+l.args = {
+    size: 'l',
+};
+
+export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
+XL.args = {
+    size: 'xl',
+};

packages/button/stories/button-black-fill-pending.stories.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { TemplateResult } from '@spectrum-web-components/base';
+import { Properties, renderButtonSet } from './index.js';
+import { args, argTypes } from './index.js';
+
+const variant = 'black';
+const treatment = 'fill';
+const pending = true;
+
+export default {
+    component: 'sp-button',
+    title: 'Button/Black/Fill/Pending',
+    args: {
+        ...args,
+        variant,
+        treatment,
+        pending,
+    },
+    argTypes,
+};
+
+export const s = (args: Properties): TemplateResult => renderButtonSet(args);
+s.args = {
+    size: 's',
+};
+
+export const m = (args: Properties): TemplateResult => renderButtonSet(args);
+m.args = {
+    size: 'm',
+};
+
+export const l = (args: Properties): TemplateResult => renderButtonSet(args);
+l.args = {
+    size: 'l',
+};
+
+export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
+XL.args = {
+    size: 'xl',
+};

packages/button/stories/button-black-outline-pending.stories.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { TemplateResult } from '@spectrum-web-components/base';
+import { Properties, renderButtonSet } from './index.js';
+import { args, argTypes } from './index.js';
+
+const variant = 'black';
+const treatment = 'outline';
+const pending = true;
+
+export default {
+    component: 'sp-button',
+    title: 'Button/Black/Outline/Pending',
+    args: {
+        ...args,
+        variant,
+        treatment,
+        pending,
+    },
+    argTypes,
+};
+
+export const s = (args: Properties): TemplateResult => renderButtonSet(args);
+s.args = {
+    size: 's',
+};
+
+export const m = (args: Properties): TemplateResult => renderButtonSet(args);
+m.args = {
+    size: 'm',
+};
+
+export const l = (args: Properties): TemplateResult => renderButtonSet(args);
+l.args = {
+    size: 'l',
+};
+
+export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
+XL.args = {
+    size: 'xl',
+};

packages/button/stories/button-negative-fill-pending.stories.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { TemplateResult } from '@spectrum-web-components/base';
+import { Properties, renderButtonSet } from './index.js';
+import { args, argTypes } from './index.js';
+
+const variant = 'negative';
+const treatment = 'fill';
+const pending = true;
+
+export default {
+    component: 'sp-button',
+    title: 'Button/Negative/Fill/Pending',
+    args: {
+        ...args,
+        variant,
+        treatment,
+        pending,
+    },
+    argTypes,
+};
+
+export const s = (args: Properties): TemplateResult => renderButtonSet(args);
+s.args = {
+    size: 's',
+};
+
+export const m = (args: Properties): TemplateResult => renderButtonSet(args);
+m.args = {
+    size: 'm',
+};
+
+export const l = (args: Properties): TemplateResult => renderButtonSet(args);
+l.args = {
+    size: 'l',
+};
+
+export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
+XL.args = {
+    size: 'xl',
+};