@adobe/spectrum-design-data 2.0.0 → 2.2.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/components/accordion.json +49 -295
- package/components/action-bar.json +16 -119
- package/components/action-button.json +69 -302
- package/components/action-group.json +74 -20
- package/components/alert-banner.json +27 -47
- package/components/alert-dialog.json +37 -45
- package/components/avatar-group.json +28 -54
- package/components/avatar.json +92 -59
- package/components/badge.json +121 -370
- package/components/breadcrumbs.json +53 -159
- package/components/button-group.json +40 -13
- package/components/button.json +88 -231
- package/components/cards.json +31 -290
- package/components/checkbox-group.json +58 -13
- package/components/checkbox.json +53 -156
- package/components/close-button.json +47 -76
- package/components/coach-indicator.json +44 -31
- package/components/coach-mark.json +19 -43
- package/components/color-area.json +64 -26
- package/components/color-handle.json +35 -27
- package/components/color-loupe.json +6 -17
- package/components/color-slider.json +80 -35
- package/components/color-wheel.json +51 -25
- package/components/combo-box.json +94 -246
- package/components/contextual-help.json +106 -59
- package/components/date-picker.json +57 -185
- package/components/divider.json +25 -17
- package/components/drop-zone.json +24 -119
- package/components/field-label.json +45 -103
- package/components/help-text.json +29 -97
- package/components/illustrated-message.json +25 -74
- package/components/in-field-progress-circle.json +0 -54
- package/components/in-line-alert.json +39 -130
- package/components/link.json +40 -58
- package/components/list-view.json +30 -181
- package/components/menu.json +100 -340
- package/components/meter.json +52 -78
- package/components/number-field.json +72 -239
- package/components/opacity-checkerboard.json +0 -18
- package/components/picker.json +95 -275
- package/components/popover.json +88 -45
- package/components/progress-bar.json +63 -78
- package/components/progress-circle.json +36 -33
- package/components/radio-button.json +36 -145
- package/components/radio-group.json +74 -18
- package/components/rating.json +33 -48
- package/components/search-field.json +64 -133
- package/components/segmented-control.json +37 -86
- package/components/select-box.json +52 -100
- package/components/side-navigation.json +32 -164
- package/components/slider.json +90 -182
- package/components/standard-dialog.json +37 -43
- package/components/status-light.json +92 -134
- package/components/steplist.json +23 -113
- package/components/swatch-group.json +50 -22
- package/components/swatch.json +62 -70
- package/components/switch.json +51 -143
- package/components/table.json +51 -232
- package/components/tabs.json +29 -84
- package/components/tag-field.json +53 -85
- package/components/tag-group.json +36 -18
- package/components/tag.json +43 -206
- package/components/takeover-dialog.json +30 -20
- package/components/text-area.json +114 -247
- package/components/text-field.json +90 -261
- package/components/thumbnail.json +46 -44
- package/components/title.json +0 -18
- package/components/toast.json +27 -61
- package/components/tooltip.json +36 -52
- package/components/tree-view.json +79 -200
- package/package.json +2 -2
- package/tokens/color-aliases.tokens.json +33 -0
- package/tokens/color-component.tokens.json +1 -1212
- package/tokens/color-palette.tokens.json +0 -33
- package/tokens/layout-component.tokens.json +833 -24074
- package/tokens/layout.tokens.json +64 -597
- package/tokens/typography.tokens.json +559 -3318
package/components/slider.json
CHANGED
|
@@ -104,21 +104,42 @@
|
|
|
104
104
|
}
|
|
105
105
|
],
|
|
106
106
|
"options": {
|
|
107
|
-
"label": {
|
|
107
|
+
"label": {
|
|
108
|
+
"type": "string"
|
|
109
|
+
},
|
|
108
110
|
"labelPosition": {
|
|
109
111
|
"type": "string",
|
|
110
112
|
"default": "top",
|
|
111
|
-
"values": [
|
|
113
|
+
"values": [
|
|
114
|
+
{
|
|
115
|
+
"value": "top"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"value": "side"
|
|
119
|
+
}
|
|
120
|
+
]
|
|
121
|
+
},
|
|
122
|
+
"value": {
|
|
123
|
+
"type": "number",
|
|
124
|
+
"description": "from minValue to maxValue"
|
|
125
|
+
},
|
|
126
|
+
"minValue": {
|
|
127
|
+
"type": "number",
|
|
128
|
+
"default": 0
|
|
129
|
+
},
|
|
130
|
+
"maxValue": {
|
|
131
|
+
"type": "number",
|
|
132
|
+
"default": 100
|
|
112
133
|
},
|
|
113
|
-
"value": { "type": "number", "description": "from minValue to maxValue" },
|
|
114
|
-
"minValue": { "type": "number", "default": 0 },
|
|
115
|
-
"maxValue": { "type": "number", "default": 100 },
|
|
116
134
|
"isRange": {
|
|
117
135
|
"type": "boolean",
|
|
118
136
|
"default": false,
|
|
119
137
|
"description": "If true, the slider will allow selection of a range of values by displaying two handles."
|
|
120
138
|
},
|
|
121
|
-
"step": {
|
|
139
|
+
"step": {
|
|
140
|
+
"type": "number",
|
|
141
|
+
"default": 1
|
|
142
|
+
},
|
|
122
143
|
"valueFormat": {
|
|
123
144
|
"type": "string",
|
|
124
145
|
"description": "This will vary depending on implementation."
|
|
@@ -126,205 +147,92 @@
|
|
|
126
147
|
"progressionScale": {
|
|
127
148
|
"type": "string",
|
|
128
149
|
"default": "linear",
|
|
129
|
-
"values": [
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
{ "name": "track" },
|
|
145
|
-
{ "name": "control" }
|
|
146
|
-
],
|
|
147
|
-
"states": [
|
|
148
|
-
{ "name": "hover", "trigger": "interaction" },
|
|
149
|
-
{ "name": "down", "trigger": "interaction" },
|
|
150
|
-
{ "name": "keyboard-focus", "trigger": "interaction" }
|
|
151
|
-
],
|
|
152
|
-
"lifecycle": { "introduced": "1.0.0-draft" },
|
|
153
|
-
"tokenBindings": [
|
|
154
|
-
{ "token": "field-default-width-small", "context": "Width (default)" },
|
|
155
|
-
{ "token": "field-default-width-medium", "context": "Width (default)" },
|
|
156
|
-
{ "token": "field-default-width-large", "context": "Width (default)" },
|
|
157
|
-
{
|
|
158
|
-
"token": "field-default-width-extra-large",
|
|
159
|
-
"context": "Width (default)"
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
"token": "component-size-difference-down",
|
|
163
|
-
"context": "Component size (down)"
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
"token": "component-size-width-ratio-down",
|
|
167
|
-
"context": "Component size (down)"
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
"token": "component-size-minimum-perspective-down",
|
|
171
|
-
"context": "Component size (down)"
|
|
172
|
-
},
|
|
173
|
-
{ "token": "slider-track-height-medium", "context": "Track (height)" },
|
|
174
|
-
{ "token": "slider-track-height-large", "context": "Track (height)" },
|
|
175
|
-
{ "token": "component-height-75", "context": "Height (slider control) " },
|
|
176
|
-
{ "token": "component-height-100", "context": "Height (slider control) " },
|
|
177
|
-
{ "token": "component-height-200", "context": "Height (slider control) " },
|
|
178
|
-
{ "token": "component-height-300", "context": "Height (slider control) " },
|
|
179
|
-
{ "token": "slider-handle-small", "context": "Handle (size)" },
|
|
180
|
-
{ "token": "slider-handle-medium", "context": "Handle (size)" },
|
|
181
|
-
{ "token": "slider-handle-large", "context": "Handle (size)" },
|
|
182
|
-
{ "token": "slider-handle-extra-large", "context": "Handle (size)" },
|
|
183
|
-
{
|
|
184
|
-
"token": "slider-handle-height-precision-small",
|
|
185
|
-
"context": "Handle (size)"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"token": "slider-handle-height-precision-medium",
|
|
189
|
-
"context": "Handle (size)"
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
"token": "slider-handle-height-precision-large",
|
|
193
|
-
"context": "Handle (size)"
|
|
194
|
-
},
|
|
195
|
-
{
|
|
196
|
-
"token": "slider-handle-height-precision-extra-large",
|
|
197
|
-
"context": "Handle (size)"
|
|
198
|
-
},
|
|
199
|
-
{ "token": "slider-handle-precision-width", "context": "Handle (size)" },
|
|
200
|
-
{ "token": "border-width-200", "context": "Handle (border)" },
|
|
201
|
-
{ "token": "focus-indicator-thickness", "context": "Focus ring" },
|
|
202
|
-
{ "token": "focus-indicator-gap", "context": "Focus ring" },
|
|
203
|
-
{
|
|
204
|
-
"token": "component-top-to-text-75",
|
|
205
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
206
|
-
},
|
|
207
|
-
{
|
|
208
|
-
"token": "component-top-to-text-100",
|
|
209
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
210
|
-
},
|
|
211
|
-
{
|
|
212
|
-
"token": "component-top-to-text-200",
|
|
213
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"token": "component-top-to-text-300",
|
|
217
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
218
|
-
},
|
|
219
|
-
{
|
|
220
|
-
"token": "component-bottom-to-text-75",
|
|
221
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"token": "component-bottom-to-text-100",
|
|
225
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"token": "component-bottom-to-text-200",
|
|
229
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
230
|
-
},
|
|
231
|
-
{
|
|
232
|
-
"token": "component-bottom-to-text-300",
|
|
233
|
-
"context": "Spacing (top/bottom edge to label)"
|
|
234
|
-
},
|
|
235
|
-
{
|
|
236
|
-
"token": "slider-control-to-field-label-small",
|
|
237
|
-
"context": "Spacing (field label to slider control)"
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
"token": "slider-control-to-field-label-medium",
|
|
241
|
-
"context": "Spacing (field label to slider control)"
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
"token": "slider-control-to-field-label-large",
|
|
245
|
-
"context": "Spacing (field label to slider control)"
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
"token": "slider-control-to-field-label-extra-large",
|
|
249
|
-
"context": "Spacing (field label to slider control)"
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"token": "slider-control-to-field-label-editable-small",
|
|
253
|
-
"context": "Spacing (field label to slider control)"
|
|
150
|
+
"values": [
|
|
151
|
+
{
|
|
152
|
+
"value": "linear"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"value": "log"
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
},
|
|
159
|
+
"width": {
|
|
160
|
+
"type": "number"
|
|
161
|
+
},
|
|
162
|
+
"hasFill": {
|
|
163
|
+
"type": "boolean",
|
|
164
|
+
"default": false
|
|
254
165
|
},
|
|
255
|
-
{
|
|
256
|
-
"
|
|
257
|
-
"
|
|
166
|
+
"fillStart": {
|
|
167
|
+
"type": "number",
|
|
168
|
+
"default": 0
|
|
258
169
|
},
|
|
259
|
-
{
|
|
260
|
-
"
|
|
261
|
-
"
|
|
262
|
-
},
|
|
263
|
-
{
|
|
264
|
-
"token": "slider-control-to-field-label-editable-extra-large",
|
|
265
|
-
"context": "Spacing (field label to slider control)"
|
|
170
|
+
"hasGradient": {
|
|
171
|
+
"type": "boolean",
|
|
172
|
+
"default": false
|
|
266
173
|
},
|
|
267
|
-
{
|
|
268
|
-
"
|
|
269
|
-
"
|
|
174
|
+
"isEditable": {
|
|
175
|
+
"type": "boolean",
|
|
176
|
+
"default": false
|
|
270
177
|
},
|
|
178
|
+
"isDisabled": {
|
|
179
|
+
"type": "boolean",
|
|
180
|
+
"default": false
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"anatomy": [
|
|
271
184
|
{
|
|
272
|
-
"
|
|
273
|
-
"
|
|
185
|
+
"name": "text-field",
|
|
186
|
+
"description": "Editable numeric value field."
|
|
274
187
|
},
|
|
275
188
|
{
|
|
276
|
-
"
|
|
277
|
-
"context": "Spacing (field label to slider control)"
|
|
189
|
+
"name": "handle"
|
|
278
190
|
},
|
|
279
191
|
{
|
|
280
|
-
"
|
|
281
|
-
"context": "Spacing (field label to slider control)"
|
|
192
|
+
"name": "track"
|
|
282
193
|
},
|
|
283
194
|
{
|
|
284
|
-
"
|
|
285
|
-
|
|
286
|
-
|
|
195
|
+
"name": "control"
|
|
196
|
+
}
|
|
197
|
+
],
|
|
198
|
+
"states": [
|
|
287
199
|
{
|
|
288
|
-
"
|
|
289
|
-
"
|
|
200
|
+
"name": "hover",
|
|
201
|
+
"trigger": "interaction"
|
|
290
202
|
},
|
|
291
203
|
{
|
|
292
|
-
"
|
|
293
|
-
"
|
|
204
|
+
"name": "down",
|
|
205
|
+
"trigger": "interaction"
|
|
294
206
|
},
|
|
295
207
|
{
|
|
296
|
-
"
|
|
297
|
-
"
|
|
298
|
-
}
|
|
299
|
-
{ "token": "neutral-subdued-content-color-default", "context": "Value" },
|
|
300
|
-
{ "token": "gray-700", "context": "Track" },
|
|
301
|
-
{ "token": "accent-content-color-default", "context": "Track" },
|
|
302
|
-
{ "token": "gray-800", "context": "Handle" },
|
|
303
|
-
{ "token": "gray-900", "context": "Handle" },
|
|
304
|
-
{ "token": "gray-25", "context": "Handle" },
|
|
305
|
-
{ "token": "focus-indicator-color", "context": "Focus ring" },
|
|
306
|
-
{ "token": "disabled-content-color", "context": "Disabled" },
|
|
307
|
-
{ "token": "disabled-background-color", "context": "Disabled" },
|
|
308
|
-
{ "token": "disabled-border-color", "context": "Disabled" },
|
|
309
|
-
{ "token": "default-font-family", "context": "Label" },
|
|
310
|
-
{ "token": "regular-font-weight", "context": "Label" },
|
|
311
|
-
{ "token": "default-font-style", "context": "Label" },
|
|
312
|
-
{ "token": "font-size-75", "context": "Label" },
|
|
313
|
-
{ "token": "font-size-100", "context": "Label" },
|
|
314
|
-
{ "token": "font-size-200", "context": "Label" },
|
|
315
|
-
{ "token": "font-size-300", "context": "Label" },
|
|
316
|
-
{ "token": "line-height-100", "context": "Label" },
|
|
317
|
-
{ "token": "cjk-line-height-100", "context": "Label" }
|
|
208
|
+
"name": "keyboard-focus",
|
|
209
|
+
"trigger": "interaction"
|
|
210
|
+
}
|
|
318
211
|
],
|
|
212
|
+
"lifecycle": {
|
|
213
|
+
"introduced": "1.0.0-draft"
|
|
214
|
+
},
|
|
319
215
|
"accessibility": {
|
|
320
216
|
"role": "slider",
|
|
321
217
|
"intents": ["choose"],
|
|
322
218
|
"focusable": true,
|
|
323
219
|
"keyboardIntents": ["increment", "decrement"],
|
|
324
220
|
"wcag": [
|
|
325
|
-
{
|
|
326
|
-
|
|
327
|
-
|
|
221
|
+
{
|
|
222
|
+
"criterion": "1.3.1",
|
|
223
|
+
"level": "A",
|
|
224
|
+
"title": "Info and Relationships"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"criterion": "2.1.1",
|
|
228
|
+
"level": "A",
|
|
229
|
+
"title": "Keyboard"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"criterion": "4.1.2",
|
|
233
|
+
"level": "A",
|
|
234
|
+
"title": "Name, Role, Value"
|
|
235
|
+
}
|
|
328
236
|
]
|
|
329
237
|
}
|
|
330
238
|
}
|
|
@@ -84,8 +84,12 @@
|
|
|
84
84
|
}
|
|
85
85
|
],
|
|
86
86
|
"options": {
|
|
87
|
-
"title": {
|
|
88
|
-
|
|
87
|
+
"title": {
|
|
88
|
+
"type": "string"
|
|
89
|
+
},
|
|
90
|
+
"description": {
|
|
91
|
+
"type": "string"
|
|
92
|
+
},
|
|
89
93
|
"hideImage": {
|
|
90
94
|
"type": "boolean",
|
|
91
95
|
"default": false,
|
|
@@ -94,14 +98,29 @@
|
|
|
94
98
|
"size": {
|
|
95
99
|
"type": "string",
|
|
96
100
|
"default": "m",
|
|
97
|
-
"values": [
|
|
101
|
+
"values": [
|
|
102
|
+
{
|
|
103
|
+
"value": "s"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"value": "m"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"value": "l"
|
|
110
|
+
}
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
"hideCloseButton": {
|
|
114
|
+
"type": "boolean",
|
|
115
|
+
"default": false
|
|
98
116
|
},
|
|
99
|
-
"hideCloseButton": { "type": "boolean", "default": false },
|
|
100
117
|
"footerContent": {
|
|
101
118
|
"type": "string",
|
|
102
119
|
"description": "Optional footer content to display in the dialog footer like a checkbox."
|
|
103
120
|
},
|
|
104
|
-
"primaryActionLabel": {
|
|
121
|
+
"primaryActionLabel": {
|
|
122
|
+
"type": "string"
|
|
123
|
+
},
|
|
105
124
|
"secondaryActionLabel": {
|
|
106
125
|
"type": "string",
|
|
107
126
|
"description": "If undefined, this button does not appear."
|
|
@@ -112,50 +131,25 @@
|
|
|
112
131
|
"description": "If undefined, this button does not appear."
|
|
113
132
|
}
|
|
114
133
|
},
|
|
115
|
-
"lifecycle": {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
"token": "standard-dialog-maximum-width-small",
|
|
119
|
-
"context": "Maximum width"
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
"token": "standard-dialog-maximum-width-medium",
|
|
123
|
-
"context": "Maximum width"
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
"token": "standard-dialog-maximum-width-large",
|
|
127
|
-
"context": "Maximum width"
|
|
128
|
-
},
|
|
129
|
-
{ "token": "standard-dialog-minimum-width", "context": "Minimum width" },
|
|
130
|
-
{ "token": "corner-radius-extra-large-default", "context": "Rounding" },
|
|
131
|
-
{ "token": "spacing-500", "context": "Spacing (edge to content)" },
|
|
132
|
-
{ "token": "spacing-400", "context": "Spacing (edge to content)" },
|
|
133
|
-
{ "token": "spacing-300", "context": "Spacing (title to description)" },
|
|
134
|
-
{ "token": "spacing-200", "context": "Spacing (edge to close button)" },
|
|
135
|
-
{ "token": "background-layer-2-color", "context": "Background" },
|
|
136
|
-
{ "token": "overlay-color", "context": "Overlay" },
|
|
137
|
-
{ "token": "overlay-opacity", "context": "Overlay" },
|
|
138
|
-
{ "token": "title-sans-serif-font-family", "context": "Title" },
|
|
139
|
-
{ "token": "title-sans-serif-font-weight", "context": "Title" },
|
|
140
|
-
{ "token": "title-sans-serif-font-style", "context": "Title" },
|
|
141
|
-
{ "token": "standard-dialog-title-font-size", "context": "Title" },
|
|
142
|
-
{ "token": "title-line-height", "context": "Title" },
|
|
143
|
-
{ "token": "heading-color", "context": "Title" },
|
|
144
|
-
{ "token": "body-sans-serif-font-family", "context": "Description" },
|
|
145
|
-
{ "token": "body-sans-serif-font-weight", "context": "Description" },
|
|
146
|
-
{ "token": "body-sans-serif-font-style", "context": "Description" },
|
|
147
|
-
{ "token": "standard-dialog-body-font-size", "context": "Description" },
|
|
148
|
-
{ "token": "line-height-200", "context": "Description" },
|
|
149
|
-
{ "token": "body-color", "context": "Description" }
|
|
150
|
-
],
|
|
134
|
+
"lifecycle": {
|
|
135
|
+
"introduced": "1.0.0-draft"
|
|
136
|
+
},
|
|
151
137
|
"accessibility": {
|
|
152
138
|
"role": "dialog",
|
|
153
139
|
"intents": ["dismiss"],
|
|
154
140
|
"focusable": false,
|
|
155
141
|
"keyboardIntents": ["dismiss"],
|
|
156
142
|
"wcag": [
|
|
157
|
-
{
|
|
158
|
-
|
|
143
|
+
{
|
|
144
|
+
"criterion": "2.4.3",
|
|
145
|
+
"level": "A",
|
|
146
|
+
"title": "Focus Order"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"criterion": "4.1.2",
|
|
150
|
+
"level": "A",
|
|
151
|
+
"title": "Name, Role, Value"
|
|
152
|
+
}
|
|
159
153
|
]
|
|
160
154
|
}
|
|
161
155
|
}
|