Skip to content

Commit fd04d6b

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 013d2ef commit fd04d6b

File tree

67 files changed

+1496
-1448
lines changed

Some content is hidden

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

67 files changed

+1496
-1448
lines changed

‎.storybook/assets/base.css

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* stylelint-disable selector-class-pattern -- custom storybook styles */
21
/*!
32
* Copyright 2024 Adobe. All rights reserved.
43
*
@@ -12,6 +11,7 @@
1211
* governing permissions and limitations under the License.
1312
*/
1413

14+
/* stylelint-disable selector-class-pattern */
1515
body {
1616
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
1717
--spectrum-font-style: var(--spectrum-default-font-style);
@@ -27,31 +27,12 @@ body {
2727
background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
2828
}
2929

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

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

‎.storybook/assets/index.css

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* stylelint-disable selector-class-pattern -- custom storybook styles */
21
/*!
32
* Copyright 2024 Adobe. All rights reserved.
43
*
@@ -12,6 +11,7 @@
1211
* governing permissions and limitations under the License.
1312
*/
1413

14+
/* stylelint-disable selector-class-pattern */
1515
body {
1616
--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
1717
--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
@@ -27,7 +27,7 @@ body {
2727
font-style: var(--spectrum-font-style);
2828

2929
color: var(--spectrum-neutral-content-color-default);
30-
background-color: var(--spectrum-background-base-color);
30+
background-color: var(--spectrum-background-layer-2-color);
3131
}
3232

3333
body:lang(ar) {
@@ -118,10 +118,4 @@ select:focus,
118118
border-color: rgb(2, 101, 220) !important;
119119
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
120120
}
121-
122-
nav.sidebar-container,
123-
div.sb-bar {
124-
color: var(--spectrum-neutral-content-color-default) !important;
125-
background-color: var(--spectrum-background-layer-2-color) !important;
126-
}
127121
/* stylelint-enable selector-class-pattern */

‎.storybook/decorators/utilities.js

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
21
import { html, nothing } from "lit";
32
import { styleMap } from "lit/directives/style-map.js";
43
import { when } from "lit/directives/when.js";
@@ -11,26 +10,50 @@ import { capitalize } from "lodash-es";
1110
* @param {string} props.content - The content to render in the heading or code block.
1211
* @param {string} props.size - The size of the heading to render.
1312
* @param {string} props.weight - The weight of the heading to render.
14-
* @param {string[]} props.customClasses - Additional classes to apply to the heading or code block.
1513
*/
1614
const Heading = ({
1715
semantics = "heading",
1816
content,
1917
size = "l",
2018
weight,
21-
customClasses = [],
2219
} = {}) => {
23-
return Typography({
24-
semantics,
25-
size,
26-
weight,
27-
content,
28-
skipLineBreak: true,
29-
customClasses: ["chromatic-ignore", ...customClasses],
30-
customStyles: {
31-
"color": semantics === "detail" ? "var(--spectrum-heading-color)" : undefined,
20+
if (!content) return nothing;
21+
22+
const headingStyles = {
23+
"display": "block",
24+
"color": "black",
25+
"font-family": 'adobe-clean, "adobe clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
26+
"font-size": "11px",
27+
"line-height": "1.3",
28+
"font-weight": "700",
29+
};
30+
31+
if ((size === "xxs" && semantics === "heading") || size === "l") {
32+
headingStyles["font-size"] = "14px";
33+
}
34+
35+
if (semantics === "detail") {
36+
headingStyles["letter-spacing"] = ".06em";
37+
headingStyles["text-transform"] = "uppercase";
38+
}
39+
40+
if (weight === "light") {
41+
if (semantics === "heading") {
42+
headingStyles["font-weight"] = "300";
3243
}
33-
});
44+
else {
45+
headingStyles["font-weight"] = "400";
46+
}
47+
}
48+
49+
return html`
50+
<span
51+
class="chromatic-ignore"
52+
style=${styleMap(headingStyles)}
53+
>
54+
${content}
55+
</span>
56+
`;
3457
};
3558

3659
/**

‎components/accordion/metadata/metadata.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@
77
".spectrum-Accordion--compact.spectrum-Accordion--sizeM",
88
".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
99
".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
10-
".spectrum-Accordion--sizeL",
11-
".spectrum-Accordion--sizeM",
12-
".spectrum-Accordion--sizeS",
13-
".spectrum-Accordion--sizeXL",
1410
".spectrum-Accordion--spacious",
1511
".spectrum-Accordion--spacious.spectrum-Accordion--sizeL",
1612
".spectrum-Accordion--spacious.spectrum-Accordion--sizeM",
@@ -39,6 +35,10 @@
3935
".spectrum-Accordion-itemHeading",
4036
".spectrum-Accordion-itemIconContainer",
4137
".spectrum-Accordion-itemIconContainer:dir(rtl)",
38+
".spectrum-Accordion.spectrum-Accordion--sizeL",
39+
".spectrum-Accordion.spectrum-Accordion--sizeM",
40+
".spectrum-Accordion.spectrum-Accordion--sizeS",
41+
".spectrum-Accordion.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: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -61,47 +61,47 @@
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-
}
6564

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-
}
65+
&,
66+
&.spectrum-Accordion--sizeM {
67+
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
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);
74+
}
7675

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-
}
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);
84+
}
8685

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-
}
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);
94+
}
9695

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);
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);
104+
}
105105
}
106106

107107
.spectrum-Accordion--compact {

‎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)