Skip to content

Commit 48cf049

Browse files
castastrophejawinnpfulton
committed
chore: run branch through format; update pathing and fix errors (#2700)
* feat(fieldlabel)!: s2 migration (#2569) BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list. * chore: rebase against main and update components to use prerelease tokens * chore: run branch through format; update pathing and fix errors * chore: add changeset for css update --------- Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent ca187a4 commit 48cf049

File tree

38 files changed

+469
-451
lines changed

38 files changed

+469
-451
lines changed

‎.changeset/perfect-dogs-smash.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/button": patch
3+
---
4+
5+
chore: run branch through formatter

‎.storybook/package.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
14-
"@spectrum-css/tokens": "^14.0.0-next.6",
14+
"@spectrum-css/tokens": "^14.0.0-next.7",
1515
"@spectrum-css/ui-icons": "^1.1.2"
1616
},
1717
"devDependencies": {
@@ -50,5 +50,12 @@
5050
"storybook": "^8.0.9",
5151
"style-loader": "4.0.0",
5252
"webpack": "^5.91.0"
53-
}
53+
},
54+
"keywords": [
55+
"adobe",
56+
"css",
57+
"design system",
58+
"spectrum",
59+
"storybook"
60+
]
5461
}

‎components/actionbutton/metadata/mods.md

+3
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
| `--mod-actionbutton-min-width` |
5050
| `--mod-actionbutton-static-content-color` |
5151
| `--mod-actionbutton-text-to-visual` |
52+
| `--mod-animation-duration-100` |
5253
| `--mod-button-animation-duration` |
5354
| `--mod-button-font-family` |
5455
| `--mod-button-line-height` |
56+
| `--mod-line-height-100` |
57+
| `--mod-sans-font-family-stack` |

‎components/actiongroup/CHANGELOG.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
88
🗓
99
2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.2.5...@spectrum-css/actiongroup@5.0.0)
1010

11-
* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
11+
- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
1212

13-
###
14-
🛑 BREAKING CHANGES
13+
###
1514

16-
*
17-
- Removes component-builder & component-builder-simple for script leveraging postcss
15+
🛑 BREAKING CHANGES
16+
17+
-
18+
19+
* Removes component-builder & component-builder-simple for script leveraging postcss
1820

19-
- Imports added to index.css and themes/express.css
21+
* Imports added to index.css and themes/express.css
2022

2123
<a name="4.2.5"></a>
2224
##4.2.5

‎components/button/index.css

+4-12
Original file line numberDiff line numberDiff line change
@@ -142,20 +142,12 @@ governing permissions and limitations under the License.
142142
}
143143

144144
.spectrum-Icon {
145-
/* Any block-size difference between the intended workflow icon size and actual icon used.
145+
/* stylelint-disable-next-line custom-property-pattern -- Any block-size difference between the intended workflow icon size and actual icon used.
146146
Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
147-
--_icon-size-difference: max(0px,
148-
var(--spectrum-button-intended-icon-size) -
149-
var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
150-
);
147+
--_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
151148

152-
margin-block-start: var(--mod-button-icon-margin-block-start,
153-
max(0px,
154-
var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
155-
var(--mod-button-border-width, var(--spectrum-button-border-width)) +
156-
(var(--_icon-size-difference, 0px) / 2)
157-
)
158-
);
149+
/* stylelint-disable-next-line custom-property-pattern -- see note above */
150+
margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
159151

160152
margin-inline-start: calc(
161153
var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) -

‎components/button/metadata/mods.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
| Modifiable custom properties |
22
| ------------------------------------------ |
3+
| `--mod-animation-duration-100` |
34
| `--mod-bold-font-weight` |
45
| `--mod-button-animation-duration` |
56
| `--mod-button-background-color-default` |
@@ -44,4 +45,6 @@
4445
| `--mod-button-top-to-icon` |
4546
| `--mod-button-top-to-text` |
4647
| `--mod-focus-indicator-gap` |
48+
| `--mod-line-height-100` |
49+
| `--mod-sans-font-family-stack` |
4750
| `--mod-static-black-focus-indicator-color` |

‎components/button/stories/button.stories.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
2+
13
import { html } from "lit";
24
import { styleMap } from "lit/directives/style-map.js";
3-
import { when } from "lit/directives/when.js";
4-
import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
55

66
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
77
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
@@ -14,7 +14,6 @@ import { Template } from "./template";
1414
export default {
1515
title: "Components/Button",
1616
component: "Button",
17-
decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
1817
argTypes: {
1918
size: {
2019
name: "Size",
@@ -146,6 +145,7 @@ export default {
146145
}
147146
},
148147
decorators: [
148+
withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"),
149149
(Story, context) => html`
150150
<style>
151151
.spectrum-Detail { display: inline-block; }

‎components/buttongroup/CHANGELOG.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
88
🗓
99
2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.2.5...@spectrum-css/buttongroup@7.0.0)
1010

11-
* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
11+
- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
1212

13-
###
14-
🛑 BREAKING CHANGES
13+
###
1514

16-
*
17-
- Removes component-builder & component-builder-simple for script leveraging postcss
15+
🛑 BREAKING CHANGES
1816

19-
- Imports added to index.css and themes/express.css
17+
-
18+
19+
* Removes component-builder & component-builder-simple for script leveraging postcss
20+
21+
* Imports added to index.css and themes/express.css
2022

2123
<a name="6.2.5"></a>
2224
##6.2.5

‎components/checkbox/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/icon": ">=4",
26+
"@spectrum-css/tokens": ">=14.0.0-next.3"
27+
},
2428
"keywords": [
2529
"spectrum",
2630
"css",
2731
"design system",
2832
"adobe"
2933
],
30-
"peerDependencies": {
31-
"@spectrum-css/icon": ">=4",
32-
"@spectrum-css/tokens": ">=14.0.0-next.3"
33-
},
3434
"publishConfig": {
3535
"access": "public"
3636
}

‎components/clearbutton/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/icon": ">=4",
26+
"@spectrum-css/tokens": ">=14.0.0-next.3"
27+
},
2428
"keywords": [
2529
"spectrum",
2630
"css",
2731
"design system",
2832
"adobe"
2933
],
30-
"peerDependencies": {
31-
"@spectrum-css/icon": ">=4",
32-
"@spectrum-css/tokens": ">=14.0.0-next.3"
33-
},
3434
"publishConfig": {
3535
"access": "public"
3636
}

‎components/closebutton/metadata/mods.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
| Modifiable custom properties |
22
| --------------------------------------------- |
3+
| `--mod-animation-duration-100` |
34
| `--mod-button-animation-duration` |
45
| `--mod-button-font-family` |
56
| `--mod-button-line-height` |
@@ -23,3 +24,5 @@
2324
| `--mod-closebutton-margin-inline` |
2425
| `--mod-closebutton-margin-top` |
2526
| `--mod-closebutton-width` |
27+
| `--mod-line-height-100` |
28+
| `--mod-sans-font-family-stack` |

‎components/closebutton/package.json

+36-38
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,38 @@
11
{
2-
"name": "@spectrum-css/closebutton",
3-
"version": "5.0.0-next.2",
4-
"description": "The Spectrum CSS close button component",
5-
"license": "Apache-2.0",
6-
"author": "Adobe",
7-
"homepage": "https://opensource.adobe.com/spectrum-css/closebutton",
8-
"repository": {
9-
"type": "git",
10-
"url": "https://github.com/adobe/spectrum-css.git",
11-
"directory": "components/closebutton"
12-
},
13-
"bugs": {
14-
"url": "https://github.com/adobe/spectrum-css/issues"
15-
},
16-
"main": "dist/index.css",
17-
"files": [
18-
"dist/*",
19-
"CHANGELOG.md",
20-
"package.json",
21-
"stories/template.js",
22-
"metadata/mods.md"
23-
],
24-
"peerDependencies": {
25-
"@spectrum-css/icon": ">=4",
26-
"@spectrum-css/tokens": ">=14.0.0-next.3"
27-
},
28-
"devDependencies": {
29-
"@spectrum-css/commons": "^10.0.0"
30-
},
31-
"keywords": [
32-
"spectrum",
33-
"css",
34-
"design system",
35-
"adobe"
36-
],
37-
"publishConfig": {
38-
"access": "public"
39-
}
2+
"name": "@spectrum-css/closebutton",
3+
"version": "5.0.0-next.2",
4+
"description": "The Spectrum CSS close button component",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-css/closebutton",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-css.git",
11+
"directory": "components/closebutton"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"main": "dist/index.css",
17+
"files": [
18+
"dist/*",
19+
"metadata/mods.md",
20+
"stories/template.js"
21+
],
22+
"peerDependencies": {
23+
"@spectrum-css/icon": ">=4",
24+
"@spectrum-css/tokens": ">=14.0.0-next.3"
25+
},
26+
"devDependencies": {
27+
"@spectrum-css/commons": "^10.0.0"
28+
},
29+
"keywords": [
30+
"adobe",
31+
"css",
32+
"design system",
33+
"spectrum"
34+
],
35+
"publishConfig": {
36+
"access": "public"
37+
}
4038
}

‎components/datepicker/package.json

+36-38
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,38 @@
11
{
2-
"name": "@spectrum-css/datepicker",
3-
"version": "3.0.0",
4-
"description": "The Spectrum CSS datepicker component",
5-
"license": "Apache-2.0",
6-
"author": "Adobe",
7-
"homepage": "https://opensource.adobe.com/spectrum-css/",
8-
"repository": {
9-
"type": "git",
10-
"url": "https://github.com/adobe/spectrum-css.git",
11-
"directory": "components/datepicker"
12-
},
13-
"bugs": {
14-
"url": "https://github.com/adobe/spectrum-css/issues"
15-
},
16-
"main": "dist/index.css",
17-
"files": [
18-
"dist/*",
19-
"CHANGELOG.md",
20-
"package.json",
21-
"stories/template.js",
22-
"metadata/mods.md"
23-
],
24-
"peerDependencies": {
25-
"@spectrum-css/calendar": ">=4",
26-
"@spectrum-css/pickerbutton": ">=4",
27-
"@spectrum-css/popover": ">=6",
28-
"@spectrum-css/textfield": ">=6",
29-
"@spectrum-css/tokens": ">=14.0.0-next.3"
30-
},
31-
"keywords": [
32-
"spectrum",
33-
"css",
34-
"design system",
35-
"adobe"
36-
],
37-
"publishConfig": {
38-
"access": "public"
39-
}
2+
"name": "@spectrum-css/datepicker",
3+
"version": "3.0.0",
4+
"description": "The Spectrum CSS datepicker component",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-css/",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-css.git",
11+
"directory": "components/datepicker"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"main": "dist/index.css",
17+
"files": [
18+
"dist/*",
19+
"metadata/mods.md",
20+
"stories/template.js"
21+
],
22+
"peerDependencies": {
23+
"@spectrum-css/calendar": ">=4",
24+
"@spectrum-css/pickerbutton": ">=4",
25+
"@spectrum-css/popover": ">=6",
26+
"@spectrum-css/textfield": ">=6",
27+
"@spectrum-css/tokens": ">=14.0.0-next.3"
28+
},
29+
"keywords": [
30+
"adobe",
31+
"css",
32+
"design system",
33+
"spectrum"
34+
],
35+
"publishConfig": {
36+
"access": "public"
37+
}
4038
}

‎components/dial/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

‎components/divider/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
"stories/template.js",
2222
"metadata/mods.md"
2323
],
24+
"peerDependencies": {
25+
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
},
2427
"keywords": [
2528
"spectrum",
2629
"css",
2730
"design system",
2831
"adobe"
2932
],
30-
"peerDependencies": {
31-
"@spectrum-css/tokens": ">=14.0.0-next.3"
32-
},
3333
"publishConfig": {
3434
"access": "public"
3535
}

0 commit comments

Comments
 (0)