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

Comparing version 0.10.0 to 0.10.1

custom-elements.json

@@ -25,2 +25,10 @@ {
         {
+          "kind": "variable",
+          "name": "LONGPRESS_DURATION",
+          "type": {
+            "text": "number"
+          },
+          "default": "300"
+        },
+        {
           "kind": "class",
@@ -157,3 +165,11 @@ "description": "",
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
@@ -311,2 +327,10 @@ {
           "kind": "js",
+          "name": "LONGPRESS_DURATION",
+          "declaration": {
+            "name": "LONGPRESS_DURATION",
+            "module": "src/ActionButton.js"
+          }
+        },
+        {
+          "kind": "js",
           "name": "ActionButton",
@@ -313,0 +337,0 @@ "declaration": {

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.10.0",
+    "version": "0.10.1",
     "publishConfig": {
@@ -61,3 +61,3 @@ "access": "public"
         "@spectrum-web-components/base": "^0.7.0",
-        "@spectrum-web-components/button": "^0.19.0",
+        "@spectrum-web-components/button": "^0.19.1",
         "@spectrum-web-components/icon": "^0.12.0",
@@ -68,3 +68,3 @@ "@spectrum-web-components/icons-ui": "^0.9.0",
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^2.1.1"
+        "@spectrum-css/actionbutton": "^2.1.3"
     },
@@ -77,3 +77,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "05c81318844160db3f8156144106e643507fef97"
+    "gitHead": "1cfea66c39440232b9982509573801b8e3a9f692"
 }

sp-action-button.dev.js

@@ -0,3 +1,4 @@
+"use strict";
 import { ActionButton } from "./src/ActionButton.dev.js";
 customElements.define("sp-action-button", ActionButton);
 //# sourceMappingURL=sp-action-button.dev.js.map

sp-action-button.js

@@ -1,2 +0,2 @@
-import{ActionButton as t}from"./src/ActionButton.js";customElements.define("sp-action-button",t);
+"use strict";import{ActionButton as t}from"./src/ActionButton.js";customElements.define("sp-action-button",t);
 //# sourceMappingURL=sp-action-button.js.map

src/action-button.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -2,0 +3,0 @@ const styles = css`

src/action-button.css.js

@@ -1,2 +0,2 @@
-import{css as t}from"@spectrum-web-components/base";const o=t`
+"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(--spectrum-font-family-base);justify-content:center;line-height:var(--spectrum-line-height-small);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-animation-duration-100) ease-out,border-color var(--spectrum-animation-duration-100) ease-out,color var(--spectrum-animation-duration-100) ease-out,box-shadow var(--spectrum-animation-duration-100) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-block-end:-2px;margin-block-start:-2px;padding:0}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}:host{--spectrum-actionbutton-animation-duration:var(
@@ -3,0 +3,0 @@ --spectrum-animation-duration-100

src/ActionButton.d.ts

 import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
 import { ButtonBase } from '@spectrum-web-components/button';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';
+export declare const LONGPRESS_DURATION = 300;
 export declare type LongpressEvent = {
@@ -5,0 +6,0 @@ source: 'pointer' | 'keyboard';

src/ActionButton.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -27,3 +28,3 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 };
-const LONGPRESS_DURATION = 300;
+export const LONGPRESS_DURATION = 300;
 let LONGPRESS_TIMEOUT;
@@ -45,5 +46,7 @@ export class ActionButton extends SizedMixin(ButtonBase) {
       this.selected = !this.selected;
-      const applyDefault = this.dispatchEvent(new Event("change", {
-        cancelable: true
-      }));
+      const applyDefault = this.dispatchEvent(
+        new Event("change", {
+          cancelable: true
+        })
+      );
       if (!applyDefault) {
@@ -76,13 +79,17 @@ this.selected = !this.selected;
   }
-  onPointerdown() {
+  onPointerdown(event) {
+    if (event.button !== 0)
+      return;
     this.addEventListener("pointerup", this.onPointerup);
     this.addEventListener("pointercancel", this.onPointerup);
     LONGPRESS_TIMEOUT = setTimeout(() => {
-      this.dispatchEvent(new CustomEvent("longpress", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          source: "pointer"
-        }
-      }));
+      this.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "pointer"
+          }
+        })
+      );
     }, LONGPRESS_DURATION);
@@ -117,9 +124,11 @@ }
       event.stopPropagation();
-      this.dispatchEvent(new CustomEvent("longpress", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          source: "keyboard"
-        }
-      }));
+      this.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "keyboard"
+          }
+        })
+      );
       this.active = false;
@@ -145,3 +154,6 @@ }
       if (canBePressed) {
-        this.setAttribute("aria-pressed", this.selected ? "true" : "false");
+        this.setAttribute(
+          "aria-pressed",
+          this.selected ? "true" : "false"
+        );
       } else {
@@ -148,0 +160,0 @@ this.removeAttribute("aria-pressed");

src/ActionButton.js

@@ -1,6 +0,6 @@
-var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(n,e,t,r)=>{for(var i=r>1?void 0:r?c(e,t):e,l=n.length-1,a;l>=0;l--)(a=n[l])&&(i=(r?a(e,t,i):a(i))||i);return r&&i&&u(e,t,i),i};import{html as d,SizedMixin as h}from"@spectrum-web-components/base";import{property as o}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as f}from"@spectrum-web-components/button";import v from"./action-button.css.js";import m from"@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";const b={s:"spectrum-UIIcon-CornerTriangle75",m:"spectrum-UIIcon-CornerTriangle100",l:"spectrum-UIIcon-CornerTriangle200",xl:"spectrum-UIIcon-CornerTriangle300"},g=300;let p;export class ActionButton extends h(f){constructor(){super();this.emphasized=!1;this.holdAffordance=!1;this.quiet=!1;this.role="button";this.selected=!1;this.toggles=!1;this._value="";this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=!this.selected)};this.addEventListener("click",this.onClick),this.addEventListener("pointerdown",this.onPointerdown)}static get styles(){return[v,m]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}onPointerdown(){this.addEventListener("pointerup",this.onPointerup),this.addEventListener("pointercancel",this.onPointerup),p=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},g)}onPointerup(){clearTimeout(p),this.removeEventListener("pointerup",this.onPointerup),this.removeEventListener("pointercancel",this.onPointerup)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.preventDefault(),t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const e=super.buttonContent;return this.holdAffordance&&e.unshift(d`
+"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(n,i,e,r)=>{for(var t=r>1?void 0:r?c(i,e):i,l=n.length-1,a;l>=0;l--)(a=n[l])&&(t=(r?a(i,e,t):a(t))||t);return r&&t&&u(i,e,t),t};import{html as d,SizedMixin as h}from"@spectrum-web-components/base";import{property as s}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as f}from"@spectrum-web-components/button";import v from"./action-button.css.js";import m from"@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";const b={s:"spectrum-UIIcon-CornerTriangle75",m:"spectrum-UIIcon-CornerTriangle100",l:"spectrum-UIIcon-CornerTriangle200",xl:"spectrum-UIIcon-CornerTriangle300"};export const LONGPRESS_DURATION=300;let p;export class ActionButton extends h(f){constructor(){super();this.emphasized=!1;this.holdAffordance=!1;this.quiet=!1;this.role="button";this.selected=!1;this.toggles=!1;this._value="";this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=!this.selected)};this.addEventListener("click",this.onClick),this.addEventListener("pointerdown",this.onPointerdown)}static get styles(){return[v,m]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}onPointerdown(e){e.button===0&&(this.addEventListener("pointerup",this.onPointerup),this.addEventListener("pointercancel",this.onPointerup),p=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},LONGPRESS_DURATION))}onPointerup(){clearTimeout(p),this.removeEventListener("pointerup",this.onPointerup),this.removeEventListener("pointercancel",this.onPointerup)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);const{code:r,altKey:t}=e;(r==="Space"||t&&r==="ArrowDown")&&(e.preventDefault(),r==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);const{code:r,altKey:t}=e;(r==="Space"||t&&r==="ArrowDown")&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const e=super.buttonContent;return this.holdAffordance&&e.unshift(d`
                 <sp-icon-corner-triangle300
                     class="hold-affordance ${b[this.size]}"
                 ></sp-icon-corner-triangle300>
-            `),e}updated(e){super.updated(e);const r=this.role==="button"&&(this.selected||this.toggles);(e.has("selected")||e.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):this.removeAttribute("aria-pressed"))}}s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),s([o({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),s([o({reflect:!0})],ActionButton.prototype,"role",2),s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),s([o({reflect:!0})],ActionButton.prototype,"variant",2),s([o({type:String})],ActionButton.prototype,"value",1);
+            `),e}updated(e){super.updated(e);const t=this.role==="button"&&(this.selected||this.toggles);(e.has("selected")||e.has("role"))&&(t?this.setAttribute("aria-pressed",this.selected?"true":"false"):this.removeAttribute("aria-pressed"))}}o([s({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),o([s({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),o([s({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),o([s({reflect:!0})],ActionButton.prototype,"role",2),o([s({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),o([s({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),o([s({reflect:!0})],ActionButton.prototype,"variant",2),o([s({type:String})],ActionButton.prototype,"value",1);
 //# sourceMappingURL=ActionButton.js.map

src/index.dev.js

@@ -0,2 +1,3 @@
+"use strict";
 export * from "./ActionButton.dev.js";
 //# sourceMappingURL=index.dev.js.map

src/index.js

@@ -1,2 +0,2 @@
-export*from"./ActionButton.js";
+"use strict";export*from"./ActionButton.js";
 //# sourceMappingURL=index.js.map

src/spectrum-action-button.css.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 import { css } from "@spectrum-web-components/base";
@@ -2,0 +3,0 @@ const styles = css`

src/spectrum-action-button.css.js

@@ -1,2 +0,2 @@
-import{css as t}from"@spectrum-web-components/base";const o=t`
+"use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--spectrum-font-family-base);justify-content:center;line-height:var(--spectrum-line-height-small);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-animation-duration-100) ease-out,border-color var(--spectrum-animation-duration-100) ease-out,color var(--spectrum-animation-duration-100) ease-out,box-shadow var(--spectrum-animation-duration-100) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-block-end:-2px;margin-block-start:-2px;padding:0}:host([disabled]){cursor:default}::slotted([slot=icon]){flex-shrink:0;max-block-size:100%}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}:host{--spectrum-actionbutton-animation-duration:var(
@@ -3,0 +3,0 @@ --spectrum-animation-duration-100

stories/action-button-black-quiet.stories.js

@@ -1,2 +0,35 @@
-import{makeOverBackground as p}from"../../button/stories/index.js";import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Static Black Quiet",decorators:[p("black")]};const r="black",o=!0;export const s=t=>e(t);s.args={size:"s",quiet:o,variant:r};export const m=t=>e(t);m.args={size:"m",quiet:o,variant:r};export const l=t=>e(t);l.args={size:"l",quiet:o,variant:r};export const XL=t=>e(t);XL.args={size:"xl",quiet:o,variant:r};
+"use strict";
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Static Black Quiet",
+  decorators: [makeOverBackground("black")]
+};
+const variant = "black";
+const quiet = true;
+export const s = (args) => renderButtons(args);
+s.args = {
+  size: "s",
+  quiet,
+  variant
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  size: "m",
+  quiet,
+  variant
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  size: "l",
+  quiet,
+  variant
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  size: "xl",
+  quiet,
+  variant
+};
 //# sourceMappingURL=action-button-black-quiet.stories.js.map

stories/action-button-black.stories.js

@@ -1,2 +0,30 @@
-import{makeOverBackground as o}from"../../button/stories/index.js";import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Static Black",decorators:[o("black")]};const r="black";export const s=t=>e(t);s.args={size:"s",variant:r};export const m=t=>e(t);m.args={size:"m",variant:r};export const l=t=>e(t);l.args={size:"l",variant:r};export const XL=t=>e(t);XL.args={size:"xl",variant:r};
+"use strict";
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Static Black",
+  decorators: [makeOverBackground("black")]
+};
+const variant = "black";
+export const s = (args) => renderButtons(args);
+s.args = {
+  size: "s",
+  variant
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  size: "m",
+  variant
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  size: "l",
+  variant
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  size: "xl",
+  variant
+};
 //# sourceMappingURL=action-button-black.stories.js.map

stories/action-button-emphasized-quiet.stories.js

@@ -1,2 +0,33 @@
-import{renderButtons as t}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Emphasized Quiet"};const o=!0,r=!0;export const s=e=>t(e);s.args={emphasized:o,size:"s",quiet:r};export const m=e=>t(e);m.args={emphasized:o,size:"m",quiet:r};export const l=e=>t(e);l.args={emphasized:o,size:"l",quiet:r};export const XL=e=>t(e);XL.args={emphasized:o,size:"xl",quiet:r};
+"use strict";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Emphasized Quiet"
+};
+const emphasized = true;
+const quiet = true;
+export const s = (args) => renderButtons(args);
+s.args = {
+  emphasized,
+  size: "s",
+  quiet
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  emphasized,
+  size: "m",
+  quiet
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  emphasized,
+  size: "l",
+  quiet
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  emphasized,
+  size: "xl",
+  quiet
+};
 //# sourceMappingURL=action-button-emphasized-quiet.stories.js.map

stories/action-button-emphasized.stories.js

@@ -1,2 +0,28 @@
-import{renderButtons as t}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Emphasized"};const o=!0;export const s=e=>t(e);s.args={emphasized:o,size:"s"};export const m=e=>t(e);m.args={emphasized:o,size:"m"};export const l=e=>t(e);l.args={emphasized:o,size:"l"};export const XL=e=>t(e);XL.args={emphasized:o,size:"xl"};
+"use strict";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Emphasized"
+};
+const emphasized = true;
+export const s = (args) => renderButtons(args);
+s.args = {
+  emphasized,
+  size: "s"
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  emphasized,
+  size: "m"
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  emphasized,
+  size: "l"
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  emphasized,
+  size: "xl"
+};
 //# sourceMappingURL=action-button-emphasized.stories.js.map

stories/action-button-quiet.stories.js

@@ -1,2 +0,28 @@
-import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Standard Quiet"};const r=!0;export const s=t=>e(t);s.args={size:"s",quiet:r};export const m=t=>e(t);m.args={size:"m",quiet:r};export const l=t=>e(t);l.args={size:"l",quiet:r};export const XL=t=>e(t);XL.args={size:"xl",quiet:r};
+"use strict";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Standard Quiet"
+};
+const quiet = true;
+export const s = (args) => renderButtons(args);
+s.args = {
+  size: "s",
+  quiet
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  size: "m",
+  quiet
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  size: "l",
+  quiet
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  size: "xl",
+  quiet
+};
 //# sourceMappingURL=action-button-quiet.stories.js.map

stories/action-button-standard.stories.js

@@ -1,2 +0,23 @@
-import{renderButtons as t}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Standard"};export const s=e=>t(e);s.args={size:"s"};export const m=e=>t(e);m.args={size:"m"};export const l=e=>t(e);l.args={size:"l"};export const XL=e=>t(e);XL.args={size:"xl"};
+"use strict";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Standard"
+};
+export const s = (args) => renderButtons(args);
+s.args = {
+  size: "s"
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  size: "m"
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  size: "l"
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  size: "xl"
+};
 //# sourceMappingURL=action-button-standard.stories.js.map

stories/action-button-white-quiet.stories.js

@@ -1,2 +0,35 @@
-import{makeOverBackground as i}from"../../button/stories/index.js";import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Static White Quiet",decorators:[i()]};const r="white",o=!0;export const s=t=>e(t);s.args={size:"s",quiet:o,variant:r};export const m=t=>e(t);m.args={size:"m",quiet:o,variant:r};export const l=t=>e(t);l.args={size:"l",quiet:o,variant:r};export const XL=t=>e(t);XL.args={size:"xl",quiet:o,variant:r};
+"use strict";
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Static White Quiet",
+  decorators: [makeOverBackground()]
+};
+const variant = "white";
+const quiet = true;
+export const s = (args) => renderButtons(args);
+s.args = {
+  size: "s",
+  quiet,
+  variant
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  size: "m",
+  quiet,
+  variant
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  size: "l",
+  quiet,
+  variant
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  size: "xl",
+  quiet,
+  variant
+};
 //# sourceMappingURL=action-button-white-quiet.stories.js.map

stories/action-button-white.stories.js

@@ -1,2 +0,30 @@
-import{makeOverBackground as o}from"../../button/stories/index.js";import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Static White",decorators:[o()]};const r="white";export const s=t=>e(t);s.args={size:"s",variant:r};export const m=t=>e(t);m.args={size:"m",variant:r};export const l=t=>e(t);l.args={size:"l",variant:r};export const XL=t=>e(t);XL.args={size:"xl",variant:r};
+"use strict";
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button/Static White",
+  decorators: [makeOverBackground()]
+};
+const variant = "white";
+export const s = (args) => renderButtons(args);
+s.args = {
+  size: "s",
+  variant
+};
+export const m = (args) => renderButtons(args);
+m.args = {
+  size: "m",
+  variant
+};
+export const l = (args) => renderButtons(args);
+l.args = {
+  size: "l",
+  variant
+};
+export const XL = (args) => renderButtons(args);
+XL.args = {
+  size: "xl",
+  variant
+};
 //# sourceMappingURL=action-button-white.stories.js.map

stories/action-button.stories.js

@@ -1,13 +0,34 @@
-import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-components/action-group/sp-action-group.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";import{renderButton as i}from"./index.js";import"@spectrum-web-components/action-button/sp-action-button.js";export default{component:"sp-action-button",title:"Action Button"};function n(e){const o=Object.assign({},e,{disabled:!0}),s=Object.assign({},e,{selected:!0});return t`
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import { renderButton } from "./index.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+export default {
+  component: "sp-action-button",
+  title: "Action Button"
+};
+function renderButtonsSelected(args) {
+  const disabled = Object.assign({}, args, { disabled: true });
+  const selected = Object.assign({}, args, { selected: true });
+  return html`
         <sp-action-group
-            ?emphasized="${!!e.emphasized}"
-            ?quiet="${!!e.quiet}"
+            ?emphasized="${!!args.emphasized}"
+            ?quiet="${!!args.quiet}"
         >
-            ${i(e)} ${i(s)}
-            ${i(o)}
+            ${renderButton(args)} ${renderButton(selected)}
+            ${renderButton(disabled)}
         </sp-action-group>
-    `}export const toggles=e=>n(e);toggles.args={toggles:!0,icon:t`
+    `;
+}
+export const toggles = (args) => renderButtonsSelected(args);
+toggles.args = {
+  toggles: true,
+  icon: html`
         <sp-icon-edit hidden slot="icon"></sp-icon-edit>
-    `};export const iconSizeOverridden=e=>t`
-        ${i(e)}
+    `
+};
+export const iconSizeOverridden = (args) => {
+  return html`
+        ${renderButton(args)}
         <h1>For testing purposes only</h1>
@@ -19,5 +40,11 @@ <p>
         </p>
-    `;iconSizeOverridden.args={label:"",size:"xl",icon:t`
+    `;
+};
+iconSizeOverridden.args = {
+  label: "",
+  size: "xl",
+  icon: html`
         <sp-icon-edit slot="icon" size="s"></sp-icon-edit>
-    `};
+    `
+};
 //# sourceMappingURL=action-button.stories.js.map

stories/index.js

@@ -1,37 +0,83 @@
-import{html as t}from"@spectrum-web-components/base";import{ifDefined as i}from"@spectrum-web-components/base/src/directives.js";import"@spectrum-web-components/action-group/sp-action-group.js";import"@spectrum-web-components/icon/sp-icon.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";import"@spectrum-web-components/action-button/sp-action-button.js";export function renderButton(e){return t`
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+export function renderButton(properties) {
+  return html`
         <sp-action-button
-            ?quiet="${!!e.quiet}"
-            ?emphasized="${!!e.emphasized}"
-            variant="${i(e.variant)}"
-            ?disabled=${!!e.disabled}
-            ?selected=${!!e.selected}
-            ?toggles=${!!e.toggles}
-            size=${e.size||"m"}
-            ?hold-affordance=${!!e.holdAffordance}
-            ?active=${!!e.active}
+            ?quiet="${!!properties.quiet}"
+            ?emphasized="${!!properties.emphasized}"
+            variant="${ifDefined(properties.variant)}"
+            ?disabled=${!!properties.disabled}
+            ?selected=${!!properties.selected}
+            ?toggles=${!!properties.toggles}
+            size=${properties.size || "m"}
+            ?hold-affordance=${!!properties.holdAffordance}
+            ?active=${!!properties.active}
         >
-            ${e.icon}${e.label}
+            ${properties.icon}${properties.label}
         </sp-action-button>
-    `}function n(e){const o="Edit",l=t`
+    `;
+}
+function renderGroup(properties) {
+  const label = "Edit";
+  const holdAffordance = true;
+  const icon = html`
         <sp-icon-edit slot="icon"></sp-icon-edit>
-    `;return t`
+    `;
+  return html`
         <sp-action-group
-            ?quiet="${!!e.quiet}"
-            ?emphasized="${!!e.emphasized}"
+            ?quiet="${!!properties.quiet}"
+            ?emphasized="${!!properties.emphasized}"
         >
-            ${renderButton({...e,label:o})}
-            ${renderButton({...e,label:o,icon:l})}
-            ${renderButton({...e,icon:l})}
-            ${renderButton({...e,icon:l,holdAffordance:!0})}
+            ${renderButton({
+    ...properties,
+    label
+  })}
+            ${renderButton({
+    ...properties,
+    label,
+    icon
+  })}
+            ${renderButton({
+    ...properties,
+    icon
+  })}
+            ${renderButton({
+    ...properties,
+    icon,
+    holdAffordance
+  })}
         </sp-action-group>
-    `}export function renderButtons(e){return t`
+    `;
+}
+export function renderButtons(properties) {
+  const selected = true;
+  const disabled = true;
+  return html`
         <div
             style="display: flex; flex-direction: column; gap: var(--spectrum-global-dimension-size-100);"
         >
-            ${n({...e})}
-            ${n({...e,selected:!0})}
-            ${n({...e,disabled:!0})}
-            ${n({...e,disabled:!0,selected:!0})}
+            ${renderGroup({
+    ...properties
+  })}
+            ${renderGroup({
+    ...properties,
+    selected
+  })}
+            ${renderGroup({
+    ...properties,
+    disabled
+  })}
+            ${renderGroup({
+    ...properties,
+    disabled,
+    selected
+  })}
         </div>
-    `}
+    `;
+}
 //# sourceMappingURL=index.js.map

test/action-button-black-quiet.test-vrt.js

@@ -1,2 +0,5 @@
-import*as o from"../stories/action-button-black-quiet.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("ActionButtonBlackQuietStories",o);
+"use strict";
+import * as stories from "../stories/action-button-black-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonBlackQuietStories", stories);
 //# sourceMappingURL=action-button-black-quiet.test-vrt.js.map

test/action-button-black.test-vrt.js

@@ -1,2 +0,5 @@
-import*as o from"../stories/action-button-black.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("ActionButtonBlackStories",o);
+"use strict";
+import * as stories from "../stories/action-button-black.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonBlackStories", stories);
 //# sourceMappingURL=action-button-black.test-vrt.js.map

test/action-button-emphasized-quiet.test-vrt.js

@@ -1,2 +0,5 @@
-import*as s from"../stories/action-button-emphasized-quiet.stories.js";import{regressVisuals as i}from"../../../test/visual/test.js";i("ActionButtonEmphasizedQuietStories",s);
+"use strict";
+import * as stories from "../stories/action-button-emphasized-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonEmphasizedQuietStories", stories);
 //# sourceMappingURL=action-button-emphasized-quiet.test-vrt.js.map

test/action-button-emphasized.test-vrt.js

@@ -1,2 +0,5 @@
-import*as s from"../stories/action-button-emphasized.stories.js";import{regressVisuals as o}from"../../../test/visual/test.js";o("ActionButtonEmphasizedStories",s);
+"use strict";
+import * as stories from "../stories/action-button-emphasized.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonEmphasizedStories", stories);
 //# sourceMappingURL=action-button-emphasized.test-vrt.js.map

test/action-button-quiet.test-vrt.js

@@ -1,2 +0,5 @@
-import*as o from"../stories/action-button-quiet.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("ActionButtonQuietStories",o);
+"use strict";
+import * as stories from "../stories/action-button-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonQuietStories", stories);
 //# sourceMappingURL=action-button-quiet.test-vrt.js.map

test/action-button-standard.test-vrt.js

@@ -1,2 +0,5 @@
-import*as r from"../stories/action-button-standard.stories.js";import{regressVisuals as o}from"../../../test/visual/test.js";o("ActionButtonStandardStories",r);
+"use strict";
+import * as stories from "../stories/action-button-standard.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonStandardStories", stories);
 //# sourceMappingURL=action-button-standard.test-vrt.js.map

test/action-button-white-quiet.test-vrt.js

@@ -1,2 +0,5 @@
-import*as t from"../stories/action-button-white-quiet.stories.js";import{regressVisuals as i}from"../../../test/visual/test.js";i("ActionButtonWhiteQuietStories",t);
+"use strict";
+import * as stories from "../stories/action-button-white-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonWhiteQuietStories", stories);
 //# sourceMappingURL=action-button-white-quiet.test-vrt.js.map

test/action-button-white.test-vrt.js

@@ -1,2 +0,5 @@
-import*as o from"../stories/action-button-white.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("ActionButtonWhiteStories",o);
+"use strict";
+import * as stories from "../stories/action-button-white.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonWhiteStories", stories);
 //# sourceMappingURL=action-button-white.test-vrt.js.map

test/action-button.test-vrt.js

@@ -1,2 +0,5 @@
-import*as o from"../stories/action-button.stories.js";import{regressVisuals as r}from"../../../test/visual/test.js";r("ActionButtonStories",o);
+"use strict";
+import * as stories from "../stories/action-button.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonStories", stories);
 //# sourceMappingURL=action-button.test-vrt.js.map

test/action-button.test.js

@@ -1,21 +0,172 @@
-import"@spectrum-web-components/action-button/sp-action-button.js";import{elementUpdated as a,expect as e,fixture as s,html as n,waitUntil as u}from"@open-wc/testing";import{sendKeys as i}from"@web/test-runner-commands";import{spy as r}from"sinon";import{testForLitDevWarnings as b}from"../../../test/testing-helpers.js";import{m as c}from"../stories/action-button-black.stories.js";describe("ActionButton",()=>{b(async()=>await s(c(c.args))),it("loads default",async()=>{const t=await s(n`
+"use strict";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import {
+  LONGPRESS_DURATION
+} from "@spectrum-web-components/action-button";
+import {
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { m as BlackActionButton } from "../stories/action-button-black.stories.js";
+describe("ActionButton", () => {
+  testForLitDevWarnings(
+    async () => await fixture(
+      BlackActionButton(BlackActionButton.args)
+    )
+  );
+  it("loads default", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-button>Button</sp-action-button>
-            `);await a(t),e(t).to.not.be.undefined,e(t.textContent).to.include("Button"),await e(t).to.be.accessible()}),it("loads [hold-affordance]",async()=>{const t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Button");
+    await expect(el).to.be.accessible();
+  });
+  it("loads [hold-affordance]", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-button hold-affordance>Button</sp-action-button>
-            `);await a(t),e(t).to.not.be.undefined,e(t.textContent).to.include("Button"),await e(t).to.be.accessible()}),it("maintains a `size` attribute",async()=>{const t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Button");
+    await expect(el).to.be.accessible();
+  });
+  it("maintains a `size` attribute", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-button>Button</sp-action-button>
-            `);await a(t),e(t.size).to.equal("m"),e(t.getAttribute("size")).to.equal("m"),t.removeAttribute("size"),await a(t),e(t.size).to.equal("m"),e(t.getAttribute("size")).to.equal("m")}),it("dispatches `longpress` events when [hold-affordance]",async()=>{const t=r(),o=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.getAttribute("size")).to.equal("m");
+    el.removeAttribute("size");
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.getAttribute("size")).to.equal("m");
+  });
+  it("dispatches `longpress` events when [hold-affordance]", async () => {
+    const longpressSpy = spy();
+    const el = await fixture(
+      html`
                 <sp-action-button
                     hold-affordance
-                    @longpress=${()=>t()}
+                    @longpress=${() => longpressSpy()}
                 >
                     Button
                 </sp-action-button>
-            `);await a(o),o.focus(),await i({press:"Space"}),e(t.callCount).to.equal(1),await i({press:"Alt+ArrowDown"}),e(t.callCount).to.equal(2),o.dispatchEvent(new Event("pointerdown")),o.dispatchEvent(new Event("pointerup")),o.dispatchEvent(new Event("pointerdown")),await u(()=>t.callCount===3)}),it(":not([toggles])",async()=>{const t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    el.focus();
+    await sendKeys({
+      press: "Space"
+    });
+    expect(longpressSpy.callCount).to.equal(1);
+    await sendKeys({
+      press: "Alt+ArrowDown"
+    });
+    expect(longpressSpy.callCount).to.equal(2);
+    el.dispatchEvent(new PointerEvent("pointerdown", { button: 0 }));
+    el.dispatchEvent(new PointerEvent("pointerup"));
+    el.dispatchEvent(new PointerEvent("pointerdown", { button: 0 }));
+    await waitUntil(() => longpressSpy.callCount === 3);
+  });
+  it('does not dispatch `longpress` events when "right click"ed', async () => {
+    const longpressSpy = spy();
+    const el = await fixture(
+      html`
+                <sp-action-button
+                    hold-affordance
+                    @longpress=${() => longpressSpy()}
+                >
+                    Button
+                </sp-action-button>
+            `
+    );
+    await elementUpdated(el);
+    expect(longpressSpy.callCount).to.equal(0);
+    el.focus();
+    el.dispatchEvent(new PointerEvent("pointerdown", { button: 1 }));
+    await aTimeout(2 * LONGPRESS_DURATION);
+    expect(longpressSpy.callCount).to.equal(0);
+  });
+  it(":not([toggles])", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-button>Button</sp-action-button>
-            `);await a(t);const o=t.focusElement;e(t.toggles).to.be.false,e(t.selected).to.be.false,e(o.hasAttribute("aria-pressed")).to.be.false,t.click(),await a(t),e(t.toggles).to.be.false,e(t.selected).to.be.false,e(o.hasAttribute("aria-pressed")).to.be.false}),it("responds to [selected]",async()=>{const t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    const button = el.focusElement;
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+    el.click();
+    await elementUpdated(el);
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+  });
+  it("responds to [selected]", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-button>Button</sp-action-button>
-            `);await a(t);const o=t.focusElement;e(t.toggles).to.be.false,e(t.selected).to.be.false,e(o.hasAttribute("aria-pressed")).to.be.false,t.selected=!0,await a(t),e(t.toggles).to.be.false,e(t.selected).to.be.true,e(o.getAttribute("aria-pressed")).to.equal("true"),t.selected=!1,await a(t),e(t.toggles).to.be.false,e(t.selected).to.be.false,e(o.hasAttribute("aria-pressed")).to.be.false}),it("toggles",async()=>{const t=await s(n`
+            `
+    );
+    await elementUpdated(el);
+    const button = el.focusElement;
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+    el.selected = true;
+    await elementUpdated(el);
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+    el.selected = false;
+    await elementUpdated(el);
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+  });
+  it("toggles", async () => {
+    const el = await fixture(
+      html`
                 <sp-action-button toggles>Button</sp-action-button>
-            `);await a(t);const o=t.focusElement;e(t.toggles).to.be.true,e(t.selected).to.be.false,e(o.getAttribute("aria-pressed")).to.equal("false"),t.focus(),await i({press:"Space"}),await a(t),e(t.toggles).to.be.true,e(t.selected).to.be.true,e(o.getAttribute("aria-pressed")).to.equal("true"),t.addEventListener("change",l=>l.preventDefault()),t.click(),await a(t),e(t.toggles).to.be.true,e(t.selected).to.be.true,e(o.getAttribute("aria-pressed")).to.equal("true")})});
+            `
+    );
+    await elementUpdated(el);
+    const button = el.focusElement;
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.false;
+    expect(button.getAttribute("aria-pressed")).to.equal("false");
+    el.focus();
+    await sendKeys({
+      press: "Space"
+    });
+    await elementUpdated(el);
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+    el.addEventListener("change", (event) => event.preventDefault());
+    el.click();
+    await elementUpdated(el);
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+  });
+});
 //# sourceMappingURL=action-button.test.js.map

test/benchmark/basic-test.js

@@ -1,4 +0,8 @@
-import"@spectrum-web-components/action-button/sp-action-button.js";import{html as t}from"lit";import{measureFixtureCreation as o}from"../../../../test/benchmark/helpers.js";o(t`
+"use strict";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
     <sp-action-button open></sp-action-button>
 `);
 //# sourceMappingURL=basic-test.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 1 instance 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 1 instance in 1 package

Improved metrics

Total package byte prevSize

388658

increased by2.52%

Lines of code

3138

increased by19.22%

Dependency changes

• Updated@spectrum-web-components/button@^0.19.1