Skip to content

Commit 972ce19

Browse files
nikkimknikkimk
authored
Merge 00a4ddb into 30adee2 
2 parents 30adee2 + 00a4ddb commit 972ce19

File tree

40 files changed

+2281
-1042
lines changed

40 files changed

+2281
-1042
lines changed

‎packages/action-bar/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Description
1+
## Overview
22

33
A `<sp-action-bar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `<sp-action-bar>` can be deployed in two variants beyond the default: `[varient="fixed"]` to position the element in relation to the page, and `[variant=sticky]` to position the content in relation to content that may scroll.
44

‎packages/action-button/README.md‎

Lines changed: 125 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Description
1+
## Overview
22

33
An `<sp-action-button>` represents an action a user can take.
44

@@ -24,9 +24,11 @@ When looking to leverage the `ActionButton` base class as a type and/or for exte
2424
import { ActionButton } from '@spectrum-web-components/action-button';
2525
```
2626

27-
## Sizes
27+
### Options
2828

29-
<sp-tabs selected="m" auto label="Size Attribute Options">
29+
#### Sizes
30+
31+
<sp-tabs selected="m" auto label="Size attribute options">
3032
<sp-tab value="xs">Extra Small</sp-tab>
3133
<sp-tab-panel value="xs">
3234

@@ -129,11 +131,13 @@ import { ActionButton } from '@spectrum-web-components/action-button';
129131
</sp-tab-panel>
130132
</sp-tabs>
131133

132-
## Variants
134+
#### Variants
133135

134136
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.
135137

136-
### Standard
138+
<sp-tabs selected="default" auto label="Variant options">
139+
<sp-tab value="default">Default</sp-tab>
140+
<sp-tab-panel value="default">
137141

138142
```html demo
139143
<div
@@ -211,7 +215,9 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
211215
</div>
212216
```
213217

214-
### Quiet
218+
</sp-tab-panel>
219+
<sp-tab value="quiet">Quiet</sp-tab>
220+
<sp-tab-panel value="quiet">
215221

216222
```html demo
217223
<div
@@ -289,7 +295,9 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
289295
</div>
290296
```
291297

292-
### Emphasized
298+
</sp-tab-panel>
299+
<sp-tab value="emphasized">Emphasized</sp-tab>
300+
<sp-tab-panel value="emphasized">
293301

294302
```html demo
295303
<div
@@ -369,7 +377,9 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
369377
</div>
370378
```
371379

372-
### Emphasized + Quiet
380+
</sp-tab-panel>
381+
<sp-tab value="emq">Emphasized + quiet</sp-tab>
382+
<sp-tab-panel value="emq">
373383

374384
```html demo
375385
<div
@@ -455,7 +465,12 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
455465
</div>
456466
```
457467

458-
## Action button with hold affordance
468+
</sp-tab-panel>
469+
</sp-tabs>
470+
471+
### Behaviors
472+
473+
#### Action button with hold affordance
459474

460475
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.
461476

@@ -499,49 +514,70 @@ The use of the `hold-affordance` attribute signifies that the `<sp-action-button
499514
</div>
500515
```
501516

502-
## Toggles
517+
#### Toggles
503518

504519
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.
505520

521+
<sp-tabs selected="default" auto label="Toggled action buttons">
522+
<sp-tab value="default">Default</sp-tab>
523+
<sp-tab-panel value="default">
524+
506525
```html demo
507-
<div
508-
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 2em;"
526+
<sp-action-button toggles id="toggles-default">Toggle button</sp-action-button>
527+
<sp-action-button toggles selected id="toggles-default">
528+
Toggle button
529+
</sp-action-button>
530+
```
531+
532+
</sp-tab-panel>
533+
<sp-tab value="quiet">Quiet</sp-tab>
534+
<sp-tab-panel value="quiet">
535+
536+
```html demo
537+
<sp-action-button toggles quiet id="toggles-quiet">
538+
Toggle button
539+
</sp-action-button>
540+
<sp-action-button toggles quiet selected id="toggles-quiet">
541+
Toggle button
542+
</sp-action-button>
543+
```
544+
545+
</sp-tab-panel>
546+
<sp-tab value="emphasized">Emphasized</sp-tab>
547+
<sp-tab-panel value="emphasized">
548+
549+
```html demo
550+
<sp-action-button toggles emphasized id="toggles-emphasized">
551+
Toggle button
552+
</sp-action-button>
553+
<sp-action-button toggles emphasized selected id="toggles-emphasized">
554+
Toggle button
555+
</sp-action-button>
556+
```
557+
558+
</sp-tab-panel>
559+
<sp-tab value="emphasized-quiet">Emphasized + Quiet</sp-tab>
560+
<sp-tab-panel value="emphasized-quiet">
561+
562+
```html demo
563+
<sp-action-button toggles emphasized quiet id="toggles-emphasized-quiet">
564+
Toggle button
565+
</sp-action-button>
566+
<sp-action-button
567+
toggles
568+
emphasized
569+
quiet
570+
selected
571+
id="toggles-emphasized-quiet"
509572
>
510-
<div>
511-
<sp-field-label for="toggles-default">Standard</sp-field-label>
512-
<sp-action-button toggles id="toggles-default">
513-
Toggle button
514-
</sp-action-button>
515-
</div>
516-
<div>
517-
<sp-field-label for="toggles-quiet">Quiet</sp-field-label>
518-
<sp-action-button toggles quiet id="toggles-quiet">
519-
Toggle button
520-
</sp-action-button>
521-
</div>
522-
<div>
523-
<sp-field-label for="toggles-emphasized">Emphasized</sp-field-label>
524-
<sp-action-button toggles emphasized id="toggles-emphasized">
525-
Toggle button
526-
</sp-action-button>
527-
</div>
528-
<div>
529-
<sp-field-label for="toggles-emphasized-quiet">
530-
Emphasized + Quiet
531-
</sp-field-label>
532-
<sp-action-button
533-
toggles
534-
emphasized
535-
quiet
536-
id="toggles-emphasized-quiet"
537-
>
538-
Toggle button
539-
</sp-action-button>
540-
</div>
541-
</div>
573+
Toggle button
574+
</sp-action-button>
542575
```
543576

544-
## Handling events
577+
</sp-tab-panel>
578+
</sp-tabs>
579+
580+
#### Handling events
545581

546582
Events handlers for clicks and other user actions can be registered on a
547583
`<sp-action-button>` as on a standard HTML `<button>` element.
@@ -562,3 +598,47 @@ In addition to handling events like a native `<button>` HTML element, one can al
562598
Click me
563599
</sp-action-button>
564600
```
601+
602+
### Accessibility
603+
604+
#### Include a label
605+
606+
A button is required to have either a visible text label or a `label` attribute on either the `<sp-button>` itself,
607+
or on an `<sp-icon*>` element child.
608+
609+
#### Don't override color
610+
611+
Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.
612+
613+
#### Use static black or static white to contrast with backgrounds and images
614+
615+
To ensure maximum contrast with the background, use static black for light backgrounds and images, and static white for dark backgrounds and images. Avoid placing static components on top of busy images with a lot of variance in contrast.
616+
617+
<sp-tabs selected="black" auto label="Static variants for contrast">
618+
<sp-tab value="black">Static black on light background</sp-tab>
619+
<sp-tab-panel value="black">
620+
621+
```html demo
622+
<div style="background-color: #ccffee; padding: 20px">
623+
<sp-action-button static="black">Click me</sp-action-button>
624+
<sp-action-button static="black" selected>Click me</sp-action-button>
625+
</div>
626+
```
627+
628+
</sp-tab-panel>
629+
<sp-tab value="white">Static white on dark background</sp-tab>
630+
<sp-tab-panel value="white">
631+
632+
```html demo
633+
<div style="background-color: #220033; padding: 20px">
634+
<sp-action-button static="white">Click me</sp-action-button>
635+
<sp-action-button static="white" selected>Click me</sp-action-button>
636+
</div>
637+
```
638+
639+
</sp-tab-panel>
640+
</sp-tabs>
641+
642+
#### Clearly state the action
643+
644+
Make sure that an action button’s label clearly states the outcome of the action. Use the same word or phrase as found elsewhere in the experience.

‎packages/action-menu/README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
## Description
1+
## Overview
22

3-
An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `<sp-action-menu>` element. By default `<sp-action-menu>` does not manage a selection. If you'd like for a selection to be held by the `<sp-menu>` that is presented in its overlay, use `selects="single"` to activate this functionality.
3+
An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `<sp-action-menu>` element. By default, `<sp-action-menu>` does not manage a selection. If you'd like for a selection to be managed, use `selects="single"` on the `<sp-menu>` to activate this functionality.
44

55
### Usage
66

@@ -30,9 +30,11 @@ When looking to leverage the `ActionMenu` base class as a type and/or for extens
3030
import { ActionMenu } from '@spectrum-web-components/action-menu';
3131
```
3232

33-
## Sizes
33+
### Options
3434

35-
<sp-tabs selected="m" auto label="Size Attribute Options">
35+
#### Sizes
36+
37+
<sp-tabs selected="m" auto label="Size attribute options">
3638
<sp-tab value="s">Small</sp-tab>
3739
<sp-tab-panel value="s">
3840

‎packages/button-group/README.md‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Description
1+
## Overview
22

33
`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.
44

@@ -24,7 +24,11 @@ When looking to leverage the `ButtonGroup` base class as a type and/or for exten
2424
import { ButtonGroup } from '@spectrum-web-components/button-group';
2525
```
2626

27-
## Horizontal
27+
### Options
28+
29+
A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use vertical option when horizontal space is limited.
30+
31+
#### Horizontal
2832

2933
```html
3034
<sp-button-group>
@@ -34,7 +38,7 @@ import { ButtonGroup } from '@spectrum-web-components/button-group';
3438
</sp-button-group>
3539
```
3640

37-
## Vertical
41+
#### Vertical
3842

3943
```html
4044
<sp-button-group vertical>
@@ -43,3 +47,7 @@ import { ButtonGroup } from '@spectrum-web-components/button-group';
4347
<sp-button>Short 3</sp-button>
4448
</sp-button-group>
4549
```
50+
51+
### Accessibility
52+
53+
Review the guidelines for the [button](../button#accessibility-guidelines) children.

0 commit comments

Comments
 (0)