Skip to content

Commit 7ace8d0

Browse files
castastrophecastastrophe
authored
Merge branch 'main' into jawinn/css-621-button-wrapping-text
2 parents b89f1de + 030fdf4 commit 7ace8d0

File tree

7 files changed

+696
-147
lines changed

7 files changed

+696
-147
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,6 @@ build-storybook.log
2424
# Chromatic
2525
chromatic-build-*.xml
2626
chromatic-diagnostics*.json
27+
28+
# Custom diff tool
29+
.diff-output

‎README.md

Lines changed: 90 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -45,56 +45,56 @@ Spectrum CSS components have build output that uses CSS custom properties to cha
4545
```html
4646
<!-- Include global variables first -->
4747
<link
48-
rel="stylesheet"
49-
href="node_modules/@spectrum-css/vars/dist/spectrum-global.css"
48+
rel="stylesheet"
49+
href="node_modules/@spectrum-css/vars/dist/spectrum-global.css"
5050
/>
5151

5252
<!-- Include only the scales your application needs -->
5353
<link
54-
rel="stylesheet"
55-
href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css"
54+
rel="stylesheet"
55+
href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css"
5656
/>
5757
<link
58-
rel="stylesheet"
59-
href="node_modules/@spectrum-css/vars/dist/spectrum-large.css"
58+
rel="stylesheet"
59+
href="node_modules/@spectrum-css/vars/dist/spectrum-large.css"
6060
/>
6161

6262
<!-- Include only the colorstops your application needs -->
6363
<link
64-
rel="stylesheet"
65-
href="node_modules/@spectrum-css/vars/dist/spectrum-light.css"
64+
rel="stylesheet"
65+
href="node_modules/@spectrum-css/vars/dist/spectrum-light.css"
6666
/>
6767
<link
68-
rel="stylesheet"
69-
href="node_modules/@spectrum-css/vars/dist/spectrum-dark.css"
68+
rel="stylesheet"
69+
href="node_modules/@spectrum-css/vars/dist/spectrum-dark.css"
7070
/>
7171
<link
72-
rel="stylesheet"
73-
href="node_modules/@spectrum-css/vars/dist/spectrum-darkest.css"
72+
rel="stylesheet"
73+
href="node_modules/@spectrum-css/vars/dist/spectrum-darkest.css"
7474
/>
7575

7676
<!-- Include tokens -->
7777
<link
78-
rel="stylesheet"
79-
href="node_modules/@spectrum-css/tokens/dist/index.css"
78+
rel="stylesheet"
79+
href="node_modules/@spectrum-css/tokens/dist/index.css"
8080
/>
8181

8282
<!-- Include index-vars.css for all components you need -->
8383
<link
84-
rel="stylesheet"
85-
href="node_modules/@spectrum-css/page/dist/index-vars.css"
84+
rel="stylesheet"
85+
href="node_modules/@spectrum-css/page/dist/index-vars.css"
8686
/>
8787
<link
88-
rel="stylesheet"
89-
href="node_modules/@spectrum-css/typography/dist/index-vars.css"
88+
rel="stylesheet"
89+
href="node_modules/@spectrum-css/typography/dist/index-vars.css"
9090
/>
9191
<link
92-
rel="stylesheet"
93-
href="node_modules/@spectrum-css/icon/dist/index-vars.css"
92+
rel="stylesheet"
93+
href="node_modules/@spectrum-css/icon/dist/index-vars.css"
9494
/>
9595
<link
96-
rel="stylesheet"
97-
href="node_modules/@spectrum-css/button/dist/index-vars.css"
96+
rel="stylesheet"
97+
href="node_modules/@spectrum-css/button/dist/index-vars.css"
9898
/>
9999
```
100100

@@ -108,27 +108,27 @@ To switch to Express, load vars from `@spectrum-css/expressvars` instead of `@sp
108108

109109
```html
110110
<html class="spectrum spectrum--medium spectrum--light spectrum--express">
111-
<head>
112-
<!-- Include only the scales your application needs -->
113-
<link
114-
rel="stylesheet"
115-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-medium.css"
116-
/>
117-
<link
118-
rel="stylesheet"
119-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-large.css"
120-
/>
121-
122-
<!-- Include only the colorstops your application needs -->
123-
<link
124-
rel="stylesheet"
125-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-light.css"
126-
/>
127-
<link
128-
rel="stylesheet"
129-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-dark.css"
130-
/>
131-
</head>
111+
<head>
112+
<!-- Include only the scales your application needs -->
113+
<link
114+
rel="stylesheet"
115+
href="node_modules/@spectrum-css/expressvars/dist/spectrum-medium.css"
116+
/>
117+
<link
118+
rel="stylesheet"
119+
href="node_modules/@spectrum-css/expressvars/dist/spectrum-large.css"
120+
/>
121+
122+
<!-- Include only the colorstops your application needs -->
123+
<link
124+
rel="stylesheet"
125+
href="node_modules/@spectrum-css/expressvars/dist/spectrum-light.css"
126+
/>
127+
<link
128+
rel="stylesheet"
129+
href="node_modules/@spectrum-css/expressvars/dist/spectrum-dark.css"
130+
/>
131+
</head>
132132
</html>
133133
```
134134

@@ -169,7 +169,7 @@ These icons are released within the [`@adobe/spectrum-css-workflow-icons`](https
169169

170170
```js
171171
loadIcons(
172-
"node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
172+
"node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
173173
);
174174
```
175175

@@ -212,12 +212,12 @@ Spectrum CSS is designed to be as flexible as possible, and as such, leaves room
212212

213213
```json
214214
{
215-
"name": "my-project",
216-
"devDependencies": {
217-
"@spectrum-css/button": "^3.0.0",
218-
"@spectrum-css/page": "^3.0.0",
219-
"@spectrum-css/vars": "^3.0.0"
220-
}
215+
"name": "my-project",
216+
"devDependencies": {
217+
"@spectrum-css/button": "^3.0.0",
218+
"@spectrum-css/page": "^3.0.0",
219+
"@spectrum-css/vars": "^3.0.0"
220+
}
221221
}
222222
```
223223

@@ -243,12 +243,12 @@ Next, create a `postcss.config.js`:
243243

244244
```js
245245
module.exports = {
246-
plugins: [
247-
require("postcss-import"),
248-
require("postcss-varfallback"),
249-
require("postcss-dropunusedvars"),
250-
require("cssnano"),
251-
],
246+
plugins: [
247+
require("postcss-import"),
248+
require("postcss-varfallback"),
249+
require("postcss-dropunusedvars"),
250+
require("cssnano"),
251+
],
252252
};
253253
```
254254

@@ -278,34 +278,34 @@ Then, add something like this to your `postcss.config.js`:
278278

279279
```js
280280
module.exports = {
281-
plugins: [
282-
require("postcss-transformselectors")({
283-
replace: [
284-
{ search: ".spectrum-Heading--sizeXXL", replace: "h1" },
285-
{ search: ".spectrum-Heading--sizeXL", replace: "h2" },
286-
{ search: ".spectrum-Heading--sizeL", replace: "h3" },
287-
],
288-
transform: (selector) => {
289-
if (selector.startsWith(".spectrum-Heading")) {
290-
// Operate on each selector in a selector list
291-
return selector
292-
.split(",")
293-
.map((selectorPart) => {
294-
// Create separate selectors for each reference to .spectrum-Heading
295-
return ["h1", "h2", "h3"]
296-
.map((h) => {
297-
return selectorPart.replace(".spectrum-Heading", h);
298-
})
299-
.join(",");
300-
})
301-
.join(",");
302-
}
303-
304-
// Don't mess with things that don't have .spectrum-Heading in them
305-
return selector;
306-
},
307-
}),
308-
],
281+
plugins: [
282+
require("postcss-transformselectors")({
283+
replace: [
284+
{ search: ".spectrum-Heading--sizeXXL", replace: "h1" },
285+
{ search: ".spectrum-Heading--sizeXL", replace: "h2" },
286+
{ search: ".spectrum-Heading--sizeL", replace: "h3" },
287+
],
288+
transform: (selector) => {
289+
if (selector.startsWith(".spectrum-Heading")) {
290+
// Operate on each selector in a selector list
291+
return selector
292+
.split(",")
293+
.map((selectorPart) => {
294+
// Create separate selectors for each reference to .spectrum-Heading
295+
return ["h1", "h2", "h3"]
296+
.map((h) => {
297+
return selectorPart.replace(".spectrum-Heading", h);
298+
})
299+
.join(",");
300+
})
301+
.join(",");
302+
}
303+
304+
// Don't mess with things that don't have .spectrum-Heading in them
305+
return selector;
306+
},
307+
}),
308+
],
309309
};
310310
```
311311

@@ -330,53 +330,14 @@ This project is leveraging caching from [Nx](https://nx.dev/) to speed up the bu
330330

331331
To spin up the local development environment ([Storybook](https://storybook.js.org/docs/web-components/get-started/introduction)) without first building the components, use: `SKIP_BUILD=true yarn start` as `yarn start` alone will start from a clean build.
332332

333-
### Documentation site
333+
### Tasks
334334

335-
#### Local documentation site
335+
This project includes several small scripts to help with common tasks.
336336

337-
Building the project will build and launch the project documentation site in your browser automatically.
338-
339-
See [site generation](site/README.md) for more information.
340-
341-
#### Generating and deploying external documentation site
342-
343-
Checkout `nextjs` branch, pull, and install dependencies.
344-
345-
```shell
346-
git checkout nextjs
347-
git pull
348-
yarn install
349-
```
350-
351-
Update `yml` data from main
352-
353-
```shell
354-
yarn importdata
355-
```
356-
357-
Run `prep` script to build the static site locally
358-
359-
```shell
360-
yarn prep
361-
```
362-
363-
Commit changes
364-
365-
```shell
366-
git commit -am '<message here>'
367-
```
368-
369-
Deploy
370-
371-
```shell
372-
yarn deploy
373-
```
374-
375-
Push changes to `nextjs` branch
376-
377-
```shell
378-
git push origin nextjs
379-
```
337+
- `yarn compare`: This compares the current version of components with the previous versions published to NPM and output a list of all the changes that have been made. This is useful for reviewing changes before a release. The information is provided in the command-line output as well as in a simple web page that is opened in your default browser upon completion. The web page includes links to the visual diffs for each component when the file sizes have changed. Components with no changes are not included in the output.
338+
- `yarn refresh:env`: This copies values for the project's `.env` file (an asset never committed to the repo as it contains login secrets) by using the `.env.example` file as a template. This script is useful when you need to update the `.env` file with new values from the `.env.example` file or when you checkout or clean the repo and need to restore the `.env` file.
339+
- `yarn refresh:directory`: This will remove any deprecated package folders that are no longer in use. The goal is to make migrating to a new project architecture easier for the most number of users.
340+
- `yarn lint:components`: Provides helpful updates and warnings for a component's package.json file. This helps keep all components in alignment.
380341

381342
### CLI
382343

‎package.json

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,22 @@
3535
"clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
3636
"clean:docs": "rimraf dist",
3737
"clean:preview": "nx clean @spectrum-css/preview",
38+
"precompare": "yarn build:components",
39+
"compare": "node ./tasks/compare-compiled-output.js",
3840
"predev": "yarn build:components",
3941
"dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev",
4042
"docs:mod": "node tasks/mod-extractor.js",
4143
"postdocs:mod": "prettier --cache --write components/*/metadata/*.md > /dev/null",
44+
"preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0",
4245
"lint:components": "node ./tasks/packageLint.js",
4346
"lint:styles": "stylelint",
44-
"migration:clean": "test -n \"${BASH_VERSION}\" && bash ./tasks/clean-up-after-migration.sh || exit 0",
4547
"mv:preview": "rimraf dist/preview && mv .storybook/storybook-static dist/preview",
4648
"new": "nx run @spectrum-css/generator:new",
4749
"precommit": "lint-staged",
48-
"prepare": "husky install && run-p refresh:env migration:clean",
50+
"prepare": "husky install && run-p refresh:*",
4951
"prepare:site": "run-s clean:docs build:all",
50-
"refresh:env": "test -n \"${BASH_VERSION}\" && bash ./tasks/copy-env-from-root.sh || exit 0",
52+
"refresh:directory": "test -n $BASH_VERSION && bash ./tasks/clean-up-after-migration.sh || exit 0",
53+
"refresh:env": "test -n $BASH_VERSION && bash ./tasks/copy-env-from-root.sh || exit 0",
5154
"prerelease": "yarn version:build",
5255
"release": "lerna publish",
5356
"release:beta-from-package": "yarn release from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private",
@@ -76,7 +79,11 @@
7679
"@nx/devkit": "^17.0.2",
7780
"@spectrum-css/expressvars": "^3.0.9",
7881
"@spectrum-css/vars": "^9.0.8",
82+
"colors": "^1.4.0",
7983
"conventional-changelog-spectrum": "^1.0.2",
84+
"diff": "^5.1.0",
85+
"diff2html": "^3.4.45",
86+
"fast-glob": "^3.3.2",
8087
"gh-pages": "^6.0.0",
8188
"gulp": "^4.0.0",
8289
"gulp-replace": "^1.0.0",
@@ -85,18 +92,22 @@
8592
"lerna": "^6.6.2",
8693
"lint-staged": "^14.0.0",
8794
"loadicons": "^1.0.0",
95+
"lodash": "^4.17.21",
8896
"lunr": "^2.3.6",
8997
"markdown-it": "^12.3.2",
98+
"npm-registry-fetch": "^16.1.0",
9099
"npm-run-all": "^4.1.5",
100+
"nunjucks": "^3.2.4",
91101
"nx": "^17.0.3",
92102
"prettier": "^2.8.8",
93103
"prettier-package-json": "^2.8.0",
94104
"prismjs": "^1.23.0",
95-
"rimraf": "^5.0.1",
105+
"rimraf": "^5.0.5",
96106
"semver": "^7.5.1",
97107
"stylelint": "^15.11.0",
98108
"stylelint-config-standard": "^34.0.0",
99109
"stylelint-use-logical": "^2.1.0",
110+
"tar": "^6.2.0",
100111
"through2": "^3.0.1",
101112
"yargs": "^17.7.2"
102113
},

0 commit comments

Comments
 (0)