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

Comparing version 0.10.2 to 0.10.3

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.10.2",
+    "version": "0.10.3",
     "publishConfig": {
@@ -61,9 +61,9 @@ "access": "public"
         "@spectrum-web-components/base": "^0.7.0",
-        "@spectrum-web-components/button": "^0.19.2",
-        "@spectrum-web-components/icon": "^0.12.0",
-        "@spectrum-web-components/icons-ui": "^0.9.0",
+        "@spectrum-web-components/button": "^0.19.3",
+        "@spectrum-web-components/icon": "^0.12.1",
+        "@spectrum-web-components/icons-ui": "^0.9.1",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^2.1.4"
+        "@spectrum-css/actionbutton": "^2.1.8"
     },
@@ -76,3 +76,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
+    "gitHead": "15588c72c774b17cfac605b20ac52a27d123bd03"
 }

README.md

@@ -30,2 +30,22 @@ ## Description
 <sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="xs">Extra Small</sp-tab>
+<sp-tab-panel value="xs">
+
+```html demo
+<sp-action-group>
+    <sp-action-button size="xs">Edit</sp-action-button>
+    <sp-action-button size="xs">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        Edit
+    </sp-action-button>
+    <sp-action-button size="xs">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button size="xs" hold-affordance>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+</sp-action-group>
+```
+
+</sp-tab-panel>
 <sp-tab value="s">Small</sp-tab>
@@ -32,0 +52,0 @@ <sp-tab-panel value="s">

src/action-button.css.dev.js

@@ -8,3 +8,3 @@ "use strict";
 --spectrum-focus-ring-thickness
-);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}.spectrum-ActionButton--sizeXS{--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -395,3 +395,11 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
-)}:host{display:inline-flex;flex-direction:row}:host([disabled]){cursor:auto;pointer-events:none}:host([dir]){-webkit-appearance:none}::slotted([slot=icon]){flex-shrink:0}#button{inset:0;position:absolute}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
+)}:host{display:inline-flex;flex-direction:row}:host([disabled]){cursor:auto;pointer-events:none}:host([dir]){-webkit-appearance:none}::slotted([slot=icon]){flex-shrink:0}#button{inset:0;position:absolute}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=xs]){--spectrum-icon-tshirt-size-height:var(
+--spectrum-alias-workflow-icon-size-xs
+);--spectrum-icon-tshirt-size-width:var(
+--spectrum-alias-workflow-icon-size-xs
+);--spectrum-ui-icon-tshirt-size-height:var(
+--spectrum-alias-ui-icon-cornertriangle-size-75
+);--spectrum-ui-icon-tshirt-size-width:var(
+--spectrum-alias-ui-icon-cornertriangle-size-75
+);min-width:var(--spectrum-actionbutton-height,0)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-s
@@ -398,0 +406,0 @@ );--spectrum-icon-tshirt-size-width:var(

src/action-button.css.js

@@ -6,3 +6,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --spectrum-focus-ring-thickness
-);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}.spectrum-ActionButton--sizeXS{--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -393,3 +393,11 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
-)}:host{display:inline-flex;flex-direction:row}:host([disabled]){cursor:auto;pointer-events:none}:host([dir]){-webkit-appearance:none}::slotted([slot=icon]){flex-shrink:0}#button{inset:0;position:absolute}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
+)}:host{display:inline-flex;flex-direction:row}:host([disabled]){cursor:auto;pointer-events:none}:host([dir]){-webkit-appearance:none}::slotted([slot=icon]){flex-shrink:0}#button{inset:0;position:absolute}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=xs]){--spectrum-icon-tshirt-size-height:var(
+--spectrum-alias-workflow-icon-size-xs
+);--spectrum-icon-tshirt-size-width:var(
+--spectrum-alias-workflow-icon-size-xs
+);--spectrum-ui-icon-tshirt-size-height:var(
+--spectrum-alias-ui-icon-cornertriangle-size-75
+);--spectrum-ui-icon-tshirt-size-width:var(
+--spectrum-alias-ui-icon-cornertriangle-size-75
+);min-width:var(--spectrum-actionbutton-height,0)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
 --spectrum-alias-workflow-icon-size-s
@@ -396,0 +404,0 @@ );--spectrum-icon-tshirt-size-width:var(

src/ActionButton.dev.js

@@ -23,2 +23,3 @@ "use strict";
 const holdAffordanceClass = {
+  xs: "spectrum-UIIcon-CornerTriangle75",
   s: "spectrum-UIIcon-CornerTriangle75",
@@ -31,3 +32,5 @@ m: "spectrum-UIIcon-CornerTriangle100",
 let LONGPRESS_TIMEOUT;
-export class ActionButton extends SizedMixin(ButtonBase) {
+export class ActionButton extends SizedMixin(ButtonBase, {
+  validSizes: ["xs", "s", "m", "l", "xl"]
+}) {
   constructor() {
@@ -34,0 +37,0 @@ super();

src/ActionButton.js

@@ -1,6 +0,6 @@
-"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`
+"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(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 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={xs:"spectrum-UIIcon-CornerTriangle75",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,{validSizes:["xs","s","m","l","xl"]}){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 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);
+            `),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"))}}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);
 //# sourceMappingURL=ActionButton.js.map

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

@@ -8,3 +8,3 @@ "use strict";
 --spectrum-focus-ring-thickness
-);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}.spectrum-ActionButton--sizeXS{--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -11,0 +11,0 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(

src/spectrum-action-button.css.js

@@ -6,3 +6,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --spectrum-focus-ring-thickness
-);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}.spectrum-ActionButton--sizeXS{--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -9,0 +9,0 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(

src/spectrum-config.js

@@ -75,2 +75,6 @@ /*
                         {
+                            name: 'xs',
+                            selector: '.spectrum-ActionButton--sizeXS',
+                        },
+                        {
                             name: 's',
@@ -77,0 +81,0 @@ selector: '.spectrum-ActionButton--sizeS',

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

@@ -11,2 +11,8 @@ "use strict";
 const quiet = true;
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  size: "xs",
+  quiet,
+  variant
+};
 export const s = (args) => renderButtons(args);
@@ -13,0 +19,0 @@ s.args = {

stories/action-button-black.stories.js

@@ -10,2 +10,7 @@ "use strict";
 const variant = "black";
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  size: "xs",
+  variant
+};
 export const s = (args) => renderButtons(args);
@@ -12,0 +17,0 @@ s.args = {

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

@@ -9,2 +9,8 @@ "use strict";
 const quiet = true;
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  emphasized,
+  size: "xs",
+  quiet
+};
 export const s = (args) => renderButtons(args);
@@ -11,0 +17,0 @@ s.args = {

stories/action-button-emphasized.stories.js

@@ -8,2 +8,7 @@ "use strict";
 const emphasized = true;
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  emphasized,
+  size: "xs"
+};
 export const s = (args) => renderButtons(args);
@@ -10,0 +15,0 @@ s.args = {

stories/action-button-quiet.stories.js

@@ -8,2 +8,7 @@ "use strict";
 const quiet = true;
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  size: "xs",
+  quiet
+};
 export const s = (args) => renderButtons(args);
@@ -10,0 +15,0 @@ s.args = {

stories/action-button-standard.stories.js

@@ -7,2 +7,6 @@ "use strict";
 };
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  size: "xs"
+};
 export const s = (args) => renderButtons(args);
@@ -9,0 +13,0 @@ s.args = {

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

@@ -11,2 +11,8 @@ "use strict";
 const quiet = true;
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  size: "xs",
+  quiet,
+  variant
+};
 export const s = (args) => renderButtons(args);
@@ -13,0 +19,0 @@ s.args = {

stories/action-button-white.stories.js

@@ -10,2 +10,7 @@ "use strict";
 const variant = "white";
+export const XS = (args) => renderButtons(args);
+XS.args = {
+  size: "xs",
+  variant
+};
 export const s = (args) => renderButtons(args);
@@ -12,0 +17,0 @@ s.args = {

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

393940

increased by1.36%

Lines of code

3204

increased by2.1%

Number of lines in readme file

549

increased by3.78%

Dependency changes

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

• Updated@spectrum-web-components/icon@^0.12.1

• Updated@spectrum-web-components/icons-ui@^0.9.1