@adobe/spectrum-design-data 3.6.1 → 3.7.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/action-bar.json +7 -7
- package/components/action-group.json +8 -8
- package/components/breadcrumbs.json +7 -7
- package/components/calendar.json +7 -7
- package/components/color-area.json +7 -7
- package/components/color-handle.json +8 -8
- package/components/color-slider.json +7 -7
- package/components/color-wheel.json +7 -7
- package/components/date-picker.json +7 -7
- package/components/illustrated-message.json +13 -13
- package/components/list-view.json +7 -7
- package/components/number-field.json +7 -7
- package/components/select-box.json +7 -7
- package/guidelines/brand.json +2 -2
- package/package.json +1 -1
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "actions",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/action-bar/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ActionBar",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -59,6 +52,13 @@
|
|
|
59
52
|
"content": "Don’t use quick actions.\n\nInstead of quick actions, use an action bar for both single and bulk selection patterns. An action bar is useful for when a user needs to perform actions on either a single or multiple items at the same time. It can be used on either a grid view or a table view. Don’t use quick actions — a deprecated component — because it presents conflicting nested actions (for example, a whole asset card could open a detailed view). This makes targeting specific actions very difficult, especially on smaller screens or with the keyboard."
|
|
60
53
|
}
|
|
61
54
|
],
|
|
55
|
+
"implementations": [
|
|
56
|
+
{
|
|
57
|
+
"platform": "web",
|
|
58
|
+
"componentName": "ActionBar",
|
|
59
|
+
"package": "@react-spectrum/s2"
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
62
|
"options": { "isEmphasized": { "type": "boolean", "default": false } },
|
|
63
63
|
"anatomy": [
|
|
64
64
|
{
|
|
@@ -9,14 +9,6 @@
|
|
|
9
9
|
"category": "actions",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/action-group/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ActionGroup",
|
|
16
|
-
"importPath": "@adobe/spectrum-wc/components/action-group",
|
|
17
|
-
"notes": "Spectrum 2 web component custom element: swc-action-group."
|
|
18
|
-
}
|
|
19
|
-
],
|
|
20
12
|
"documentBlocks": [
|
|
21
13
|
{
|
|
22
14
|
"type": "purpose",
|
|
@@ -35,6 +27,14 @@
|
|
|
35
27
|
"content": "Fully justified action groups.\n\nUse the fully justified variant when using the vertical compact action group (both the quiet and not quiet options). This will ensure the buttons have the same width."
|
|
36
28
|
}
|
|
37
29
|
],
|
|
30
|
+
"implementations": [
|
|
31
|
+
{
|
|
32
|
+
"platform": "web",
|
|
33
|
+
"componentName": "ActionGroup",
|
|
34
|
+
"importPath": "@adobe/spectrum-wc/components/action-group",
|
|
35
|
+
"notes": "Spectrum 2 web component custom element: swc-action-group."
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
38
|
"options": {
|
|
39
39
|
"orientation": {
|
|
40
40
|
"type": "string",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "navigation",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "Breadcrumbs",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -63,6 +56,13 @@
|
|
|
63
56
|
"content": "Don’t modify breadcrumbs for lateral navigation.\n\nBreadcrumbs are a way for traveling up a hierarchical navigation and should not be mixed with controls intended for lateral or non-hierarchical navigation."
|
|
64
57
|
}
|
|
65
58
|
],
|
|
59
|
+
"implementations": [
|
|
60
|
+
{
|
|
61
|
+
"platform": "web",
|
|
62
|
+
"componentName": "Breadcrumbs",
|
|
63
|
+
"package": "@react-spectrum/s2"
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
66
|
"options": {
|
|
67
67
|
"isMultiline": {
|
|
68
68
|
"type": "boolean",
|
package/components/calendar.json
CHANGED
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/calendar/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "Calendar",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -47,6 +40,13 @@
|
|
|
47
40
|
"content": "Optional time fields.\n\nThe calendar popover can also include time-specific fields, allowing users to specify start and end times."
|
|
48
41
|
}
|
|
49
42
|
],
|
|
43
|
+
"implementations": [
|
|
44
|
+
{
|
|
45
|
+
"platform": "web",
|
|
46
|
+
"componentName": "Calendar",
|
|
47
|
+
"package": "@react-spectrum/s2"
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
50
|
"options": {
|
|
51
51
|
"currentMonth": {
|
|
52
52
|
"type": "number",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/color-area/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ColorArea",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -42,6 +35,13 @@
|
|
|
42
35
|
"content": "Color loupe on down/touch states.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
|
|
43
36
|
}
|
|
44
37
|
],
|
|
38
|
+
"implementations": [
|
|
39
|
+
{
|
|
40
|
+
"platform": "web",
|
|
41
|
+
"componentName": "ColorArea",
|
|
42
|
+
"package": "@react-spectrum/s2"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
45
|
"options": {
|
|
46
46
|
"background": {
|
|
47
47
|
"type": "string",
|
|
@@ -9,14 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/color-handle/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ColorHandle",
|
|
16
|
-
"importPath": "@adobe/spectrum-wc/components/color-handle",
|
|
17
|
-
"notes": "Spectrum 2 web component custom element: swc-color-handle."
|
|
18
|
-
}
|
|
19
|
-
],
|
|
20
12
|
"documentBlocks": [
|
|
21
13
|
{
|
|
22
14
|
"type": "purpose",
|
|
@@ -47,6 +39,14 @@
|
|
|
47
39
|
"content": "Color loupe on down/touch state.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a cursor, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
|
|
48
40
|
}
|
|
49
41
|
],
|
|
42
|
+
"implementations": [
|
|
43
|
+
{
|
|
44
|
+
"platform": "web",
|
|
45
|
+
"componentName": "ColorHandle",
|
|
46
|
+
"importPath": "@adobe/spectrum-wc/components/color-handle",
|
|
47
|
+
"notes": "Spectrum 2 web component custom element: swc-color-handle."
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
50
|
"options": {
|
|
51
51
|
"channel": {
|
|
52
52
|
"type": "string",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/color-slider/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ColorSlider",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -46,6 +39,13 @@
|
|
|
46
39
|
"content": "Color loupe on down/touch state.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a cursor, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
|
|
47
40
|
}
|
|
48
41
|
],
|
|
42
|
+
"implementations": [
|
|
43
|
+
{
|
|
44
|
+
"platform": "web",
|
|
45
|
+
"componentName": "ColorSlider",
|
|
46
|
+
"package": "@react-spectrum/s2"
|
|
47
|
+
}
|
|
48
|
+
],
|
|
49
49
|
"options": {
|
|
50
50
|
"background": {
|
|
51
51
|
"type": "string",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/color-wheel/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ColorWheel",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -42,6 +35,13 @@
|
|
|
42
35
|
"content": "Color loupe on down/touch state.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a cursor, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
|
|
43
36
|
}
|
|
44
37
|
],
|
|
38
|
+
"implementations": [
|
|
39
|
+
{
|
|
40
|
+
"platform": "web",
|
|
41
|
+
"componentName": "ColorWheel",
|
|
42
|
+
"package": "@react-spectrum/s2"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
45
|
"options": {
|
|
46
46
|
"background": {
|
|
47
47
|
"type": "string",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/date-picker/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "DatePicker",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -58,6 +51,13 @@
|
|
|
58
51
|
"content": "Error.\n\nA date picker can be marked as having an error to show that a value needs to be entered in order to move forward, or that an entered value is invalid. In this scenario, displaying error text beneath the date field can aid the user in understanding how to resolve it. Error text within the calendar popover may also be helpful to aid the user in understanding what the error is signaling."
|
|
59
52
|
}
|
|
60
53
|
],
|
|
54
|
+
"implementations": [
|
|
55
|
+
{
|
|
56
|
+
"platform": "web",
|
|
57
|
+
"componentName": "DatePicker",
|
|
58
|
+
"package": "@react-spectrum/s2"
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
61
|
"options": {
|
|
62
62
|
"variant": {
|
|
63
63
|
"type": "string",
|
|
@@ -9,19 +9,6 @@
|
|
|
9
9
|
"category": "feedback",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/illustrated-message/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "IllustratedMessage",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"platform": "web",
|
|
20
|
-
"componentName": "IllustratedMessage",
|
|
21
|
-
"importPath": "@adobe/spectrum-wc/components/illustrated-message",
|
|
22
|
-
"notes": "Spectrum 2 web component custom element: swc-illustrated-message."
|
|
23
|
-
}
|
|
24
|
-
],
|
|
25
12
|
"documentBlocks": [
|
|
26
13
|
{
|
|
27
14
|
"type": "purpose",
|
|
@@ -82,6 +69,19 @@
|
|
|
82
69
|
"content": "Show value.\n\nAn illustrated message can be interruptive, so make it readily apparent that it's adding value to a user's experience or is putting the user on the right path to accomplish their goals. Don't use an illustrated message for purely promotional purposes or for upsells of unrelated actions."
|
|
83
70
|
}
|
|
84
71
|
],
|
|
72
|
+
"implementations": [
|
|
73
|
+
{
|
|
74
|
+
"platform": "web",
|
|
75
|
+
"componentName": "IllustratedMessage",
|
|
76
|
+
"package": "@react-spectrum/s2"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"platform": "web",
|
|
80
|
+
"componentName": "IllustratedMessage",
|
|
81
|
+
"importPath": "@adobe/spectrum-wc/components/illustrated-message",
|
|
82
|
+
"notes": "Spectrum 2 web component custom element: swc-illustrated-message."
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
85
|
"options": {
|
|
86
86
|
"illustration": {
|
|
87
87
|
"type": "string",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "navigation",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/list-view/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "ListView",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -50,6 +43,13 @@
|
|
|
50
43
|
"content": "When to use a List view vs. Tree view.\n\nList views work best for flat collections of items that share the same hierarchy level. Tree views are ideal for displaying nested or hierarchical relationships."
|
|
51
44
|
}
|
|
52
45
|
],
|
|
46
|
+
"implementations": [
|
|
47
|
+
{
|
|
48
|
+
"platform": "web",
|
|
49
|
+
"componentName": "ListView",
|
|
50
|
+
"package": "@react-spectrum/s2"
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
53
|
"options": {
|
|
54
54
|
"selectionMode": {
|
|
55
55
|
"type": "string",
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/number-field/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "NumberField",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -79,6 +72,13 @@
|
|
|
79
72
|
"content": "Write error text that shows a solution.\n\nWrite error messaging in a human-centered way by guiding a user and showing them a solution — don't simply state what's wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user. Error text should be written in 1-2 short, complete sentences and in a clear and straightforward way. Never end with an exclamation point. For number fields, the nature of the error is often related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate."
|
|
80
73
|
}
|
|
81
74
|
],
|
|
75
|
+
"implementations": [
|
|
76
|
+
{
|
|
77
|
+
"platform": "web",
|
|
78
|
+
"componentName": "NumberField",
|
|
79
|
+
"package": "@react-spectrum/s2"
|
|
80
|
+
}
|
|
81
|
+
],
|
|
82
82
|
"options": {
|
|
83
83
|
"label": { "type": "string" },
|
|
84
84
|
"size": {
|
|
@@ -9,13 +9,6 @@
|
|
|
9
9
|
"category": "inputs",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/select-box/"
|
|
11
11
|
},
|
|
12
|
-
"implementations": [
|
|
13
|
-
{
|
|
14
|
-
"platform": "web",
|
|
15
|
-
"componentName": "SelectBox",
|
|
16
|
-
"package": "@react-spectrum/s2"
|
|
17
|
-
}
|
|
18
|
-
],
|
|
19
12
|
"documentBlocks": [
|
|
20
13
|
{
|
|
21
14
|
"type": "purpose",
|
|
@@ -68,6 +61,13 @@
|
|
|
68
61
|
"content": "Checkbox vs. highlight selection.\n\nSome cases may make more sense for the user to select one or a few options in a group of select boxes, but if the use case doesn't make sense to be checking a selection, showCheckbox can be false and the highlight style can be used instead. There is no visual differentiation between single- and multi-select behaviors when checkboxes are not present."
|
|
69
62
|
}
|
|
70
63
|
],
|
|
64
|
+
"implementations": [
|
|
65
|
+
{
|
|
66
|
+
"platform": "web",
|
|
67
|
+
"componentName": "SelectBox",
|
|
68
|
+
"package": "@react-spectrum/s2"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
71
|
"options": {
|
|
72
72
|
"label": { "type": "string" },
|
|
73
73
|
"orientation": {
|
package/guidelines/brand.json
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
"type": "guideline",
|
|
27
|
-
"content": "Color has historically been an extremely important part of Adobe’s brand. Bringing more color into Spectrum 2 lets product experiences draw a much closer connection to marketing materials and product branding. Spectrum’s 6.0.0 color system didn’t
|
|
27
|
+
"content": "Color has historically been an extremely important part of Adobe’s brand. Bringing more color into Spectrum 2 lets product experiences draw a much closer connection to marketing materials and product branding. Spectrum’s 6.0.0 color system didn’t thoroughly incorporate the Adobe brand colors, even though in-product UI colors are so close to them in both hue and saturation. With the colors for Spectrum 2, we’ve made some shifts to ensure that brand colors are better represented throughout product experiences. Image: Color-coded Adobe app icons with hex codes and names: Ai (Orange), Ps (Cyan), Dn (Celery), Ae (Indigo), Xd (Fuchsia), Id (Magenta). (source: https://spectrum.adobe.com/foundations/media_140ed33e3bdfc0215811463a3914f62aa3b83debd.png?width=750&format=png&optimize=medium) Brand colors used outside of in-product illustrations and splash imagery may differ slightly from the Spectrum 2 colors. Image: Color chart comparing brand colors and spectrum colors for Adobe apps, showing hex codes and color variations side by side. (source: https://spectrum.adobe.com/foundations/media_19e48a995352b0a44ae5ac4478d0b0780916e06e1.png?width=750&format=png&optimize=medium) Along with Adobe’s primary brand color palette (red, black, grey, and white), there’s also an extended color palette that brings a modern and bold personality to the Adobe brand. These colors are the starting point for graphics, diagrams and icons, illustrations, and backgrounds — and there are additional considerations for colors in Creative Cloud, Document Cloud, Experience Cloud, and Adobe Express for Spectrum 2 experiences."
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"type": "guideline",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
}
|
|
49
49
|
],
|
|
50
50
|
"sourceUrl": "https://spectrum.adobe.com/foundations/brand",
|
|
51
|
-
"lastUpdated": "2026-
|
|
51
|
+
"lastUpdated": "2026-10-12",
|
|
52
52
|
"status": "published",
|
|
53
53
|
"tags": [
|
|
54
54
|
"Brand assets",
|
package/package.json
CHANGED