@spectrum-web-components/button - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-color-testing

package.json

 {
     "name": "@spectrum-web-components/button",
-    "version": "1.0.0",
+    "version": "1.0.1-color-testing",
     "publishConfig": {
@@ -86,9 +86,10 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^1.0.0",
-        "@spectrum-web-components/clear-button": "^1.0.0",
-        "@spectrum-web-components/close-button": "^1.0.0",
-        "@spectrum-web-components/icon": "^1.0.0",
-        "@spectrum-web-components/icons-ui": "^1.0.0",
-        "@spectrum-web-components/progress-circle": "^1.0.0",
-        "@spectrum-web-components/shared": "^1.0.0"
+        "@spectrum-web-components/base": "^1.0.1-color-testing",
+        "@spectrum-web-components/clear-button": "^1.0.1-color-testing",
+        "@spectrum-web-components/close-button": "^1.0.1-color-testing",
+        "@spectrum-web-components/icon": "^1.0.1-color-testing",
+        "@spectrum-web-components/icons-ui": "^1.0.1-color-testing",
+        "@spectrum-web-components/progress-circle": "^1.0.1-color-testing",
+        "@spectrum-web-components/reactive-controllers": "^1.0.1-color-testing",
+        "@spectrum-web-components/shared": "^1.0.1-color-testing"
     },
@@ -104,3 +105,3 @@ "devDependencies": {
     ],
-    "gitHead": "5cf5d34645bf9494ebd20f64c42d1619523d2d84"
+    "gitHead": "17e14b4a9fa2c8b15df158ea7d77ce09bf50de82"
 }

README.md

@@ -335,3 +335,3 @@ ## Description
 
-In addition to handling events like a native `<button>` HTML element, one can also use a `<sp-button>` in place of the `<a>` element by using the `href` and optional `target` attribute.
+In addition to handling events like a native `<button>` HTML element, one can also use a `<sp-button>` in place of the `<a>` HTML element by using the `href` and optional `target` attribute.
 
@@ -338,0 +338,0 @@ ```html

src/ButtonBase.d.ts

@@ -17,3 +17,10 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     active: boolean;
+    /**
+     * The default behavior of the button.
+     * Possible values are: `button` (default), `submit`, and `reset`.
+     */
     type: 'button' | 'submit' | 'reset';
+    /**
+     * HTML anchor element that component clicks by proxy
+     */
     private anchorElement;
@@ -24,3 +31,2 @@ get focusElement(): HTMLElement;
     constructor();
-    click(): void;
     private handleClickCapture;
@@ -27,0 +33,0 @@ private proxyFocus;

src/ButtonBase.dev.js

@@ -57,11 +57,2 @@ "use strict";
   }
-  click() {
-    if (this.disabled) {
-      return;
-    }
-    if (this.shouldProxyClick()) {
-      return;
-    }
-    super.click();
-  }
   handleClickCapture(event) {
@@ -74,2 +65,5 @@ if (this.disabled) {
     }
+    if (this.shouldProxyClick()) {
+      return;
+    }
   }
@@ -154,3 +148,2 @@ proxyFocus() {
       }
-      this.removeEventListener("click", this.shouldProxyClick);
     } else {
@@ -160,3 +153,2 @@ if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
       }
-      this.addEventListener("click", this.shouldProxyClick);
     }
@@ -163,0 +155,0 @@ }

src/ButtonBase.js

@@ -1,2 +0,2 @@
-"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(a,i,e,t)=>{for(var r=t>1?void 0:t?u(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&d(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as c}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as p}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import v from"./button-base.css.js";export class ButtonBase extends f(p(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[v]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
+"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(a,i,e,t)=>{for(var r=t>1?void 0:t?u(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&d(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as p}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as c}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import m from"./button-base.css.js";export class ButtonBase extends f(c(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[m]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
                 <slot name="icon" ?icon-only=${!this.hasLabel}></slot>
@@ -7,3 +7,3 @@ `,o`
                 </span>
-            `]}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}proxyFocus(){this.focus()}shouldProxyClick(){let e=!1;if(this.anchorElement)this.anchorElement.click(),e=!0;else if(this.type!=="button"){const t=document.createElement("button");t.type=this.type,this.insertAdjacentElement("afterend",t),t.click(),t.remove(),e=!0}return e}renderAnchor(){return o`
+            `]}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1;this.shouldProxyClick()}proxyFocus(){this.focus()}shouldProxyClick(){let e=!1;if(this.anchorElement)this.anchorElement.click(),e=!0;else if(this.type!=="button"){const t=document.createElement("button");t.type=this.type,this.insertAdjacentElement("afterend",t),t.click(),t.remove(),e=!0}return e}renderAnchor(){return o`
             ${this.buttonContent}
@@ -13,3 +13,3 @@ ${super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"})}
             ${this.buttonContent}
-        `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?((!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"),this.removeEventListener("click",this.shouldProxyClick)):((!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button"),this.addEventListener("click",this.shouldProxyClick))}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1)}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([c(".anchor")],ButtonBase.prototype,"anchorElement",2);
+        `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?(!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"):(!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button")}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1)}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([p(".anchor")],ButtonBase.prototype,"anchorElement",2);
 //# sourceMappingURL=ButtonBase.js.map

test/button.test.js

@@ -17,2 +17,3 @@ "use strict";
 } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
 import { spy, stub } from "sinon";
@@ -176,2 +177,28 @@ describe("Button", () => {
     });
+    it("allows link click", async () => {
+      var _a, _b;
+      let clicked = false;
+      const el = await fixture(html`
+                <sp-button href="#top">Button as link</sp-button>
+            `);
+      await elementUpdated(el);
+      (_b = (_a = el.shadowRoot) == null ? void 0 : _a.querySelector(".anchor")) == null ? void 0 : _b.addEventListener("click", (event) => {
+        event.preventDefault();
+        clicked = true;
+      });
+      const rect = el.getBoundingClientRect();
+      await sendMouse({
+        steps: [
+          {
+            position: [
+              rect.left + rect.width / 2,
+              rect.top + rect.height / 2
+            ],
+            type: "click"
+          }
+        ]
+      });
+      await elementUpdated(el);
+      expect(clicked).to.be.true;
+    });
     it("accepts shift+tab interactions", async () => {
@@ -178,0 +205,0 @@ let focusedCount = 0;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 4 instances in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 4 instances in 1 package

Worsened metrics

Total package byte prevSize

797562

decreased by-5.76%

Dependency count

8

increased by14.29%

Number of package files

233

decreased by-0.43%

Lines of code

4164

decreased by-30.62%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/reactive-controllers@^1.0.1-color-testing

• + Added@spectrum-web-components/reactive-controllers@1.0.3(transitive)

• Updated@spectrum-web-components/base@^1.0.1-color-testing

• Updated@spectrum-web-components/clear-button@^1.0.1-color-testing

• Updated@spectrum-web-components/close-button@^1.0.1-color-testing

• Updated@spectrum-web-components/icon@^1.0.1-color-testing

• Updated@spectrum-web-components/icons-ui@^1.0.1-color-testing

• Updated@spectrum-web-components/progress-circle@^1.0.1-color-testing

• Updated@spectrum-web-components/shared@^1.0.1-color-testing