@spectrum-web-components/button
Advanced tools
@spectrum-web-components/button - npm Package Compare versions
Comparing version 0.40.2 to 0.40.3
@@ -87,2 +87,46 @@ { | ||
| "kind": "field", | ||
| "name": "pendingLabel", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'Pending'", | ||
| "attribute": "pending-label" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "pending", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "pending", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "cachedAriaLabel", | ||
| "type": { | ||
| "text": "string | null" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "null" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "click", | ||
| "privacy": "public", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "inheritedFrom": { | ||
| "name": "ButtonBase", | ||
| "module": "src/ButtonBase.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "variant", | ||
@@ -138,2 +182,16 @@ "type": { | ||
| { | ||
| "kind": "method", | ||
| "name": "renderButton", | ||
| "privacy": "protected", | ||
| "return": { | ||
| "type": { | ||
| "text": "TemplateResult" | ||
| } | ||
| }, | ||
| "inheritedFrom": { | ||
| "name": "ButtonBase", | ||
| "module": "src/ButtonBase.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
@@ -220,16 +278,2 @@ "name": "active", | ||
| "kind": "method", | ||
| "name": "click", | ||
| "privacy": "public", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "inheritedFrom": { | ||
| "name": "ButtonBase", | ||
| "module": "src/ButtonBase.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "handleClickCapture", | ||
@@ -299,16 +343,2 @@ "privacy": "private", | ||
| "kind": "method", | ||
| "name": "renderButton", | ||
| "privacy": "protected", | ||
| "return": { | ||
| "type": { | ||
| "text": "TemplateResult" | ||
| } | ||
| }, | ||
| "inheritedFrom": { | ||
| "name": "ButtonBase", | ||
| "module": "src/ButtonBase.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "handleKeydown", | ||
@@ -423,2 +453,18 @@ "privacy": "protected", | ||
| { | ||
| "name": "pending-label", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "default": "'Pending'", | ||
| "fieldName": "pendingLabel" | ||
| }, | ||
| { | ||
| "name": "pending", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "pending" | ||
| }, | ||
| { | ||
| "name": "variant", | ||
@@ -425,0 +471,0 @@ "type": { |
| { | ||
| "name": "@spectrum-web-components/button", | ||
| "version": "0.40.2", | ||
| "version": "0.40.3", | ||
| "publishConfig": { | ||
@@ -85,11 +85,11 @@ "access": "public" | ||
| "dependencies": { | ||
| "@spectrum-web-components/base": "^0.40.2", | ||
| "@spectrum-web-components/clear-button": "^0.40.2", | ||
| "@spectrum-web-components/close-button": "^0.40.2", | ||
| "@spectrum-web-components/icon": "^0.40.2", | ||
| "@spectrum-web-components/icons-ui": "^0.40.2", | ||
| "@spectrum-web-components/shared": "^0.40.2" | ||
| "@spectrum-web-components/base": "^0.40.3", | ||
| "@spectrum-web-components/clear-button": "^0.40.3", | ||
| "@spectrum-web-components/close-button": "^0.40.3", | ||
| "@spectrum-web-components/icon": "^0.40.3", | ||
| "@spectrum-web-components/icons-ui": "^0.40.3", | ||
| "@spectrum-web-components/shared": "^0.40.3" | ||
| }, | ||
| "devDependencies": { | ||
| "@spectrum-css/button": "^11.0.8" | ||
| "@spectrum-css/button": "^11.0.18" | ||
| }, | ||
@@ -102,3 +102,3 @@ "types": "./src/index.d.ts", | ||
| ], | ||
| "gitHead": "e5fd35c7a98569150ca695ec0e0e7411c9c64c28" | ||
| "gitHead": "76467a3470aeafa4beefce1e4fc76341f1d6733f" | ||
| } |
@@ -288,7 +288,8 @@ ## Description | ||
| In addition to the variant, `<sp-button>` elements have a disabled state visual state | ||
| which can be applied by adding the attribute `disabled`. All `<sp-button>` | ||
| variants support this. In addition to affectng the visual state, the `disabled` | ||
| attribute prevents focus and disallows `click` events. | ||
| In addition to the variant, `<sp-button>` elements support two different visual states, disabled and pending, which can be applied by adding the attribute `disabled` or `pending` respectively. All `<sp-button>` variants support these states. | ||
| ### Disabled | ||
| While disabled, `<sp-button>` elements will not respond to click events and will appear faded. | ||
| ```html | ||
@@ -301,2 +302,17 @@ <sp-button-group> | ||
| ### Pending | ||
| While in pending state, `<sp-button>` elements will not respond to click events and will appear faded with an indeterminent `<sp-progress-circle>`. | ||
| `<sp-button>` elements label and icon will be hidden while in pending state. | ||
| Note: `pending` state of the `<sp-button>` element is applied after 1s delay to avoid flashing the pending state for quick actions. | ||
| You can override the delay by adding custom css var `--pending-delay` to your css. | ||
| ```html | ||
| <sp-button-group> | ||
| <sp-button variant="primary">Normal</sp-button> | ||
| <sp-button variant="primary" pending>Pending</sp-button> | ||
| </sp-button-group> | ||
| ``` | ||
| ## Handling events | ||
@@ -303,0 +319,0 @@ |
@@ -16,3 +16,3 @@ "use strict"; | ||
| --spectrum-alias-ui-icon-cornertriangle-size-75 | ||
| )}:host([size=m]){--spectrum-icon-tshirt-size-height:var( | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-s)}:host([size=m]){--spectrum-icon-tshirt-size-height:var( | ||
| --spectrum-alias-workflow-icon-size-m | ||
@@ -25,3 +25,3 @@ );--spectrum-icon-tshirt-size-width:var( | ||
| --spectrum-alias-ui-icon-cornertriangle-size-100 | ||
| )}:host([size=l]){--spectrum-icon-tshirt-size-height:var( | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-m)}:host([size=l]){--spectrum-icon-tshirt-size-height:var( | ||
| --spectrum-alias-workflow-icon-size-l | ||
@@ -34,3 +34,3 @@ );--spectrum-icon-tshirt-size-width:var( | ||
| --spectrum-alias-ui-icon-cornertriangle-size-200 | ||
| )}:host([size=xl]){--spectrum-icon-tshirt-size-height:var( | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-l)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var( | ||
| --spectrum-alias-workflow-icon-size-xl | ||
@@ -43,5 +43,5 @@ );--spectrum-icon-tshirt-size-width:var( | ||
| --spectrum-alias-ui-icon-cornertriangle-size-300 | ||
| )} | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-xl)} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=button-base.css.dev.js.map |
@@ -14,3 +14,3 @@ "use strict";import{css as i}from"@spectrum-web-components/base";const s=i` | ||
| --spectrum-alias-ui-icon-cornertriangle-size-75 | ||
| )}:host([size=m]){--spectrum-icon-tshirt-size-height:var( | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-s)}:host([size=m]){--spectrum-icon-tshirt-size-height:var( | ||
| --spectrum-alias-workflow-icon-size-m | ||
@@ -23,3 +23,3 @@ );--spectrum-icon-tshirt-size-width:var( | ||
| --spectrum-alias-ui-icon-cornertriangle-size-100 | ||
| )}:host([size=l]){--spectrum-icon-tshirt-size-height:var( | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-m)}:host([size=l]){--spectrum-icon-tshirt-size-height:var( | ||
| --spectrum-alias-workflow-icon-size-l | ||
@@ -32,3 +32,3 @@ );--spectrum-icon-tshirt-size-width:var( | ||
| --spectrum-alias-ui-icon-cornertriangle-size-200 | ||
| )}:host([size=xl]){--spectrum-icon-tshirt-size-height:var( | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-l)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var( | ||
| --spectrum-alias-workflow-icon-size-xl | ||
@@ -41,4 +41,4 @@ );--spectrum-icon-tshirt-size-width:var( | ||
| --spectrum-alias-ui-icon-cornertriangle-size-300 | ||
| )} | ||
| );--mod-progress-circle-size:var(--spectrum-alias-workflow-icon-size-xl)} | ||
| `;export default s; | ||
| //# sourceMappingURL=button-base.css.js.map |
@@ -14,3 +14,3 @@ "use strict"; | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;inset-block:0;inset-inline:0;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
@@ -21,3 +21,3 @@ ) ease-out,margin var( | ||
| --spectrum-animation-duration-100 | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-thickness:var( | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-thickness:var( | ||
| --spectrum-focus-indicator-thickness | ||
@@ -163,3 +163,3 @@ );--spectrum-button-focus-indicator-color:var( | ||
| ) | ||
| )}:host([disabled]){background-color:var( | ||
| )}:host .is-disabled,:host([disabled]){background-color:var( | ||
| --highcontrast-button-background-color-disabled,var( | ||
@@ -806,5 +806,17 @@ --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled) | ||
| --system-spectrum-button-staticblack-secondary-outline-content-color-disabled | ||
| )}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}} | ||
| )}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var( | ||
| --highcontrast-button-background-color-disabled,var( | ||
| --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled) | ||
| ) | ||
| );border-color:var( | ||
| --highcontrast-button-border-color-disabled,var( | ||
| --mod-button-border-color-disabled,var(--spectrum-button-border-color-disabled) | ||
| ) | ||
| );color:var( | ||
| --highcontrast-button-content-color-disabled,var( | ||
| --mod-button-content-color-disabled,var(--spectrum-button-content-color-disabled) | ||
| ) | ||
| )}}:host([pending]:not([disabled])){animation:update-pending-button-styles 0s var(--pending-delay,1s) forwards;cursor:default;pointer-events:none}sp-progress-circle{display:block;left:50%;position:absolute;transform:translate(-50%);visibility:hidden}:host([pending]:not([disabled])) sp-progress-circle{animation:show-progress-circle 0s var(--pending-delay,1s) forwards}:host([pending]:not([disabled])) #label,:host([pending]:not([disabled])) slot[name=icon]{animation:hide-icons-label 0s var(--pending-delay,1s) forwards} | ||
| `; | ||
| export default styles; | ||
| //# sourceMappingURL=button.css.dev.js.map |
@@ -12,3 +12,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t` | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;inset-block:0;inset-inline:0;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
@@ -19,3 +19,3 @@ ) ease-out,margin var( | ||
| --spectrum-animation-duration-100 | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-thickness:var( | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-thickness:var( | ||
| --spectrum-focus-indicator-thickness | ||
@@ -161,3 +161,3 @@ );--spectrum-button-focus-indicator-color:var( | ||
| ) | ||
| )}:host([disabled]){background-color:var( | ||
| )}:host .is-disabled,:host([disabled]){background-color:var( | ||
| --highcontrast-button-background-color-disabled,var( | ||
@@ -804,4 +804,16 @@ --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled) | ||
| --system-spectrum-button-staticblack-secondary-outline-content-color-disabled | ||
| )}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}} | ||
| )}@media (forced-colors:active){:host([treatment][disabled]){border-color:graytext}:host([treatment]:not([disabled]):hover){border-color:highlight}}@keyframes show-progress-circle{0%{visibility:hidden}to{visibility:visible}}@keyframes hide-icons-label{0%{visibility:visible}to{visibility:hidden}}@keyframes update-pending-button-styles{to{background-color:var( | ||
| --highcontrast-button-background-color-disabled,var( | ||
| --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled) | ||
| ) | ||
| );border-color:var( | ||
| --highcontrast-button-border-color-disabled,var( | ||
| --mod-button-border-color-disabled,var(--spectrum-button-border-color-disabled) | ||
| ) | ||
| );color:var( | ||
| --highcontrast-button-content-color-disabled,var( | ||
| --mod-button-content-color-disabled,var(--spectrum-button-content-color-disabled) | ||
| ) | ||
| )}}:host([pending]:not([disabled])){animation:update-pending-button-styles 0s var(--pending-delay,1s) forwards;cursor:default;pointer-events:none}sp-progress-circle{display:block;left:50%;position:absolute;transform:translate(-50%);visibility:hidden}:host([pending]:not([disabled])) sp-progress-circle{animation:show-progress-circle 0s var(--pending-delay,1s) forwards}:host([pending]:not([disabled])) #label,:host([pending]:not([disabled])) slot[name=icon]{animation:hide-icons-label 0s var(--pending-delay,1s) forwards} | ||
| `;export default o; | ||
| //# sourceMappingURL=button.css.js.map |
@@ -1,2 +0,2 @@ | ||
| import { CSSResultArray, PropertyValues } from '@spectrum-web-components/base'; | ||
| import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base'; | ||
| import { ButtonBase } from './ButtonBase.js'; | ||
@@ -21,2 +21,6 @@ export declare type DeprecatedButtonVariants = 'cta' | 'overBackground'; | ||
| static get styles(): CSSResultArray; | ||
| pendingLabel: string; | ||
| pending: boolean; | ||
| private cachedAriaLabel; | ||
| click(): void; | ||
| /** | ||
@@ -39,3 +43,5 @@ * The visual variant to apply to this button. | ||
| protected firstUpdated(changes: PropertyValues<this>): void; | ||
| protected updated(changed: PropertyValues): void; | ||
| protected renderButton(): TemplateResult; | ||
| } | ||
| export {}; |
@@ -14,2 +14,3 @@ "use strict"; | ||
| import { | ||
| html, | ||
| SizedMixin | ||
@@ -20,2 +21,3 @@ } from "@spectrum-web-components/base"; | ||
| import buttonStyles from "./button.css.js"; | ||
| import { when } from "@spectrum-web-components/base/src/directives.js"; | ||
| export const VALID_VARIANTS = [ | ||
@@ -33,2 +35,5 @@ "accent", | ||
| super(...arguments); | ||
| this.pendingLabel = "Pending"; | ||
| this.pending = false; | ||
| this.cachedAriaLabel = null; | ||
| this._variant = "accent"; | ||
@@ -40,2 +45,8 @@ this.treatment = "fill"; | ||
| } | ||
| click() { | ||
| if (this.pending) { | ||
| return; | ||
| } | ||
| super.click(); | ||
| } | ||
| get variant() { | ||
@@ -107,4 +118,52 @@ return this._variant; | ||
| } | ||
| 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"); | ||
| } | ||
| } | ||
| } | ||
| renderButton() { | ||
| return html` | ||
| ${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> | ||
| `; | ||
| })} | ||
| `; | ||
| } | ||
| } | ||
| __decorateClass([ | ||
| property({ type: String, attribute: "pending-label" }) | ||
| ], Button.prototype, "pendingLabel", 2); | ||
| __decorateClass([ | ||
| property({ type: Boolean, reflect: true, attribute: true }) | ||
| ], Button.prototype, "pending", 2); | ||
| __decorateClass([ | ||
| property() | ||
@@ -111,0 +170,0 @@ ], Button.prototype, "variant", 1); |
@@ -1,2 +0,11 @@ | ||
| "use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=(s,a,t,r)=>{for(var e=r>1?void 0:r?l(a,t):a,o=s.length-1,c;o>=0;o--)(c=s[o])&&(e=(r?c(a,t,e):c(e))||e);return r&&e&&u(a,t,e),e};import{SizedMixin as p}from"@spectrum-web-components/base";import{property as n}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as h}from"./ButtonBase.js";import d from"./button.css.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends p(h,{noDefaultSize:!0}){constructor(){super(...arguments);this._variant="accent";this.treatment="fill"}static get styles(){return[...super.styles,d]}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)}}i([n()],Button.prototype,"variant",1),i([n({type:String,reflect:!0})],Button.prototype,"static",2),i([n({reflect:!0})],Button.prototype,"treatment",2),i([n({type:Boolean})],Button.prototype,"quiet",1); | ||
| "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` | ||
| ${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); | ||
| //# sourceMappingURL=Button.js.map |
@@ -14,3 +14,3 @@ "use strict"; | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;inset-block:0;inset-inline:0;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
@@ -21,3 +21,3 @@ ) ease-out,margin var( | ||
| --spectrum-animation-duration-100 | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-thickness:var( | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-thickness:var( | ||
| --spectrum-focus-indicator-thickness | ||
@@ -163,3 +163,3 @@ );--spectrum-button-focus-indicator-color:var( | ||
| ) | ||
| )}:host([disabled]){background-color:var( | ||
| )}:host .is-disabled,:host([disabled]){background-color:var( | ||
| --highcontrast-button-background-color-disabled,var( | ||
@@ -166,0 +166,0 @@ --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled) |
@@ -12,3 +12,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t` | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| ) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host:after{display:block;inset-block:0;inset-inline:0;margin:calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*-1);transition:opacity var( | ||
| --mod-animation-duration-100,var(--spectrum-animation-duration-100) | ||
@@ -19,3 +19,3 @@ ) ease-out,margin var( | ||
| --spectrum-animation-duration-100 | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-thickness:var( | ||
| );--spectrum-button-border-radius:var(--spectrum-corner-radius-100);--spectrum-button-border-width:var(--spectrum-border-width-200);--spectrum-button-line-height:1.2;--spectrum-button-focus-ring-gap:var(--spectrum-focus-indicator-gap);--spectrum-button-focus-ring-border-radius:calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));--spectrum-button-focus-ring-thickness:var( | ||
| --spectrum-focus-indicator-thickness | ||
@@ -161,3 +161,3 @@ );--spectrum-button-focus-indicator-color:var( | ||
| ) | ||
| )}:host([disabled]){background-color:var( | ||
| )}:host .is-disabled,:host([disabled]){background-color:var( | ||
| --highcontrast-button-background-color-disabled,var( | ||
@@ -164,0 +164,0 @@ --mod-button-background-color-disabled,var(--spectrum-button-background-color-disabled) |
@@ -42,5 +42,10 @@ // @ts-check | ||
| 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 `pending` selector. | ||
| */ | ||
| // converter.classToAttribute('is-disabled', 'pending'), | ||
| converter.pseudoToAttribute('disabled', 'disabled'), | ||
@@ -47,0 +52,0 @@ converter.pseudoToAttribute('active', 'active'), |
@@ -9,3 +9,4 @@ "use strict"; | ||
| disabled: false, | ||
| variant: "cta" | ||
| variant: "cta", | ||
| pending: false | ||
| }; | ||
@@ -59,2 +60,14 @@ export const argTypes = { | ||
| } | ||
| }, | ||
| pending: { | ||
| name: "pending", | ||
| type: { name: "boolean", required: false }, | ||
| description: "Shows the pending state of the button.", | ||
| table: { | ||
| type: { summary: "boolean" }, | ||
| defaultValue: { summary: false } | ||
| }, | ||
| control: { | ||
| type: "boolean" | ||
| } | ||
| } | ||
@@ -91,2 +104,3 @@ }; | ||
| ?warning=${properties.warning} | ||
| ?pending=${!!properties.pending} | ||
| ?icon-only=${properties.iconOnly} | ||
@@ -103,2 +117,3 @@ > | ||
| size=${properties.size} | ||
| ?pending=${!!properties.pending} | ||
| > | ||
@@ -105,0 +120,0 @@ ${properties.content || "Click Me"} |
@@ -8,2 +8,3 @@ "use strict"; | ||
| html, | ||
| nextFrame, | ||
| waitUntil | ||
@@ -15,2 +16,3 @@ } from "@open-wc/testing"; | ||
| } from "../../../test/testing-helpers.js"; | ||
| import { a11ySnapshot, findAccessibilityNode } from "@web/test-runner-commands"; | ||
| import { spy } from "sinon"; | ||
@@ -216,2 +218,113 @@ describe("Button", () => { | ||
| }); | ||
| it("manages aria-label from disabled state", async () => { | ||
| const el = await fixture( | ||
| html` | ||
| <sp-button | ||
| href="test_url" | ||
| target="_blank" | ||
| label="clickable" | ||
| disabled | ||
| pending-label="Pending Button" | ||
| > | ||
| Click me | ||
| </sp-button> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("clickable"); | ||
| el.pending = true; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("clickable"); | ||
| el.disabled = false; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("Pending Button"); | ||
| el.pending = false; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("clickable"); | ||
| }); | ||
| it("manages aria-label from pending state", async () => { | ||
| const el = await fixture( | ||
| html` | ||
| <sp-button | ||
| href="test_url" | ||
| target="_blank" | ||
| label="clickable" | ||
| pending | ||
| > | ||
| Click me | ||
| </sp-button> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("Pending"); | ||
| el.disabled = true; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("clickable"); | ||
| el.pending = false; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("clickable"); | ||
| el.disabled = false; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("clickable"); | ||
| }); | ||
| it("manages aria-label set from outside", async () => { | ||
| const el = await fixture( | ||
| html` | ||
| <sp-button | ||
| href="test_url" | ||
| target="_blank" | ||
| aria-label="test" | ||
| pending-label="Pending Button" | ||
| > | ||
| Click me | ||
| </sp-button> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("test"); | ||
| el.pending = true; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("Pending Button"); | ||
| el.disabled = true; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("test"); | ||
| el.disabled = false; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("Pending Button"); | ||
| el.pending = false; | ||
| await elementUpdated(el); | ||
| expect(el.getAttribute("aria-label")).to.equal("test"); | ||
| }); | ||
| it("updates pending label accessibly", async () => { | ||
| const el = await fixture( | ||
| html` | ||
| <sp-button href="test_url" target="_blank">Button</sp-button> | ||
| ` | ||
| ); | ||
| await elementUpdated(el); | ||
| el.pending = true; | ||
| await elementUpdated(el); | ||
| await nextFrame(); | ||
| let snapshot = await a11ySnapshot({}); | ||
| expect( | ||
| findAccessibilityNode( | ||
| snapshot, | ||
| (node) => node.name === "Pending" | ||
| ), | ||
| "`Pending` is the label text" | ||
| ).to.not.be.null; | ||
| expect(el.pending).to.be.true; | ||
| el.pending = false; | ||
| await elementUpdated(el); | ||
| await nextFrame(); | ||
| snapshot = await a11ySnapshot({}); | ||
| expect( | ||
| findAccessibilityNode( | ||
| snapshot, | ||
| (node) => node.name === "Button" | ||
| ), | ||
| "`Button` is the label text" | ||
| ).to.not.be.null; | ||
| expect(el.pending).to.be.false; | ||
| }); | ||
| it("manages tabIndex while disabled", async () => { | ||
@@ -218,0 +331,0 @@ const el = await fixture( |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.72%
864633
- Number of package files
- increased by27.27%
224
- Lines of code
- increased by9.62%
8577
- Number of lines in readme file
- increased by4.86%
345