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

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: d8be48bd925210181c3ec6933abbc3aade090bcb
+        default: 470b0f5294f4bffae31534b5734ecfd6317316ec
     wireit_cache_name:
         type: string
         default: wireit

packages/button/src/Button.ts

@@ -12,12 +12,15 @@ 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';
 import buttonStyles from './button.css.js';
+import { when } from '@spectrum-web-components/base/src/directives.js';
 
 export type DeprecatedButtonVariants = 'cta' | 'overBackground';
 export type ButtonStatics = 'white' | 'black';
@@ -51,6 +54,27 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
         return [...super.styles, buttonStyles];
     }
 
+    protected pendingCooldown = -1;
+
+    // isPending represents the state of the button being in a pending state
+    // This also helps us show the progress circle and update the aria-label when the button is in pending state
+    @property({ type: Boolean, reflect: true, attribute: 'is-pending' })
+    public isPending = false;
+
+    @property({ type: String, attribute: 'pending-label' })
+    public pendingLabel = 'Pending';
+
+    // pending is the property that consumers can use to set the button into a pending state
+    @property({ type: Boolean, reflect: true, attribute: true })
+    public pending = false;
+
+    public override click(): void {
+        if (this.isPending) {
+            return;
+        }
+        super.click();
+    }
+
     /**
      * The visual variant to apply to this button.
      */
@@ -127,11 +151,30 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
     public set quiet(quiet: boolean) {
         this.treatment = quiet ? 'outline' : 'fill';
     }
-
     public get quiet(): boolean {
         return this.treatment === 'outline';
     }
 
+    protected override willUpdate(
+        changedProperties: PropertyValues<this>
+    ): void {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('pending')) {
+            if (this.pending) {
+                this.pendingCooldown = window.setTimeout(() => {
+                    if (!this.disabled) {
+                        this.isPending = true;
+                        this.setAttribute('aria-label', this.pendingLabel);
+                    }
+                }, 1000);
+            } else if (this.pending === false && this.isPending) {
+                window.clearTimeout(this.pendingCooldown);
+                this.isPending = false;
+                this.setAttribute('aria-label', this.label || '');
+            }
+        }
+    }
+
     protected override firstUpdated(changes: PropertyValues<this>): void {
         super.firstUpdated(changes);
         // There is no Spectrum design context for an `<sp-button>` without a variant
@@ -140,4 +183,22 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
             this.setAttribute('variant', this.variant);
         }
     }
+
+    protected override renderButton(): TemplateResult {
+        return html`
+            ${this.buttonContent}
+            ${when(this.isPending, () => {
+                import(
+                    '@spectrum-web-components/progress-circle/sp-progress-circle.js'
+                );
+                return html`
+                    <sp-progress-circle
+                        indeterminate
+                        static="white"
+                        label=${this.pendingLabel + 'progress circle'}
+                    ></sp-progress-circle>
+                `;
+            })}
+        `;
+    }
 }

packages/button/src/button-base.css

@@ -75,6 +75,7 @@ slot[name='icon']::slotted(img) {
     --spectrum-ui-icon-tshirt-size-width: var(
         --spectrum-alias-ui-icon-cornertriangle-size-75
     );
+    --mod-progress-circle-size: var(--spectrum-alias-workflow-icon-size-s);
 }
 
 :host([size='m']) {
@@ -90,6 +91,7 @@ slot[name='icon']::slotted(img) {
     --spectrum-ui-icon-tshirt-size-width: var(
         --spectrum-alias-ui-icon-cornertriangle-size-100
     );
+    --mod-progress-circle-size: var(--spectrum-alias-workflow-icon-size-m);
 }
 
 :host([size='l']) {
@@ -105,6 +107,7 @@ slot[name='icon']::slotted(img) {
     --spectrum-ui-icon-tshirt-size-width: var(
         --spectrum-alias-ui-icon-cornertriangle-size-200
     );
+    --mod-progress-circle-size: var(--spectrum-alias-workflow-icon-size-l);
 }
 
 :host([size='xl']) {
@@ -120,4 +123,5 @@ slot[name='icon']::slotted(img) {
     --spectrum-ui-icon-tshirt-size-width: var(
         --spectrum-alias-ui-icon-cornertriangle-size-300
     );
+    --mod-progress-circle-size: var(--spectrum-alias-workflow-icon-size-xl);
 }

packages/button/src/button.css

@@ -21,3 +21,20 @@ governing permissions and limitations under the License.
         border-color: highlight;
     }
 }
+
+:host([pending][is-pending]) {
+    cursor: default;
+    pointer-events: none;
+}
+
+:host([pending][is-pending]) sp-progress-circle {
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+:host([pending][is-pending]) slot[name='icon'],
+:host([pending][is-pending]) #label {
+    visibility: hidden;
+}

packages/button/src/spectrum-button.css

@@ -527,7 +527,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([disabled]) {
+:host([disabled]),
+:host([is-pending]) {
     background-color: var(
         --highcontrast-button-background-color-disabled,
         var(

packages/button/src/spectrum-config.js

@@ -39,9 +39,14 @@ const config = {
                 converter.classToHost(),
                 converter.classToAttribute('spectrum-Button--quiet'),
                 converter.classToAttribute('spectrum-Button--emphasized'),
-                converter.classToAttribute('is-disabled', 'disabled'),
                 converter.classToAttribute('is-selected', 'selected'),
                 converter.classToAttribute('is-focused', 'focused'),
+                /**
+                 * HACK!
+                 * This relies on the fact that spectrum-css is using both `&:disabled` and `&.is-disabled` in the selectors
+                 * for disabled states. We're using the class based selector here to also emit a `is-pending` selector.
+                 */
+                converter.classToAttribute('is-disabled', 'is-pending'),
                 converter.pseudoToAttribute('disabled', 'disabled'),
                 converter.pseudoToAttribute('active', 'active'),
                 converter.classToAttribute(

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',
+};