@spectrum-web-components/action-button 1.6.0-beta.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +116 -44
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -8,22 +8,93 @@ An `<sp-action-button>` represents an action a user can take.
8
8
  [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button)
9
9
  [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/mOF1zUEjLJzODGXFYaIU/src/index.ts)
10
10
 
11
- ```
11
+ ```bash
12
12
  yarn add @spectrum-web-components/action-button
13
13
  ```
14
14
 
15
15
  Import the side effectful registration of `<sp-action-button>` via:
16
16
 
17
- ```
17
+ ```ts
18
18
  import '@spectrum-web-components/action-button/sp-action-button.js';
19
19
  ```
20
20
 
21
21
  When looking to leverage the `ActionButton` base class as a type and/or for extension purposes, do so via:
22
22
 
23
- ```
23
+ ```ts
24
24
  import { ActionButton } from '@spectrum-web-components/action-button';
25
25
  ```
26
26
 
27
+ ### Anatomy
28
+
29
+ ```html
30
+ <sp-action-button>Try me</sp-action-button>
31
+ ```
32
+
33
+ #### Content
34
+
35
+ `<sp-action-button>` elements can be provided a visible label,
36
+ a label and an icon, or just an icon.
37
+
38
+ An icon is provided by placing an icon element in the `icon` slot.
39
+
40
+ If the button is `icon-only`, a non-visible label
41
+ can be provided via the `label` attribute on an `<sp-action-button>`
42
+ or on an `<sp-icon*>` element child to appropriately
43
+ fulfill the accessibility contract of the button.
44
+
45
+ <sp-tabs selected="label" auto label="Labelling a button">
46
+ <sp-tab value="label">Label only</sp-tab>
47
+ <sp-tab-panel value="label">
48
+
49
+ ```html demo
50
+ <sp-action-button variant="primary">Label only</sp-action-button>
51
+ ```
52
+
53
+ </sp-tab-panel>
54
+ <sp-tab value="icon-label">Icon + label</sp-tab>
55
+ <sp-tab-panel value="icon-label">
56
+
57
+ ```html demo
58
+ <sp-action-button variant="primary">
59
+ <sp-icon-help slot="icon"></sp-icon-help>
60
+ Icon + Label
61
+ </sp-action-button>
62
+ ```
63
+
64
+ </sp-tab-panel>
65
+ <sp-tab value="svg-label">SVG Icon + label</sp-tab>
66
+ <sp-tab-panel value="svg-label">
67
+
68
+ ```html demo
69
+ <sp-action-button variant="primary">
70
+ <svg
71
+ slot="icon"
72
+ viewBox="0 0 36 36"
73
+ focusable="false"
74
+ aria-hidden="true"
75
+ role="img"
76
+ >
77
+ <path
78
+ d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
79
+ ></path>
80
+ </svg>
81
+ SVG Icon + Label
82
+ </sp-action-button>
83
+ ```
84
+
85
+ </sp-tab-panel>
86
+ <sp-tab value="icon-only">Icon only</sp-tab>
87
+ <sp-tab-panel value="icon-only">
88
+
89
+ ```html demo
90
+ <sp-action-button variant="primary" label="Icon only">
91
+ <sp-icon-help slot="icon"></sp-icon-help>
92
+ </sp-action-button>
93
+ ```
94
+
95
+ </sp-tab-panel>
96
+ </sp-tabs>
97
+
27
98
  ### Options
28
99
 
29
100
  #### Sizes
@@ -39,10 +110,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
39
110
  <sp-icon-edit slot="icon"></sp-icon-edit>
40
111
  Edit
41
112
  </sp-action-button>
42
- <sp-action-button>
113
+ <sp-action-button label="Edit">
43
114
  <sp-icon-edit slot="icon"></sp-icon-edit>
44
115
  </sp-action-button>
45
- <sp-action-button hold-affordance>
116
+ <sp-action-button label="Edit" hold-affordance>
46
117
  <sp-icon-edit slot="icon"></sp-icon-edit>
47
118
  </sp-action-button>
48
119
  </sp-action-group>
@@ -59,10 +130,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
59
130
  <sp-icon-edit slot="icon"></sp-icon-edit>
60
131
  Edit
61
132
  </sp-action-button>
62
- <sp-action-button>
133
+ <sp-action-button label="Edit">
63
134
  <sp-icon-edit slot="icon"></sp-icon-edit>
64
135
  </sp-action-button>
65
- <sp-action-button hold-affordance>
136
+ <sp-action-button label="Edit"> hold-affordance>
66
137
  <sp-icon-edit slot="icon"></sp-icon-edit>
67
138
  </sp-action-button>
68
139
  </sp-action-group>
@@ -79,10 +150,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
79
150
  <sp-icon-edit slot="icon"></sp-icon-edit>
80
151
  Edit
81
152
  </sp-action-button>
82
- <sp-action-button>
153
+ <sp-action-button label="Edit">
83
154
  <sp-icon-edit slot="icon"></sp-icon-edit>
84
155
  </sp-action-button>
85
- <sp-action-button hold-affordance>
156
+ <sp-action-button label="Edit" hold-affordance>
86
157
  <sp-icon-edit slot="icon"></sp-icon-edit>
87
158
  </sp-action-button>
88
159
  </sp-action-group>
@@ -99,10 +170,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
99
170
  <sp-icon-edit slot="icon"></sp-icon-edit>
100
171
  Edit
101
172
  </sp-action-button>
102
- <sp-action-button>
173
+ <sp-action-button label="Edit">
103
174
  <sp-icon-edit slot="icon"></sp-icon-edit>
104
175
  </sp-action-button>
105
- <sp-action-button hold-affordance>
176
+ <sp-action-button label="Edit" hold-affordance>
106
177
  <sp-icon-edit slot="icon"></sp-icon-edit>
107
178
  </sp-action-button>
108
179
  </sp-action-group>
@@ -119,10 +190,10 @@ import { ActionButton } from '@spectrum-web-components/action-button';
119
190
  <sp-icon-edit slot="icon"></sp-icon-edit>
120
191
  Edit
121
192
  </sp-action-button>
122
- <sp-action-button>
193
+ <sp-action-button label="Edit">
123
194
  <sp-icon-edit slot="icon"></sp-icon-edit>
124
195
  </sp-action-button>
125
- <sp-action-button hold-affordance>
196
+ <sp-action-button label="Edit" hold-affordance>
126
197
  <sp-icon-edit slot="icon"></sp-icon-edit>
127
198
  </sp-action-button>
128
199
  </sp-action-group>
@@ -151,10 +222,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
151
222
  <sp-icon-edit slot="icon"></sp-icon-edit>
152
223
  Edit
153
224
  </sp-action-button>
154
- <sp-action-button>
225
+ <sp-action-button label="Edit">
155
226
  <sp-icon-edit slot="icon"></sp-icon-edit>
156
227
  </sp-action-button>
157
- <sp-action-button hold-affordance>
228
+ <sp-action-button label="Edit" hold-affordance>
158
229
  <sp-icon-edit slot="icon"></sp-icon-edit>
159
230
  </sp-action-button>
160
231
  </sp-action-group>
@@ -168,10 +239,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
168
239
  <sp-icon-edit slot="icon"></sp-icon-edit>
169
240
  Edit
170
241
  </sp-action-button>
171
- <sp-action-button selected>
242
+ <sp-action-button label="Edit" selected>
172
243
  <sp-icon-edit slot="icon"></sp-icon-edit>
173
244
  </sp-action-button>
174
- <sp-action-button selected hold-affordance>
245
+ <sp-action-button label="Edit" selected hold-affordance>
175
246
  <sp-icon-edit slot="icon"></sp-icon-edit>
176
247
  </sp-action-button>
177
248
  </sp-action-group>
@@ -185,10 +256,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
185
256
  <sp-icon-edit slot="icon"></sp-icon-edit>
186
257
  Edit
187
258
  </sp-action-button>
188
- <sp-action-button disabled>
259
+ <sp-action-button label="Edit" disabled>
189
260
  <sp-icon-edit slot="icon"></sp-icon-edit>
190
261
  </sp-action-button>
191
- <sp-action-button disabled hold-affordance>
262
+ <sp-action-button label="Edit" disabled hold-affordance>
192
263
  <sp-icon-edit slot="icon"></sp-icon-edit>
193
264
  </sp-action-button>
194
265
  </sp-action-group>
@@ -204,10 +275,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
204
275
  <sp-icon-edit slot="icon"></sp-icon-edit>
205
276
  Edit
206
277
  </sp-action-button>
207
- <sp-action-button disabled selected>
278
+ <sp-action-button label="Edit" disabled selected>
208
279
  <sp-icon-edit slot="icon"></sp-icon-edit>
209
280
  </sp-action-button>
210
- <sp-action-button disabled selected hold-affordance>
281
+ <sp-action-button label="Edit" disabled selected hold-affordance>
211
282
  <sp-icon-edit slot="icon"></sp-icon-edit>
212
283
  </sp-action-button>
213
284
  </sp-action-group>
@@ -231,10 +302,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
231
302
  <sp-icon-edit slot="icon"></sp-icon-edit>
232
303
  Edit
233
304
  </sp-action-button>
234
- <sp-action-button quiet>
305
+ <sp-action-button label="Edit" quiet>
235
306
  <sp-icon-edit slot="icon"></sp-icon-edit>
236
307
  </sp-action-button>
237
- <sp-action-button quiet hold-affordance>
308
+ <sp-action-button label="Edit" quiet hold-affordance>
238
309
  <sp-icon-edit slot="icon"></sp-icon-edit>
239
310
  </sp-action-button>
240
311
  </sp-action-group>
@@ -248,10 +319,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
248
319
  <sp-icon-edit slot="icon"></sp-icon-edit>
249
320
  Edit
250
321
  </sp-action-button>
251
- <sp-action-button quiet selected>
322
+ <sp-action-button label="Edit" quiet selected>
252
323
  <sp-icon-edit slot="icon"></sp-icon-edit>
253
324
  </sp-action-button>
254
- <sp-action-button quiet selected hold-affordance>
325
+ <sp-action-button label="Edit" quiet selected hold-affordance>
255
326
  <sp-icon-edit slot="icon"></sp-icon-edit>
256
327
  </sp-action-button>
257
328
  </sp-action-group>
@@ -265,10 +336,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
265
336
  <sp-icon-edit slot="icon"></sp-icon-edit>
266
337
  Edit
267
338
  </sp-action-button>
268
- <sp-action-button quiet disabled>
339
+ <sp-action-button label="Edit" quiet disabled>
269
340
  <sp-icon-edit slot="icon"></sp-icon-edit>
270
341
  </sp-action-button>
271
- <sp-action-button quiet disabled hold-affordance>
342
+ <sp-action-button label="Edit" quiet disabled hold-affordance>
272
343
  <sp-icon-edit slot="icon"></sp-icon-edit>
273
344
  </sp-action-button>
274
345
  </sp-action-group>
@@ -284,10 +355,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
284
355
  <sp-icon-edit slot="icon"></sp-icon-edit>
285
356
  Edit
286
357
  </sp-action-button>
287
- <sp-action-button quiet disabled selected>
358
+ <sp-action-button label="Edit" quiet disabled selected>
288
359
  <sp-icon-edit slot="icon"></sp-icon-edit>
289
360
  </sp-action-button>
290
- <sp-action-button quiet disabled selected hold-affordance>
361
+ <sp-action-button label="Edit" quiet disabled selected hold-affordance>
291
362
  <sp-icon-edit slot="icon"></sp-icon-edit>
292
363
  </sp-action-button>
293
364
  </sp-action-group>
@@ -311,10 +382,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
311
382
  <sp-icon-edit slot="icon"></sp-icon-edit>
312
383
  Edit
313
384
  </sp-action-button>
314
- <sp-action-button emphasized>
385
+ <sp-action-button label="Edit" emphasized>
315
386
  <sp-icon-edit slot="icon"></sp-icon-edit>
316
387
  </sp-action-button>
317
- <sp-action-button emphasized hold-affordance>
388
+ <sp-action-button label="Edit" emphasized hold-affordance>
318
389
  <sp-icon-edit slot="icon"></sp-icon-edit>
319
390
  </sp-action-button>
320
391
  </sp-action-group>
@@ -328,10 +399,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
328
399
  <sp-icon-edit slot="icon"></sp-icon-edit>
329
400
  Edit
330
401
  </sp-action-button>
331
- <sp-action-button emphasized selected>
402
+ <sp-action-button label="Edit" emphasized selected>
332
403
  <sp-icon-edit slot="icon"></sp-icon-edit>
333
404
  </sp-action-button>
334
- <sp-action-button emphasized selected hold-affordance>
405
+ <sp-action-button label="Edit" emphasized selected hold-affordance>
335
406
  <sp-icon-edit slot="icon"></sp-icon-edit>
336
407
  </sp-action-button>
337
408
  </sp-action-group>
@@ -345,10 +416,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
345
416
  <sp-icon-edit slot="icon"></sp-icon-edit>
346
417
  Edit
347
418
  </sp-action-button>
348
- <sp-action-button emphasized disabled>
419
+ <sp-action-button label="Edit" emphasized disabled>
349
420
  <sp-icon-edit slot="icon"></sp-icon-edit>
350
421
  </sp-action-button>
351
- <sp-action-button emphasized disabled hold-affordance>
422
+ <sp-action-button label="Edit" emphasized disabled hold-affordance>
352
423
  <sp-icon-edit slot="icon"></sp-icon-edit>
353
424
  </sp-action-button>
354
425
  </sp-action-group>
@@ -366,10 +437,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
366
437
  <sp-icon-edit slot="icon"></sp-icon-edit>
367
438
  Edit
368
439
  </sp-action-button>
369
- <sp-action-button emphasized disabled selected>
440
+ <sp-action-button label="Edit" emphasized disabled selected>
370
441
  <sp-icon-edit slot="icon"></sp-icon-edit>
371
442
  </sp-action-button>
372
- <sp-action-button emphasized disabled selected hold-affordance>
443
+ <sp-action-button label="Edit" emphasized disabled selected hold-affordance>
373
444
  <sp-icon-edit slot="icon"></sp-icon-edit>
374
445
  </sp-action-button>
375
446
  </sp-action-group>
@@ -393,10 +464,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
393
464
  <sp-icon-edit slot="icon"></sp-icon-edit>
394
465
  Edit
395
466
  </sp-action-button>
396
- <sp-action-button emphasized quiet>
467
+ <sp-action-button label="Edit" emphasized quiet>
397
468
  <sp-icon-edit slot="icon"></sp-icon-edit>
398
469
  </sp-action-button>
399
- <sp-action-button emphasized quiet hold-affordance>
470
+ <sp-action-button label="Edit" emphasized quiet hold-affordance>
400
471
  <sp-icon-edit slot="icon"></sp-icon-edit>
401
472
  </sp-action-button>
402
473
  </sp-action-group>
@@ -410,10 +481,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
410
481
  <sp-icon-edit slot="icon"></sp-icon-edit>
411
482
  Edit
412
483
  </sp-action-button>
413
- <sp-action-button emphasized quiet selected>
484
+ <sp-action-button label="Edit" emphasized quiet selected>
414
485
  <sp-icon-edit slot="icon"></sp-icon-edit>
415
486
  </sp-action-button>
416
- <sp-action-button emphasized quiet selected hold-affordance>
487
+ <sp-action-button label="Edit" emphasized quiet selected hold-affordance>
417
488
  <sp-icon-edit slot="icon"></sp-icon-edit>
418
489
  </sp-action-button>
419
490
  </sp-action-group>
@@ -427,10 +498,10 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
427
498
  <sp-icon-edit slot="icon"></sp-icon-edit>
428
499
  Edit
429
500
  </sp-action-button>
430
- <sp-action-button emphasized quiet disabled>
501
+ <sp-action-button label="Edit" emphasized quiet disabled>
431
502
  <sp-icon-edit slot="icon"></sp-icon-edit>
432
503
  </sp-action-button>
433
- <sp-action-button emphasized quiet disabled hold-affordance>
504
+ <sp-action-button label="Edit" emphasized quiet disabled hold-affordance>
434
505
  <sp-icon-edit slot="icon"></sp-icon-edit>
435
506
  </sp-action-button>
436
507
  </sp-action-group>
@@ -448,10 +519,11 @@ The `<sp-action-button>` can be customized with either or both of the `emphasize
448
519
  <sp-icon-edit slot="icon"></sp-icon-edit>
449
520
  Edit
450
521
  </sp-action-button>
451
- <sp-action-button emphasized quiet disabled selected>
522
+ <sp-action-button label="Edit" emphasized quiet disabled selected>
452
523
  <sp-icon-edit slot="icon"></sp-icon-edit>
453
524
  </sp-action-button>
454
525
  <sp-action-button
526
+ label="Edit"
455
527
  emphasized
456
528
  quiet
457
529
  disabled
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/action-button",
3
- "version": "1.6.0-beta.0",
3
+ "version": "1.6.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -64,11 +64,11 @@
64
64
  "css"
65
65
  ],
66
66
  "dependencies": {
67
- "@spectrum-web-components/base": "1.6.0-beta.0",
68
- "@spectrum-web-components/button": "1.6.0-beta.0",
69
- "@spectrum-web-components/icon": "1.6.0-beta.0",
70
- "@spectrum-web-components/icons-ui": "1.6.0-beta.0",
71
- "@spectrum-web-components/shared": "1.6.0-beta.0"
67
+ "@spectrum-web-components/base": "1.6.0",
68
+ "@spectrum-web-components/button": "1.6.0",
69
+ "@spectrum-web-components/icon": "1.6.0",
70
+ "@spectrum-web-components/icons-ui": "1.6.0",
71
+ "@spectrum-web-components/shared": "1.6.0"
72
72
  },
73
73
  "devDependencies": {
74
74
  "@spectrum-css/actionbutton": "7.1.3"