fix: correctly delivery visuals and mouse interactions for litAnchor …

…and extensions
adobe · Mar 16, 2021 · 0ae889a · 0ae889a
1 parent a5a204f
commit 0ae889a
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 22 deletions.
diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css
@@ -29,6 +29,11 @@ governing permissions and limitations under the License.
     flex-shrink: 0;
 }
 
+#button {
+    position: absolute;
+    inset: 0;
+}
+
 #label {
     flex-grow: var(--spectrum-actionbutton-label-flex-grow);
     text-align: var(--spectrum-actionbutton-label-text-align);

diff --git a/packages/action-button/stories/action-button.stories.ts b/packages/action-button/stories/action-button.stories.ts
@@ -105,6 +105,18 @@ wIconButton.story = {
     name: 'w/ Icon button',
 };
 
+export const likeAnchor = (): TemplateResult => {
+    return html`
+        <sp-action-button
+            href="https://opensource.adobe.com/spectrum-web-components"
+            target="_blank"
+        >
+            <sp-icon-edit slot="icon"></sp-icon-edit>
+            Edit the Documentation Site
+        </sp-action-button>
+    `;
+};
+
 export const iconOnlyButton = (): TemplateResult => {
     return html`
         <sp-action-button label="Edit">

diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
@@ -75,6 +75,7 @@ export class ButtonBase extends LikeAnchor(
 
     constructor() {
         super();
+        this.proxyFocus = this.proxyFocus.bind(this);
 
         this.addEventListener('click', this.handleClickCapture, {
             capture: true,
@@ -102,11 +103,16 @@ export class ButtonBase extends LikeAnchor(
         }
     }
 
+    private proxyFocus(): void {
+        this.focus();
+    }
+
     private shouldProxyClick(): boolean {
         let handled = false;
         if (this.anchorElement) {
             this.anchorElement.click();
             handled = true;
+            this.anchorElement.classList.remove('clicking');
         } else if (this.type !== 'button') {
             const proxy = document.createElement('button');
             proxy.type = this.type;
@@ -118,6 +124,16 @@ export class ButtonBase extends LikeAnchor(
         return handled;
     }
 
+    public renderAnchor(): TemplateResult {
+        return html`
+            ${this.buttonContent}
+            ${super.renderAnchor({
+                id: 'button',
+                className: 'button anchor hidden',
+            })}
+        `;
+    }
+
     protected renderButton(): TemplateResult {
         return html`
             ${this.buttonContent}
@@ -126,11 +142,7 @@ export class ButtonBase extends LikeAnchor(
 
     protected render(): TemplateResult {
         return this.href && this.href.length > 0
-            ? this.renderAnchor({
-                  id: 'button',
-                  className: 'button anchor',
-                  anchorContent: this.buttonContent,
-              })
+            ? this.renderAnchor()
             : this.renderButton();
     }
 
@@ -223,6 +235,7 @@ export class ButtonBase extends LikeAnchor(
             }
         }
         if (this.anchorElement) {
+            this.anchorElement.addEventListener('focus', this.proxyFocus);
             this.anchorElement.tabIndex = -1;
         }
     }

diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css
@@ -31,13 +31,8 @@ governing permissions and limitations under the License.
 }
 
 #button {
-    color: inherit;
-    text-decoration: inherit;
-    display: flex;
-}
-
-#button:focus {
-    outline: none;
+    position: absolute;
+    inset: 0;
 }
 
 :host:after {

diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -76,16 +76,6 @@ export class MenuItem extends ActionButton {
         return content;
     }
 
-    public renderAnchor(): TemplateResult {
-        return html`
-            ${this.buttonContent}
-            ${super.renderAnchor({
-                id: 'button',
-                className: 'button anchor hidden',
-            })}
-        `;
-    }
-
     protected renderButton(): TemplateResult {
         return html`
             ${this.buttonContent}

diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css
@@ -11,3 +11,8 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-menu-item.css';
+
+#button {
+    position: absolute;
+    inset: 0;
+}
diff --git a/packages/menu/stories/menu-item.stories.ts b/packages/menu/stories/menu-item.stories.ts
@@ -36,3 +36,17 @@ export const noWrap = (): TemplateResult => {
         </sp-menu>
     `;
 };
+
+export const href = (): TemplateResult => {
+    return html`
+        <sp-menu style="width: 150px;">
+            <sp-menu-item
+                href="https://opensource.adobe.com/spectrum-web-components"
+                target="_blank"
+            >
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit the Documentation Site
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};