Skip to content

Commit 254702b

Browse files
castastrophecastastrophe
committed
chore: pull prettier updates into separate PR
1 parent 457b6cc commit 254702b

File tree

97 files changed

+18173
-4119
lines changed

Some content is hidden

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

97 files changed

+18173
-4119
lines changed

‎.husky/pre-commit

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
STAGED_FILES_TO_LINT=$(git diff --name-only --cached --diff-filter=d -- "*.ts" "*.js")
2-
STAGED_FILES_TO_ANALYZE=$(git diff --name-only --cached --diff-filter=d -- "{packages,tools}/*/src/**/!(*.css).ts")
3-
STAGED_CSS_FILES=$(git diff --name-only --cached --diff-filter=d -- "{packages,tools}/**/*.css")
42
VERSION_FILE=$(dirname "$0")/../tools/base/src/version.js
53

6-
[[ -z "$STAGED_FILES_TO_LINT" ]] || yarn eslint -f pretty $STAGED_FILES_TO_LINT
7-
[[ -z "$STAGED_FILES_TO_ANALYZE" ]] || yarn lit-analyzer $STAGED_FILES_TO_ANALYZE
8-
[[ -z "$STAGED_CSS_FILES" ]] || yarn stylelint $STAGED_CSS_FILES
4+
[[ -z $STAGED_FILES_TO_LINT ]] && yarn eslint -f pretty $STAGED_FILES_TO_LINT
95

6+
yarn analyze
7+
yarn lint:css --fix
108
yarn pretty-quick --staged
11-
12-
yarn genversion --es6 --semi $VERSION_FILE
13-
git add $VERSION_FILE
9+
yarn genversion --es6 --semi $VERSION_FILE && git add $VERSION_FILE

‎.prettierrc.yaml

-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,3 @@ trailingComma: es5
66
bracketSpacing: true
77
arrowParens: always
88
htmlWhitespaceSensitivity: ignore
9-
overrides:
10-
- files: '{tools,packages}/*/src/spectrum-*.css'
11-
options:
12-
printWidth: 500

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@
6767
"process-spectrum": "wireit",
6868
"publish:react": "yarn changeset publish --no-git-tag --tag snapshot --no-push",
6969
"push-to-remote": "git add . && git commit -m \"chore: release new versions #publish\" && git push",
70+
"spectrum-css": "wireit",
71+
"spectrum-tokens": "wireit",
72+
"spectrum-vars": "wireit",
7073
"start": "yarn storybook",
7174
"storybook": "wireit",
7275
"storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook",
@@ -95,6 +98,9 @@
9598
"vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js",
9699
"vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link"
97100
},
101+
"peerDependencies": {
102+
"common-tags": "^1.8.0"
103+
},
98104
"devDependencies": {
99105
"@changesets/changelog-github": "^0.5.0",
100106
"@changesets/cli": "^2.27.5",
@@ -381,7 +387,7 @@
381387
]
382388
},
383389
"process-spectrum": {
384-
"command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\"",
390+
"command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"",
385391
"files": [
386392
"tasks/process-spectrum.js",
387393
"packages/**/spectrum-config.js",

‎packages/accordion/src/spectrum-accordion-item.css

+214-44
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,37 @@ governing permissions and limitations under the License.
1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
1515
z-index: inherit;
16-
min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
17-
min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
16+
min-block-size: var(
17+
--mod-accordion-item-height,
18+
var(--spectrum-accordion-item-height)
19+
);
20+
min-inline-size: var(
21+
--mod-accordion-item-width,
22+
var(--spectrum-accordion-item-width)
23+
);
1824
border-block-end: 1px solid #0000;
19-
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
20-
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
25+
border-color: var(
26+
--mod-accordion-divider-color,
27+
var(--spectrum-accordion-divider-color)
28+
);
29+
border-width: var(
30+
--mod-accordion-divider-thickness,
31+
var(--spectrum-divider-thickness-small)
32+
);
2133
margin: 0;
2234
position: relative;
2335
}
2436

2537
:host(:first-child) {
2638
border-block-start: 1px solid #0000;
27-
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
28-
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
39+
border-color: var(
40+
--mod-accordion-divider-color,
41+
var(--spectrum-accordion-divider-color)
42+
);
43+
border-width: var(
44+
--mod-accordion-divider-thickness,
45+
var(--spectrum-divider-thickness-small)
46+
);
2947
}
3048

3149
#heading {
@@ -35,15 +53,43 @@ governing permissions and limitations under the License.
3553
}
3654

3755
.iconContainer {
38-
inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
39-
block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
40-
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
56+
inline-size: var(
57+
--mod-accordion-disclosure-indicator-height,
58+
var(--spectrum-accordion-disclosure-indicator-height)
59+
);
60+
block-size: var(
61+
--mod-accordion-disclosure-indicator-height,
62+
var(--spectrum-accordion-disclosure-indicator-height)
63+
);
64+
color: var(
65+
--mod-accordion-item-header-color-default,
66+
var(--spectrum-accordion-item-header-color-default)
67+
);
4168
justify-content: center;
4269
align-items: center;
43-
padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
70+
padding-inline-start: var(
71+
--mod-accordion-edge-to-disclosure-indicator-space,
72+
var(--spectrum-accordion-edge-to-disclosure-indicator-space)
73+
);
4474
display: flex;
4575
position: absolute;
46-
inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
76+
inset-block-start: max(
77+
0px,
78+
calc(
79+
(
80+
var(
81+
--mod-accordion-min-block-size,
82+
var(--spectrum-accordion-min-block-size)
83+
) -
84+
var(
85+
--mod-accordion-disclosure-indicator-height,
86+
var(
87+
--spectrum-accordion-disclosure-indicator-height
88+
)
89+
)
90+
) / 2
91+
)
92+
);
4793
}
4894

4995
.iconContainer:dir(rtl),
@@ -52,38 +98,113 @@ governing permissions and limitations under the License.
5298
}
5399

54100
#content {
55-
padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
56-
padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
57-
color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
58-
font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
59-
font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
60-
font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
61-
font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
62-
line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
101+
padding-block: var(
102+
--mod-accordion-item-content-area-top-to-content,
103+
var(--spectrum-accordion-item-content-area-top-to-content)
104+
)
105+
var(
106+
--mod-accordion-item-content-area-bottom-to-content,
107+
var(--spectrum-accordion-item-content-area-bottom-to-content)
108+
);
109+
padding-inline: var(
110+
--mod-accordion-component-edge-to-text,
111+
var(--spectrum-accordion-component-edge-to-text)
112+
)
113+
var(
114+
--mod-accordion-component-edge-to-text,
115+
var(--spectrum-accordion-component-edge-to-text)
116+
);
117+
color: var(
118+
--mod-accordion-item-content-color,
119+
var(--spectrum-accordion-item-content-color)
120+
);
121+
font-weight: var(
122+
--mod-accordion-item-content-font-weight,
123+
var(--spectrum-accordion-item-content-font-weight)
124+
);
125+
font-style: var(
126+
--mod-accordion-item-content-font-style,
127+
var(--spectrum-accordion-item-content-font-style)
128+
);
129+
font-size: var(
130+
--mod-accordion-item-content-font-size,
131+
var(--spectrum-accordion-item-content-font-size)
132+
);
133+
font-family: var(
134+
--mod-accordion-item-content-font,
135+
var(--spectrum-accordion-item-content-font)
136+
);
137+
line-height: var(
138+
--mod-accordion-item-content-line-height,
139+
var(--spectrum-accordion-item-content-line-height)
140+
);
63141
display: none;
64142
}
65143

66144
#header {
67145
box-sizing: border-box;
68-
padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space));
69-
min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size));
70-
line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
146+
padding-block: var(
147+
--mod-accordion-item-header-top-to-text-space,
148+
var(--spectrum-accordion-item-header-top-to-text-space)
149+
)
150+
var(
151+
--mod-accordion-item-header-bottom-to-text-space,
152+
var(--spectrum-accordion-item-header-bottom-to-text-space)
153+
);
154+
min-block-size: var(
155+
--mod-accordion-min-block-size,
156+
var(--spectrum-accordion-min-block-size)
157+
);
158+
line-height: var(
159+
--mod-accordion-item-header-line-height,
160+
var(--spectrum-accordion-item-header-line-height)
161+
);
71162
text-overflow: ellipsis;
72163
cursor: pointer;
73-
font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
74-
font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
75-
font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style));
76-
font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
164+
font-size: var(
165+
--mod-accordion-item-header-font-size,
166+
var(--spectrum-accordion-item-header-font-size)
167+
);
168+
font-weight: var(
169+
--mod-accordion-item-header-font-weight,
170+
var(--spectrum-accordion-item-header-font-weight)
171+
);
172+
font-style: var(
173+
--mod-accordion-item-header-font-style,
174+
var(--spectrum-accordion-item-header-font-style)
175+
);
176+
font-family: var(
177+
--mod-accordion-item-header-font,
178+
var(--spectrum-accordion-item-header-font)
179+
);
77180
appearance: none;
78181
text-align: start;
79182
inline-size: 100%;
80-
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
81-
background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));
183+
color: var(
184+
--mod-accordion-item-header-color-default,
185+
var(--spectrum-accordion-item-header-color-default)
186+
);
187+
background-color: var(
188+
--mod-accordion-background-color-default,
189+
var(--spectrum-accordion-background-color-default)
190+
);
82191
border: 0;
83192
justify-content: flex-start;
84193
align-items: center;
85-
padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
86-
padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
194+
padding-inline-start: calc(
195+
var(
196+
--mod-accordion-disclosure-indicator-to-text-space,
197+
var(--spectrum-accordion-disclosure-indicator-to-text-space)
198+
) +
199+
var(
200+
--mod-accordion-disclosure-indicator-height,
201+
var(--spectrum-accordion-disclosure-indicator-height)
202+
)
203+
);
204+
padding-inline-end: var(
205+
--mod-accordion-edge-to-text-space,
206+
var(--spectrum-accordion-edge-to-text-space)
207+
);
87208
display: flex;
88209
position: relative;
89210
}
@@ -99,50 +220,99 @@ governing permissions and limitations under the License.
99220
}
100221

101222
#header:focus-visible {
102-
border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
103-
outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color));
104-
background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus));
105-
color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus));
106-
outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1);
223+
border-radius: var(
224+
--mod-accordion-corner-radius,
225+
var(--spectrum-accordion-corner-radius)
226+
);
227+
outline: var(
228+
--mod-accordion-focus-indicator-thickness,
229+
var(--spectrum-accordion-focus-indicator-thickness)
230+
)
231+
solid
232+
var(
233+
--mod-accordion-focus-indicator-color,
234+
var(--spectrum-accordion-focus-indicator-color)
235+
);
236+
background-color: var(
237+
--mod-accordion-background-color-key-focus,
238+
var(--spectrum-accordion-background-color-key-focus)
239+
);
240+
color: var(
241+
--mod-accordion-item-header-color-key-focus,
242+
var(--spectrum-accordion-item-header-color-key-focus)
243+
);
244+
outline-offset: calc(
245+
var(
246+
--mod-accordion-focus-indicator-gap,
247+
var(--spectrum-accordion-focus-indicator-gap)
248+
) * -1
249+
);
107250
}
108251

109252
#header:active {
110-
background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down));
111-
color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down));
253+
background-color: var(
254+
--mod-accordion-background-color-down,
255+
var(--spectrum-accordion-background-color-down)
256+
);
257+
color: var(
258+
--mod-accordion-item-header-color-down,
259+
var(--spectrum-accordion-item-header-color-down)
260+
);
112261
}
113262

114263
:host([disabled]) #header,
115264
:host([disabled]) #header:focus-visible {
116-
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
265+
color: var(
266+
--mod-accordion-item-header-disabled-color,
267+
var(--spectrum-accordion-item-header-disabled-color)
268+
);
117269
background-color: initial;
118270
}
119271

120272
@media (hover: hover) {
121273
#header:hover {
122-
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
274+
background-color: var(
275+
--mod-accordion-background-color-hover,
276+
var(--spectrum-accordion-background-color-hover)
277+
);
123278
}
124279

125280
#header:hover,
126281
#header:hover + .iconContainer {
127-
color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
282+
color: var(
283+
--mod-accordion-item-header-color-hover,
284+
var(--spectrum-accordion-item-header-color-hover)
285+
);
128286
}
129287

130288
:host([open]) #header:hover {
131-
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
289+
background-color: var(
290+
--mod-accordion-background-color-hover,
291+
var(--spectrum-accordion-background-color-hover)
292+
);
132293
}
133294

134295
:host([disabled]) #header:hover {
135-
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
296+
color: var(
297+
--mod-accordion-item-header-disabled-color,
298+
var(--spectrum-accordion-item-header-disabled-color)
299+
);
136300
background-color: initial;
137301
}
138302
}
139303

140304
:host([disabled]) #header + .iconContainer {
141-
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
305+
color: var(
306+
--mod-accordion-item-header-disabled-color,
307+
var(--spectrum-accordion-item-header-disabled-color)
308+
);
142309
}
143310

144311
:host([disabled]) #content {
145-
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
312+
color: var(
313+
--mod-accordion-item-content-disabled-color,
314+
var(--spectrum-accordion-item-content-disabled-color)
315+
);
146316
}
147317

148318
@media (forced-colors: active) {

0 commit comments

Comments
 (0)