Skip to content

Commit 00e4866

Browse files
castastrophecastastrophe
committed
chore(clearbutton): add deprecated tag 3.0.0 notes to changelog
1 parent 4448447 commit 00e4866

File tree

35 files changed

+1221
-2744
lines changed

35 files changed

+1221
-2744
lines changed

‎.github/workflows/pr-build-and-deploy.yml

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,9 @@ jobs:
1818
with:
1919
node-version: 16
2020
- name: Install dependencies
21-
run: yarn install
22-
- name: Clean everything
23-
run: yarn clean
24-
- name: Build components
25-
run: yarn build:components
26-
- name: Build docs site
27-
run: yarn build:site
28-
- name: Build Storybook (preview)
29-
run: yarn workspace @spectrum-css/preview build
30-
- name: Move Storybook build to dist
31-
run: yarn postbuild:all
21+
run: yarn install --frozen-lockfile
22+
- name: Build
23+
run: yarn build:all
3224
- name: Deploy to Netlify
3325
uses: nwtgck/actions-netlify@v2
3426
with:

‎README.md

Lines changed: 88 additions & 88 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

82-
<!-- Include index-vars.css for all components you need -->
82+
<!-- Include index.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.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.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.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.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

@@ -195,7 +195,7 @@ For Arabic, a right-to-left language:
195195

196196
### Variable fallbacks
197197

198-
Each component has a `dist/vars.css` file that contains declarations for each component-level variable used by the component. The CSS in `dist/index-vars.css` references these variables, but has fallbacks for the global variables or hardcoded value that that the component-level variables resolve to.
198+
Each component has a `dist/vars.css` file that contains declarations for each component-level variable used by the component. The CSS in `dist/index.css` references these variables, but has fallbacks for the global variables or hardcoded value that that the component-level variables resolve to.
199199

200200
As such, **you do not need to include `dist/vars.css`** unless:
201201

@@ -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

@@ -227,8 +227,8 @@ You've created an `index.css` that imports a few components, a scale, and a colo
227227
@import "node_modules/@spectrum-css/vars/dist/spectrum-global.css";
228228
@import "node_modules/@spectrum-css/vars/dist/spectrum-medium.css";
229229
@import "node_modules/@spectrum-css/vars/dist/spectrum-light.css";
230-
@import "node_modules/@spectrum-css/page/dist/index-vars.css";
231-
@import "node_modules/@spectrum-css/button/dist/index-vars.css";
230+
@import "node_modules/@spectrum-css/page/dist/index.css";
231+
@import "node_modules/@spectrum-css/button/dist/index.css";
232232
```
233233

234234
To build an more optimized bundle, you can employ a few simple PostCSS plugins. First, install them:
@@ -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

‎components/actionbar/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@
1818
"build": "gulp"
1919
},
2020
"peerDependencies": {
21-
"@spectrum-css/actionbutton": ">=3",
22-
"@spectrum-css/actiongroup": ">=3",
23-
"@spectrum-css/closebutton": ">=3",
21+
"@spectrum-css/actionbutton": ">=5",
22+
"@spectrum-css/actiongroup": ">=4",
23+
"@spectrum-css/closebutton": ">=4",
2424
"@spectrum-css/fieldlabel": ">=7",
25-
"@spectrum-css/icon": ">=3",
26-
"@spectrum-css/popover": ">=5 <=6",
27-
"@spectrum-css/tokens": ">=10"
25+
"@spectrum-css/icon": ">=4",
26+
"@spectrum-css/popover": ">=6",
27+
"@spectrum-css/tokens": ">=11"
2828
},
2929
"devDependencies": {
30-
"@spectrum-css/actionbutton": "^4.0.0-beta.0",
30+
"@spectrum-css/actionbutton": "^5.0.0",
3131
"@spectrum-css/closebutton": "^4.0.1",
3232
"@spectrum-css/component-builder-simple": "^2.0.17",
3333
"@spectrum-css/fieldlabel": "^7.0.25",

‎components/clearbutton/metadata/mods.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
| Modifiable Custom Properties |
22
| ----------------------------------------------- |
33
| `--mod-clear-button-background-color` |
4+
| `--mod-clear-button-background-color-disabled` |
45
| `--mod-clear-button-background-color-down` |
56
| `--mod-clear-button-background-color-hover` |
67
| `--mod-clear-button-background-color-key-focus` |
78
| `--mod-clear-button-height` |
89
| `--mod-clear-button-icon-color` |
10+
| `--mod-clear-button-icon-color-disabled` |
911
| `--mod-clear-button-icon-color-down` |
1012
| `--mod-clear-button-icon-color-hover` |
1113
| `--mod-clear-button-icon-color-key-focus` |

‎components/divider/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
"build": "gulp"
1919
},
2020
"peerDependencies": {
21-
"@spectrum-css/tokens": ">=10"
21+
"@spectrum-css/tokens": ">=10 <=11"
2222
},
2323
"devDependencies": {
24-
"@spectrum-css/actionbutton": "^4.0.0-beta.0",
24+
"@spectrum-css/actionbutton": "^5.0.0",
2525
"@spectrum-css/component-builder-simple": "^2.0.17",
2626
"@spectrum-css/tokens": "^11.2.1",
2727
"gulp": "^4.0.0"

0 commit comments

Comments
 (0)