@spectrum-web-components/action-button
Advanced tools
Comparing version 0.5.3-alpha.1 to 0.5.3
{ | ||
"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" | ||
} |
451
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> | ||
``` |
@@ -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; |
@@ -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; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
295385
529
0
29
1280