@spectrum-web-components/button 0.18.1-devmode.7 → 0.18.2-devmode2.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.
- package/README.md +193 -34
- package/custom-elements.json +90 -90
- package/package.json +10 -9
- package/src/button-base.css.dev.js +1 -1
- package/src/button-base.css.dev.js.map +1 -1
- package/src/button-base.css.js +1 -1
- package/src/button-base.css.js.map +1 -1
- package/src/button.css.dev.js +1 -1
- package/src/button.css.dev.js.map +1 -1
- package/src/button.css.js +1 -1
- package/src/button.css.js.map +1 -1
- package/src/spectrum-button.css.dev.js +1 -1
- package/src/spectrum-button.css.dev.js.map +1 -1
- package/src/spectrum-button.css.js +1 -1
- package/src/spectrum-button.css.js.map +1 -1
- package/test/button.test.js +7 -1
- package/test/button.test.js.map +2 -2
- package/test/clear-button.test.js +4 -0
- package/test/clear-button.test.js.map +2 -2
- package/test/close-button.test.js +4 -0
- package/test/close-button.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -66,41 +66,12 @@ import { Button, ClearButton, CloseButton } from '@spectrum-web-components/butto
|
|
|
66
66
|
</sp-tab-panel>
|
|
67
67
|
</sp-tabs>
|
|
68
68
|
|
|
69
|
-
## Variants
|
|
70
|
-
|
|
71
|
-
There are many button variants to choose from in Spectrum. The `variant`
|
|
72
|
-
attribute controls the main variant of the button, and a few other boolean
|
|
73
|
-
attributes can be combined to apply sub-variants, e.g. `quiet`.
|
|
74
|
-
|
|
75
|
-
### Normal
|
|
76
|
-
|
|
77
|
-
```html
|
|
78
|
-
<sp-button-group>
|
|
79
|
-
<sp-button variant="cta">CTA</sp-button>
|
|
80
|
-
<sp-button variant="primary">Primary</sp-button>
|
|
81
|
-
<sp-button variant="secondary">Secondary</sp-button>
|
|
82
|
-
<sp-button variant="negative">Negative</sp-button>
|
|
83
|
-
</sp-button-group>
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### Quiet
|
|
87
|
-
|
|
88
|
-
```html
|
|
89
|
-
<sp-button-group>
|
|
90
|
-
<sp-button quiet variant="primary">Quiet Primary</sp-button>
|
|
91
|
-
<sp-button quiet variant="secondary">Quiet Secondary</sp-button>
|
|
92
|
-
<sp-button quiet variant="negative">Quiet Negative</sp-button>
|
|
93
|
-
</sp-button-group>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
69
|
## Content
|
|
97
70
|
|
|
98
|
-
`<sp-
|
|
99
|
-
placing an icon
|
|
100
|
-
SVG.
|
|
71
|
+
`<sp-button>` elements can be provided a visible label, a label with an icon, or just an icon (a non-visible label can be prived via the `label` attribute on an `<sp-button>` or on an `<sp-icon*>` element child to appropriately fulfill the accessibility contract of the button). An icon is provided by
|
|
72
|
+
placing an icon element to the `icon` slot.
|
|
101
73
|
|
|
102
74
|
```html
|
|
103
|
-
<sp-icons-medium></sp-icons-medium>
|
|
104
75
|
<sp-button-group>
|
|
105
76
|
<sp-button variant="primary">Label only</sp-button>
|
|
106
77
|
<sp-button variant="primary">
|
|
@@ -121,14 +92,202 @@ SVG.
|
|
|
121
92
|
</svg>
|
|
122
93
|
SVG Icon + Label
|
|
123
94
|
</sp-button>
|
|
95
|
+
<sp-button variant="primary" label="Icon only">
|
|
96
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
97
|
+
</sp-button>
|
|
98
|
+
</sp-button-group>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## Variants
|
|
102
|
+
|
|
103
|
+
There are many button variants to choose from in Spectrum. The `variant`
|
|
104
|
+
attribute defaults to `accent` but also accepts the following value: `accent`, `primary`, `secondary`, `negative`, `white`, and `black`. They display as follows:
|
|
105
|
+
|
|
106
|
+
<sp-tabs selected="accent" auto label="Variant Attribute Options">
|
|
107
|
+
<sp-tab value="accent">Accent</sp-tab>
|
|
108
|
+
<sp-tab-panel value="accent">
|
|
109
|
+
|
|
110
|
+
```html demo
|
|
111
|
+
<sp-button-group style="min-width: max-content">
|
|
112
|
+
<sp-button variant="accent">Label only</sp-button>
|
|
113
|
+
<sp-button variant="accent">
|
|
114
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
115
|
+
Icon + Label
|
|
116
|
+
</sp-button>
|
|
117
|
+
<sp-button variant="accent" label="Icon only">
|
|
118
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
119
|
+
</sp-button>
|
|
120
|
+
</sp-button-group>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
</sp-tab-panel>
|
|
124
|
+
<sp-tab value="primary">Primary</sp-tab>
|
|
125
|
+
<sp-tab-panel value="primary">
|
|
126
|
+
|
|
127
|
+
```html demo
|
|
128
|
+
<sp-button-group style="min-width: max-content">
|
|
129
|
+
<sp-button variant="primary">Label only</sp-button>
|
|
130
|
+
<sp-button variant="primary">
|
|
131
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
132
|
+
Icon + Label
|
|
133
|
+
</sp-button>
|
|
134
|
+
<sp-button variant="primary" label="Icon only">
|
|
135
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
136
|
+
</sp-button>
|
|
137
|
+
</sp-button-group>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
</sp-tab-panel>
|
|
141
|
+
<sp-tab value="secondary">Seconday</sp-tab>
|
|
142
|
+
<sp-tab-panel value="secondary">
|
|
143
|
+
|
|
144
|
+
```html demo
|
|
145
|
+
<sp-button-group style="min-width: max-content">
|
|
146
|
+
<sp-button variant="secondary">Label only</sp-button>
|
|
147
|
+
<sp-button variant="secondary">
|
|
148
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
149
|
+
Icon + Label
|
|
150
|
+
</sp-button>
|
|
151
|
+
<sp-button variant="secondary" label="Icon only">
|
|
152
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
153
|
+
</sp-button>
|
|
154
|
+
</sp-button-group>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
</sp-tab-panel>
|
|
158
|
+
<sp-tab value="negative">Negative</sp-tab>
|
|
159
|
+
<sp-tab-panel value="negative">
|
|
160
|
+
|
|
161
|
+
```html demo
|
|
162
|
+
<sp-button-group style="min-width: max-content">
|
|
163
|
+
<sp-button variant="negative">Label only</sp-button>
|
|
164
|
+
<sp-button variant="negative">
|
|
165
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
166
|
+
Icon + Label
|
|
167
|
+
</sp-button>
|
|
168
|
+
<sp-button variant="negative" label="Icon only">
|
|
169
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
170
|
+
</sp-button>
|
|
124
171
|
</sp-button-group>
|
|
125
172
|
```
|
|
126
173
|
|
|
174
|
+
</sp-tab-panel>
|
|
175
|
+
<sp-tab value="black">Black</sp-tab>
|
|
176
|
+
<sp-tab-panel value="black">
|
|
177
|
+
|
|
178
|
+
```html demo
|
|
179
|
+
<sp-button-group style="min-width: max-content">
|
|
180
|
+
<sp-button variant="black">Label only</sp-button>
|
|
181
|
+
<sp-button variant="black">
|
|
182
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
183
|
+
Icon + Label
|
|
184
|
+
</sp-button>
|
|
185
|
+
<sp-button variant="black" label="Icon only">
|
|
186
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
187
|
+
</sp-button>
|
|
188
|
+
</sp-button-group>
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
</sp-tab-panel>
|
|
192
|
+
<sp-tab value="white">White</sp-tab>
|
|
193
|
+
<sp-tab-panel value="white">
|
|
194
|
+
|
|
195
|
+
```html demo
|
|
196
|
+
<sp-button-group style="min-width: max-content">
|
|
197
|
+
<sp-button variant="white">Label only</sp-button>
|
|
198
|
+
<sp-button variant="white">
|
|
199
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
200
|
+
Icon + Label
|
|
201
|
+
</sp-button>
|
|
202
|
+
<sp-button variant="white" label="Icon only">
|
|
203
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
204
|
+
</sp-button>
|
|
205
|
+
</sp-button-group>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
</sp-tab-panel>
|
|
209
|
+
</sp-tabs>
|
|
210
|
+
|
|
211
|
+
### Treatment
|
|
212
|
+
|
|
213
|
+
The `treatment` attribute accepts `fill` and `outline` as values, and defaults to `fill`. These display as follows:
|
|
214
|
+
|
|
215
|
+
<sp-tabs selected="fill" auto label="Treatment Attribute Options">
|
|
216
|
+
<sp-tab value="fill">Fill</sp-tab>
|
|
217
|
+
<sp-tab-panel value="fill">
|
|
218
|
+
|
|
219
|
+
```html demo
|
|
220
|
+
<sp-button-group style="min-width: max-content">
|
|
221
|
+
<sp-button treatment="fill" variant="primary">Primary, Fill</sp-button>
|
|
222
|
+
<sp-button treatment="fill" variant="secondary">Secondary, Fill</sp-button>
|
|
223
|
+
<sp-button treatment="fill" variant="negative">Negative, Fill</sp-button>
|
|
224
|
+
</sp-button-group>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
</sp-tab-panel>
|
|
228
|
+
<sp-tab value="outline">Outline</sp-tab>
|
|
229
|
+
<sp-tab-panel value="outline">
|
|
230
|
+
|
|
231
|
+
```html demo
|
|
232
|
+
<sp-button-group style="min-width: max-content">
|
|
233
|
+
<sp-button treatment="outline" variant="primary">
|
|
234
|
+
Primary, Outline
|
|
235
|
+
</sp-button>
|
|
236
|
+
<sp-button treatment="outline" variant="secondary">
|
|
237
|
+
Secondary, Outline
|
|
238
|
+
</sp-button>
|
|
239
|
+
<sp-button treatment="outline" variant="negative">
|
|
240
|
+
Negative, Outline
|
|
241
|
+
</sp-button>
|
|
242
|
+
</sp-button-group>
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
</sp-tab-panel>
|
|
246
|
+
<sp-tab value="outline-black">Outline, black</sp-tab>
|
|
247
|
+
<sp-tab-panel value="outline-black">
|
|
248
|
+
|
|
249
|
+
```html demo
|
|
250
|
+
<sp-button-group
|
|
251
|
+
style="background: var(--spectrum-global-color-seafoam-600); padding: 0.5em; min-width: max-content"
|
|
252
|
+
>
|
|
253
|
+
<sp-button treatment="outline" variant="black">Label only</sp-button>
|
|
254
|
+
<sp-button treatment="outline" variant="black">
|
|
255
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
256
|
+
Icon + Label
|
|
257
|
+
</sp-button>
|
|
258
|
+
<sp-button treatment="outline" variant="black" label="Icon only">
|
|
259
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
260
|
+
</sp-button>
|
|
261
|
+
</sp-button-group>
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
</sp-tab-panel>
|
|
265
|
+
<sp-tab value="outline-white">Outline, white</sp-tab>
|
|
266
|
+
<sp-tab-panel value="outline-white">
|
|
267
|
+
|
|
268
|
+
```html demo
|
|
269
|
+
<sp-button-group
|
|
270
|
+
style="background: var(--spectrum-global-color-seafoam-600); padding: 0.5em; min-width: max-content"
|
|
271
|
+
>
|
|
272
|
+
<sp-button treatment="outline" variant="white">Label only</sp-button>
|
|
273
|
+
<sp-button treatment="outline" variant="white">
|
|
274
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
275
|
+
Icon + Label
|
|
276
|
+
</sp-button>
|
|
277
|
+
<sp-button treatment="outline" variant="white" label="Icon only">
|
|
278
|
+
<sp-icon-help slot="icon"></sp-icon-help>
|
|
279
|
+
</sp-button>
|
|
280
|
+
</sp-button-group>
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
</sp-tab-panel>
|
|
284
|
+
</sp-tabs>
|
|
285
|
+
|
|
127
286
|
## States
|
|
128
287
|
|
|
129
|
-
In addition to the variant, `<sp-
|
|
130
|
-
which can be applied by adding the attribute `disabled`. All
|
|
131
|
-
variants support
|
|
288
|
+
In addition to the variant, `<sp-button>` elements have a disabled state visual state
|
|
289
|
+
which can be applied by adding the attribute `disabled`. All `<sp-button>`
|
|
290
|
+
variants support this. In addition to affectng the visual state, the `disabled`
|
|
132
291
|
attribute prevents focus and disallows `click` events.
|
|
133
292
|
|
|
134
293
|
```html
|