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

Comparing version 0.47.2 to 0.48.0-beta.0

package.json

 {
     "name": "@spectrum-web-components/button",
-    "version": "0.47.2",
+    "version": "0.48.0-beta.0",
     "publishConfig": {
@@ -85,9 +85,9 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.47.2",
-        "@spectrum-web-components/clear-button": "^0.47.2",
-        "@spectrum-web-components/close-button": "^0.47.2",
-        "@spectrum-web-components/icon": "^0.47.2",
-        "@spectrum-web-components/icons-ui": "^0.47.2",
-        "@spectrum-web-components/progress-circle": "^0.47.2",
-        "@spectrum-web-components/shared": "^0.47.2"
+        "@spectrum-web-components/base": "^0.48.0-beta.0",
+        "@spectrum-web-components/clear-button": "^0.48.0-beta.0",
+        "@spectrum-web-components/close-button": "^0.48.0-beta.0",
+        "@spectrum-web-components/icon": "^0.48.0-beta.0",
+        "@spectrum-web-components/icons-ui": "^0.48.0-beta.0",
+        "@spectrum-web-components/progress-circle": "^0.48.0-beta.0",
+        "@spectrum-web-components/shared": "^0.48.0-beta.0"
     },
@@ -103,3 +103,3 @@ "devDependencies": {
     ],
-    "gitHead": "2784e4c65da6a65b6bc748d785154714c8498a8e"
+    "gitHead": "9a1377f0402a17b732b96e17ad06b800df6ab52e"
 }

src/Button.d.ts

 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
 import { ButtonBase } from './ButtonBase.js';
+import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
 export type DeprecatedButtonVariants = 'cta' | 'overBackground';
@@ -23,3 +24,8 @@ export type ButtonStatics = 'white' | 'black';
     pending: boolean;
-    private cachedAriaLabel;
+    pendingStateController: PendingStateController<this>;
+    /**
+     * Initializes the `PendingStateController` for the Button component.
+     * The `PendingStateController` manages the pending state of the Button.
+     */
+    constructor();
     click(): void;
@@ -43,2 +49,3 @@ /**
     protected firstUpdated(changes: PropertyValues<this>): void;
+    protected update(changes: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
@@ -45,0 +52,0 @@ protected renderButton(): TemplateResult;

src/Button.dev.js

@@ -19,3 +19,3 @@ "use strict";
 import buttonStyles from "./button.css.js";
-import { when } from "@spectrum-web-components/base/src/directives.js";
+import { PendingStateController } from "@spectrum-web-components/reactive-controllers/src/PendingState.js";
 export const VALID_VARIANTS = [
@@ -31,9 +31,13 @@ "accent",
 export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
+  /**
+   * Initializes the `PendingStateController` for the Button component.
+   * The `PendingStateController` manages the pending state of the Button.
+   */
   constructor() {
-    super(...arguments);
+    super();
     this.pendingLabel = "Pending";
     this.pending = false;
-    this.cachedAriaLabel = null;
     this._variant = "accent";
     this.treatment = "fill";
+    this.pendingStateController = new PendingStateController(this);
   }
@@ -113,29 +117,11 @@ static get styles() {
     }
+    if (this.pending) {
+      this.pendingStateController.hostUpdated();
+    }
   }
+  update(changes) {
+    super.update(changes);
+  }
   updated(changed) {
     super.updated(changed);
-    if (changed.has("pending")) {
-      if (this.pending && this.pendingLabel !== this.getAttribute("aria-label")) {
-        if (!this.disabled) {
-          this.cachedAriaLabel = this.getAttribute("aria-label") || "";
-          this.setAttribute("aria-label", this.pendingLabel);
-        }
-      } else if (!this.pending && this.cachedAriaLabel) {
-        this.setAttribute("aria-label", this.cachedAriaLabel);
-      } else if (!this.pending && this.cachedAriaLabel === "") {
-        this.removeAttribute("aria-label");
-      }
-    }
-    if (changed.has("disabled")) {
-      if (!this.disabled && this.pendingLabel !== this.getAttribute("aria-label")) {
-        if (this.pending) {
-          this.cachedAriaLabel = this.getAttribute("aria-label") || "";
-          this.setAttribute("aria-label", this.pendingLabel);
-        }
-      } else if (this.disabled && this.cachedAriaLabel) {
-        this.setAttribute("aria-label", this.cachedAriaLabel);
-      } else if (this.disabled && this.cachedAriaLabel == "") {
-        this.removeAttribute("aria-label");
-      }
-    }
   }
@@ -145,12 +131,3 @@ renderButton() {
             ${this.buttonContent}
-            ${when(this.pending, () => {
-      import("@spectrum-web-components/progress-circle/sp-progress-circle.js");
-      return html`
-                    <sp-progress-circle
-                        indeterminate
-                        static="white"
-                        aria-hidden="true"
-                    ></sp-progress-circle>
-                `;
-    })}
+            ${this.pendingStateController.renderPendingState()}
         `;
@@ -157,0 +134,0 @@ }

src/Button.js

@@ -1,11 +0,5 @@
-"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(n,r,t,s)=>{for(var e=s>1?void 0:s?h(r,t):r,l=n.length-1,o;l>=0;l--)(o=n[l])&&(e=(s?o(r,t,e):o(e))||e);return s&&e&&u(r,t,e),e};import{html as c,SizedMixin as d}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as p}from"./ButtonBase.js";import b from"./button.css.js";import{when as m}from"@spectrum-web-components/base/src/directives.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends d(p,{noDefaultSize:!0}){constructor(){super(...arguments);this.pendingLabel="Pending";this.pending=!1;this.cachedAriaLabel=null;this._variant="accent";this.treatment="fill"}static get styles(){return[...super.styles,b]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(t){if(t!==this.variant){switch(this.requestUpdate("variant",this.variant),t){case"cta":this._variant="accent";break;case"overBackground":this.removeAttribute("variant"),this.static="white",this.treatment="outline";return;case"white":case"black":this.static=t,this.removeAttribute("variant");return;case null:return;default:VALID_VARIANTS.includes(t)?this._variant=t:this._variant="accent";break}this.setAttribute("variant",this.variant)}}set quiet(t){this.treatment=t?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("variant")||this.setAttribute("variant",this.variant)}updated(t){super.updated(t),t.has("pending")&&(this.pending&&this.pendingLabel!==this.getAttribute("aria-label")?this.disabled||(this.cachedAriaLabel=this.getAttribute("aria-label")||"",this.setAttribute("aria-label",this.pendingLabel)):!this.pending&&this.cachedAriaLabel?this.setAttribute("aria-label",this.cachedAriaLabel):!this.pending&&this.cachedAriaLabel===""&&this.removeAttribute("aria-label")),t.has("disabled")&&(!this.disabled&&this.pendingLabel!==this.getAttribute("aria-label")?this.pending&&(this.cachedAriaLabel=this.getAttribute("aria-label")||"",this.setAttribute("aria-label",this.pendingLabel)):this.disabled&&this.cachedAriaLabel?this.setAttribute("aria-label",this.cachedAriaLabel):this.disabled&&this.cachedAriaLabel==""&&this.removeAttribute("aria-label"))}renderButton(){return c`
+"use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var r=(s,a,t,n)=>{for(var e=n>1?void 0:n?l(a,t):a,o=s.length-1,c;o>=0;o--)(c=s[o])&&(e=(n?c(a,t,e):c(e))||e);return n&&e&&u(a,t,e),e};import{html as p,SizedMixin as d}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as h}from"./ButtonBase.js";import b from"./button.css.js";import{PendingStateController as m}from"@spectrum-web-components/reactive-controllers/src/PendingState.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends d(h,{noDefaultSize:!0}){constructor(){super();this.pendingLabel="Pending";this.pending=!1;this._variant="accent";this.treatment="fill";this.pendingStateController=new m(this)}static get styles(){return[...super.styles,b]}click(){this.pending||super.click()}get variant(){return this._variant}set variant(t){if(t!==this.variant){switch(this.requestUpdate("variant",this.variant),t){case"cta":this._variant="accent";break;case"overBackground":this.removeAttribute("variant"),this.static="white",this.treatment="outline";return;case"white":case"black":this.static=t,this.removeAttribute("variant");return;case null:return;default:VALID_VARIANTS.includes(t)?this._variant=t:this._variant="accent";break}this.setAttribute("variant",this.variant)}}set quiet(t){this.treatment=t?"outline":"fill"}get quiet(){return this.treatment==="outline"}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}update(t){super.update(t)}updated(t){super.updated(t)}renderButton(){return p`
             ${this.buttonContent}
-            ${m(this.pending,()=>(import("@spectrum-web-components/progress-circle/sp-progress-circle.js"),c`
-                    <sp-progress-circle
-                        indeterminate
-                        static="white"
-                        aria-hidden="true"
-                    ></sp-progress-circle>
-                `))}
-        `}}i([a({type:String,attribute:"pending-label"})],Button.prototype,"pendingLabel",2),i([a({type:Boolean,reflect:!0,attribute:!0})],Button.prototype,"pending",2),i([a()],Button.prototype,"variant",1),i([a({type:String,reflect:!0})],Button.prototype,"static",2),i([a({reflect:!0})],Button.prototype,"treatment",2),i([a({type:Boolean})],Button.prototype,"quiet",1);
+            ${this.pendingStateController.renderPendingState()}
+        `}}r([i({type:String,attribute:"pending-label"})],Button.prototype,"pendingLabel",2),r([i({type:Boolean,reflect:!0,attribute:!0})],Button.prototype,"pending",2),r([i()],Button.prototype,"variant",1),r([i({type:String,reflect:!0})],Button.prototype,"static",2),r([i({reflect:!0})],Button.prototype,"treatment",2),r([i({type:Boolean})],Button.prototype,"quiet",1);
 //# sourceMappingURL=Button.js.map

src/ButtonBase.d.ts

@@ -36,3 +36,4 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
     protected updated(changed: PropertyValues): void;
+    protected update(changes: PropertyValues): void;
 }
 export {};

src/ButtonBase.dev.js

@@ -165,2 +165,9 @@ "use strict";
     }
+    if (changed.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
     this.manageAnchor();
@@ -175,5 +182,2 @@ this.addEventListener("keydown", this.handleKeydown);
     }
-    if (changed.has("label")) {
-      this.setAttribute("aria-label", this.label || "");
-    }
     if (this.anchorElement) {
@@ -184,2 +188,12 @@ this.anchorElement.addEventListener("focus", this.proxyFocus);
   }
+  update(changes) {
+    super.update(changes);
+    if (changes.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
 }
@@ -186,0 +200,0 @@ __decorateClass([

src/ButtonBase.js

@@ -1,2 +0,2 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(n,i,e,t)=>{for(var r=t>1?void 0:t?c(i,e):i,a=n.length-1,l;a>=0;a--)(l=n[a])&&(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 u}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 m 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[m]}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 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`
                 <slot name="icon" ?icon-only=${!this.hasLabel}></slot>
@@ -12,3 +12,3 @@ `,o`
             ${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"),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),e.has("label")&&this.setAttribute("aria-label",this.label||""),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1)}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([u(".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.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);
 //# sourceMappingURL=ButtonBase.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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 3 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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 3 instances in 1 package

Worsened metrics

Total package byte prevSize

795598

decreased by-6.37%

Number of package files

228

decreased by-0.44%

Lines of code

4116

decreased by-31.01%

Dependency changes

• + Added@spectrum-web-components/base@0.48.1(transitive)

• + Added@spectrum-web-components/clear-button@0.48.1(transitive)

• + Added@spectrum-web-components/close-button@0.48.1(transitive)

• + Added@spectrum-web-components/icon@0.48.1(transitive)

• + Added@spectrum-web-components/icons-ui@0.48.1(transitive)

• + Added@spectrum-web-components/iconset@0.48.1(transitive)

• + Added@spectrum-web-components/progress-circle@0.48.1(transitive)

• + Added@spectrum-web-components/shared@0.48.1(transitive)

• - Removed@spectrum-web-components/base@0.47.2(transitive)

• - Removed@spectrum-web-components/clear-button@0.47.2(transitive)

• - Removed@spectrum-web-components/close-button@0.47.2(transitive)

• - Removed@spectrum-web-components/icon@0.47.2(transitive)

• - Removed@spectrum-web-components/icons-ui@0.47.2(transitive)

• - Removed@spectrum-web-components/iconset@0.47.2(transitive)

• - Removed@spectrum-web-components/progress-circle@0.47.2(transitive)

• - Removed@spectrum-web-components/shared@0.47.2(transitive)

• Updated@spectrum-web-components/base@^0.48.0-beta.0

• Updated@spectrum-web-components/clear-button@^0.48.0-beta.0

• Updated@spectrum-web-components/close-button@^0.48.0-beta.0

• Updated@spectrum-web-components/icon@^0.48.0-beta.0

• Updated@spectrum-web-components/icons-ui@^0.48.0-beta.0

• Updated@spectrum-web-components/progress-circle@^0.48.0-beta.0

• Updated@spectrum-web-components/shared@^0.48.0-beta.0