feat(button): use synthetic button instead of native

adobe · Dec 16, 2020 · ed30d82 · ed30d82
1 parent 31e6fdf
commit ed30d82
Show file tree

Hide file tree

Showing 27 changed files with 897 additions and 418 deletions.
diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css
@@ -12,50 +12,6 @@ governing permissions and limitations under the License.
 
 @import './spectrum-action-group.css';
 
-/**
- * The following styles translate the Spectrum CSS usage of `border-radius` directly on `.spectrum-ActionGroup-item`
- * to a usage of the `--spectrum-actionbutton-border-radius` custom property so that it pieces the shadow DOM in
- * `<sp-action-button>` appropriately.
- **/
-
-:host([compact]:not([quiet])) ::slotted(*) {
-    /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item */
-    --spectrum-actionbutton-border-radius: 0;
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(*) {
-    /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet).spectrum-ActionGroup--vertical .spectrum-ActionGroup-item */
-    --spectrum-actionbutton-border-radius: 0;
-}
-
-:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:first-child),
-:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:last-child) {
-    --spectrum-actionbutton-border-radius: var(
-            --spectrum-alias-border-radius-regular
-        )
-        0 0 var(--spectrum-alias-border-radius-regular);
-}
-
-:host([dir='rtl'][compact]:not([quiet])) ::slotted(*:first-child),
-:host([dir='ltr'][compact]:not([quiet])) ::slotted(*:last-child) {
-    --spectrum-actionbutton-border-radius: 0
-        var(--spectrum-alias-border-radius-regular)
-        var(--spectrum-alias-border-radius-regular) 0;
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(*:first-child) {
-    --spectrum-actionbutton-border-radius: var(
-            --spectrum-alias-border-radius-regular
-        )
-        var(--spectrum-alias-border-radius-regular) 0 0;
-}
-
-:host([compact][vertical]:not([quiet])) ::slotted(*:last-child) {
-    --spectrum-actionbutton-border-radius: 0 0
-        var(--spectrum-alias-border-radius-regular)
-        var(--spectrum-alias-border-radius-regular);
-}
-
 /**
  * The following styles corrects issues found in the Spectrum CSS output
  * that are tracked via: https://github.com/adobe/spectrum-css/issues/795

diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json
@@ -50,6 +50,7 @@
     "license": "Apache-2.0",
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
+        "@spectrum-web-components/button": "^0.9.4",
         "@spectrum-web-components/dropdown": "^0.8.5",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-workflow": "^0.3.6",

diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -13,11 +13,12 @@ governing permissions and limitations under the License.
 import {
     CSSResultArray,
     TemplateResult,
-    property,
     PropertyValues,
     html,
+    ifDefined,
 } from '@spectrum-web-components/base';
 import { DropdownBase } from '@spectrum-web-components/dropdown';
+import '@spectrum-web-components/button/sp-action-button.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { MoreIcon } from '@spectrum-web-components/icons-workflow';
 import actionMenuStyles from './action-menu.css.js';
@@ -30,12 +31,6 @@ export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') {
         return [...super.styles, actionMenuStyles];
     }
 
-    @property({ type: Boolean, reflect: true })
-    public selected = false;
-
-    @property({ type: Boolean, reflect: true })
-    public quiet = true;
-
     protected listRole = 'menu';
     protected itemRole = 'menuitem';
     private get hasLabel(): boolean {
@@ -45,32 +40,42 @@ export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') {
     protected get buttonContent(): TemplateResult[] {
         return [
             html`
-                <slot name="icon">
+                <slot name="icon" slot="icon">
                     <sp-icon size="m" class="icon">
                         ${MoreIcon({ hidden: this.hasLabel })}
                     </sp-icon>
                 </slot>
-                <div id="label" ?hidden=${!this.hasLabel}>
-                    <slot
-                        name="label"
-                        id="slot"
-                        @slotchange=${this.manageTextObservedSlot}
-                    ></slot>
-                </div>
+                <slot name="label"></slot>
             `,
         ];
     }
 
+    protected get renderButton(): TemplateResult {
+        return html`
+            <sp-action-button
+                quiet
+                ?selected=${this.open}
+                aria-haspopup="true"
+                aria-controls="popover"
+                aria-expanded=${this.open ? 'true' : 'false'}
+                aria-label=${ifDefined(this.label || undefined)}
+                id="button"
+                class="button"
+                @blur=${this.onButtonBlur}
+                @click=${this.onButtonClick}
+                @focus=${this.onButtonFocus}
+                ?disabled=${this.disabled}
+            >
+                ${this.buttonContent}
+            </sp-action-button>
+        `;
+    }
+
     protected updated(changedProperties: PropertyValues): void {
         super.updated(changedProperties);
-        if (changedProperties.has('open')) {
-            this.selected = this.open;
-        }
-        if (changedProperties.has('quiet')) {
-            this.quiet = true;
-        }
         if (changedProperties.has('invalid')) {
             this.invalid = false;
         }
+        this.quiet = true;
     }
 }
diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css
@@ -10,18 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+.button {
     min-width: 0;
+    width: auto;
 }
 
 :host([quiet]) {
     min-width: 0;
 }
 
-#button {
-    width: auto;
-}
-
 ::slotted([slot='icon']) {
     flex-shrink: 0;
 }

diff --git a/packages/button/sp-field-button.ts b/packages/button/sp-field-button.ts
@@ -0,0 +1,20 @@
+/*
+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 { FieldButton } from './src/FieldButton.js';
+
+customElements.define('sp-field-button', FieldButton);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-field-button': FieldButton;
+    }
+}
diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
@@ -16,7 +16,7 @@ import {
     TemplateResult,
     CSSResultArray,
     query,
-    ifDefined,
+    PropertyValues,
 } from '@spectrum-web-components/base';
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
@@ -37,18 +37,24 @@ export class ButtonBase extends LikeAnchor(
         return this.slotContentIsPresent;
     }
 
+    @property({ type: Boolean, reflect: true })
+    public active = false;
+
+    @property({ type: String })
+    public type: 'button' | 'submit' | 'reset' = 'button';
+
     @property({ type: Boolean, reflect: true, attribute: 'icon-right' })
     protected iconRight = false;
 
-    private get hasLabel(): boolean {
+    protected get hasLabel(): boolean {
         return this.slotHasContent;
     }
 
     @query('.button')
     private buttonElement!: HTMLButtonElement;
 
     public get focusElement(): HTMLElement {
-        return this.buttonElement;
+        return this.buttonElement || this;
     }
 
     protected get buttonContent(): TemplateResult[] {
@@ -72,15 +78,33 @@ export class ButtonBase extends LikeAnchor(
         return content;
     }
 
+    public click(): void {
+        if (this.disabled) {
+            return;
+        }
+
+        if (this.shouldProxyClick()) {
+            return;
+        }
+
+        super.click();
+    }
+
+    private shouldProxyClick(): boolean {
+        if (this.type !== 'button') {
+            const proxy = document.createElement('button');
+            proxy.type = this.type;
+            this.insertAdjacentElement('afterend', proxy);
+            proxy.click();
+            proxy.remove();
+            return true;
+        }
+        return false;
+    }
+
     protected renderButton(): TemplateResult {
         return html`
-            <button
-                id="button"
-                class="button"
-                aria-label=${ifDefined(this.label)}
-            >
-                ${this.buttonContent}
-            </button>
+            ${this.buttonContent}
         `;
     }
 
@@ -93,4 +117,82 @@ export class ButtonBase extends LikeAnchor(
               })
             : this.renderButton();
     }
+
+    private handleKeydown(event: KeyboardEvent): void {
+        const { code } = event;
+        switch (code) {
+            case 'Space':
+                this.addEventListener('keyup', this.handleKeyup);
+                this.active = true;
+                break;
+            default:
+                break;
+        }
+    }
+
+    private handleKeypress(event: KeyboardEvent): void {
+        const { code } = event;
+        switch (code) {
+            case 'Enter':
+                this.click();
+                break;
+            default:
+                break;
+        }
+    }
+
+    private handleKeyup(event: KeyboardEvent): void {
+        const { code } = event;
+        switch (code) {
+            case 'Space':
+                this.removeEventListener('keyup', this.handleKeyup);
+                this.active = false;
+                this.click();
+                break;
+            default:
+                break;
+        }
+    }
+
+    private handleFocusout(): void {
+        this.active = false;
+    }
+
+    private manageRole(): void {
+        if (this.href && this.href.length > 0) {
+            this.removeAttribute('role');
+            this.removeEventListener('keydown', this.handleKeydown);
+            this.removeEventListener('keypress', this.handleKeypress);
+        } else if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'button');
+            this.addEventListener('keydown', this.handleKeydown);
+            this.addEventListener('keypress', this.handleKeypress);
+        }
+    }
+
+    protected firstUpdated(changed: PropertyValues): void {
+        super.firstUpdated(changed);
+        if (!this.hasAttribute('tabindex')) {
+            this.tabIndex = 0;
+        }
+        this.manageRole();
+        this.addEventListener('click', this.shouldProxyClick);
+    }
+
+    protected updated(changed: PropertyValues): void {
+        super.updated(changed);
+        if (changed.has('href')) {
+            this.manageRole();
+        }
+        if (changed.has('label')) {
+            this.setAttribute('aria-label', this.label || '');
+        }
+        if (changed.has('active')) {
+            if (this.active) {
+                this.addEventListener('focusout', this.handleFocusout);
+            } else {
+                this.removeEventListener('focusout', this.handleFocusout);
+            }
+        }
+    }
 }
diff --git a/packages/button/src/FieldButton.ts b/packages/button/src/FieldButton.ts
@@ -0,0 +1,49 @@
+/*
+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 {
+    html,
+    CSSResultArray,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import { ButtonBase } from './ButtonBase.js';
+import buttonStyles from './field-button.css.js';
+
+/**
+ * A Spectrum button control.
+ * @element sp-field-button
+ */
+export class FieldButton extends ButtonBase {
+    public static get styles(): CSSResultArray {
+        return [...super.styles, buttonStyles];
+    }
+
+    protected get buttonContent(): TemplateResult[] {
+        const icon = html`
+            <slot name="icon"></slot>
+        `;
+        const content = [
+            html`
+                <slot
+                    ?hidden=${!this.hasLabel}
+                    id="slot"
+                    @slotchange=${this.manageTextObservedSlot}
+                ></slot>
+            `,
+        ];
+        if (!this.hasIcon) {
+            return content;
+        }
+        this.iconRight ? content.push(icon) : content.unshift(icon);
+        return content;
+    }
+}