From c0dd6a443b410f37f3dc703d75e11c15519fd93e Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 10 May 2024 16:04:12 -0400 Subject: [PATCH 01/13] build: keep selector list in dist output of not pseudo-class (#2740) A change in configuration had resulted in some regressions due to increased specificity created in the dist output of :not selectors. One issue was with a disabled Menu item showing a change in icon color on hover. The config override being removed here sets it back to the default stage 2 configuration that allows multiple comma separated selectors within :not(). The configuration had been converting each item in the :not selector list into its own :not selector, increasing specificity for each additional item. --- .changeset/eight-spiders-help.md | 11 +++++++++++ postcss.config.js | 1 - 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/eight-spiders-help.md diff --git a/.changeset/eight-spiders-help.md b/.changeset/eight-spiders-help.md new file mode 100644 index 00000000000..c916b2e375c --- /dev/null +++ b/.changeset/eight-spiders-help.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/calendar": patch +"@spectrum-css/combobox": patch +"@spectrum-css/datepicker": patch +"@spectrum-css/menu": patch +"@spectrum-css/picker": patch +"@spectrum-css/slider": patch +"@spectrum-css/stepper": patch +--- + +Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. diff --git a/postcss.config.js b/postcss.config.js index df94f0a64b6..46d441e08f5 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -118,7 +118,6 @@ module.exports = ({ // https://github.com/jsxtools/focus-within "focus-within-pseudo-class": true, "font-format-keywords": true, - "not-pseudo-class": true, "opacity-percentage": true, // https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme "prefers-color-scheme-query": true, From 1018edcf92d22bf45d7a092189892e31cacc9654 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 13 May 2024 16:26:34 -0400 Subject: [PATCH 02/13] chore(deps-dev): bump rimraf from 5.0.5 to 5.0.7 (#2751) Bumps [rimraf](https://github.com/isaacs/rimraf) from 5.0.5 to 5.0.7. - [Changelog](https://github.com/isaacs/rimraf/blob/main/CHANGELOG.md) - [Commits](https://github.com/isaacs/rimraf/compare/v5.0.5...v5.0.7) --- updated-dependencies: - dependency-name: rimraf dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- site/package.json | 2 +- yarn.lock | 15 +++++++++++++-- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ab981f7c998..f98bbfcb03c 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "postcss-reporter": "^7.1.0", "postcss-splitinator": "^2.0.0", "prettier": "^3.2.5", - "rimraf": "^5.0.5", + "rimraf": "^5.0.7", "stylelint": "^15.11.0", "stylelint-config-clean-order": "^5.4.2", "stylelint-config-standard": "^34.0.0", diff --git a/site/package.json b/site/package.json index b66c96da5e6..c8b1bcc1e34 100644 --- a/site/package.json +++ b/site/package.json @@ -35,7 +35,7 @@ "npm-registry-fetch": "^16.2.1", "prismjs": "^1.29.0", "pug": "^3.0.2", - "rimraf": "^5.0.5", + "rimraf": "^5.0.7", "yargs": "^17.7.2" } } diff --git a/yarn.lock b/yarn.lock index 510842db677..5333b39bcbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5671,7 +5671,7 @@ __metadata: npm-registry-fetch: "npm:^16.2.1" prismjs: "npm:^1.29.0" pug: "npm:^3.0.2" - rimraf: "npm:^5.0.5" + rimraf: "npm:^5.0.7" yargs: "npm:^17.7.2" languageName: unknown linkType: soft @@ -19744,6 +19744,17 @@ __metadata: languageName: node linkType: hard +"rimraf@npm:^5.0.7": + version: 5.0.7 + resolution: "rimraf@npm:5.0.7" + dependencies: + glob: "npm:^10.3.7" + bin: + rimraf: dist/esm/bin.mjs + checksum: 10c0/bd6dbfaa98ae34ce1e54d1e06045d2d63e8859d9a1979bb4a4628b652b459a2d17b17dc20ee072b034bd2d09bd691e801d24c4d9cfe94e16fdbcc8470a1d4807 + languageName: node + linkType: hard + "rimraf@npm:~2.6.2": version: 2.6.3 resolution: "rimraf@npm:2.6.3" @@ -20489,7 +20500,7 @@ __metadata: postcss-reporter: "npm:^7.1.0" postcss-splitinator: "npm:^2.0.0" prettier: "npm:^3.2.5" - rimraf: "npm:^5.0.5" + rimraf: "npm:^5.0.7" stylelint: "npm:^15.11.0" stylelint-config-clean-order: "npm:^5.4.2" stylelint-config-standard: "npm:^34.0.0" From 782cdaf3d2499172b0676ac7da1322dbd128d3fa Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 13 May 2024 16:31:32 -0400 Subject: [PATCH 03/13] chore(deps-dev): bump npm-registry-fetch from 16.2.1 to 17.0.1 (#2749) Bumps [npm-registry-fetch](https://github.com/npm/npm-registry-fetch) from 16.2.1 to 17.0.1. - [Release notes](https://github.com/npm/npm-registry-fetch/releases) - [Changelog](https://github.com/npm/npm-registry-fetch/blob/main/CHANGELOG.md) - [Commits](https://github.com/npm/npm-registry-fetch/compare/v16.2.1...v17.0.1) --- updated-dependencies: - dependency-name: npm-registry-fetch dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- site/package.json | 2 +- yarn.lock | 22 +++++++++++----------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index f98bbfcb03c..36daf4407d0 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "lint-staged": "^15.2.2", "lodash": "^4.17.21", "node-gyp": "^10.1.0", - "npm-registry-fetch": "^16.2.1", + "npm-registry-fetch": "^17.0.1", "npm-run-all": "^4.1.5", "nunjucks": "^3.2.4", "nx": "^18.3.4", diff --git a/site/package.json b/site/package.json index c8b1bcc1e34..5b43f458be3 100644 --- a/site/package.json +++ b/site/package.json @@ -32,7 +32,7 @@ "markdown-it-anchor": "^8.6.7", "markdown-it-attrs": "^4.1.6", "markdown-it-prism": "^2.3.0", - "npm-registry-fetch": "^16.2.1", + "npm-registry-fetch": "^17.0.1", "prismjs": "^1.29.0", "pug": "^3.0.2", "rimraf": "^5.0.7", diff --git a/yarn.lock b/yarn.lock index 5333b39bcbb..8875c06cf8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3456,10 +3456,10 @@ __metadata: languageName: node linkType: hard -"@npmcli/redact@npm:^1.1.0": - version: 1.1.0 - resolution: "@npmcli/redact@npm:1.1.0" - checksum: 10c0/886995220e60ca00405c93c5588aff524d1dbfee0ca8688b9607fefcda42aa464d4a3f7c75fc03a16a582befe4b6c3ac4493d67c4eb07da2fe0794fbe0dfc89b +"@npmcli/redact@npm:^2.0.0": + version: 2.0.0 + resolution: "@npmcli/redact@npm:2.0.0" + checksum: 10c0/8a09619ff542412e32b795ff2e88668fcb4d5c6fe2eb329a034f988f59a97553b6664ad270398b0f131184db9f21ca5aa2786a718af5da244addda2f736cda0d languageName: node linkType: hard @@ -5668,7 +5668,7 @@ __metadata: markdown-it-anchor: "npm:^8.6.7" markdown-it-attrs: "npm:^4.1.6" markdown-it-prism: "npm:^2.3.0" - npm-registry-fetch: "npm:^16.2.1" + npm-registry-fetch: "npm:^17.0.1" prismjs: "npm:^1.29.0" pug: "npm:^3.0.2" rimraf: "npm:^5.0.7" @@ -16463,11 +16463,11 @@ __metadata: languageName: node linkType: hard -"npm-registry-fetch@npm:^16.2.1": - version: 16.2.1 - resolution: "npm-registry-fetch@npm:16.2.1" +"npm-registry-fetch@npm:^17.0.1": + version: 17.0.1 + resolution: "npm-registry-fetch@npm:17.0.1" dependencies: - "@npmcli/redact": "npm:^1.1.0" + "@npmcli/redact": "npm:^2.0.0" make-fetch-happen: "npm:^13.0.0" minipass: "npm:^7.0.2" minipass-fetch: "npm:^3.0.0" @@ -16475,7 +16475,7 @@ __metadata: minizlib: "npm:^2.1.2" npm-package-arg: "npm:^11.0.0" proc-log: "npm:^4.0.0" - checksum: 10c0/bccffc291771d55056a6ebedb7aaf431cecc663286e060dc2936e8e0deee454a4a71654f772afcaa44f0d74a2c02403d8b45486a0aa2dd6d2bd8c09c9134eeb9 + checksum: 10c0/c5235928fe31fdb8dc28982f8b20109c5f630adaaf21f69bfece609d3851d670d31e1ea2b70d38c2e573fb88145c6ba270c1c9efc0893860ae89d9e6789ab0fb languageName: node linkType: hard @@ -20484,7 +20484,7 @@ __metadata: lint-staged: "npm:^15.2.2" lodash: "npm:^4.17.21" node-gyp: "npm:^10.1.0" - npm-registry-fetch: "npm:^16.2.1" + npm-registry-fetch: "npm:^17.0.1" npm-run-all: "npm:^4.1.5" nunjucks: "npm:^3.2.4" nx: "npm:^18.3.4" From fc7bf9b4ff7775e819315662d04fd6e495be0145 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 13 May 2024 20:37:44 +0000 Subject: [PATCH 04/13] chore(deps-dev): bump svgo from 3.2.0 to 3.3.2 (#2748) Bumps [svgo](https://github.com/svg/svgo) from 3.2.0 to 3.3.2. - [Release notes](https://github.com/svg/svgo/releases) - [Changelog](https://github.com/svg/svgo/blob/main/CHANGELOG-old.md) - [Commits](https://github.com/svg/svgo/compare/v3.2.0...v3.3.2) --- updated-dependencies: - dependency-name: svgo dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- ui-icons/package.json | 2 +- yarn.lock | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/ui-icons/package.json b/ui-icons/package.json index 12d55c9f5f2..4906b41c532 100644 --- a/ui-icons/package.json +++ b/ui-icons/package.json @@ -24,7 +24,7 @@ "devDependencies": { "fast-glob": "^3.3.2", "svgcombiner": "^1.0.1", - "svgo": "^3.2.0", + "svgo": "^3.3.2", "svgstore": "^3.0.1" }, "publishConfig": { diff --git a/yarn.lock b/yarn.lock index 8875c06cf8a..2d44e3e4bb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5625,7 +5625,7 @@ __metadata: dependencies: fast-glob: "npm:^3.3.2" svgcombiner: "npm:^1.0.1" - svgo: "npm:^3.2.0" + svgo: "npm:^3.3.2" svgstore: "npm:^3.0.1" languageName: unknown linkType: soft @@ -21248,6 +21248,23 @@ __metadata: languageName: node linkType: hard +"svgo@npm:^3.3.2": + version: 3.3.2 + resolution: "svgo@npm:3.3.2" + dependencies: + "@trysound/sax": "npm:0.2.0" + commander: "npm:^7.2.0" + css-select: "npm:^5.1.0" + css-tree: "npm:^2.3.1" + css-what: "npm:^6.1.0" + csso: "npm:^5.0.5" + picocolors: "npm:^1.0.0" + bin: + svgo: ./bin/svgo + checksum: 10c0/a6badbd3d1d6dbb177f872787699ab34320b990d12e20798ecae915f0008796a0f3c69164f1485c9def399e0ce0a5683eb4a8045e51a5e1c364bb13a0d9f79e1 + languageName: node + linkType: hard + "svgstore@npm:^3.0.1": version: 3.0.1 resolution: "svgstore@npm:3.0.1" From 2807bf3a9a3e99fdafc62c386b221b8530b5ad84 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 13 May 2024 20:42:03 +0000 Subject: [PATCH 05/13] chore(deps-dev): bump tar from 7.0.1 to 7.1.0 (#2750) Bumps [tar](https://github.com/isaacs/node-tar) from 7.0.1 to 7.1.0. - [Release notes](https://github.com/isaacs/node-tar/releases) - [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md) - [Commits](https://github.com/isaacs/node-tar/compare/v7.0.1...v7.1.0) --- updated-dependencies: - dependency-name: tar dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 19 +++++++++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 36daf4407d0..e16606a38ec 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "stylelint-high-performance-animation": "^1.10.0", "stylelint-selector-bem-pattern": "^3.0.1", "stylelint-use-logical": "^2.1.2", - "tar": "^7.0.1", + "tar": "^7.1.0", "yargs": "^17.7.2" }, "engines": { diff --git a/yarn.lock b/yarn.lock index 2d44e3e4bb9..553cd81c2b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16109,6 +16109,13 @@ __metadata: languageName: node linkType: hard +"minipass@npm:^7.1.0": + version: 7.1.1 + resolution: "minipass@npm:7.1.1" + checksum: 10c0/fdccc2f99c31083f45f881fd1e6971d798e333e078ab3c8988fb818c470fbd5e935388ad9adb286397eba50baebf46ef8ff487c8d3f455a69c6f3efc327bdff9 + languageName: node + linkType: hard + "minizlib@npm:^2.1.1, minizlib@npm:^2.1.2": version: 2.1.2 resolution: "minizlib@npm:2.1.2" @@ -20508,7 +20515,7 @@ __metadata: stylelint-high-performance-animation: "npm:^1.10.0" stylelint-selector-bem-pattern: "npm:^3.0.1" stylelint-use-logical: "npm:^2.1.2" - tar: "npm:^7.0.1" + tar: "npm:^7.1.0" yargs: "npm:^17.7.2" languageName: unknown linkType: soft @@ -21352,17 +21359,17 @@ __metadata: languageName: node linkType: hard -"tar@npm:^7.0.1": - version: 7.0.1 - resolution: "tar@npm:7.0.1" +"tar@npm:^7.1.0": + version: 7.1.0 + resolution: "tar@npm:7.1.0" dependencies: "@isaacs/fs-minipass": "npm:^4.0.0" chownr: "npm:^3.0.0" - minipass: "npm:^5.0.0" + minipass: "npm:^7.1.0" minizlib: "npm:^3.0.1" mkdirp: "npm:^3.0.1" yallist: "npm:^5.0.0" - checksum: 10c0/8170d02d22a920c7aee31d734a8eb11573d49041deeb00a0074e97dd67552d7c93011272a00f32a2b951891ff685c3abc72bea1bbd5e98ada928baa3b1b4547f + checksum: 10c0/08d85076820a2885855e581623c9c41e17a9ca47ca203e073e4612ccbcecc9e963134a48ff4a392a12d5d2184ebe5f7ed1e4a68d964193cbb52514aa858a0d2a languageName: node linkType: hard From 399af572fb43e8ef5101f51313c88967f58d3417 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 13 May 2024 20:47:11 +0000 Subject: [PATCH 06/13] chore(deps-dev): bump the nx-ecosystem group across 1 directory with 2 updates (#2755) Bumps the nx-ecosystem group with 2 updates in the / directory: [@nx/devkit](https://github.com/nrwl/nx/tree/HEAD/packages/devkit) and [nx](https://github.com/nrwl/nx/tree/HEAD/packages/nx). Updates `@nx/devkit` from 18.3.4 to 19.0.3 - [Release notes](https://github.com/nrwl/nx/releases) - [Commits](https://github.com/nrwl/nx/commits/19.0.3/packages/devkit) Updates `nx` from 18.3.4 to 19.0.3 - [Release notes](https://github.com/nrwl/nx/releases) - [Commits](https://github.com/nrwl/nx/commits/19.0.3/packages/nx) --- updated-dependencies: - dependency-name: "@nx/devkit" dependency-type: direct:development update-type: version-update:semver-major dependency-group: nx-ecosystem - dependency-name: nx dependency-type: direct:development update-type: version-update:semver-major dependency-group: nx-ecosystem ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 4 +- yarn.lock | 129 ++++++++++++++++++++++++++------------------------- 2 files changed, 67 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index e16606a38ec..0f14b6a1923 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "@changesets/cli": "^2.27.1", "@commitlint/cli": "^19.3.0", "@commitlint/config-conventional": "^19.2.2", - "@nx/devkit": "^18.3.4", + "@nx/devkit": "^19.0.3", "@spectrum-css/cyclebutton": "^3.1.3", "@spectrum-css/quickaction": "^3.1.1", "@spectrum-css/searchwithin": "^5.1.3", @@ -88,7 +88,7 @@ "npm-registry-fetch": "^17.0.1", "npm-run-all": "^4.1.5", "nunjucks": "^3.2.4", - "nx": "^18.3.4", + "nx": "^19.0.3", "open": "^10.1.0", "pajv": "^1.2.0", "postcss": "^8.4.38", diff --git a/yarn.lock b/yarn.lock index 553cd81c2b1..586437cd7cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3472,24 +3472,24 @@ __metadata: languageName: node linkType: hard -"@nrwl/devkit@npm:18.3.4": - version: 18.3.4 - resolution: "@nrwl/devkit@npm:18.3.4" +"@nrwl/devkit@npm:19.0.3": + version: 19.0.3 + resolution: "@nrwl/devkit@npm:19.0.3" dependencies: - "@nx/devkit": "npm:18.3.4" - checksum: 10c0/ef9cb7859206c6c01ebfbeeac13ea8ca239374a2873f00154c58b6c047ff4aee77b837d6cc3bc72302e88bf6847bb2302212c3329b8ea59ea6fc1f380a1ddc23 + "@nx/devkit": "npm:19.0.3" + checksum: 10c0/db68c8c0172cf726c3a7a869d7707b740453c2668052111e0ba37eaeeb18a8610c308fb1ae0a45c110930520373567994289b147762b094d0a22232ab0b145da languageName: node linkType: hard -"@nrwl/tao@npm:18.3.4": - version: 18.3.4 - resolution: "@nrwl/tao@npm:18.3.4" +"@nrwl/tao@npm:19.0.3": + version: 19.0.3 + resolution: "@nrwl/tao@npm:19.0.3" dependencies: - nx: "npm:18.3.4" + nx: "npm:19.0.3" tslib: "npm:^2.3.0" bin: tao: index.js - checksum: 10c0/4ce1cf373ec9a950f18dd9335cf2b5531174a2a22da8feaca27d600f9d7d8f07003059a271cc3ca8046bbd369687e6496923cf99e46822976b988dcecd89a62b + checksum: 10c0/ef4ea345e3434d5cfd0d97548561181a730aa3e33be647e6d4014d13c22dc5a724aa4656c3c4d3b1975b6598c25d3b1a81ca4a4689249409bbb9fd47c0708fa5 languageName: node linkType: hard @@ -3511,90 +3511,91 @@ __metadata: languageName: node linkType: hard -"@nx/devkit@npm:18.3.4, @nx/devkit@npm:^18.3.4": - version: 18.3.4 - resolution: "@nx/devkit@npm:18.3.4" +"@nx/devkit@npm:19.0.3, @nx/devkit@npm:^19.0.3": + version: 19.0.3 + resolution: "@nx/devkit@npm:19.0.3" dependencies: - "@nrwl/devkit": "npm:18.3.4" + "@nrwl/devkit": "npm:19.0.3" ejs: "npm:^3.1.7" enquirer: "npm:~2.3.6" ignore: "npm:^5.0.4" + minimatch: "npm:9.0.3" semver: "npm:^7.5.3" tmp: "npm:~0.2.1" tslib: "npm:^2.3.0" yargs-parser: "npm:21.1.1" peerDependencies: - nx: ">= 16 <= 19" - checksum: 10c0/3c6752bd1fc96bfdff1bc4d58b9fb87f33628b1db39cf4db0b4f66782a8b547aad0dd0d3f0620c0464c1d31c1ca999ebce73c7cf70f920776f965cc7dad489e7 + nx: ">= 17 <= 20" + checksum: 10c0/deffa61a0ce4244a76eceeea4e9c92b9b3095b22984c64b89cddca41742931513a8ce8196e280b10036ec42fe9c448b459fb9f2d8d58735c35ac768d5d63767a languageName: node linkType: hard -"@nx/nx-darwin-arm64@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-darwin-arm64@npm:18.3.4" +"@nx/nx-darwin-arm64@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-darwin-arm64@npm:19.0.3" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@nx/nx-darwin-x64@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-darwin-x64@npm:18.3.4" +"@nx/nx-darwin-x64@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-darwin-x64@npm:19.0.3" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@nx/nx-freebsd-x64@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-freebsd-x64@npm:18.3.4" +"@nx/nx-freebsd-x64@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-freebsd-x64@npm:19.0.3" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@nx/nx-linux-arm-gnueabihf@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-linux-arm-gnueabihf@npm:18.3.4" +"@nx/nx-linux-arm-gnueabihf@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-linux-arm-gnueabihf@npm:19.0.3" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@nx/nx-linux-arm64-gnu@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-linux-arm64-gnu@npm:18.3.4" +"@nx/nx-linux-arm64-gnu@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-linux-arm64-gnu@npm:19.0.3" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-arm64-musl@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-linux-arm64-musl@npm:18.3.4" +"@nx/nx-linux-arm64-musl@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-linux-arm64-musl@npm:19.0.3" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@nx/nx-linux-x64-gnu@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-linux-x64-gnu@npm:18.3.4" +"@nx/nx-linux-x64-gnu@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-linux-x64-gnu@npm:19.0.3" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-x64-musl@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-linux-x64-musl@npm:18.3.4" +"@nx/nx-linux-x64-musl@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-linux-x64-musl@npm:19.0.3" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@nx/nx-win32-arm64-msvc@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-win32-arm64-msvc@npm:18.3.4" +"@nx/nx-win32-arm64-msvc@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-win32-arm64-msvc@npm:19.0.3" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@nx/nx-win32-x64-msvc@npm:18.3.4": - version: 18.3.4 - resolution: "@nx/nx-win32-x64-msvc@npm:18.3.4" +"@nx/nx-win32-x64-msvc@npm:19.0.3": + version: 19.0.3 + resolution: "@nx/nx-win32-x64-msvc@npm:19.0.3" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -16564,21 +16565,21 @@ __metadata: languageName: node linkType: hard -"nx@npm:18.3.4, nx@npm:^18.3.4": - version: 18.3.4 - resolution: "nx@npm:18.3.4" - dependencies: - "@nrwl/tao": "npm:18.3.4" - "@nx/nx-darwin-arm64": "npm:18.3.4" - "@nx/nx-darwin-x64": "npm:18.3.4" - "@nx/nx-freebsd-x64": "npm:18.3.4" - "@nx/nx-linux-arm-gnueabihf": "npm:18.3.4" - "@nx/nx-linux-arm64-gnu": "npm:18.3.4" - "@nx/nx-linux-arm64-musl": "npm:18.3.4" - "@nx/nx-linux-x64-gnu": "npm:18.3.4" - "@nx/nx-linux-x64-musl": "npm:18.3.4" - "@nx/nx-win32-arm64-msvc": "npm:18.3.4" - "@nx/nx-win32-x64-msvc": "npm:18.3.4" +"nx@npm:19.0.3, nx@npm:^19.0.3": + version: 19.0.3 + resolution: "nx@npm:19.0.3" + dependencies: + "@nrwl/tao": "npm:19.0.3" + "@nx/nx-darwin-arm64": "npm:19.0.3" + "@nx/nx-darwin-x64": "npm:19.0.3" + "@nx/nx-freebsd-x64": "npm:19.0.3" + "@nx/nx-linux-arm-gnueabihf": "npm:19.0.3" + "@nx/nx-linux-arm64-gnu": "npm:19.0.3" + "@nx/nx-linux-arm64-musl": "npm:19.0.3" + "@nx/nx-linux-x64-gnu": "npm:19.0.3" + "@nx/nx-linux-x64-musl": "npm:19.0.3" + "@nx/nx-win32-arm64-msvc": "npm:19.0.3" + "@nx/nx-win32-x64-msvc": "npm:19.0.3" "@yarnpkg/lockfile": "npm:^1.1.0" "@yarnpkg/parsers": "npm:3.0.0-rc.46" "@zkochan/js-yaml": "npm:0.0.6" @@ -16644,7 +16645,7 @@ __metadata: bin: nx: bin/nx.js nx-cloud: bin/nx-cloud.js - checksum: 10c0/4ea923fc1312ebb2237a2af08c580b7bea99bf70a6ad6ed985084d6241de3e399ed1cd3588724baf2b6c8dc5eef745b7aa05d80070ef252d34b54d492cbcbd62 + checksum: 10c0/e6ddc693e4e8f28e4e527f967cad07e066d84ec07b24a626df9260ce6c39499c6e719ff9d42d78520e4efd4262111c5bfa77a3288d34aaea78212ca813b987c8 languageName: node linkType: hard @@ -20468,7 +20469,7 @@ __metadata: "@changesets/cli": "npm:^2.27.1" "@commitlint/cli": "npm:^19.3.0" "@commitlint/config-conventional": "npm:^19.2.2" - "@nx/devkit": "npm:^18.3.4" + "@nx/devkit": "npm:^19.0.3" "@spectrum-css/cyclebutton": "npm:^3.1.3" "@spectrum-css/quickaction": "npm:^3.1.1" "@spectrum-css/searchwithin": "npm:^5.1.3" @@ -20494,7 +20495,7 @@ __metadata: npm-registry-fetch: "npm:^17.0.1" npm-run-all: "npm:^4.1.5" nunjucks: "npm:^3.2.4" - nx: "npm:^18.3.4" + nx: "npm:^19.0.3" open: "npm:^10.1.0" pajv: "npm:^1.2.0" postcss: "npm:^8.4.38" From d4c236ad83b6a0a98354fa4fa0aeae8d8695f35e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 13 May 2024 20:54:05 +0000 Subject: [PATCH 07/13] chore: release (#2746) Co-authored-by: github-actions[bot] --- .changeset/eight-spiders-help.md | 11 ----------- components/calendar/CHANGELOG.md | 6 ++++++ components/calendar/package.json | 2 +- components/combobox/CHANGELOG.md | 6 ++++++ components/combobox/package.json | 2 +- components/datepicker/CHANGELOG.md | 6 ++++++ components/datepicker/package.json | 2 +- components/menu/CHANGELOG.md | 6 ++++++ components/menu/package.json | 2 +- components/picker/CHANGELOG.md | 6 ++++++ components/picker/package.json | 2 +- components/slider/CHANGELOG.md | 6 ++++++ components/slider/package.json | 2 +- components/stepper/CHANGELOG.md | 6 ++++++ components/stepper/package.json | 2 +- 15 files changed, 49 insertions(+), 18 deletions(-) delete mode 100644 .changeset/eight-spiders-help.md diff --git a/.changeset/eight-spiders-help.md b/.changeset/eight-spiders-help.md deleted file mode 100644 index c916b2e375c..00000000000 --- a/.changeset/eight-spiders-help.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -"@spectrum-css/calendar": patch -"@spectrum-css/combobox": patch -"@spectrum-css/datepicker": patch -"@spectrum-css/menu": patch -"@spectrum-css/picker": patch -"@spectrum-css/slider": patch -"@spectrum-css/stepper": patch ---- - -Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. diff --git a/components/calendar/CHANGELOG.md b/components/calendar/CHANGELOG.md index 66be2254d64..7adcc4f681f 100644 --- a/components/calendar/CHANGELOG.md +++ b/components/calendar/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 5.1.0 ### Minor Changes diff --git a/components/calendar/package.json b/components/calendar/package.json index 9288c663556..c9e07be15b3 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/calendar", - "version": "5.1.0", + "version": "5.1.1", "description": "The Spectrum CSS calendar component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md index 7a69bd24a01..b8629c36352 100644 --- a/components/combobox/CHANGELOG.md +++ b/components/combobox/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 3.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 3.1.0 ### Minor Changes diff --git a/components/combobox/package.json b/components/combobox/package.json index ec6ed382d27..7d32e9b8dea 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/combobox", - "version": "3.1.0", + "version": "3.1.1", "description": "The Spectrum CSS combobox component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md index 4e7edff9053..0e19bced5d4 100644 --- a/components/datepicker/CHANGELOG.md +++ b/components/datepicker/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 3.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 3.1.0 ### Minor Changes diff --git a/components/datepicker/package.json b/components/datepicker/package.json index a70d7c1466e..163d2db384d 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/datepicker", - "version": "3.1.0", + "version": "3.1.1", "description": "The Spectrum CSS datepicker component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/menu/CHANGELOG.md b/components/menu/CHANGELOG.md index 8f191fa3062..ddc3327e977 100644 --- a/components/menu/CHANGELOG.md +++ b/components/menu/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 7.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 7.1.0 ### Minor Changes diff --git a/components/menu/package.json b/components/menu/package.json index 13bf6842ce2..dc30bd0fc51 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/menu", - "version": "7.1.0", + "version": "7.1.1", "description": "The Spectrum CSS menu component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md index 54299a5e276..e99073eab33 100644 --- a/components/picker/CHANGELOG.md +++ b/components/picker/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 8.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 8.1.0 ### Minor Changes diff --git a/components/picker/package.json b/components/picker/package.json index 4027aab33ff..af4a2b2e188 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/picker", - "version": "8.1.0", + "version": "8.1.1", "description": "The Spectrum CSS picker component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/slider/CHANGELOG.md b/components/slider/CHANGELOG.md index d0120ebaf66..0ae7debcd6d 100644 --- a/components/slider/CHANGELOG.md +++ b/components/slider/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 5.1.0 ### Minor Changes diff --git a/components/slider/package.json b/components/slider/package.json index efc5b993b53..41af69c9efc 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/slider", - "version": "5.1.0", + "version": "5.1.1", "description": "The Spectrum CSS slider component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/stepper/CHANGELOG.md b/components/stepper/CHANGELOG.md index 73ae3809de8..8afbc4493ec 100644 --- a/components/stepper/CHANGELOG.md +++ b/components/stepper/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 6.1.1 + +### Patch Changes + +- [#2740](https://github.com/adobe/spectrum-css/pull/2740) [`c0dd6a4`](https://github.com/adobe/spectrum-css/commit/c0dd6a443b410f37f3dc703d75e11c15519fd93e) Thanks [@jawinn](https://github.com/jawinn)! - Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions. + ## 6.1.0 ### Minor Changes diff --git a/components/stepper/package.json b/components/stepper/package.json index 94de1883dc5..ac512cc6f71 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/stepper", - "version": "6.1.0", + "version": "6.1.1", "description": "The Spectrum CSS stepper component", "license": "Apache-2.0", "author": "Adobe", From dbf1406822be32aa1dbd2864b097853423bf06d8 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 14 May 2024 09:51:58 -0400 Subject: [PATCH 08/13] feat: define missing color property in some components (#2754) * docs(meter): use typography in storybook for heading Use typography template in Meter storybook. Helps make sure that color is set on this heading without coming from higher up in the DOM, and completes code TODO item. * feat: define color property in some components During the work to create a single entry point for PostCSS, it was discovered that parts of several components did not define a color, and instead relied on a color being set higher up in the DOM. This update sets a color on some of these and adds mods where necessary. --- .changeset/new-sheep-bathe.md | 11 + components/datepicker/index.css | 521 ++++---- components/datepicker/metadata/mods.md | 1 + .../progressbar/stories/meter.template.js | 11 +- components/radio/index.css | 794 +++++------ components/slider/index.css | 1176 ++++++++--------- components/slider/metadata/mods.md | 1 + components/splitview/index.css | 399 +++--- components/splitview/metadata/mods.md | 1 + components/treeview/index.css | 575 ++++---- components/well/index.css | 24 +- components/well/metadata/mods.md | 1 + 12 files changed, 1714 insertions(+), 1801 deletions(-) create mode 100644 .changeset/new-sheep-bathe.md diff --git a/.changeset/new-sheep-bathe.md b/.changeset/new-sheep-bathe.md new file mode 100644 index 00000000000..51a0f3f2d90 --- /dev/null +++ b/.changeset/new-sheep-bathe.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/datepicker": minor +"@spectrum-css/splitview": minor +"@spectrum-css/treeview": minor +"@spectrum-css/slider": minor +"@spectrum-css/radio": minor +"@spectrum-css/well": minor +"@spectrum-css/progressbar": patch +--- + +Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 362ce4b4248..be305ceb309 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -13,302 +13,307 @@ governing permissions and limitations under the License. @import "./themes/express.css"; .spectrum-DatePicker { - --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); - --spectrum-datepicker-border-radius-quiet: 0; - --spectrum-datepicker-border-width: var(--spectrum-border-width-100); - --spectrum-datepicker-min-width: var(--spectrum-field-width); - --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); - - /* button */ - --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); - --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); - - /* focus */ - --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); - --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); - --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); - - /* color */ - --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); - --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); - - /* dash */ - --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); - --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-datepicker-range-dash-marin-inline-start: calc( -0.5 * var(--spectrum-datepicker-dash-font-size)); - --spectrum-datepicker-range-dash-padding-top: 0; - - /* calculating widths */ - /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ - --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); - --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); - --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); - - --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); - --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); - --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - /* padding inline end */ - --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); + --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); + --spectrum-datepicker-border-radius-quiet: 0; + --spectrum-datepicker-border-width: var(--spectrum-border-width-100); + --spectrum-datepicker-min-width: var(--spectrum-field-width); + --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); + + /* button */ + --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); + --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); + --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); + --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); + --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); + --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); + + /* focus */ + --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); + --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); + --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); + --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); + + /* color */ + --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); + --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); + --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); + + /* dash */ + --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); + --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default); + --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size)); + --spectrum-datepicker-range-dash-padding-top: 0; + + /* calculating widths */ + /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ + --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); + --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); + --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + + --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); + --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); + + --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); + --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); + --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); + + /* padding inline end */ + --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); + --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); + --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); } .spectrum-DatePicker { - position: relative; - display: inline-flex; - flex-direction: row; - flex-wrap: nowrap; - min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width)); - border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); - - &.is-disabled { - .spectrum-DatePicker-rangeDash { - color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled))) - } - } - - &.is-invalid { - --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button)); - --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet)); - } + position: relative; + display: inline-flex; + flex-direction: row; + flex-wrap: nowrap; + min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width)); + border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); + + &.is-disabled { + .spectrum-DatePicker-rangeDash { + color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled))); + } + } + + &.is-invalid { + --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button)); + --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet)); + } } .spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) { - /* ensures picker button border color matches the textfield border color */ - --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color))); + /* ensures picker button border color matches the textfield border color */ + --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color))); - &.is-invalid { - --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); - } + &.is-invalid { + --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid))); + } } /* input padding inline end */ /* standard and range */ .spectrum-DatePicker-input { - padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); + padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); - &.spectrum-DatePicker-endField { - padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); - } + &.spectrum-DatePicker-endField { + padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end)); + } } /* standard and range invalid */ .is-invalid .spectrum-DatePicker-input { - padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid)); + padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid)); } /* quiet */ .spectrum-DatePicker--quiet { - .spectrum-DatePicker-input { - padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); - } - - /* quiet invalid and quiet range invalid */ - .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) { - padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet)); - } + .spectrum-DatePicker-input { + padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); + } + + /* quiet invalid and quiet range invalid */ + .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) { + padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet)); + } } /* quiet range */ .spectrum-DatePicker--quiet .spectrum-DatePicker-input { - &.spectrum-DatePicker-endField { - padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); - } + &.spectrum-DatePicker-endField { + padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet)); + } } .spectrum-DatePicker-button { - /* Be above textfield so box shadow shines through */ - position: absolute; - inset-inline-end: 0; + /* Be above textfield so box shadow shines through */ + position: absolute; + inset-inline-end: 0; } .spectrum-DatePicker--quiet { - border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); - - .spectrum-DatePicker-button { - inline-size: auto; - inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset))); - - &:disabled, - &:disabled:hover { - border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled)); - } - - &:disabled:not(.is-open) { - .spectrum-PickerButton-fill { - border-color: transparent; - } - } - - &:not(:disabled, .is-open) { - .spectrum-PickerButton-fill { - background-color: transparent; - } - } - } - - &:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) { - .spectrum-DatePicker-input, - .spectrum-DatePicker-button { - border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); - } - } - - /* invalid bottom border color */ - &.is-invalid { - .spectrum-DatePicker-input, - .spectrum-DatePicker-button { - border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); - } - } + border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); + + .spectrum-DatePicker-button { + inline-size: auto; + inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset))); + + &:disabled, + &:disabled:hover { + border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled)); + } + + &:disabled:not(.is-open) { + .spectrum-PickerButton-fill { + border-color: transparent; + } + } + + &:not(:disabled, .is-open) { + .spectrum-PickerButton-fill { + background-color: transparent; + } + } + } + + &:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) { + .spectrum-DatePicker-input, + .spectrum-DatePicker-button { + border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover)); + } + } + + /* invalid bottom border color */ + &.is-invalid { + .spectrum-DatePicker-input, + .spectrum-DatePicker-button { + border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color))); + } + } } .spectrum-DatePicker--range { - border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); - - /* focus-ring */ - &::after { - pointer-events: none; - content: ''; - position: absolute; - inset: 0; - margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1); - border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap))); - border-color: transparent; - transition: box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out, border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out; - } - - &.is-keyboardFocused:not(.spectrum-DatePicker--quiet) { - &::after { - box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); - } - - .spectrum-DatePicker-textfield::after { - display: none; - } - } - - &.is-keyboardFocused.spectrum-DatePicker--quiet { - /* quiet variant bottom border focus indicator */ - &::after { - margin: 0; - box-shadow: none; - border-radius: 0; - border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); - inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap))); - } - } - - /* Input Group */ - &.spectrum-DatePicker--quiet { - border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); - - .spectrum-DatePicker-textfield { - min-inline-size: 0; - inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet)); - - &:first-of-type { - inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first)); - } - } - } - - /* Datetime Range */ - &.spectrum-DatePicker--datetimeRange { - /* Inputs */ - .spectrum-DatePicker-textfield { - inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width)); - min-inline-size: 0; - - &:first-of-type { - inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first)); - } - } - - &.spectrum-DatePicker--quiet { - .spectrum-DatePicker-textfield { - inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width)); - - &:first-of-type { - inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first)); - } - } - } - } - - /* Inputs */ - .spectrum-DatePicker-textfield { - flex: initial; - min-inline-size: 0; - inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width)); - - &:first-of-type { - inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first)); - } - } + border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)); + + /* focus-ring */ + &::after { + pointer-events: none; + content: ""; + position: absolute; + inset: 0; + margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1); + border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap))); + border-color: transparent; + transition: + box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out, + border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out; + } + + &.is-keyboardFocused:not(.spectrum-DatePicker--quiet) { + &::after { + box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); + } + + .spectrum-DatePicker-textfield::after { + display: none; + } + } + + &.is-keyboardFocused.spectrum-DatePicker--quiet { + /* quiet variant bottom border focus indicator */ + &::after { + margin: 0; + box-shadow: none; + border-radius: 0; + border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color))); + inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap))); + } + } + + /* Input Group */ + &.spectrum-DatePicker--quiet { + border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet)); + + .spectrum-DatePicker-textfield { + min-inline-size: 0; + inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet)); + + &:first-of-type { + inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first)); + } + } + } + + /* Datetime Range */ + &.spectrum-DatePicker--datetimeRange { + /* Inputs */ + .spectrum-DatePicker-textfield { + inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width)); + min-inline-size: 0; + + &:first-of-type { + inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first)); + } + } + + &.spectrum-DatePicker--quiet { + .spectrum-DatePicker-textfield { + inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width)); + + &:first-of-type { + inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first)); + } + } + } + } + + /* Inputs */ + .spectrum-DatePicker-textfield { + flex: initial; + min-inline-size: 0; + inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width)); + + &:first-of-type { + inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first)); + } + } } - .spectrum-DatePicker-input { - /* fill space */ - flex: 1; - inline-size: 100%; - - &.spectrum-DatePicker-startField { - border-inline-end: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); - } - - &.spectrum-DatePicker-endField { - border-inline-start: 0; - border-start-start-radius: 0; - border-end-start-radius: 0; - padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); - } - } - - /* "-" between inputs */ - .spectrum-DatePicker-rangeDash { - line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height)); - padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top)); - flex: initial; - inline-size: 0; - z-index: 1; - - &::before { - content: "–"; - display: inline-block; - margin-block: 0; - margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start)); - overflow: hidden; - text-align: center; - vertical-align: middle; - inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size)); - } - } +.spectrum-DatePicker-input { + /* fill space */ + flex: 1; + inline-size: 100%; + + &.spectrum-DatePicker-startField { + border-inline-end: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); + } + + &.spectrum-DatePicker-endField { + border-inline-start: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; + padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding)); + } +} + +/* "-" between inputs */ +.spectrum-DatePicker-rangeDash { + color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-datepicker-dash-color))); + line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height)); + padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top)); + flex: initial; + inline-size: 0; + z-index: 1; + + &::before { + content: "–"; + display: inline-block; + margin-block: 0; + margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start)); + overflow: hidden; + text-align: center; + vertical-align: middle; + inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size)); + } +} /********* WHCM *********/ @media (forced-colors: active) { .spectrum-DatePicker { - --highcontrast-datepicker-dash-color-disabled: GrayText; - --highcontrast-datepicker-focus-ring-color: Highlight; - --highcontrast-datepicker-pickerbutton-border-color: Highlight; - --highcontrast-datepicker-invalid-quiet-color: Highlight; - } + --highcontrast-datepicker-dash-color: CanvasText; + --highcontrast-datepicker-dash-color-disabled: GrayText; + --highcontrast-datepicker-focus-ring-color: Highlight; + --highcontrast-datepicker-pickerbutton-border-color: Highlight; + --highcontrast-datepicker-invalid-quiet-color: Highlight; + } } diff --git a/components/datepicker/metadata/mods.md b/components/datepicker/metadata/mods.md index d6c467088c4..e92f2d8bad9 100644 --- a/components/datepicker/metadata/mods.md +++ b/components/datepicker/metadata/mods.md @@ -3,6 +3,7 @@ | `--mod-datepicker-border-color-disabled` | | `--mod-datepicker-border-radius` | | `--mod-datepicker-border-radius-quiet` | +| `--mod-datepicker-dash-color` | | `--mod-datepicker-dash-color-disabled` | | `--mod-datepicker-dash-font-size` | | `--mod-datepicker-dash-line-height` | diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js index c88707fee9c..cc9011016af 100644 --- a/components/progressbar/stories/meter.template.js +++ b/components/progressbar/stories/meter.template.js @@ -3,6 +3,7 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import "../index.css"; @@ -10,9 +11,6 @@ export const Template = ({ rootClass = "spectrum-ProgressBar", customClasses = [], customStyles = {}, - headingStyles = { - "text-decoration": "underline", - }, items = [], label = "Storage space", value, @@ -25,9 +23,12 @@ export const Template = ({ const meterLabel = meter.label ?? label; const fill = meter.meterFill ?? meterFill; - // @todo: Should the heading content render through typography? return html` -

${heading}

+ ${Typography({ + semantics: "heading", + size: "xs", + content: [heading], + })}
.spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator { - /* Rotate the chevron */ - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } - - > .spectrum-TreeView { - /* Open the treeview */ - block-size: auto; - display: block; - } - } - - &.is-selected, - &.is-drop-target { - > .spectrum-TreeView-itemLink { - color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))); - } - - .spectrum-TreeView-itemIcon { - color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected))); - } - } - - > .spectrum-TreeView-itemLink:not(:focus-visible) { - &::before { - border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected))); - } - } - } - - &.is-selected { - > .spectrum-TreeView-itemLink:not(:focus-visible) { - &::before { - border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected)); - } - } - } - - &.is-drop-target { - > .spectrum-TreeView-itemLink { - &::before { - border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); - } - } - } - - &.is-disabled { - > .spectrum-TreeView-itemLink { - color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent); - } - - .spectrum-Icon { - color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled))); - } - } - } + /* Don't let child treeviews that are open spill out */ + overflow: hidden; + + &.is-open { + > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator { + /* Rotate the chevron */ + transform: var(--spectrum-logical-rotation,) rotate(90deg); + } + + > .spectrum-TreeView { + /* Open the treeview */ + block-size: auto; + display: block; + } + } + + &.is-selected, + &.is-drop-target { + > .spectrum-TreeView-itemLink { + color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))); + } + + .spectrum-TreeView-itemIcon { + color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected))); + } + } + + > .spectrum-TreeView-itemLink:not(:focus-visible) { + &::before { + border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected))); + } + } + } + + &.is-selected { + > .spectrum-TreeView-itemLink:not(:focus-visible) { + &::before { + border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected)); + } + } + } + + &.is-drop-target { + > .spectrum-TreeView-itemLink { + &::before { + border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); + } + } + } + + &.is-disabled { + > .spectrum-TreeView-itemLink { + color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent); + } + + .spectrum-Icon { + color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled))); + } + } + } } .spectrum-TreeView-itemLabel { - overflow: hidden; - text-overflow: ellipsis; - position: relative; + overflow: hidden; + text-overflow: ellipsis; + position: relative; } .spectrum-TreeView-itemLink { - box-sizing: border-box; - display: flex; - flex-flow: row nowrap; - align-items: center; - - min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); - padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end)); - - color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color))); - - text-decoration: none; - outline: none; - cursor: pointer; - - /* Prevent weirdness that can cause the vertical bar to fall down. */ - white-space: nowrap; - overflow: hidden; - - /* Background for hover, focus, and selection, that extends the full width of the list. */ - &::before { - content: '\00a0'; - box-sizing: border-box; - position: absolute; - inset-inline: 0; - min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); - - border-style: solid; - border-color: transparent; - border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0; - background-color: transparent; - color: transparent; - } - - &:focus-visible { - color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus))); - border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); - border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus))); - } - - .spectrum-TreeView-itemIcon { - color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus))); - } - } - - &:hover { - color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover))); - - &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))); - } - - .spectrum-TreeView-itemIcon { - color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover))); - } - } + box-sizing: border-box; + display: flex; + flex-flow: row nowrap; + align-items: center; + + min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); + padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end)); + + color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color))); + + text-decoration: none; + outline: none; + cursor: pointer; + + /* Prevent weirdness that can cause the vertical bar to fall down. */ + white-space: nowrap; + overflow: hidden; + + /* Background for hover, focus, and selection, that extends the full width of the list. */ + &::before { + content: "\00a0"; + box-sizing: border-box; + position: absolute; + inset-inline: 0; + min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size)); + + border-style: solid; + border-color: transparent; + border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0; + background-color: transparent; + color: transparent; + } + + &:focus-visible { + color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus))); + border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)); + border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus))); + } + + .spectrum-TreeView-itemIcon { + color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus))); + } + } + + &:hover { + color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover))); + + &::before { + background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))); + } + + .spectrum-TreeView-itemIcon { + color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover))); + } + } } .spectrum-TreeView-itemIcon { - position: relative; - vertical-align: top; - flex-shrink: 0; - margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); - color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color))); + position: relative; + vertical-align: top; + flex-shrink: 0; + margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); + color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color))); } .spectrum-TreeView-itemIndicator { - display: block; - box-sizing: content-box; - position: relative; - flex-shrink: 0; + display: block; + box-sizing: content-box; + position: relative; + flex-shrink: 0; - /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */ - z-index: 1; + /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */ + z-index: 1; - padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding)); - padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); - margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start)); + padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding)); + padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); + margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start)); - transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration)); - pointer-events: all; - transform: var(--spectrum-logical-rotation); + transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration)); + pointer-events: all; + transform: var(--spectrum-logical-rotation); } /* Section headings */ .spectrum-TreeView-section > .spectrum-TreeView { - display: block; - block-size: auto; - padding-inline-start: 0; + display: block; + block-size: auto; + padding-inline-start: 0; } .spectrum-TreeView-section:not(:first-child) { - margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing)); + margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing)); } .spectrum-TreeView-heading { - padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text)); - font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight)); - color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, inherit)); + padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text)); + font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight)); + color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-treeview-heading-color))); } /* Indentation levels used with Flat structure variant. */ .spectrum-TreeView-item--indent1 { - padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)); + padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)); } .spectrum-TreeView-item--indent2 { - padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent3 { - padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent4 { - padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent5 { - padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent6 { - padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent7 { - padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent8 { - padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent9 { - padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } .spectrum-TreeView-item--indent10 { - padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); + padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation))); } /* ***** VARIANTS ***** */ .spectrum-TreeView--thumbnail { - .spectrum-TreeView-itemThumbnail { - flex-shrink: 0; - margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); - } + .spectrum-TreeView-itemThumbnail { + flex-shrink: 0; + margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); + } } diff --git a/components/well/index.css b/components/well/index.css index 5637577003b..8ee05edc523 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -11,18 +11,20 @@ governing permissions and limitations under the License. */ .spectrum-Well { - --spectrum-well-border-width: var(--spectrum-border-width-100); + --spectrum-well-border-width: var(--spectrum-border-width-100); + --spectrum-well-content-color: var(--spectrum-body-color); } .spectrum-Well { - text-align: start; - display: block; - min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); - padding: var(--mod-well-padding, var(--spectrum-well-padding)); - margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); - border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); - border-style: solid; - border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius)); - background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02)); - border-color: var(--mod-well-border-color, var(--spectrum-well-border-color)); + text-align: start; + display: block; + min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); + padding: var(--mod-well-padding, var(--spectrum-well-padding)); + margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); + border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); + border-style: solid; + border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius)); + background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02)); + border-color: var(--mod-well-border-color, var(--spectrum-well-border-color)); + color: var(--mod-well-content-color, var(--spectrum-well-content-color)); } diff --git a/components/well/metadata/mods.md b/components/well/metadata/mods.md index 91e6f136d75..99f96fddca2 100644 --- a/components/well/metadata/mods.md +++ b/components/well/metadata/mods.md @@ -4,6 +4,7 @@ | `--mod-well-border-color` | | `--mod-well-border-radius` | | `--mod-well-border-width` | +| `--mod-well-content-color` | | `--mod-well-margin-top` | | `--mod-well-min-width` | | `--mod-well-padding` | From d39db948f313b098e4738b0b726078495f46c8e9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 14 May 2024 11:42:04 -0400 Subject: [PATCH 09/13] chore: release (#2758) Co-authored-by: github-actions[bot] --- .changeset/new-sheep-bathe.md | 11 ----------- components/datepicker/CHANGELOG.md | 6 ++++++ components/datepicker/package.json | 2 +- components/progressbar/CHANGELOG.md | 6 ++++++ components/progressbar/package.json | 2 +- components/radio/CHANGELOG.md | 6 ++++++ components/radio/package.json | 2 +- components/slider/CHANGELOG.md | 6 ++++++ components/slider/package.json | 2 +- components/splitview/CHANGELOG.md | 6 ++++++ components/splitview/package.json | 2 +- components/treeview/CHANGELOG.md | 6 ++++++ components/treeview/package.json | 2 +- components/well/CHANGELOG.md | 6 ++++++ components/well/package.json | 2 +- 15 files changed, 49 insertions(+), 18 deletions(-) delete mode 100644 .changeset/new-sheep-bathe.md diff --git a/.changeset/new-sheep-bathe.md b/.changeset/new-sheep-bathe.md deleted file mode 100644 index 51a0f3f2d90..00000000000 --- a/.changeset/new-sheep-bathe.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -"@spectrum-css/datepicker": minor -"@spectrum-css/splitview": minor -"@spectrum-css/treeview": minor -"@spectrum-css/slider": minor -"@spectrum-css/radio": minor -"@spectrum-css/well": minor -"@spectrum-css/progressbar": patch ---- - -Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md index 0e19bced5d4..af5be51ac8c 100644 --- a/components/datepicker/CHANGELOG.md +++ b/components/datepicker/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 3.2.0 + +### Minor Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 3.1.1 ### Patch Changes diff --git a/components/datepicker/package.json b/components/datepicker/package.json index 163d2db384d..50f8fcfab7b 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/datepicker", - "version": "3.1.1", + "version": "3.2.0", "description": "The Spectrum CSS datepicker component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/progressbar/CHANGELOG.md b/components/progressbar/CHANGELOG.md index 04ce0846ec1..014622e4ff6 100644 --- a/components/progressbar/CHANGELOG.md +++ b/components/progressbar/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 4.1.1 + +### Patch Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 4.1.0 ### Minor Changes diff --git a/components/progressbar/package.json b/components/progressbar/package.json index fb89aa50ebd..f727abbf0dc 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/progressbar", - "version": "4.1.0", + "version": "4.1.1", "description": "The Spectrum CSS progress bar component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/radio/CHANGELOG.md b/components/radio/CHANGELOG.md index bfc769faef5..17734f62b13 100644 --- a/components/radio/CHANGELOG.md +++ b/components/radio/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 9.2.0 + +### Minor Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 9.1.0 ### Minor Changes diff --git a/components/radio/package.json b/components/radio/package.json index cc1a65d8fa8..1d2457bd964 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/radio", - "version": "9.1.0", + "version": "9.2.0", "description": "The Spectrum CSS radio component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/slider/CHANGELOG.md b/components/slider/CHANGELOG.md index 0ae7debcd6d..c69971bf4f2 100644 --- a/components/slider/CHANGELOG.md +++ b/components/slider/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.2.0 + +### Minor Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 5.1.1 ### Patch Changes diff --git a/components/slider/package.json b/components/slider/package.json index 41af69c9efc..63aeb6892be 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/slider", - "version": "5.1.1", + "version": "5.2.0", "description": "The Spectrum CSS slider component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/splitview/CHANGELOG.md b/components/splitview/CHANGELOG.md index 9ae62f470d1..3bed414cba3 100644 --- a/components/splitview/CHANGELOG.md +++ b/components/splitview/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.2.0 + +### Minor Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 5.1.0 ### Minor Changes diff --git a/components/splitview/package.json b/components/splitview/package.json index 1287fc14c0e..aa2a9437c42 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/splitview", - "version": "5.1.0", + "version": "5.2.0", "description": "The Spectrum CSS splitview component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/treeview/CHANGELOG.md b/components/treeview/CHANGELOG.md index bd2e79e5db6..e5927ae8304 100644 --- a/components/treeview/CHANGELOG.md +++ b/components/treeview/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 10.2.0 + +### Minor Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 10.1.0 ### Minor Changes diff --git a/components/treeview/package.json b/components/treeview/package.json index 128f0e083b4..7b15e3d1187 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/treeview", - "version": "10.1.0", + "version": "10.2.0", "description": "The Spectrum CSS Tree view component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/well/CHANGELOG.md b/components/well/CHANGELOG.md index 9f4e07321f0..09ed1e26e3b 100644 --- a/components/well/CHANGELOG.md +++ b/components/well/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.2.0 + +### Minor Changes + +- [#2754](https://github.com/adobe/spectrum-css/pull/2754) [`dbf1406`](https://github.com/adobe/spectrum-css/commit/dbf1406822be32aa1dbd2864b097853423bf06d8) Thanks [@jawinn](https://github.com/jawinn)! - Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM. + ## 5.1.0 ### Minor Changes diff --git a/components/well/package.json b/components/well/package.json index f21a48bf3ef..243a7edbc59 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/well", - "version": "5.1.0", + "version": "5.2.0", "description": "The Spectrum CSS well component", "license": "Apache-2.0", "author": "Adobe", From 57a07ebc496fd7a5045b6e5a619eacca5f4c14ea Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Tue, 14 May 2024 11:49:07 -0400 Subject: [PATCH 10/13] chore: fix loglevel error message when running prettier commands (#2756) --- lint-staged.config.js | 8 ++++---- nx.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lint-staged.config.js b/lint-staged.config.js index 64a124cc759..b7783f0f662 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -1,6 +1,6 @@ module.exports = { "components/*/*.css": [ - "prettier --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write", + "prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write", "stylelint --fix --cache --allow-empty-input --quiet" ], "*.json": [ @@ -13,15 +13,15 @@ module.exports = { "eslint --fix --cache --no-error-on-unmatched-pattern --quiet" ], "dist/*.css": [ - "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write" + "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write" ], "components/*/metadata/*.{yml,yaml}": (files) => { return [ ...(files.map(file => `pajv test --valid -s ./schemas/documentation.schema.json -d "${file}"`) ?? []), - `prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write ${files.join(" ")}` + `prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write ${files.join(" ")}` ]; }, "*.md": [ - "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write" + "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write" ] }; diff --git a/nx.json b/nx.json index 46cd35cf5d4..59031c10554 100644 --- a/nx.json +++ b/nx.json @@ -140,7 +140,7 @@ "commands": [ "stylelint --fix --cache --allow-empty-input {projectRoot}/*.css {projectRoot}/**/*.css", "eslint --fix --cache --no-error-on-unmatched-pattern {projectRoot}/*.json {projectRoot}/stories/*.js", - "prettier --write --cache --loglevel error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{yml,md} {projectRoot}/**/*.{yml,md}" + "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{yml,md} {projectRoot}/**/*.{yml,md}" ] } }, From 30ba4eb129e6aba8eadd17ec3469a8070875494f Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 14 May 2024 11:58:24 -0400 Subject: [PATCH 11/13] fix(slider): dir before pseudo element --- components/slider/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/slider/index.css b/components/slider/index.css index 93efc28d541..0e77185f9f3 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -348,7 +348,7 @@ governing permissions and limitations under the License. transform: translate(-50%, -50%); - &:dir(rtl) { + .spectrum-Slider:dir(rtl) & { transform: translate(50%, -50%); } } From 9b5be66c7e606396fdae8df4e6a25a325fe86fc0 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 14 May 2024 11:58:34 -0400 Subject: [PATCH 12/13] fix(radio): dir before pseudo element --- components/radio/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/radio/index.css b/components/radio/index.css index b7fd10bbedf..91f61986fad 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -421,7 +421,7 @@ governing permissions and limitations under the License. opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out, margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out; - &:dir(rtl) { + .spectrum-Radio:dir(rtl) & { transform: translateX(50%) translateY(-50%); } } From fa77908364118dc2862782e9aa3fea0bb43560ed Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 14 May 2024 11:59:17 -0400 Subject: [PATCH 13/13] chore: changeset --- .changeset/neat-windows-yawn.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/neat-windows-yawn.md diff --git a/.changeset/neat-windows-yawn.md b/.changeset/neat-windows-yawn.md new file mode 100644 index 00000000000..429c60113d5 --- /dev/null +++ b/.changeset/neat-windows-yawn.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/slider": patch +"@spectrum-css/radio": patch +--- + +Includes similar fixes for both Slider and Radio. Some parsers see `:pseudo:dir` as invalid, so we've changed it so that the pseudo element comes last `:dir :pseudo`.