Skip to content

Commit ae2a062

Browse files
marissahuysentruytcastastrophepfultoncdransfAziz Ramos
committed
docs(textarea): add figma assets to design tab (#3327)
* docs(textarea): add figma assets to design tab --------- Co-authored-by: castastrophe <castastrophe@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com> Co-authored-by: Cory Dransfeldt <cdransfeldt@adobe.com> Co-authored-by: Aziz Ramos <azizramos@Azizs-MBP.lan> Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding <rise@heysparkbox.com> Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com> Co-authored-by: TarunAdobe <ttomar@adobe.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent bb02ab8 commit ae2a062

File tree

66 files changed

+1728
-1684
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1728
-1684
lines changed

‎.storybook/assets/base.css

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,31 +28,12 @@ body {
2828
background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
2929
}
3030

31-
nav.sidebar-container,
32-
div.sb-bar {
33-
color: var(--spectrum-neutral-content-color-default);
34-
background-color: var(--spectrum-background-base-color);
35-
}
36-
37-
nav.sidebar-container,
38-
div.sb-bar {
39-
color: var(--spectrum-neutral-content-color-default);
40-
background-color: var(--spectrum-background-layer-2-color);
41-
}
42-
43-
/* Layers around the components */
44-
body.spectrum,
45-
.docs-story {
31+
.spectrum {
4632
color: var(--spectrum-neutral-content-color-default);
4733
background-color: var(--spectrum-background-layer-1-color);
4834
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
4935
}
5036

51-
.sb-story [data-inner-container] {
52-
padding: 0 !important;
53-
border: none !important;
54-
}
55-
5637
/* Hide the SVG elements that only include references */
5738
svg:has(symbol):not(:has(use)) {
5839
display: none;

‎.storybook/assets/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ body {
2828
font-style: var(--spectrum-font-style);
2929

3030
color: var(--spectrum-neutral-content-color-default);
31-
background-color: var(--spectrum-background-base-color);
31+
background-color: var(--spectrum-background-layer-2-color);
3232
}
3333

3434
body:lang(ar) {

‎.storybook/main.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import remarkGfm from 'remark-gfm';
21
import fs from "fs";
32
import path from "path";
3+
import remarkGfm from 'remark-gfm';
44

55
// Get a list of all the folders in the components directory
66
const componentDir = path.resolve(__dirname, "../components");
@@ -33,6 +33,8 @@ export default {
3333
name: "@storybook/addon-essentials",
3434
// Supported booleans: actions, controls, docs, toolbars, measure, outline.
3535
options: {
36+
// Don't need viewports b/c the medium/large contexts are used to support scaling.
37+
viewport: false,
3638
// Don't need backgrounds b/c this is handled by the color contexts.
3739
backgrounds: false,
3840
// Configure separately

‎components/accordion/metadata/metadata.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,6 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-Accordion",
5-
".spectrum-Accordion--compact",
6-
".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
7-
".spectrum-Accordion--compact.spectrum-Accordion--sizeM",
8-
".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
9-
".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
10-
".spectrum-Accordion--sizeL",
11-
".spectrum-Accordion--sizeM",
12-
".spectrum-Accordion--sizeS",
13-
".spectrum-Accordion--sizeXL",
14-
".spectrum-Accordion--spacious",
15-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
16-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeM",
17-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
18-
".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
195
".spectrum-Accordion-item",
206
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
217
".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
@@ -39,6 +25,20 @@
3925
".spectrum-Accordion-itemHeading",
4026
".spectrum-Accordion-itemIconContainer",
4127
".spectrum-Accordion-itemIconContainer:dir(rtl)",
28+
".spectrum-Accordion.spectrum-Accordion--compact",
29+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeL",
30+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeM",
31+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeS",
32+
".spectrum-Accordion.spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
33+
".spectrum-Accordion.spectrum-Accordion--sizeL",
34+
".spectrum-Accordion.spectrum-Accordion--sizeM",
35+
".spectrum-Accordion.spectrum-Accordion--sizeS",
36+
".spectrum-Accordion.spectrum-Accordion--sizeXL",
37+
".spectrum-Accordion.spectrum-Accordion--spacious",
38+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
39+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeM",
40+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
41+
".spectrum-Accordion.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
4242
".spectrum-Accordion:dir(rtl)",
4343
".spectrum-Accordion:lang(ja)",
4444
".spectrum-Accordion:lang(ko)",

‎components/accordion/themes/spectrum-two.css

Lines changed: 80 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -61,100 +61,100 @@
6161

6262
--spectrum-accordion-item-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
6363
--spectrum-accordion-item-content-line-height-cjk: var(--spectrum-cjk-line-height-100);
64-
}
65-
66-
.spectrum-Accordion,
67-
.spectrum-Accordion--sizeM {
68-
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
69-
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
70-
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
71-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
72-
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
73-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
74-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
75-
}
76-
77-
.spectrum-Accordion--sizeS {
78-
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
79-
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
80-
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
81-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
82-
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
83-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
84-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
85-
}
86-
87-
.spectrum-Accordion--sizeL {
88-
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
89-
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
90-
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
91-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
92-
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
93-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
94-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
95-
}
96-
97-
.spectrum-Accordion--sizeXL {
98-
--spectrum-accordion-item-height: var(--spectrum-component-height-400);
99-
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
100-
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
101-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
102-
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
103-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
104-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
105-
}
106-
107-
.spectrum-Accordion--compact {
108-
&.spectrum-Accordion--sizeS {
109-
--spectrum-accordion-item-height: var(--spectrum-component-height-75);
110-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
111-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
112-
}
11364

11465
&,
11566
&.spectrum-Accordion--sizeM {
116-
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
117-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
118-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
119-
}
120-
121-
&.spectrum-Accordion--sizeL {
12267
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
123-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
124-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
68+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
69+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
70+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
71+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
72+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
73+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
12574
}
12675

127-
&.spectrum-Accordion--sizeXL {
128-
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
129-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
130-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
76+
&.spectrum-Accordion--sizeS {
77+
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
78+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
79+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
80+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
81+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
82+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
83+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
13184
}
132-
}
13385

134-
.spectrum-Accordion--spacious {
135-
&.spectrum-Accordion--sizeS {
136-
--spectrum-accordion-item-header-line-height: 1.25;
137-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
138-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
86+
&.spectrum-Accordion--sizeL {
87+
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
88+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
89+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
90+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
91+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
92+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
93+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
13994
}
14095

141-
&,
142-
&.spectrum-Accordion--sizeM {
143-
--spectrum-accordion-item-header-line-height: 1.278;
144-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
145-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
96+
&.spectrum-Accordion--sizeXL {
97+
--spectrum-accordion-item-height: var(--spectrum-component-height-400);
98+
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
99+
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
100+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
101+
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
102+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
103+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
146104
}
147105

148-
&.spectrum-Accordion--sizeL {
149-
--spectrum-accordion-item-header-line-height: 1.273;
150-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
151-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
106+
&.spectrum-Accordion--compact {
107+
&.spectrum-Accordion--sizeS {
108+
--spectrum-accordion-item-height: var(--spectrum-component-height-75);
109+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
110+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
111+
}
112+
113+
&,
114+
&.spectrum-Accordion--sizeM {
115+
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
116+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
117+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
118+
}
119+
120+
&.spectrum-Accordion--sizeL {
121+
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
122+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
123+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
124+
}
125+
126+
&.spectrum-Accordion--sizeXL {
127+
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
128+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
129+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
130+
}
152131
}
153132

154-
&.spectrum-Accordion--sizeXL {
155-
--spectrum-accordion-item-header-line-height: 1.25;
156-
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
157-
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
133+
&.spectrum-Accordion--spacious {
134+
&.spectrum-Accordion--sizeS {
135+
--spectrum-accordion-item-header-line-height: 1.25;
136+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
137+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
138+
}
139+
140+
&,
141+
&.spectrum-Accordion--sizeM {
142+
--spectrum-accordion-item-header-line-height: 1.278;
143+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
144+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
145+
}
146+
147+
&.spectrum-Accordion--sizeL {
148+
--spectrum-accordion-item-header-line-height: 1.273;
149+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
150+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
151+
}
152+
153+
&.spectrum-Accordion--sizeXL {
154+
--spectrum-accordion-item-header-line-height: 1.25;
155+
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
156+
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
157+
}
158158
}
159159
}
160160
}

‎components/actionbutton/metadata/metadata.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-ActionButton",
5-
".spectrum-ActionButton--sizeL",
6-
".spectrum-ActionButton--sizeM",
7-
".spectrum-ActionButton--sizeS",
8-
".spectrum-ActionButton--sizeXL",
9-
".spectrum-ActionButton--sizeXS",
105
".spectrum-ActionButton-hold",
116
".spectrum-ActionButton-hold + .spectrum-ActionButton-icon",
127
".spectrum-ActionButton-icon",
@@ -22,6 +17,11 @@
2217
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
2318
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
2419
".spectrum-ActionButton.spectrum-ActionButton--quiet",
20+
".spectrum-ActionButton.spectrum-ActionButton--sizeL",
21+
".spectrum-ActionButton.spectrum-ActionButton--sizeM",
22+
".spectrum-ActionButton.spectrum-ActionButton--sizeS",
23+
".spectrum-ActionButton.spectrum-ActionButton--sizeXL",
24+
".spectrum-ActionButton.spectrum-ActionButton--sizeXS",
2525
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2626
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected",
2727
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected.spectrum-ActionButton--emphasized",

0 commit comments

Comments
 (0)