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

Comparing version 0.5.3-alpha.1 to 0.5.3

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.5.3-alpha.1+23ae605e",
+    "version": "0.5.3",
     "publishConfig": {
@@ -47,6 +47,6 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.5-alpha.1+23ae605e",
-        "@spectrum-web-components/button": "^0.14.3-alpha.1+23ae605e",
-        "@spectrum-web-components/icon": "^0.9.8-alpha.1+23ae605e",
-        "@spectrum-web-components/icons-ui": "^0.6.8-alpha.1+23ae605e",
+        "@spectrum-web-components/base": "^0.4.4",
+        "@spectrum-web-components/button": "^0.14.3",
+        "@spectrum-web-components/icon": "^0.9.7",
+        "@spectrum-web-components/icons-ui": "^0.6.7",
         "tslib": "^2.0.0"
@@ -62,3 +62,3 @@ },
     ],
-    "gitHead": "23ae605e3718dd3f86bc3aa5b10229a4eb7f83c9"
+    "gitHead": "ed13341debd82f86abc062f647d42458c77633cc"
 }

README.md

@@ -35,5 +35,13 @@ ## Description
 <sp-action-group>
-    <sp-action-button size="s">Do action</sp-action-button>
-    <sp-action-button size="s" selected>Do action</sp-action-button>
-    <sp-action-button size="s" disabled>Do action</sp-action-button>
+    <sp-action-button size="s">Edit</sp-action-button>
+    <sp-action-button size="s">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        Edit
+    </sp-action-button>
+    <sp-action-button size="s">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button size="s" hold-affordance>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
 </sp-action-group>
@@ -48,5 +56,13 @@ ```
 <sp-action-group>
-    <sp-action-button size="m">Do action</sp-action-button>
-    <sp-action-button size="m" selected>Do action</sp-action-button>
-    <sp-action-button size="m" disabled>Do action</sp-action-button>
+    <sp-action-button size="m">Edit</sp-action-button>
+    <sp-action-button size="m">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        Edit
+    </sp-action-button>
+    <sp-action-button size="m">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button size="m" hold-affordance>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
 </sp-action-group>
@@ -61,5 +77,13 @@ ```
 <sp-action-group>
-    <sp-action-button size="l">Do action</sp-action-button>
-    <sp-action-button size="l" selected>Do action</sp-action-button>
-    <sp-action-button size="l" disabled>Do action</sp-action-button>
+    <sp-action-button size="l">Edit</sp-action-button>
+    <sp-action-button size="l">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        Edit
+    </sp-action-button>
+    <sp-action-button size="l">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button size="l" hold-affordance>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
 </sp-action-group>
@@ -74,5 +98,13 @@ ```
 <sp-action-group>
-    <sp-action-button size="xl">Do action</sp-action-button>
-    <sp-action-button size="xl" selected>Do action</sp-action-button>
-    <sp-action-button size="xl" disabled>Do action</sp-action-button>
+    <sp-action-button size="xl">Edit</sp-action-button>
+    <sp-action-button size="xl">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        Edit
+    </sp-action-button>
+    <sp-action-button size="xl">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button size="xl" hold-affordance>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
 </sp-action-group>
@@ -86,34 +118,335 @@ ```
 
-### Action button with icon
+The `<sp-action-button>` can be customized with either or both of the `emphasized` and `quiet` attributes. These will pair with either or both of the state attributes (`selected` and `disabled`) to decide the final visual delivery of the `<sp-action-button>`. Content addressed to the `icon` slot can also be provided and will be positioned just before the rest of the the supplied button content.
 
+### Standard
+
 ```html demo
-<sp-action-button>
-    <sp-icon-edit slot="icon"></sp-icon-edit>
-    This is an action button
-</sp-action-button>
+<div
+    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
+>
+    <div>
+        <sp-field-label for="standard">Default</sp-field-label>
+        <sp-action-group id="standard">
+            <sp-action-button>Edit</sp-action-button>
+            <sp-action-button>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-selected">Selected</sp-field-label>
+        <sp-action-group id="standard-selected">
+            <sp-action-button selected>Edit</sp-action-button>
+            <sp-action-button selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled">Disabled</sp-field-label>
+        <sp-action-group id="standard-disabled">
+            <sp-action-button disabled>Edit</sp-action-button>
+            <sp-action-button disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button disabled hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled-selected">
+            Disabled + Selected
+        </sp-field-label>
+        <sp-action-group id="standard-disabled-selected">
+            <sp-action-button disabled selected>Edit</sp-action-button>
+            <sp-action-button disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button disabled selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+</div>
 ```
 
-### Icon only action button
+### Quiet
 
 ```html demo
-<sp-action-button label="Edit">
-    <sp-icon-edit slot="icon"></sp-icon-edit>
-</sp-action-button>
+<div
+    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
+>
+    <div>
+        <sp-field-label for="standard">Default</sp-field-label>
+        <sp-action-group quiet id="standard">
+            <sp-action-button quiet>Edit</sp-action-button>
+            <sp-action-button quiet>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button quiet>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button quiet hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-selected">Selected</sp-field-label>
+        <sp-action-group quiet id="standard-selected">
+            <sp-action-button quiet selected>Edit</sp-action-button>
+            <sp-action-button quiet selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button quiet selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button quiet selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled">Disabled</sp-field-label>
+        <sp-action-group quiet id="standard-disabled">
+            <sp-action-button quiet disabled>Edit</sp-action-button>
+            <sp-action-button quiet disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button quiet disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button quiet disabled hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled-selected">
+            Disabled + Selected
+        </sp-field-label>
+        <sp-action-group quiet id="standard-disabled-selected">
+            <sp-action-button quiet disabled selected>Edit</sp-action-button>
+            <sp-action-button quiet disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button quiet disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button quiet disabled selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+</div>
 ```
 
-### Emphasized action button
+### Emphasized
 
 ```html demo
-<sp-action-button label="Edit" emphasized selected>
-    <sp-icon-edit slot="icon"></sp-icon-edit>
-</sp-action-button>
+<div
+    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
+>
+    <div>
+        <sp-field-label for="standard">Default</sp-field-label>
+        <sp-action-group emphasized id="standard">
+            <sp-action-button emphasized>Edit</sp-action-button>
+            <sp-action-button emphasized>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-selected">Selected</sp-field-label>
+        <sp-action-group emphasized id="standard-selected">
+            <sp-action-button emphasized selected>Edit</sp-action-button>
+            <sp-action-button emphasized selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled">Disabled</sp-field-label>
+        <sp-action-group emphasized id="standard-disabled">
+            <sp-action-button emphasized disabled>Edit</sp-action-button>
+            <sp-action-button emphasized disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized disabled hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled-selected">
+            Disabled + Selected
+        </sp-field-label>
+        <sp-action-group emphasized id="standard-disabled-selected">
+            <sp-action-button emphasized disabled selected>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized disabled selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+</div>
 ```
 
-### Action button with hold affordance
+### Emphasized + Quiet
 
+```html demo
+<div
+    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
+>
+    <div>
+        <sp-field-label for="standard">Default</sp-field-label>
+        <sp-action-group emphasized quiet id="standard">
+            <sp-action-button emphasized quiet>Edit</sp-action-button>
+            <sp-action-button emphasized quiet>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized quiet>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized quiet hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-selected">Selected</sp-field-label>
+        <sp-action-group emphasized quiet id="standard-selected">
+            <sp-action-button emphasized quiet selected>Edit</sp-action-button>
+            <sp-action-button emphasized quiet selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized quiet selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized quiet selected hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled">Disabled</sp-field-label>
+        <sp-action-group emphasized quiet id="standard-disabled">
+            <sp-action-button emphasized quiet disabled>Edit</sp-action-button>
+            <sp-action-button emphasized quiet disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized quiet disabled>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button emphasized quiet disabled hold-affordance>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+
+    <div>
+        <sp-field-label for="standard-disabled-selected">
+            Disabled + Selected
+        </sp-field-label>
+        <sp-action-group emphasized quiet id="standard-disabled-selected">
+            <sp-action-button emphasized quiet disabled selected>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized quiet disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+                Edit
+            </sp-action-button>
+            <sp-action-button emphasized quiet disabled selected>
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+            <sp-action-button
+                emphasized
+                quiet
+                disabled
+                selected
+                hold-affordance
+            >
+                <sp-icon-edit slot="icon"></sp-icon-edit>
+            </sp-action-button>
+        </sp-action-group>
+    </div>
+</div>
+```
+
+## Action button with hold affordance
+
 The use of the `hold-affordance` attribute signifies that the `<sp-action-button>` in question will be delivered with a visual affordance outlining that special interaction with the button will dispatch a `longpress` event. Via a pointer input, this even will be dispatched when 300ms has passed after a `pointerdown` event without the presence of a `pointerup` or `pointercancel` event. Via the keyboard, an event with a code of `Space` or or `ArrowDown` while `altKey === true` will dispatch the event.
 
-```html-live demo
-<sp-action-group>
-    <overlay-trigger placement="bottom">
+```html demo
+<div
+    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2em;"
+>
+    <overlay-trigger placement="bottom-start">
         <sp-action-button label="Edit" hold-affordance slot="trigger">
@@ -123,3 +456,7 @@ <sp-icon-edit slot="icon"></sp-icon-edit>
         <sp-popover slot="longpress-content" dialog tip>
-            <p class="spectrum-Body spectrum-Body--sizeM" style="color: var(--spectrum-body-m-text-color,var(--spectrum-alias-text-color));">This content is triggered by the "longpress" interaction.</p>
+            <p
+                style="color: var(--spectrum-body-m-text-color,var(--spectrum-alias-text-color));"
+            >
+                This content is triggered by the "longpress" interaction.
+            </p>
         </sp-popover>
@@ -133,7 +470,11 @@ </overlay-trigger>
         <sp-popover slot="longpress-content" dialog tip>
-            <p class="spectrum-Body spectrum-Body--sizeM" style="color: var(--spectrum-body-m-text-color,var(--spectrum-alias-text-color));">This content is triggered by the "longpress" interaction.</p>
+            <p
+                style="color: var(--spectrum-body-m-text-color,var(--spectrum-alias-text-color));"
+            >
+                This content is triggered by the "longpress" interaction.
+            </p>
         </sp-popover>
     </overlay-trigger>
 
-    <overlay-trigger placement="top">
+    <overlay-trigger placement="top-end">
         <sp-action-button hold-affordance selected slot="trigger">
@@ -144,6 +485,10 @@ <sp-icon-edit slot="icon"></sp-icon-edit>
         <sp-popover slot="longpress-content" dialog tip>
-            <p class="spectrum-Body spectrum-Body--sizeM" style="color: var(--spectrum-body-m-text-color,var(--spectrum-alias-text-color));">This content is triggered by the "longpress" interaction.</p>
+            <p
+                style="color: var(--spectrum-body-m-text-color,var(--spectrum-alias-text-color));"
+            >
+                This content is triggered by the "longpress" interaction.
+            </p>
         </sp-popover>
     </overlay-trigger>
-</sp-action-group>
+</div>
 ```
@@ -153,6 +498,40 @@
 
-With the application of the `toggles` attribute, the button will self manage its `selected` property on `click`:
+With the application of the `toggles` attribute, the button will self manage its `selected` property on `click`. When this value is updated, a cancellable `change` event will be dispatched to inform the parent application.
 
 ```html demo
-<sp-action-button toggles>Toggle button</sp-action-button>
+<div
+    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 2em;"
+>
+    <div>
+        <sp-field-label for="toggles-default">Standard</sp-field-label>
+        <sp-action-button toggles id="toggles-default">
+            Toggle button
+        </sp-action-button>
+    </div>
+    <div>
+        <sp-field-label for="toggles-quiet">Quiet</sp-field-label>
+        <sp-action-button toggles quiet id="toggles-quiet">
+            Toggle button
+        </sp-action-button>
+    </div>
+    <div>
+        <sp-field-label for="toggles-emphasized">Emphasized</sp-field-label>
+        <sp-action-button toggles emphasized id="toggles-emphasized">
+            Toggle button
+        </sp-action-button>
+    </div>
+    <div>
+        <sp-field-label for="toggles-emphasized-quiet">
+            Emphasized + Quiet
+        </sp-field-label>
+        <sp-action-button
+            toggles
+            emphasized
+            quiet
+            id="toggles-emphasized-quiet"
+        >
+            Toggle button
+        </sp-action-button>
+    </div>
+</div>
 ```

src/action-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-action-button.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

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

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

295385

increased by3.64%

Number of lines in readme file

529

increased by252.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

29

decreased by-12.12%

Lines of code

1280

decreased by-2.96%

Dependency changes

• Updated@spectrum-web-components/base@^0.4.4

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

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

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