Skip to content

Commit 612fa85

Browse files
jawinncastastrophe
authored andcommitted
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.
1 parent 01cd075 commit 612fa85

File tree

91 files changed

+467
-1058
lines changed

Some content is hidden

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

91 files changed

+467
-1058
lines changed

components/accordion/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,11 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/icon": ">=7",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"devDependencies": {
3232
"@spectrum-css/icon": "9.0.1",
33-
"@spectrum-css/tokens": "16.0.0",
34-
"eslint": "^8.57.0",
35-
"npm-run-all2": "^7.0.2",
36-
"prettier": "^3.4.2",
37-
"stylelint": "^16.9.0"
33+
"@spectrum-css/tokens": "14.0.0-next.0"
3834
},
3935
"keywords": [
4036
"design-system",

components/actionbar/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,14 @@
2929
"@spectrum-css/closebutton": ">=5",
3030
"@spectrum-css/fieldlabel": ">=8",
3131
"@spectrum-css/popover": ">=7",
32-
"@spectrum-css/tokens": ">=16"
32+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3333
},
3434
"devDependencies": {
3535
"@spectrum-css/actiongroup": "6.0.1",
3636
"@spectrum-css/closebutton": "5.0.0-next.2",
3737
"@spectrum-css/fieldlabel": "10.0.1",
3838
"@spectrum-css/popover": "8.0.1",
39-
"@spectrum-css/tokens": "16.0.0",
40-
"eslint": "^8.57.0",
41-
"npm-run-all2": "^7.0.2",
42-
"prettier": "^3.4.2",
43-
"stylelint": "^16.9.0"
39+
"@spectrum-css/tokens": "14.0.0-next.0"
4440
},
4541
"keywords": [
4642
"design-system",

components/actionbutton/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/icon": ">=7",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"peerDependenciesMeta": {
3232
"@spectrum-css/icon": {
@@ -36,11 +36,7 @@
3636
"devDependencies": {
3737
"@spectrum-css/commons": "^11.0.0",
3838
"@spectrum-css/icon": "9.0.1",
39-
"@spectrum-css/tokens": "16.0.0",
40-
"eslint": "^8.57.0",
41-
"npm-run-all2": "^7.0.2",
42-
"prettier": "^3.4.2",
43-
"stylelint": "^16.9.0"
39+
"@spectrum-css/tokens": "14.0.0-next.0"
4440
},
4541
"keywords": [
4642
"design-system",

components/actiongroup/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/actionbutton": ">=6",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"peerDependenciesMeta": {
3232
"@spectrum-css/actionbutton": {
@@ -35,11 +35,7 @@
3535
},
3636
"devDependencies": {
3737
"@spectrum-css/actionbutton": "7.0.1",
38-
"@spectrum-css/tokens": "16.0.0",
39-
"eslint": "^8.57.0",
40-
"npm-run-all2": "^7.0.2",
41-
"prettier": "^3.4.2",
42-
"stylelint": "^16.9.0"
38+
"@spectrum-css/tokens": "14.0.0-next.0"
4339
},
4440
"keywords": [
4541
"design-system",

components/actionmenu/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,14 @@
2929
"@spectrum-css/icon": ">=7",
3030
"@spectrum-css/menu": ">=7",
3131
"@spectrum-css/popover": ">=7",
32-
"@spectrum-css/tokens": ">=16"
32+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3333
},
3434
"devDependencies": {
3535
"@spectrum-css/actionbutton": "7.0.1",
3636
"@spectrum-css/icon": "9.0.1",
3737
"@spectrum-css/menu": "9.0.1",
3838
"@spectrum-css/popover": "8.0.1",
39-
"@spectrum-css/tokens": "16.0.0",
40-
"eslint": "^8.57.0",
41-
"npm-run-all2": "^7.0.2",
42-
"prettier": "^3.4.2",
43-
"stylelint": "^16.9.0"
39+
"@spectrum-css/tokens": "14.0.0-next.0"
4440
},
4541
"keywords": [
4642
"design-system",

components/alertbanner/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@spectrum-css/closebutton": ">=5",
3030
"@spectrum-css/divider": ">=3",
3131
"@spectrum-css/icon": ">=7",
32-
"@spectrum-css/tokens": ">=16"
32+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3333
},
3434
"peerDependenciesMeta": {
3535
"@spectrum-css/icon": {
@@ -41,11 +41,7 @@
4141
"@spectrum-css/closebutton": "5.0.0-next.2",
4242
"@spectrum-css/divider": "5.0.1",
4343
"@spectrum-css/icon": "9.0.1",
44-
"@spectrum-css/tokens": "16.0.0",
45-
"eslint": "^8.57.0",
46-
"npm-run-all2": "^7.0.2",
47-
"prettier": "^3.4.2",
48-
"stylelint": "^16.9.0"
44+
"@spectrum-css/tokens": "14.0.0-next.0"
4945
},
5046
"keywords": [
5147
"design-system",

components/alertdialog/package.json

+3-7
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@spectrum-css/divider": ">=3",
3030
"@spectrum-css/icon": ">=7",
3131
"@spectrum-css/modal": ">=5",
32-
"@spectrum-css/tokens": ">=16",
32+
"@spectrum-css/tokens": ">=14.0.0-next.0",
3333
"@spectrum-css/underlay": ">=4"
3434
},
3535
"peerDependenciesMeta": {
@@ -45,12 +45,8 @@
4545
"@spectrum-css/divider": "5.0.1",
4646
"@spectrum-css/icon": "9.0.1",
4747
"@spectrum-css/modal": "7.0.1",
48-
"@spectrum-css/tokens": "16.0.0",
49-
"@spectrum-css/underlay": "6.0.1",
50-
"eslint": "^8.57.0",
51-
"npm-run-all2": "^7.0.2",
52-
"prettier": "^3.4.2",
53-
"stylelint": "^16.9.0"
48+
"@spectrum-css/tokens": "14.0.0-next.0",
49+
"@spectrum-css/underlay": "6.0.1"
5450
},
5551
"keywords": [
5652
"design-system",

components/asset/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,10 @@
2525
},
2626
"main": "dist/index.css",
2727
"peerDependencies": {
28-
"@spectrum-css/tokens": ">=16"
28+
"@spectrum-css/tokens": ">=14.0.0-next.0"
2929
},
3030
"devDependencies": {
31-
"@spectrum-css/tokens": "16.0.0",
32-
"eslint": "^8.57.0",
33-
"npm-run-all2": "^7.0.2",
34-
"prettier": "^3.4.2",
35-
"stylelint": "^16.9.0"
31+
"@spectrum-css/tokens": "14.0.0-next.0"
3632
},
3733
"keywords": [
3834
"design-system",

components/assetcard/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/checkbox": ">=9",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"peerDependenciesMeta": {
3232
"@spectrum-css/checkbox": {
@@ -35,11 +35,7 @@
3535
},
3636
"devDependencies": {
3737
"@spectrum-css/checkbox": "10.0.1",
38-
"@spectrum-css/tokens": "16.0.0",
39-
"eslint": "^8.57.0",
40-
"npm-run-all2": "^7.0.2",
41-
"prettier": "^3.4.2",
42-
"stylelint": "^16.9.0"
38+
"@spectrum-css/tokens": "14.0.0-next.0"
4339
},
4440
"keywords": [
4541
"design-system",

components/assetlist/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"peerDependencies": {
2828
"@spectrum-css/checkbox": ">=9",
2929
"@spectrum-css/icon": ">=7",
30-
"@spectrum-css/tokens": ">=16"
30+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3131
},
3232
"peerDependenciesMeta": {
3333
"@spectrum-css/checkbox": {
@@ -40,11 +40,7 @@
4040
"devDependencies": {
4141
"@spectrum-css/checkbox": "10.0.1",
4242
"@spectrum-css/icon": "9.0.1",
43-
"@spectrum-css/tokens": "16.0.0",
44-
"eslint": "^8.57.0",
45-
"npm-run-all2": "^7.0.2",
46-
"prettier": "^3.4.2",
47-
"stylelint": "^16.9.0"
43+
"@spectrum-css/tokens": "14.0.0-next.0"
4844
},
4945
"keywords": [
5046
"design-system",

components/avatar/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,10 @@
2525
},
2626
"main": "dist/index.css",
2727
"peerDependencies": {
28-
"@spectrum-css/tokens": ">=16"
28+
"@spectrum-css/tokens": ">=14.0.0-next.0"
2929
},
3030
"devDependencies": {
31-
"@spectrum-css/tokens": "16.0.0",
32-
"eslint": "^8.57.0",
33-
"npm-run-all2": "^7.0.2",
34-
"prettier": "^3.4.2",
35-
"stylelint": "^16.9.0"
31+
"@spectrum-css/tokens": "14.0.0-next.0"
3632
},
3733
"keywords": [
3834
"design-system",

components/badge/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/icon": ">=7",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"peerDependenciesMeta": {
3232
"@spectrum-css/icon": {
@@ -35,11 +35,7 @@
3535
},
3636
"devDependencies": {
3737
"@spectrum-css/icon": "9.0.1",
38-
"@spectrum-css/tokens": "16.0.0",
39-
"eslint": "^8.57.0",
40-
"npm-run-all2": "^7.0.2",
41-
"prettier": "^3.4.2",
42-
"stylelint": "^16.9.0"
38+
"@spectrum-css/tokens": "14.0.0-next.0"
4339
},
4440
"keywords": [
4541
"design-system",

components/breadcrumb/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"peerDependencies": {
2828
"@spectrum-css/actionbutton": ">=6",
2929
"@spectrum-css/icon": ">=7",
30-
"@spectrum-css/tokens": ">=16"
30+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3131
},
3232
"peerDependenciesMeta": {
3333
"@spectrum-css/actionbutton": {
@@ -40,11 +40,7 @@
4040
"devDependencies": {
4141
"@spectrum-css/actionbutton": "7.0.1",
4242
"@spectrum-css/icon": "9.0.1",
43-
"@spectrum-css/tokens": "16.0.0",
44-
"eslint": "^8.57.0",
45-
"npm-run-all2": "^7.0.2",
46-
"prettier": "^3.4.2",
47-
"stylelint": "^16.9.0"
43+
"@spectrum-css/tokens": "14.0.0-next.0"
4844
},
4945
"keywords": [
5046
"design-system",

components/button/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"peerDependencies": {
2828
"@spectrum-css/icon": ">=7",
2929
"@spectrum-css/progresscircle": ">=3",
30-
"@spectrum-css/tokens": ">=16"
30+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3131
},
3232
"peerDependenciesMeta": {
3333
"@spectrum-css/icon": {
@@ -41,11 +41,7 @@
4141
"@spectrum-css/commons": "^11.0.0",
4242
"@spectrum-css/icon": "9.0.1",
4343
"@spectrum-css/progresscircle": "5.0.1",
44-
"@spectrum-css/tokens": "16.0.0",
45-
"eslint": "^8.57.0",
46-
"npm-run-all2": "^7.0.2",
47-
"prettier": "^3.4.2",
48-
"stylelint": "^16.9.0"
44+
"@spectrum-css/tokens": "14.0.0-next.0"
4945
},
5046
"keywords": [
5147
"design-system",

components/buttongroup/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,11 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/button": ">=13",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"devDependencies": {
3232
"@spectrum-css/button": "14.0.1",
33-
"@spectrum-css/tokens": "16.0.0",
34-
"eslint": "^8.57.0",
35-
"npm-run-all2": "^7.0.2",
36-
"prettier": "^3.4.2",
37-
"stylelint": "^16.9.0"
33+
"@spectrum-css/tokens": "14.0.0-next.0"
3834
},
3935
"keywords": [
4036
"design-system",

components/calendar/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,11 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/actionbutton": ">=6",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"devDependencies": {
3232
"@spectrum-css/actionbutton": "7.0.1",
33-
"@spectrum-css/tokens": "16.0.0",
34-
"eslint": "^8.57.0",
35-
"npm-run-all2": "^7.0.2",
36-
"prettier": "^3.4.2",
37-
"stylelint": "^16.9.0"
33+
"@spectrum-css/tokens": "14.0.0-next.0"
3834
},
3935
"keywords": [
4036
"design-system",

components/card/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,8 @@
5454
"@spectrum-css/asset": "7.0.1",
5555
"@spectrum-css/checkbox": "10.0.1",
5656
"@spectrum-css/icon": "9.0.1",
57-
"@spectrum-css/tokens": "16.0.0",
58-
"@spectrum-css/typography": "8.0.1",
59-
"eslint": "^8.57.0",
60-
"npm-run-all2": "^7.0.2",
61-
"prettier": "^3.4.2",
62-
"stylelint": "^16.9.0"
57+
"@spectrum-css/tokens": "14.0.0-next.0",
58+
"@spectrum-css/typography": "8.0.1"
6359
},
6460
"keywords": [
6561
"design-system",

components/checkbox/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,11 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/icon": ">=7",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"devDependencies": {
3232
"@spectrum-css/icon": "9.0.1",
33-
"@spectrum-css/tokens": "16.0.0",
34-
"eslint": "^8.57.0",
35-
"npm-run-all2": "^7.0.2",
36-
"prettier": "^3.4.2",
37-
"stylelint": "^16.9.0"
33+
"@spectrum-css/tokens": "14.0.0-next.0"
3834
},
3935
"keywords": [
4036
"design-system",

components/clearbutton/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,11 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/icon": ">=7",
29-
"@spectrum-css/tokens": ">=16"
29+
"@spectrum-css/tokens": ">=14.0.0-next.0"
3030
},
3131
"devDependencies": {
3232
"@spectrum-css/icon": "9.0.1",
33-
"@spectrum-css/tokens": "16.0.0",
34-
"eslint": "^8.57.0",
35-
"npm-run-all2": "^7.0.2",
36-
"prettier": "^3.4.2",
37-
"stylelint": "^16.9.0"
33+
"@spectrum-css/tokens": "14.0.0-next.0"
3834
},
3935
"keywords": [
4036
"design-system",

components/closebutton/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"devDependencies": {
3939
"@spectrum-css/commons": "^11.0.0",
4040
"@spectrum-css/icon": "9.0.1",
41-
"@spectrum-css/tokens": "16.0.0"
41+
"@spectrum-css/tokens": "14.0.0-next.0"
4242
},
4343
"keywords": [
4444
"design-system",

0 commit comments

Comments
 (0)