From 13584388c4859802737c69b39267da87a88d1f48 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 26 Jun 2024 02:51:23 -0700 Subject: [PATCH 01/46] chore: release main (#9697) ## Summary Cherry-pick release commit for `2.10.0`. --- package-lock.json | 18 +- .../projects/component-library/CHANGELOG.md | 70 +------- .../projects/component-library/package.json | 4 +- .../calcite-components-react/CHANGELOG.md | 70 +------- .../calcite-components-react/package.json | 4 +- packages/calcite-components/CHANGELOG.md | 155 ++++-------------- packages/calcite-components/package.json | 6 +- packages/calcite-design-tokens/CHANGELOG.md | 4 - packages/calcite-design-tokens/package.json | 2 +- .../CHANGELOG.md | 4 - .../package.json | 2 +- 11 files changed, 62 insertions(+), 277 deletions(-) diff --git a/package-lock.json b/package-lock.json index d4cf36bca11..9041a4cdf1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36892,7 +36892,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.10.0-next.12", + "version": "2.10.0", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.6.5", @@ -36908,9 +36908,9 @@ "type-fest": "4.18.2" }, "devDependencies": { - "@esri/calcite-design-tokens": "^2.2.1-next.0", + "@esri/calcite-design-tokens": "^2.2.1", "@esri/calcite-ui-icons": "3.28.2", - "@esri/eslint-plugin-calcite-components": "^1.2.1-next.2", + "@esri/eslint-plugin-calcite-components": "^1.2.1", "@stencil-community/eslint-plugin": "0.7.2", "@stencil-community/postcss": "2.2.0", "@stencil/angular-output-target": "0.8.4", @@ -38176,10 +38176,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.10.0-next.12", + "version": "2.10.0", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.10.0-next.12", + "@esri/calcite-components": "^2.10.0", "tslib": "2.6.2" }, "peerDependencies": { @@ -38189,10 +38189,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.10.0-next.12", + "version": "2.10.0", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.10.0-next.12" + "@esri/calcite-components": "^2.10.0" }, "peerDependencies": { "react": ">=16.7", @@ -38518,7 +38518,7 @@ }, "packages/calcite-design-tokens": { "name": "@esri/calcite-design-tokens", - "version": "2.2.1-next.0", + "version": "2.2.1", "devDependencies": { "ts-jest-resolver": "2.0.1", "ts-node": "10.9.2" @@ -38526,7 +38526,7 @@ }, "packages/eslint-plugin-calcite-components": { "name": "@esri/eslint-plugin-calcite-components", - "version": "1.2.1-next.2", + "version": "1.2.1", "license": "SEE LICENSE.md", "dependencies": { "stencil-eslint-core": "0.4.1" diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index 270966715a2..0891eff7ae0 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,73 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.10.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.11...@esri/calcite-components-angular@2.10.0-next.12) (2024-06-25) +## [2.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0...@esri/calcite-components-angular@2.10.0) (2024-06-26) -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.10...@esri/calcite-components-angular@2.10.0-next.11) (2024-06-25) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.9...@esri/calcite-components-angular@2.10.0-next.10) (2024-06-25) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.8...@esri/calcite-components-angular@2.10.0-next.9) (2024-06-25) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.7...@esri/calcite-components-angular@2.10.0-next.8) (2024-06-24) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.6...@esri/calcite-components-angular@2.10.0-next.7) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.5...@esri/calcite-components-angular@2.10.0-next.6) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.4...@esri/calcite-components-angular@2.10.0-next.5) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.3...@esri/calcite-components-angular@2.10.0-next.4) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.2...@esri/calcite-components-angular@2.10.0-next.3) (2024-06-20) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.1...@esri/calcite-components-angular@2.10.0-next.2) (2024-06-20) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.0...@esri/calcite-components-angular@2.10.0-next.1) (2024-06-06) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.10.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.3...@esri/calcite-components-angular@2.10.0-next.0) (2024-06-06) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.9.1-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.2...@esri/calcite-components-angular@2.9.1-next.3) (2024-06-05) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.9.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.1...@esri/calcite-components-angular@2.9.1-next.2) (2024-06-04) - -**Note:** Version bump only for package @esri/calcite-components-angular - -## [2.9.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.0...@esri/calcite-components-angular@2.9.1-next.1) (2024-06-04) +### Miscellaneous Chores -**Note:** Version bump only for package @esri/calcite-components-angular +- **@esri/calcite-components-angular:** Synchronize components versions -## [2.9.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0...@esri/calcite-components-angular@2.9.1-next.0) (2024-05-31) +### Dependencies -**Note:** Version bump only for package @esri/calcite-components-angular +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-components bumped from ^2.9.0 to ^2.10.0 ## [2.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.3...@esri/calcite-components-angular@2.9.0) (2024-05-28) diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index d5e41a60d92..7edc503ec21 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.10.0-next.12", + "version": "2.10.0", "description": "A set of Angular components that wrap Esri's Calcite Components.", "homepage": "https://developers.arcgis.com/calcite-design-system/", "bugs": { @@ -20,7 +20,7 @@ "dist" ], "dependencies": { - "@esri/calcite-components": "^2.10.0-next.12", + "@esri/calcite-components": "^2.10.0", "tslib": "2.6.2" }, "peerDependencies": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 414d98b269c..f103f118699 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,73 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.10.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.11...@esri/calcite-components-react@2.10.0-next.12) (2024-06-25) +## [2.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0...@esri/calcite-components-react@2.10.0) (2024-06-26) -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.10...@esri/calcite-components-react@2.10.0-next.11) (2024-06-25) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.9...@esri/calcite-components-react@2.10.0-next.10) (2024-06-25) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.8...@esri/calcite-components-react@2.10.0-next.9) (2024-06-25) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.7...@esri/calcite-components-react@2.10.0-next.8) (2024-06-24) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.6...@esri/calcite-components-react@2.10.0-next.7) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.5...@esri/calcite-components-react@2.10.0-next.6) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.4...@esri/calcite-components-react@2.10.0-next.5) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.3...@esri/calcite-components-react@2.10.0-next.4) (2024-06-21) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.2...@esri/calcite-components-react@2.10.0-next.3) (2024-06-20) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.1...@esri/calcite-components-react@2.10.0-next.2) (2024-06-20) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.0...@esri/calcite-components-react@2.10.0-next.1) (2024-06-06) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.10.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.3...@esri/calcite-components-react@2.10.0-next.0) (2024-06-06) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.9.1-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.2...@esri/calcite-components-react@2.9.1-next.3) (2024-06-05) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.9.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.1...@esri/calcite-components-react@2.9.1-next.2) (2024-06-04) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [2.9.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.0...@esri/calcite-components-react@2.9.1-next.1) (2024-06-04) +### Miscellaneous Chores -**Note:** Version bump only for package @esri/calcite-components-react +- **@esri/calcite-components-react:** Synchronize components versions -## [2.9.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0...@esri/calcite-components-react@2.9.1-next.0) (2024-05-31) +### Dependencies -**Note:** Version bump only for package @esri/calcite-components-react +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-components bumped from ^2.9.0 to ^2.10.0 ## [2.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.3...@esri/calcite-components-react@2.9.0) (2024-05-28) diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 3c921b3d962..5eef4d4c9f9 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-react", - "version": "2.10.0-next.12", + "version": "2.10.0", "description": "A set of React components that wrap calcite components", "homepage": "https://developers.arcgis.com/calcite-design-system/", "repository": { @@ -28,7 +28,7 @@ "tsc": "tsc" }, "dependencies": { - "@esri/calcite-components": "^2.10.0-next.12" + "@esri/calcite-components": "^2.10.0" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index afc0002e3db..df101d3e271 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,151 +3,56 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.10.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.11...@esri/calcite-components@2.10.0-next.12) (2024-06-25) - -### Bug Fixes - -- **combobox, dropdown, input-date-picker, popover, tooltip:** fix initialization logic in components output target ([#9470](https://github.com/Esri/calcite-design-system/issues/9470)) ([087bc92](https://github.com/Esri/calcite-design-system/commit/087bc922fe9de497cd54fe132a4ca32d0f9247f9)), closes [#9468](https://github.com/Esri/calcite-design-system/issues/9468) -- **popover:** prevent closing when component is connected to the DOM via a click ([#9501](https://github.com/Esri/calcite-design-system/issues/9501)) ([d35bf65](https://github.com/Esri/calcite-design-system/commit/d35bf65753c8c417accae21776601f15d9ddf1a1)), closes [#9504](https://github.com/Esri/calcite-design-system/issues/9504) - -## [2.10.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.10...@esri/calcite-components@2.10.0-next.11) (2024-06-25) - -### Features - -- **input-date-picker, input-time-picker:** support form validation for min/max constraints ([#9677](https://github.com/Esri/calcite-design-system/issues/9677)) ([38fd878](https://github.com/Esri/calcite-design-system/commit/38fd8785c1056770c7261a7be7e92692a8394bc9)), closes [#8065](https://github.com/Esri/calcite-design-system/issues/8065) [#9282](https://github.com/Esri/calcite-design-system/issues/9282) - -### Bug Fixes - -- **flow-item:** fix inverted footer start/end slots ([#9681](https://github.com/Esri/calcite-design-system/issues/9681)) ([69cd6a5](https://github.com/Esri/calcite-design-system/commit/69cd6a5bdeb69da38b5c6482f8e44073a556a464)), closes [#8981](https://github.com/Esri/calcite-design-system/issues/8981) - -## [2.10.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.9...@esri/calcite-components@2.10.0-next.10) (2024-06-25) - -### Features - -- **input-time-zone:** add `offsetStyle` prop ([#9426](https://github.com/Esri/calcite-design-system/issues/9426)) ([dbc6c81](https://github.com/Esri/calcite-design-system/commit/dbc6c81ed087fa3ce05c4f2f4eaefc045ef05e9b)), closes [#8716](https://github.com/Esri/calcite-design-system/issues/8716) - -## [2.10.0-next.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.8...@esri/calcite-components@2.10.0-next.9) (2024-06-25) - -### Features - -- **panel, flow-item:** add `footer-start` and `footer-end` slots ([#9374](https://github.com/Esri/calcite-design-system/issues/9374)) ([3def3ea](https://github.com/Esri/calcite-design-system/commit/3def3ea51bc69dfd1ebefc6a1ef2bcfe0bdc943c)), closes [#8981](https://github.com/Esri/calcite-design-system/issues/8981) - -### Bug Fixes - -- **list-item:** improve list item outline ([#9675](https://github.com/Esri/calcite-design-system/issues/9675)) ([b8c2fff](https://github.com/Esri/calcite-design-system/commit/b8c2fffab447ac47c2e4fedab07cafc33b1fe2d9)), closes [#7538](https://github.com/Esri/calcite-design-system/issues/7538) - -## [2.10.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.7...@esri/calcite-components@2.10.0-next.8) (2024-06-24) - -### Features - -- **combobox:** highlight filter matches ([#9425](https://github.com/Esri/calcite-design-system/issues/9425)) ([0d538c8](https://github.com/Esri/calcite-design-system/commit/0d538c8900a386eb8d5f01e2c91b69c26f2c8a2c)), closes [#9026](https://github.com/Esri/calcite-design-system/issues/9026) - -## [2.10.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.6...@esri/calcite-components@2.10.0-next.7) (2024-06-21) - -### Features - -- **combobox:** add `filterText` prop ([#9654](https://github.com/Esri/calcite-design-system/issues/9654)) ([01d01de](https://github.com/Esri/calcite-design-system/commit/01d01de57ff8fb9a683f9f7ba5668ad8f83d2a67)), closes [#7212](https://github.com/Esri/calcite-design-system/issues/7212) - -## [2.10.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.5...@esri/calcite-components@2.10.0-next.6) (2024-06-21) - -### Features - -- **list:** add filterProps property to specify which properties to filter against ([#9622](https://github.com/Esri/calcite-design-system/issues/9622)) ([a253c00](https://github.com/Esri/calcite-design-system/commit/a253c0040b6c00c2b7ee8d0c0a6830a5848dd116)), closes [#9619](https://github.com/Esri/calcite-design-system/issues/9619) - -## [2.10.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.4...@esri/calcite-components@2.10.0-next.5) (2024-06-21) - -### Bug Fixes - -- **list:** enable dragging on list items contained within a list that supports dragEnabled ([#9660](https://github.com/Esri/calcite-design-system/issues/9660)) ([5010ef9](https://github.com/Esri/calcite-design-system/commit/5010ef991e8096b0733e6e51cce27b8a39a6e052)), closes [#9662](https://github.com/Esri/calcite-design-system/issues/9662) - -## [2.10.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.3...@esri/calcite-components@2.10.0-next.4) (2024-06-21) - -### Bug Fixes - -- **combobox:** allow arrow selection of entered text ([#9629](https://github.com/Esri/calcite-design-system/issues/9629)) ([df5e654](https://github.com/Esri/calcite-design-system/commit/df5e65452d2efd8ef8f9e4544b0efe4405df5de3)), closes [#9614](https://github.com/Esri/calcite-design-system/issues/9614) - -## [2.10.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.2...@esri/calcite-components@2.10.0-next.3) (2024-06-20) - -### Features - -- **color-picker-hex-input:** auto apply new color after typing/pasting hex code ([#9561](https://github.com/Esri/calcite-design-system/issues/9561)) ([8b34583](https://github.com/Esri/calcite-design-system/commit/8b34583a0f3de3a02b1cea069f69eeecd8b77e72)), closes [#7057](https://github.com/Esri/calcite-design-system/issues/7057) - -### Bug Fixes - -- **list-item:** Improve focus outline appearance ([#9653](https://github.com/Esri/calcite-design-system/issues/9653)) ([b3d2cb2](https://github.com/Esri/calcite-design-system/commit/b3d2cb26c9df609c3b6c06be672ab70f6227d4e3)), closes [#7538](https://github.com/Esri/calcite-design-system/issues/7538) - -## [2.10.0-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.1...@esri/calcite-components@2.10.0-next.2) (2024-06-20) - -### Features - -- **block:** add `icon start/end` properties (deprecate `icon` slot and `status`), add `actions-end` slot (deprecate `control`), add `content-start` ([#9535](https://github.com/Esri/calcite-design-system/issues/9535)) ([7117c6b](https://github.com/Esri/calcite-design-system/commit/7117c6b3dfb1bb5b64b71b2ae0754357a8be8f89)), closes [#4932](https://github.com/Esri/calcite-design-system/issues/4932) -- **color-picker:** adjust thumb and color preview sizes to follow updated spec ([#9523](https://github.com/Esri/calcite-design-system/issues/9523)) ([41dc551](https://github.com/Esri/calcite-design-system/commit/41dc5518c8b219623bf625919828f23283633050)), closes [#9412](https://github.com/Esri/calcite-design-system/issues/9412) -- **filter:** adds ability to match only specific filter data properties ([#9541](https://github.com/Esri/calcite-design-system/issues/9541)) ([137d9ae](https://github.com/Esri/calcite-design-system/commit/137d9ae1086d7bcd369e832456760e13e8e014f9)), closes [#5063](https://github.com/Esri/calcite-design-system/issues/5063) -- include version in global config ([#9536](https://github.com/Esri/calcite-design-system/issues/9536)) ([86eefb0](https://github.com/Esri/calcite-design-system/commit/86eefb0ddb3186020429acd6bb5a98e7a14235ab)), closes [#8848](https://github.com/Esri/calcite-design-system/issues/8848) -- **split-button:** add placement and flipPlacements property ([#9548](https://github.com/Esri/calcite-design-system/issues/9548)) ([bc2c2c6](https://github.com/Esri/calcite-design-system/commit/bc2c2c6d61dc78ba215a3f34db80d0411cfef7c1)), closes [#9542](https://github.com/Esri/calcite-design-system/issues/9542) +## [2.10.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0...@esri/calcite-components@2.10.0) (2024-06-26) ### Bug Fixes +- **alert:** pause auto-close alert when link focused ([#9503](https://github.com/Esri/calcite-design-system/issues/9503)) ([fa9a829](https://github.com/Esri/calcite-design-system/commit/fa9a8296d2757d8b58d6bb79d2d308d096507b49)), closes [#5960](https://github.com/Esri/calcite-design-system/issues/5960) - **block-section:** adjust text hierarchy ([#9580](https://github.com/Esri/calcite-design-system/issues/9580)) ([801152c](https://github.com/Esri/calcite-design-system/commit/801152c8e60471636bd1ae83e5cdddef60920c1c)), closes [#6905](https://github.com/Esri/calcite-design-system/issues/6905) +- **block-section:** restore block toggling when clicking on the header switch ([#9472](https://github.com/Esri/calcite-design-system/issues/9472)) ([519a11c](https://github.com/Esri/calcite-design-system/commit/519a11c6d85383e7d7bab95a9c52330864606602)), closes [#9454](https://github.com/Esri/calcite-design-system/issues/9454) [#9194](https://github.com/Esri/calcite-design-system/issues/9194) +- **block:** add accessible label for slotted controls ([#9502](https://github.com/Esri/calcite-design-system/issues/9502)) ([a9054d5](https://github.com/Esri/calcite-design-system/commit/a9054d5e496cff038553ac349829b28ff5941a4f)), closes [#8037](https://github.com/Esri/calcite-design-system/issues/8037) - **carousel:** Prevent unexpected keyboard `autoplay` activation ([#9621](https://github.com/Esri/calcite-design-system/issues/9621)) ([f674964](https://github.com/Esri/calcite-design-system/commit/f67496473d04c8b3354f28793595f8be1db50481)), closes [#9620](https://github.com/Esri/calcite-design-system/issues/9620) +- **combobox, dropdown, input-date-picker, popover, tooltip:** fix initialization logic in components output target ([#9470](https://github.com/Esri/calcite-design-system/issues/9470)) ([087bc92](https://github.com/Esri/calcite-design-system/commit/087bc922fe9de497cd54fe132a4ca32d0f9247f9)), closes [#9468](https://github.com/Esri/calcite-design-system/issues/9468) +- **combobox:** allow arrow selection of entered text ([#9629](https://github.com/Esri/calcite-design-system/issues/9629)) ([df5e654](https://github.com/Esri/calcite-design-system/commit/df5e65452d2efd8ef8f9e4544b0efe4405df5de3)), closes [#9614](https://github.com/Esri/calcite-design-system/issues/9614) - **combobox:** fix navigating initially when multiple items are selected ([#9613](https://github.com/Esri/calcite-design-system/issues/9613)) ([5d9509b](https://github.com/Esri/calcite-design-system/commit/5d9509b63a8fa7ffd0d4b762cb0d5104cb86d6e3)), closes [#6776](https://github.com/Esri/calcite-design-system/issues/6776) - **combobox:** no longer hides input when a selected item chip is focused ([#9625](https://github.com/Esri/calcite-design-system/issues/9625)) ([24c45b3](https://github.com/Esri/calcite-design-system/commit/24c45b3004ced7dcd01a6ac3d42b7fc075e177e1)), closes [#6750](https://github.com/Esri/calcite-design-system/issues/6750) - **combobox:** only open when text exists and filtered items are present ([#9618](https://github.com/Esri/calcite-design-system/issues/9618)) ([9a7f443](https://github.com/Esri/calcite-design-system/commit/9a7f443fdb0bb1598b360060b96ea9debfe46b34)), closes [#9617](https://github.com/Esri/calcite-design-system/issues/9617) - **combobox:** open the component when typing within it ([#9543](https://github.com/Esri/calcite-design-system/issues/9543)) ([ab09c71](https://github.com/Esri/calcite-design-system/commit/ab09c71a242d501260e0fa339102f75f7eeb8cf0)), closes [#9401](https://github.com/Esri/calcite-design-system/issues/9401) -- fix regression causing open/close events from emitting in proper order ([#9560](https://github.com/Esri/calcite-design-system/issues/9560)) ([fa5b415](https://github.com/Esri/calcite-design-system/commit/fa5b415d05c2faa474909318c5997d2dae1c73cb)), closes [#9559](https://github.com/Esri/calcite-design-system/issues/9559) +- **flow-item:** fix inverted footer start/end slots ([#9681](https://github.com/Esri/calcite-design-system/issues/9681)) ([69cd6a5](https://github.com/Esri/calcite-design-system/commit/69cd6a5bdeb69da38b5c6482f8e44073a556a464)), closes [#8981](https://github.com/Esri/calcite-design-system/issues/8981) - **input-date-picker, date-picker:** ensure day selection doesn't activate the previous day in certain scenarios ([#9424](https://github.com/Esri/calcite-design-system/issues/9424)) ([ab77212](https://github.com/Esri/calcite-design-system/commit/ab77212a65acb0fec3ff5c89842d79ea3db9141c)), closes [#9422](https://github.com/Esri/calcite-design-system/issues/9422) - **input-date-picker, input-time-picker:** focus input element on `setFocus` ([#9584](https://github.com/Esri/calcite-design-system/issues/9584)) ([c7b8a68](https://github.com/Esri/calcite-design-system/commit/c7b8a6890435f8b2adee9fa6a6886b96845bf682)) +- **list-item:** Improve focus outline appearance ([#9653](https://github.com/Esri/calcite-design-system/issues/9653)) ([b3d2cb2](https://github.com/Esri/calcite-design-system/commit/b3d2cb26c9df609c3b6c06be672ab70f6227d4e3)), closes [#7538](https://github.com/Esri/calcite-design-system/issues/7538) +- **list-item:** hide nested list items by default ([#9474](https://github.com/esri/calcite-design-system/issues/9474)) ([fb06ef9](https://github.com/esri/calcite-design-system/commit/fb06ef96c7bf719afa9a46c8eff09f0945c6f3cd)), closes [#9400](https://github.com/esri/calcite-design-system/issues/9400) +- **list-item:** improve list item outline ([#9675](https://github.com/Esri/calcite-design-system/issues/9675)) ([b8c2fff](https://github.com/Esri/calcite-design-system/commit/b8c2fffab447ac47c2e4fedab07cafc33b1fe2d9)), closes [#7538](https://github.com/Esri/calcite-design-system/issues/7538) +- **list:** enable dragging on list items contained within a list that supports dragEnabled ([#9660](https://github.com/Esri/calcite-design-system/issues/9660)) ([5010ef9](https://github.com/Esri/calcite-design-system/commit/5010ef991e8096b0733e6e51cce27b8a39a6e052)), closes [#9662](https://github.com/Esri/calcite-design-system/issues/9662) - **list:** fix mobile device dragging with nested lists ([#9573](https://github.com/Esri/calcite-design-system/issues/9573)) ([6f466aa](https://github.com/Esri/calcite-design-system/commit/6f466aa1f7b2064fccf133dbfb9fccb5a5841c56)), closes [#9521](https://github.com/Esri/calcite-design-system/issues/9521) +- **pagination:** use semantic internal elements ([#9479](https://github.com/Esri/calcite-design-system/issues/9479)) ([b70d7d9](https://github.com/Esri/calcite-design-system/commit/b70d7d906e5196f6cf9e3b9c2110440fbd3f158b)), closes [#7804](https://github.com/Esri/calcite-design-system/issues/7804) +- **panel:** prevent menu actions from being clipped in Safari ([#9488](https://github.com/Esri/calcite-design-system/issues/9488)) ([29eb4ce](https://github.com/Esri/calcite-design-system/commit/29eb4ce802e8ebdeb2012ad178fd19334b6c3a44)), closes [#8028](https://github.com/Esri/calcite-design-system/issues/8028) +- **popover:** correct border radius on close button ([#9485](https://github.com/esri/calcite-design-system/issues/9485)) ([d0fba56](https://github.com/esri/calcite-design-system/commit/d0fba5655ef730e012586f3be6ccb82f674308a7)), closes [#8208](https://github.com/esri/calcite-design-system/issues/8208) +- **popover:** prevent closing when component is connected to the DOM via a click ([#9501](https://github.com/Esri/calcite-design-system/issues/9501)) ([d35bf65](https://github.com/Esri/calcite-design-system/commit/d35bf65753c8c417accae21776601f15d9ddf1a1)), closes [#9504](https://github.com/Esri/calcite-design-system/issues/9504) - **tile:** expose selected property ([#9583](https://github.com/Esri/calcite-design-system/issues/9583)) ([d15f667](https://github.com/Esri/calcite-design-system/commit/d15f66767395c0ccef6dd94de64a021b927d1fcb)), closes [#9582](https://github.com/Esri/calcite-design-system/issues/9582) - -### Reverts - -- refactor: add simpler `componentFocusable` util (deprecates `LoadableComponent`) ([#9515](https://github.com/Esri/calcite-design-system/issues/9515)) ([8edeb36](https://github.com/Esri/calcite-design-system/commit/8edeb3645fb8dee31df60165b0f82e13aa290e19)), closes [#9362](https://github.com/Esri/calcite-design-system/issues/9362) - -## [2.10.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.0...@esri/calcite-components@2.10.0-next.1) (2024-06-06) +- fix regression causing open/close events from emitting in proper order ([#9560](https://github.com/Esri/calcite-design-system/issues/9560)) ([fa5b415](https://github.com/Esri/calcite-design-system/commit/fa5b415d05c2faa474909318c5997d2dae1c73cb)), closes [#9559](https://github.com/Esri/calcite-design-system/issues/9559) ### Features - **action-bar, action-pad:** add expandLabel and collapseLabel to messages ([#9497](https://github.com/Esri/calcite-design-system/issues/9497)) ([12407eb](https://github.com/Esri/calcite-design-system/commit/12407eba686c7da11c5463b9e6dcbd74fdefb7cc)), closes [#5539](https://github.com/Esri/calcite-design-system/issues/5539) - -### Bug Fixes - -- **block:** add accessible label for slotted controls ([#9502](https://github.com/Esri/calcite-design-system/issues/9502)) ([a9054d5](https://github.com/Esri/calcite-design-system/commit/a9054d5e496cff038553ac349829b28ff5941a4f)), closes [#8037](https://github.com/Esri/calcite-design-system/issues/8037) - -## [2.10.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.3...@esri/calcite-components@2.10.0-next.0) (2024-06-06) - -### Features - - **action-menu, combobox, dropdown, input-date-picker, popover:** allow logical placements for flipPlacements property. [#8825](https://github.com/Esri/calcite-design-system/issues/8825) ([#9490](https://github.com/Esri/calcite-design-system/issues/9490)) ([45aabaa](https://github.com/Esri/calcite-design-system/commit/45aabaa27ab50523ccdc5df07019cc8ed7dfb2b0)) +- **block:** add `icon start/end` properties (deprecate `icon` slot and `status`), add `actions-end` slot (deprecate `control`), add `content-start` ([#9535](https://github.com/Esri/calcite-design-system/issues/9535)) ([7117c6b](https://github.com/Esri/calcite-design-system/commit/7117c6b3dfb1bb5b64b71b2ae0754357a8be8f89)), closes [#4932](https://github.com/Esri/calcite-design-system/issues/4932) +- **color-picker-hex-input:** auto apply new color after typing/pasting hex code ([#9561](https://github.com/Esri/calcite-design-system/issues/9561)) ([8b34583](https://github.com/Esri/calcite-design-system/commit/8b34583a0f3de3a02b1cea069f69eeecd8b77e72)), closes [#7057](https://github.com/Esri/calcite-design-system/issues/7057) +- **color-picker:** adjust thumb and color preview sizes to follow updated spec ([#9523](https://github.com/Esri/calcite-design-system/issues/9523)) ([41dc551](https://github.com/Esri/calcite-design-system/commit/41dc5518c8b219623bf625919828f23283633050)), closes [#9412](https://github.com/Esri/calcite-design-system/issues/9412) +- **combobox:** add `filterText` prop ([#9654](https://github.com/Esri/calcite-design-system/issues/9654)) ([01d01de](https://github.com/Esri/calcite-design-system/commit/01d01de57ff8fb9a683f9f7ba5668ad8f83d2a67)), closes [#7212](https://github.com/Esri/calcite-design-system/issues/7212) +- **combobox:** highlight filter matches ([#9425](https://github.com/Esri/calcite-design-system/issues/9425)) ([0d538c8](https://github.com/Esri/calcite-design-system/commit/0d538c8900a386eb8d5f01e2c91b69c26f2c8a2c)), closes [#9026](https://github.com/Esri/calcite-design-system/issues/9026) +- **filter:** adds ability to match only specific filter data properties ([#9541](https://github.com/Esri/calcite-design-system/issues/9541)) ([137d9ae](https://github.com/Esri/calcite-design-system/commit/137d9ae1086d7bcd369e832456760e13e8e014f9)), closes [#5063](https://github.com/Esri/calcite-design-system/issues/5063) +- **input-date-picker, input-time-picker:** support form validation for min/max constraints ([#9677](https://github.com/Esri/calcite-design-system/issues/9677)) ([38fd878](https://github.com/Esri/calcite-design-system/commit/38fd8785c1056770c7261a7be7e92692a8394bc9)), closes [#8065](https://github.com/Esri/calcite-design-system/issues/8065) [#9282](https://github.com/Esri/calcite-design-system/issues/9282) +- **input-time-zone:** add `offsetStyle` prop ([#9426](https://github.com/Esri/calcite-design-system/issues/9426)) ([dbc6c81](https://github.com/Esri/calcite-design-system/commit/dbc6c81ed087fa3ce05c4f2f4eaefc045ef05e9b)), closes [#8716](https://github.com/Esri/calcite-design-system/issues/8716) +- **list:** add filterProps property to specify which properties to filter against ([#9622](https://github.com/Esri/calcite-design-system/issues/9622)) ([a253c00](https://github.com/Esri/calcite-design-system/commit/a253c0040b6c00c2b7ee8d0c0a6830a5848dd116)), closes [#9619](https://github.com/Esri/calcite-design-system/issues/9619) +- **panel, flow-item:** add `footer-start` and `footer-end` slots ([#9374](https://github.com/Esri/calcite-design-system/issues/9374)) ([3def3ea](https://github.com/Esri/calcite-design-system/commit/3def3ea51bc69dfd1ebefc6a1ef2bcfe0bdc943c)), closes [#8981](https://github.com/Esri/calcite-design-system/issues/8981) +- **split-button:** add placement and flipPlacements property ([#9548](https://github.com/Esri/calcite-design-system/issues/9548)) ([bc2c2c6](https://github.com/Esri/calcite-design-system/commit/bc2c2c6d61dc78ba215a3f34db80d0411cfef7c1)), closes [#9542](https://github.com/Esri/calcite-design-system/issues/9542) +- include version in global config ([#9536](https://github.com/Esri/calcite-design-system/issues/9536)) ([86eefb0](https://github.com/Esri/calcite-design-system/commit/86eefb0ddb3186020429acd6bb5a98e7a14235ab)), closes [#8848](https://github.com/Esri/calcite-design-system/issues/8848) -### Bug Fixes - -- **list-item:** hide nested list items by default ([#9474](https://github.com/Esri/calcite-design-system/issues/9474)) ([fb06ef9](https://github.com/Esri/calcite-design-system/commit/fb06ef96c7bf719afa9a46c8eff09f0945c6f3cd)), closes [#9400](https://github.com/Esri/calcite-design-system/issues/9400) -- **popover:** correct border radius on close button ([#9485](https://github.com/Esri/calcite-design-system/issues/9485)) ([d0fba56](https://github.com/Esri/calcite-design-system/commit/d0fba5655ef730e012586f3be6ccb82f674308a7)), closes [#8208](https://github.com/Esri/calcite-design-system/issues/8208) - -## [2.9.1-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.2...@esri/calcite-components@2.9.1-next.3) (2024-06-05) - -### Bug Fixes - -- **alert:** pause auto-close alert when link focused ([#9503](https://github.com/Esri/calcite-design-system/issues/9503)) ([fa9a829](https://github.com/Esri/calcite-design-system/commit/fa9a8296d2757d8b58d6bb79d2d308d096507b49)), closes [#5960](https://github.com/Esri/calcite-design-system/issues/5960) - -## [2.9.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.1...@esri/calcite-components@2.9.1-next.2) (2024-06-04) - -### Bug Fixes - -- **block-section:** restore block toggling when clicking on the header switch ([#9472](https://github.com/Esri/calcite-design-system/issues/9472)) ([519a11c](https://github.com/Esri/calcite-design-system/commit/519a11c6d85383e7d7bab95a9c52330864606602)), closes [#9454](https://github.com/Esri/calcite-design-system/issues/9454) [#9194](https://github.com/Esri/calcite-design-system/issues/9194) - -## [2.9.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.0...@esri/calcite-components@2.9.1-next.1) (2024-06-04) - -### Bug Fixes - -- **panel:** prevent menu actions from being clipped in Safari ([#9488](https://github.com/Esri/calcite-design-system/issues/9488)) ([29eb4ce](https://github.com/Esri/calcite-design-system/commit/29eb4ce802e8ebdeb2012ad178fd19334b6c3a44)), closes [#8028](https://github.com/Esri/calcite-design-system/issues/8028) - -## [2.9.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0...@esri/calcite-components@2.9.1-next.0) (2024-05-31) - -### Bug Fixes +### Reverts -- **pagination:** use semantic internal elements ([#9479](https://github.com/Esri/calcite-design-system/issues/9479)) ([b70d7d9](https://github.com/Esri/calcite-design-system/commit/b70d7d906e5196f6cf9e3b9c2110440fbd3f158b)), closes [#7804](https://github.com/Esri/calcite-design-system/issues/7804) +- refactor: add simpler `componentFocusable` util (deprecates `LoadableComponent`) ([#9515](https://github.com/Esri/calcite-design-system/issues/9515)) ([8edeb36](https://github.com/Esri/calcite-design-system/commit/8edeb3645fb8dee31df60165b0f82e13aa290e19)), closes [#9362](https://github.com/Esri/calcite-design-system/issues/9362) ## [2.9.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.3...@esri/calcite-components@2.9.0) (2024-05-28) diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 47625099841..b82279a78c4 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.10.0-next.12", + "version": "2.10.0", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", @@ -76,9 +76,9 @@ "type-fest": "4.18.2" }, "devDependencies": { - "@esri/calcite-design-tokens": "^2.2.1-next.0", + "@esri/calcite-design-tokens": "^2.2.0", "@esri/calcite-ui-icons": "3.28.2", - "@esri/eslint-plugin-calcite-components": "^1.2.1-next.2", + "@esri/eslint-plugin-calcite-components": "^1.2.0", "@stencil-community/eslint-plugin": "0.7.2", "@stencil-community/postcss": "2.2.0", "@stencil/angular-output-target": "0.8.4", diff --git a/packages/calcite-design-tokens/CHANGELOG.md b/packages/calcite-design-tokens/CHANGELOG.md index 5ccd4b545e8..50f60fec08e 100644 --- a/packages/calcite-design-tokens/CHANGELOG.md +++ b/packages/calcite-design-tokens/CHANGELOG.md @@ -3,10 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [2.2.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.2.0...@esri/calcite-design-tokens@2.2.1-next.0) (2024-05-01) - -**Note:** Version bump only for package @esri/calcite-design-tokens - ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.2...@esri/calcite-design-tokens@2.2.0) (2024-04-30) ### Features diff --git a/packages/calcite-design-tokens/package.json b/packages/calcite-design-tokens/package.json index 157cae863e5..63f8e047e4f 100644 --- a/packages/calcite-design-tokens/package.json +++ b/packages/calcite-design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-design-tokens", - "version": "2.2.1-next.0", + "version": "2.2.0", "description": "Esri's Calcite Design System Tokens", "keywords": [ "Calcite", diff --git a/packages/eslint-plugin-calcite-components/CHANGELOG.md b/packages/eslint-plugin-calcite-components/CHANGELOG.md index 332d801c1c8..cd667066777 100644 --- a/packages/eslint-plugin-calcite-components/CHANGELOG.md +++ b/packages/eslint-plugin-calcite-components/CHANGELOG.md @@ -3,10 +3,6 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [1.2.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.1-next.1...@esri/eslint-plugin-calcite-components@1.2.1-next.2) (2024-05-31) - -**Note:** Version bump only for package @esri/eslint-plugin-calcite-components - ## [1.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.1.0...@esri/eslint-plugin-calcite-components@1.2.0) (2024-04-30) ### Features diff --git a/packages/eslint-plugin-calcite-components/package.json b/packages/eslint-plugin-calcite-components/package.json index 1a411d9f423..769d0a59553 100644 --- a/packages/eslint-plugin-calcite-components/package.json +++ b/packages/eslint-plugin-calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/eslint-plugin-calcite-components", - "version": "1.2.1-next.2", + "version": "1.2.0", "description": "ESLint rules for @esri/calcite-components", "repository": { "type": "git", From a9e331436713b610a2ab4b640402471602f5369f Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Wed, 26 Jun 2024 07:32:06 -0700 Subject: [PATCH 02/46] fix(angular): resolve empty dist (#9698) --- .../projects/component-library/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 7edc503ec21..5e2491e3cb0 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -16,9 +16,6 @@ "name": "Esri" }, "sideEffects": false, - "files": [ - "dist" - ], "dependencies": { "@esri/calcite-components": "^2.10.0", "tslib": "2.6.2" From 79296f83c232883af4f35707f09a9a231b3c406a Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 26 Jun 2024 14:30:34 -0700 Subject: [PATCH 03/46] test(input-time-zone): tidy up Intl API polyfill/override (#9676) **Related Issue:** N/A ## Summary The latest Puppeteer version includes Chromium 119, so we no longer need to provide most of what the test polyfill included. We still override supported time zones for increased coverage and to ease some test configurations. --- .../input-time-zone/input-time-zone.e2e.ts | 125 +++++------------- 1 file changed, 30 insertions(+), 95 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts index a1fba7c7d56..ffbaad12b96 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts @@ -41,7 +41,7 @@ describe("calcite-input-time-zone", () => { async function simpleTestProvider(): Promise { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); - await page.setContent(addTimeZoneNamePolyfill(html``)); + await page.setContent(overrideSupportedTimeZones(html``)); return { page, @@ -60,7 +60,7 @@ describe("calcite-input-time-zone", () => { describe("formAssociated", () => { formAssociated( { - tagOrHTML: addTimeZoneNamePolyfill(html``), + tagOrHTML: overrideSupportedTimeZones(html``), beforeContent: async (page) => { await page.emulateTimezone(testTimeZoneItems[0].name); }, @@ -82,7 +82,7 @@ describe("calcite-input-time-zone", () => { describe("labelable", () => { labelable({ - tagOrHTML: addTimeZoneNamePolyfill(html``), + tagOrHTML: overrideSupportedTimeZones(html``), beforeContent: async (page) => { await page.emulateTimezone(testTimeZoneItems[0].name); }, @@ -134,7 +134,9 @@ describe("calcite-input-time-zone", () => { it(`selects default time zone for "${name}"`, async () => { const page = await newE2EPage(); await page.emulateTimezone(name); - await page.setContent(addTimeZoneNamePolyfill(html``)); + await page.setContent( + overrideSupportedTimeZones(html``), + ); await page.waitForChanges(); const input = await page.find("calcite-input-time-zone"); @@ -151,7 +153,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - await addTimeZoneNamePolyfill( + await overrideSupportedTimeZones( html``, ), ); @@ -169,7 +171,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - await addTimeZoneNamePolyfill(html``), + await overrideSupportedTimeZones(html``), ); const input = await page.find("calcite-input-time-zone"); @@ -185,7 +187,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - await addTimeZoneNamePolyfill(html``), + await overrideSupportedTimeZones(html``), ); const input = await page.find("calcite-input-time-zone"); @@ -205,7 +207,9 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); - await page.setContent(await addTimeZoneNamePolyfill(html``)); + await page.setContent( + await overrideSupportedTimeZones(html``), + ); const input = await page.find("calcite-input-time-zone"); @@ -260,7 +264,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(name); await page.setContent( - await addTimeZoneNamePolyfill(html``), + await overrideSupportedTimeZones(html``), ); await page.waitForChanges(); @@ -278,7 +282,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - await addTimeZoneNamePolyfill( + await overrideSupportedTimeZones( html``, ), ); @@ -296,7 +300,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - await addTimeZoneNamePolyfill( + await overrideSupportedTimeZones( html``, ), ); @@ -317,7 +321,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - addTimeZoneNamePolyfill(html` + overrideSupportedTimeZones(html` `), ); @@ -349,7 +353,7 @@ describe("calcite-input-time-zone", () => { page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html` `, ), ); @@ -375,7 +379,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html``, ), ); @@ -395,7 +399,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - addTimeZoneNamePolyfill(html``), + overrideSupportedTimeZones(html``), ); const input = await page.find("calcite-input-time-zone"); @@ -406,7 +410,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - addTimeZoneNamePolyfill(html``), + overrideSupportedTimeZones(html``), ); const input = await page.find("calcite-input-time-zone"); @@ -434,7 +438,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(initialTimeZoneItem.name); await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html` `, ), ); @@ -466,7 +470,7 @@ describe("calcite-input-time-zone", () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); await page.setContent( - addTimeZoneNamePolyfill(html``), + overrideSupportedTimeZones(html``), ); const internalCombobox = await page.find("calcite-input-time-zone >>> calcite-combobox"); @@ -477,7 +481,7 @@ describe("calcite-input-time-zone", () => { it("recreates time zone items when item-dependent props change", async () => { const page = await newE2EPage(); await page.emulateTimezone(testTimeZoneItems[0].name); - await page.setContent(addTimeZoneNamePolyfill(html``)); + await page.setContent(overrideSupportedTimeZones(html``)); const inputTimeZone = await page.find("calcite-input-time-zone"); let prevComboboxItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item"); @@ -523,7 +527,7 @@ describe("calcite-input-time-zone", () => { describe("displays UTC or GMT based on user's locale (default)", () => { it("displays GMT for GMT-preferred locale", async () => { await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html``, ), ); @@ -533,7 +537,7 @@ describe("calcite-input-time-zone", () => { it("displays UTC for UTC-preferred locale", async () => { await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html``, ), ); @@ -544,7 +548,7 @@ describe("calcite-input-time-zone", () => { it("supports GMT as a style", async () => { await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html``, ), ); @@ -554,7 +558,7 @@ describe("calcite-input-time-zone", () => { it("supports UTC as a style", async () => { await page.setContent( - addTimeZoneNamePolyfill( + overrideSupportedTimeZones( html``, ), ); @@ -565,81 +569,12 @@ describe("calcite-input-time-zone", () => { }); /** - * Helper to inject an Intl polyfill to support time zone-related APIs - * Extended due to lack of support for "Intl.DateTimeFormatOptions#timeZoneName" in Chromium v92 (bundled in Puppeteer v10). + * This helper overrides supported time zones for testing purposes * * @param testHtml */ -function addTimeZoneNamePolyfill(testHtml: string): string { +function overrideSupportedTimeZones(testHtml: string): string { return html` ``` From a29545931ae32522a3c9e745a3a94315729cd995 Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Thu, 27 Jun 2024 06:56:50 -0700 Subject: [PATCH 12/46] docs: update component READMEs (#9704) This PR was automatically generated by the update-doc GitHub action Co-authored-by: benelan <10986395+benelan@users.noreply.github.com> --- .../calcite-components/src/components.d.ts | 98 ------------------- .../src/components/flow-item/readme.md | 2 + .../components/input-time-picker/readme.md | 2 + .../src/components/input-time-zone/readme.md | 1 + .../src/components/panel/readme.md | 28 +++--- 5 files changed, 20 insertions(+), 111 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 3a76eb679f5..c5ada57ac20 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -8,184 +8,86 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; -import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; -import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; -import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -import { ButtonMessages } from "./components/button/assets/button/t9n"; -import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; -import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; -import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; -import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; -import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; -import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; -import { InputMessages } from "./components/input/assets/input/t9n"; -import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; -import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; -import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -import { MenuMessages } from "./components/menu/assets/menu/t9n"; -import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -import { ModalMessages } from "./components/modal/assets/modal/t9n"; -import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; -import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -import { RatingMessages } from "./components/rating/assets/rating/t9n"; -import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -import { TableMessages } from "./components/table/assets/table/t9n"; -import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -import { TipMessages } from "./components/tip/assets/tip/t9n"; -import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; -export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; -export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -export { ButtonMessages } from "./components/button/assets/button/t9n"; -export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; -export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; -export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; -export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; -export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; -export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; -export { InputMessages } from "./components/input/assets/input/t9n"; -export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; -export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; -export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -export { ModalMessages } from "./components/modal/assets/modal/t9n"; -export { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; -export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -export { TableMessages } from "./components/table/assets/table/t9n"; -export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -export { TipMessages } from "./components/tip/assets/tip/t9n"; -export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/flow-item/readme.md b/packages/calcite-components/src/components/flow-item/readme.md index 03b1a75495f..cd81a774306 100644 --- a/packages/calcite-components/src/components/flow-item/readme.md +++ b/packages/calcite-components/src/components/flow-item/readme.md @@ -70,6 +70,8 @@ promise. | `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | | `"footer"` | A slot for adding custom content to the component's footer. | | `"footer-actions"` | [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer. | +| `"footer-end"` | A slot for adding a trailing footer custom content. | +| `"footer-start"` | A slot for adding a leading footer custom content. | | `"header-actions-end"` | A slot for adding `calcite-action`s or content to the end side of the component's header. | | `"header-actions-start"` | A slot for adding `calcite-action`s or content to the start side of the component's header. | | `"header-content"` | A slot for adding custom content to the component's header. | diff --git a/packages/calcite-components/src/components/input-time-picker/readme.md b/packages/calcite-components/src/components/input-time-picker/readme.md index d894968e9ea..1f665d60e2d 100644 --- a/packages/calcite-components/src/components/input-time-picker/readme.md +++ b/packages/calcite-components/src/components/input-time-picker/readme.md @@ -25,7 +25,9 @@ For comprehensive guidance on using and implementing `calcite-input-time-picker` | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | `focusTrapDisabled` | `focus-trap-disabled` | When `true`, prevents focus trapping. | `boolean` | `false` | | `form` | `form` | The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | `string` | `undefined` | +| `max` | `max` | Specifies the maximum value. | `string` | `undefined` | | `messageOverrides` | -- | Use this property to override individual strings used by the component. | `{ [x: string]: any; }` | `undefined` | +| `min` | `min` | Specifies the minimum value. | `string` | `undefined` | | `name` | `name` | Specifies the name of the component on form submission. | `string` | `undefined` | | `numberingSystem` | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined` | | `open` | `open` | When `true`, displays the `calcite-time-picker` component. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/input-time-zone/readme.md b/packages/calcite-components/src/components/input-time-zone/readme.md index 3f3453623c5..a0b3d991214 100644 --- a/packages/calcite-components/src/components/input-time-zone/readme.md +++ b/packages/calcite-components/src/components/input-time-zone/readme.md @@ -33,6 +33,7 @@ Displays options to select a IANA time zone name. | `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `InputTimeZoneMessages` | `undefined` | | `mode` | `mode` | This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. | `"name" \| "offset"` | `"offset"` | | `name` | `name` | Specifies the name of the component. Required to pass the component's `value` on form submission. | `string` | `undefined` | +| `offsetStyle` | `offset-style` | Specifies how the offset will be displayed, where `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`. This only applies to the `offset` mode. | `"gmt" \| "user" \| "utc"` | `"user"` | | `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | | `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | | `readOnly` | `read-only` | When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. | `boolean` | `false` | diff --git a/packages/calcite-components/src/components/panel/readme.md b/packages/calcite-components/src/components/panel/readme.md index 6e1c3c07035..74b323af480 100644 --- a/packages/calcite-components/src/components/panel/readme.md +++ b/packages/calcite-components/src/components/panel/readme.md @@ -168,19 +168,21 @@ Type: `Promise` ## Slots -| Slot | Description | -| ------------------------ | ------------------------------------------------------------------------------------------------------------ | -| | A slot for adding custom content. | -| `"action-bar"` | A slot for adding a `calcite-action-bar` to the component. | -| `"content-bottom"` | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) | -| `"content-top"` | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). | -| `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | -| `"footer"` | A slot for adding custom content to the footer. | -| `"footer-actions"` | [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer. | -| `"header-actions-end"` | A slot for adding actions or content to the end side of the header. | -| `"header-actions-start"` | A slot for adding actions or content to the start side of the header. | -| `"header-content"` | A slot for adding custom content to the header. | -| `"header-menu-actions"` | A slot for adding an overflow menu with actions inside a `calcite-dropdown`. | +| Slot | Description | +| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | +| | A slot for adding custom content. | +| `"action-bar"` | A slot for adding a `calcite-action-bar` to the component. | +| `"content-bottom"` | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) | +| `"content-top"` | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). | +| `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | +| `"footer"` | A slot for adding custom content to the component's footer. | +| `"footer-actions"` | [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer. | +| `"footer-end"` | A slot for adding a trailing footer custom content. | +| `"footer-start"` | A slot for adding a leading footer custom content. | +| `"header-actions-end"` | A slot for adding actions or content to the end side of the header. | +| `"header-actions-start"` | A slot for adding actions or content to the start side of the header. | +| `"header-content"` | A slot for adding custom content to the header. | +| `"header-menu-actions"` | A slot for adding an overflow menu with actions inside a `calcite-dropdown`. | ## CSS Custom Properties From 95a2921f7bc3ffaf62b64990c7756555b95ee9d8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 27 Jun 2024 06:57:40 -0700 Subject: [PATCH 13/46] build(deps): update dependency eslint-plugin-jsdoc to v48.4.0 (#9696) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [eslint-plugin-jsdoc](https://togithub.com/gajus/eslint-plugin-jsdoc) | [`48.2.13` -> `48.4.0`](https://renovatebot.com/diffs/npm/eslint-plugin-jsdoc/48.2.13/48.4.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/eslint-plugin-jsdoc/48.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/eslint-plugin-jsdoc/48.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/eslint-plugin-jsdoc/48.2.13/48.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/eslint-plugin-jsdoc/48.2.13/48.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
gajus/eslint-plugin-jsdoc (eslint-plugin-jsdoc) ### [`v48.4.0`](https://togithub.com/gajus/eslint-plugin-jsdoc/compare/v48.3.0...1aa3313e6962b55de94528d589d9d9d4844d72b7) [Compare Source](https://togithub.com/gajus/eslint-plugin-jsdoc/compare/v48.3.0...v48.4.0) ### [`v48.3.0`](https://togithub.com/gajus/eslint-plugin-jsdoc/releases/tag/v48.3.0) [Compare Source](https://togithub.com/gajus/eslint-plugin-jsdoc/compare/v48.2.15...v48.3.0) ##### Bug Fixes - **`no-undefined-types`:** treat variables imported by `[@import](https://togithub.com/import)` tags as defined; fixes [#​1244](https://togithub.com/gajus/eslint-plugin-jsdoc/issues/1244) ([54ac4fd](https://togithub.com/gajus/eslint-plugin-jsdoc/commit/54ac4fd4c5cf30c0f4c239e1066fb693ab7349fc)) ##### Features - **`check-values`:** checks for valid `[@import](https://togithub.com/import)` syntax ([ad31b14](https://togithub.com/gajus/eslint-plugin-jsdoc/commit/ad31b14c78a7fdbe6a1997c5302e7d5ddde0eb65)) ### [`v48.2.15`](https://togithub.com/gajus/eslint-plugin-jsdoc/releases/tag/v48.2.15) [Compare Source](https://togithub.com/gajus/eslint-plugin-jsdoc/compare/v48.2.14...v48.2.15) ##### Bug Fixes - Revert "fix(`no-undefined-types`): treat variables imported by `[@import](https://togithub.com/import)` tags as defined"; fixes [#​1246](https://togithub.com/gajus/eslint-plugin-jsdoc/issues/1246) ([ce066df](https://togithub.com/gajus/eslint-plugin-jsdoc/commit/ce066df38edc9175db200e8da7ed7096e2879942)) ### [`v48.2.14`](https://togithub.com/gajus/eslint-plugin-jsdoc/releases/tag/v48.2.14) [Compare Source](https://togithub.com/gajus/eslint-plugin-jsdoc/compare/v48.2.13...v48.2.14) ##### Bug Fixes - **`no-undefined-types`:** treat variables imported by `[@import](https://togithub.com/import)` tags as defined; fixes [#​1244](https://togithub.com/gajus/eslint-plugin-jsdoc/issues/1244) ([34ba2e0](https://togithub.com/gajus/eslint-plugin-jsdoc/commit/34ba2e01d8de1c8a8558cc3f6f93c23d6bc49250))
--- - [ ] If you want to rebase/retry this PR, check this box Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package-lock.json | 31 ++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index c94b1f15e7d..f51a981f236 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "eslint-config-prettier": "9.1.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-jest": "28.6.0", - "eslint-plugin-jsdoc": "48.2.13", + "eslint-plugin-jsdoc": "48.4.0", "eslint-plugin-prettier": "5.1.3", "eslint-plugin-react": "7.34.3", "eslint-plugin-unicorn": "54.0.0", @@ -15494,9 +15494,9 @@ } }, "node_modules/eslint-plugin-jsdoc": { - "version": "48.2.13", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.13.tgz", - "integrity": "sha512-4MzMKN0uMIehmFUVzJxNmjc573HnTKLt7Qrg7QQyXC3JkHBweaVbHwgwG+T3boefD3NyLXRHNOYYPJqmslDvHA==", + "version": "48.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.4.0.tgz", + "integrity": "sha512-xBUxuAx03cKoEA7y+MYSUdwyN8AJyZHbAJ257sOFXgVgCScm574S4zEYJpBoARwaCu4chhCbvA+gdm+00whlxA==", "dev": true, "dependencies": { "@es-joy/jsdoccomment": "~0.43.1", @@ -15505,8 +15505,10 @@ "debug": "^4.3.4", "escape-string-regexp": "^4.0.0", "esquery": "^1.5.0", + "parse-imports": "^2.1.0", "semver": "^7.6.2", - "spdx-expression-parse": "^4.0.0" + "spdx-expression-parse": "^4.0.0", + "synckit": "^0.9.0" }, "engines": { "node": ">=18" @@ -27449,6 +27451,19 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/parse-imports": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/parse-imports/-/parse-imports-2.1.0.tgz", + "integrity": "sha512-JQWgmK2o4w8leUkZeZPatWdAny6vXGU/3siIUvMF6J2rDCud9aTt8h/px9oZJ6U3EcfhngBJ635uPFI0q0VAeA==", + "dev": true, + "dependencies": { + "es-module-lexer": "^1.5.3", + "slashes": "^3.0.12" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/parse-json": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", @@ -30974,6 +30989,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/slashes": { + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/slashes/-/slashes-3.0.12.tgz", + "integrity": "sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==", + "dev": true + }, "node_modules/slice-ansi": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz", diff --git a/package.json b/package.json index 9999e48e057..582edc04586 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "eslint-config-prettier": "9.1.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-jest": "28.6.0", - "eslint-plugin-jsdoc": "48.2.13", + "eslint-plugin-jsdoc": "48.4.0", "eslint-plugin-prettier": "5.1.3", "eslint-plugin-react": "7.34.3", "eslint-plugin-unicorn": "54.0.0", From c11bf4ccd886979b2e6d8ceb25e579f221a02503 Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Thu, 27 Jun 2024 06:59:16 -0700 Subject: [PATCH 14/46] build: update browserslist db (#9637) This PR was automatically generated by the update-browserslist-db GitHub action Co-authored-by: benelan <10986395+benelan@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f51a981f236..5dcec5375d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11866,9 +11866,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001629", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz", - "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==", + "version": "1.0.30001637", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001637.tgz", + "integrity": "sha512-1x0qRI1mD1o9e+7mBI7XtzFAP4XszbHaVWsMiGbSPLYekKTJF7K+FNk6AsXH4sUpc+qrsI3pVgf1Jdl/uGkuSQ==", "dev": true, "funding": [ { From 86f5d792ffc27e04190f7169ca17c98489f0cc52 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 27 Jun 2024 17:46:27 -0700 Subject: [PATCH 15/46] ci(release-please): use default label to identify PRs (#9708) ## Summary I just realized the "label" field replaces the default `autorelease: pending` one release-please uses to identify their pull requests. I'm pretty sure that was causing the issues. --- release-please-config.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/release-please-config.json b/release-please-config.json index 53891b226f6..8965dc63139 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -1,9 +1,7 @@ { "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json", "release-type": "node", - "bootstrap-sha": "dc9c6ad669336599ae51bf7e23b08f8fb2114ec6", "tag-separator": "@", - "label": "skip visual snapshots", "draft-pull-request": true, "include-v-in-tag": false, "packages": { From 1d9abfce816716a1cbb2fd0ede73ce198babafa0 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jun 2024 09:39:38 -0700 Subject: [PATCH 16/46] fix: fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled (#9710) --- .../src/utils/interactive.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx index d5c1cbfbd6f..1aebbded92a 100644 --- a/packages/calcite-components/src/utils/interactive.tsx +++ b/packages/calcite-components/src/utils/interactive.tsx @@ -144,11 +144,31 @@ function getParentElement(component: InteractiveComponent): ParentElement { ); /* assume element is host if it has no parent when connected */ } +function isInteractiveHTMLElement(el: Element): el is InteractiveHTMLElement { + return "disabled" in el; +} + function restoreInteraction(component: InteractiveComponent): void { delete component.el.click; // fallback on HTMLElement.prototype.click if (isFirefox) { - removeInteractionListeners(disabledElementToParent.get(component.el)); + const parent = disabledElementToParent.get(component.el); + + let hasDisabledSiblingElements = false; + + if (parent?.children) { + for (const child of parent.children) { + if (isInteractiveHTMLElement(child) && child.disabled && child !== component.el) { + hasDisabledSiblingElements = true; + break; + } + } + } + + if (!hasDisabledSiblingElements) { + removeInteractionListeners(parent); + } + disabledElementToParent.delete(component.el); return; } From a6e2340baa450b92ed71e6e831d93ee4cef4e127 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 28 Jun 2024 16:41:09 +0000 Subject: [PATCH 17/46] chore: release next --- package-lock.json | 10 +++++----- .../projects/component-library/CHANGELOG.md | 4 ++++ .../projects/component-library/package.json | 4 ++-- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 6 ++++++ packages/calcite-components/package.json | 2 +- 7 files changed, 24 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5dcec5375d4..cbdb61394c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36913,7 +36913,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.10.1", + "version": "2.10.2-next.0", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.6.5", @@ -38197,10 +38197,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.10.1", + "version": "2.10.2-next.0", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.10.1", + "@esri/calcite-components": "^2.10.2-next.0", "tslib": "2.6.2" }, "peerDependencies": { @@ -38210,10 +38210,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.10.1", + "version": "2.10.2-next.0", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.10.1" + "@esri/calcite-components": "^2.10.2-next.0" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index 5c483cb1cd0..6c9529c8427 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.1-next.0...@esri/calcite-components-angular@2.10.2-next.0) (2024-06-28) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [2.10.1](https://github.com/esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0...@esri/calcite-components-angular@2.10.1) (2024-06-27) ### Bug Fixes diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 6b9c126fb8b..35028d04070 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.10.1", + "version": "2.10.2-next.0", "description": "A set of Angular components that wrap Esri's Calcite Components.", "homepage": "https://developers.arcgis.com/calcite-design-system/", "bugs": { @@ -17,7 +17,7 @@ }, "sideEffects": false, "dependencies": { - "@esri/calcite-components": "^2.10.1", + "@esri/calcite-components": "^2.10.2-next.0", "tslib": "2.6.2" }, "peerDependencies": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 2c95552fc98..06864183171 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.1-next.0...@esri/calcite-components-react@2.10.2-next.0) (2024-06-28) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [2.10.1](https://github.com/esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0...@esri/calcite-components-react@2.10.1) (2024-06-27) ### Miscellaneous Chores diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index e2d674bf266..1732672ec98 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-react", - "version": "2.10.1", + "version": "2.10.2-next.0", "description": "A set of React components that wrap calcite components", "homepage": "https://developers.arcgis.com/calcite-design-system/", "repository": { @@ -28,7 +28,7 @@ "tsc": "tsc" }, "dependencies": { - "@esri/calcite-components": "^2.10.1" + "@esri/calcite-components": "^2.10.2-next.0" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 7ef7f066602..b3747e38bb9 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.2-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.1-next.0...@esri/calcite-components@2.10.2-next.0) (2024-06-28) + +### Bug Fixes + +- fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](https://github.com/Esri/calcite-design-system/issues/9710)) ([1d9abfc](https://github.com/Esri/calcite-design-system/commit/1d9abfce816716a1cbb2fd0ede73ce198babafa0)) + ## [2.10.1](https://github.com/esri/calcite-design-system/compare/@esri/calcite-components@2.10.0...@esri/calcite-components@2.10.1) (2024-06-27) ### Miscellaneous Chores diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 4e7336ec617..ae58f2693bf 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.10.1", + "version": "2.10.2-next.0", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", From b27bc7866b67c03911eeb1485ac00489a2389aa5 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jun 2024 10:04:39 -0700 Subject: [PATCH 18/46] test(button, fab): add component token E2E tests (#9602) --- .../src/components/button/button.e2e.ts | 93 ++++- .../src/components/button/button.scss | 364 +++++++----------- .../src/components/button/button.tsx | 1 + .../src/components/button/resources.ts | 1 + .../src/components/fab/fab.e2e.ts | 37 +- .../src/components/fab/fab.scss | 1 - 6 files changed, 279 insertions(+), 218 deletions(-) diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index 04a4abf7cef..4ee5d10ee25 100644 --- a/packages/calcite-components/src/components/button/button.e2e.ts +++ b/packages/calcite-components/src/components/button/button.e2e.ts @@ -1,5 +1,5 @@ import { E2EElement, newE2EPage } from "@stencil/core/testing"; -import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n } from "../../tests/commonTests"; +import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n, themed } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -758,4 +758,95 @@ describe("calcite-button", () => { expect(elementHost).toEqualAttribute("width", "full"); expect(await elementAsButton.getComputedStyle()["width"]).toEqual(await elementHost.getComputedStyle()["width"]); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-button", { + "--calcite-button-background-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "backgroundColor", + }, + "--calcite-button-border-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderColor", + }, + "--calcite-button-corner-radius": [ + { + targetProp: "borderRadius", + }, + { + shadowSelector: `.${CSS.button}`, + targetProp: "borderRadius", + }, + ], + "--calcite-button-shadow": { + targetProp: "boxShadow", + }, + "--calcite-button-text-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "color", + }, + }); + }); + + describe("fine-grained round corners", () => { + themed("calcite-button", { + "--calcite-button-corner-radius-start-start": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartStartRadius", + }, + "--calcite-button-corner-radius-start-end": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderStartEndRadius", + }, + "--calcite-button-corner-radius-end-start": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndStartRadius", + }, + "--calcite-button-corner-radius-end-end": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderEndEndRadius", + }, + }); + }); + + describe("link", () => { + themed(html`button`, { + "--calcite-button-background-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "backgroundColor", + }, + "--calcite-button-border-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderColor", + }, + "--calcite-button-corner-radius": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderRadius", + }, + "--calcite-button-text-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "color", + }, + }); + }); + + describe("with icons", () => { + themed(html`button`, { + "--calcite-button-icon-color": { + shadowSelector: `.${CSS.icon}`, + targetProp: "color", + }, + }); + }); + + describe("loading", () => { + themed(html`button`, { + "--calcite-button-loader-color": { + shadowSelector: `calcite-loader`, + targetProp: "--calcite-loader-color-start", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss index 13a3c91439d..6bdbf40aa57 100644 --- a/packages/calcite-components/src/components/button/button.scss +++ b/packages/calcite-components/src/components/button/button.scss @@ -10,10 +10,10 @@ * @prop --calcite-button-corner-radius-start-end: defines the component's top-right corner radius. Will fallback to --calcite-button-corner-radius. * @prop --calcite-button-corner-radius-end-start: defines the component's bottom-left corner radius. Will fallback to --calcite-button-corner-radius. * @prop --calcite-button-corner-radius-end-end: defines the component's bottom-right corner radius. Will fallback to --calcite-button-corner-radius. + * @prop --calcite-button-icon-color: defines the color of an icon in the component. * @prop --calcite-button-loader-color: defines the component's loader color. * @prop --calcite-button-shadow: defines the component's shadow. * @prop --calcite-button-text-color: defines the component's text color. - * @prop --calcite-button-icon-color: defines the color of an icon in the component. */ :host { @@ -23,87 +23,91 @@ --calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)) ); + box-shadow: var(--calcite-button-shadow, var(--calcite-shadow-none)); +} + +.button { + @apply focus-base + font-inherit + relative + box-border + flex + cursor-pointer + select-none + appearance-none + items-center + border-none + text-center + font-normal + no-underline; + padding-block: var(--calcite-internal-button-space-y, 3px); + padding-inline: var(--calcite-internal-button-space-x, 7px); + inline-size: var(--calcite-container-size-content-fluid); + block-size: var(--calcite-container-size-content-fluid); + border-start-start-radius: var( + --calcite-button-corner-radius-start-start, + var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) + ); + border-start-end-radius: var( + --calcite-button-corner-radius-start-end, + var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) + ); + border-end-start-radius: var( + --calcite-button-corner-radius-end-start, + var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) + ); + border-end-end-radius: var( + --calcite-button-corner-radius-end-end, + var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) + ); + justify-content: var(--calcite-internal-button-content-align-x, center); + background-color: var( + --calcite-button-background-color, + var(--calcite-internal-button-background-color, var(--calcite-color-foreground-1)) + ); + color: var(--calcite-button-text-color, var(--calcite-internal-button-text-color, var(--calcite-color-text-1))); + box-shadow: inset 0 0 0 var(--calcite-internal-button-border-width) + var(--calcite-button-border-color, var(--calcite-internal-button-border-color)); + border-style: none; + border-width: var(--calcite-border-width-sm); + border-color: var( + --calcite-button-border-color, + var(--calcite-internal-button-border-color, var(--calcite-color-transparent)) + ); + transition: + color var(--calcite-animation-timing) ease-in-out, + background-color var(--calcite-animation-timing) ease-in-out, + box-shadow var(--calcite-animation-timing) ease-in-out, + outline-color var(--calcite-internal-animation-timing-fast) ease-in-out; - button, - a { - @apply focus-base - font-inherit - relative - box-border - flex - cursor-pointer - select-none - appearance-none - items-center - border-none - text-center - font-normal - no-underline; - padding-block: var(--calcite-internal-button-space-y, 3px); - padding-inline: var(--calcite-internal-button-space-x, 7px); - inline-size: var(--calcite-container-size-content-fluid); - block-size: var(--calcite-container-size-content-fluid); - border-start-start-radius: var( - --calcite-button-corner-radius-start-start, - var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) - ); - border-start-end-radius: var( - --calcite-button-corner-radius-start-end, - var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) - ); - border-end-start-radius: var( - --calcite-button-corner-radius-end-start, - var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) - ); - border-end-end-radius: var( - --calcite-button-corner-radius-end-end, - var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))) - ); - justify-content: var(--calcite-internal-button-content-align-x, center); - background-color: var( - --calcite-button-background-color, - var(--calcite-internal-button-background-color, var(--calcite-color-foreground-1)) - ); - color: var(--calcite-button-text-color, var(--calcite-internal-button-text-color, var(--calcite-color-text-1))); - box-shadow: var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow, none)); - border-style: none; - border-width: var(--calcite-border-width-sm); - border-color: var( - --calcite-button-border-color, - var(--calcite-internal-button-border-color, var(--calcite-color-transparent)) - ); - - // include transition from focus - transition: - color var(--calcite-animation-timing) ease-in-out, - background-color var(--calcite-animation-timing) ease-in-out, - box-shadow var(--calcite-animation-timing) ease-in-out, - outline-color var(--calcite-internal-animation-timing-fast) ease-in-out; + span { + @apply truncate; + } - span { - @apply truncate; - } + &:hover { + --calcite-internal-button-border-width: var(--calcite-border-width-sm); } - calcite-loader { - --calcite-loader-color-start: var( - --calcite-button-loader-color, - var(--calcite-internal-button-loader-color, var(--calcite-color-text-inverse)) - ); + &:active, + &:focus { + --calcite-internal-button-border-width: var(--calcite-border-width-md); } } -:host(:focus) button, -:host(:focus) a, -button:focus, -a:focus { +calcite-loader { + --calcite-loader-color-start: var( + --calcite-button-loader-color, + var(--calcite-internal-button-loader-color, var(--calcite-color-text-inverse)) + ); +} + +:host(:focus) .button, +.button:focus { @apply focus-outset; } -:host(:hover) button, -:host(:hover) a, -button:hover, -a:hover { +:host(:hover) .button, +.button:hover { @apply no-underline; } @@ -155,8 +159,7 @@ a:hover { // Scales // generate button scales (scenario: text exists) :host([scale="s"]) { - a, - button { + .button { --calcite-internal-button-space-y: 3px; &.content--slotted { @@ -172,8 +175,7 @@ a:hover { } } :host([scale="s"][appearance="transparent"]) { - a, - button { + .button { &.content--slotted { --calcite-internal-button-space-x: theme("padding.2"); } @@ -181,8 +183,7 @@ a:hover { } // generate fab scales (scenario: 2 icons, ie., should not be square) :host([scale="s"][icon-start][icon-end]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-x: 23px; @apply text-0h h-6; @@ -191,8 +192,7 @@ a:hover { } // accommodate for transparent buttons not having borders :host([scale="s"][icon-start][icon-end][appearance="transparent"]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-x: theme("padding.6"); } @@ -200,8 +200,7 @@ a:hover { } :host([scale="m"]) { - button, - a { + .button { --calcite-internal-button-space-y: 7px; --calcite-internal-button-content-space: theme("margin.3"); @@ -219,16 +218,14 @@ a:hover { } // accommodate for transparent buttons not having borders :host([scale="m"][appearance="transparent"]) { - a, - button { + .button { &.content--slotted { --calcite-internal-button-space-x: theme("padding.3"); } } } :host([scale="m"][icon-start][icon-end]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-x: theme("padding.8"); @apply text-0h h-8; @@ -237,8 +234,7 @@ a:hover { } // accommodate for transparent buttons not having borders :host([scale="m"][icon-start][icon-end][appearance="transparent"]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-x: 33px; } @@ -246,8 +242,7 @@ a:hover { } :host([scale="l"]) { - button, - a { + .button { --calcite-internal-button-content-space: theme("margin.4"); &.content--slotted { @@ -273,16 +268,14 @@ a:hover { } // accommodate for transparent buttons not having borders :host([scale="l"][appearance="transparent"]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-y: theme("padding[2.5]"); } } } :host([scale="l"][icon-start][icon-end]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-x: 43px; @apply text-0h h-11; @@ -295,8 +288,7 @@ a:hover { } // accommodate for transparent buttons not having borders :host([scale="l"][icon-start][icon-end][appearance="transparent"]) { - a, - button { + .button { &:not(.content--slotted) { --calcite-internal-button-space-x: theme("padding.11"); } @@ -316,26 +308,22 @@ a:hover { // alignment :host([alignment="center"]:not([width="auto"])) { - a, - button { + .button { --calcite-internal-button-content-align-x: center; } } :host([alignment="start"]:not([width="auto"])) { - a, - button { + .button { --calcite-internal-button-content-align-x: flex-start; } } :host([alignment="end"]:not([width="auto"])) { - a, - button { + .button { --calcite-internal-button-content-align-x: flex-end; } } :host([alignment*="space-between"]:not([width="auto"])) { - a, - button { + .button { --calcite-internal-button-content-align-x: space-between; } } @@ -343,8 +331,7 @@ a:hover { .icon--start { margin-inline-end: auto; } - a, - button { + .button { text-align: unset; } } @@ -352,15 +339,13 @@ a:hover { .icon--end { margin-inline-start: auto; } - a, - button { + .button { text-align: unset; } } // only two icons :host([alignment="center"]) { - a:not(.content--slotted), - button:not(.content--slotted) { + .button:not(.content--slotted) { .icon--start + .icon--end { margin-inline-start: var(--calcite-internal-button-content-space, theme("margin.2")); } @@ -369,15 +354,13 @@ a:hover { :host([loading]) { // center loading spinner when button has text - button.content--slotted, - a.content--slotted { + .button.content--slotted { .calcite-button--loader calcite-loader { margin-inline-end: var(--calcite-internal-button-content-space, theme("margin.2")); } } // hide icons when loading with no text - button:not(.content--slotted), - a:not(.content--slotted) { + .button:not(.content--slotted) { .icon--start, .icon--end { @apply hidden; @@ -387,15 +370,13 @@ a:hover { // button styles :host([appearance]) { - button, - a { + .button { border-style: solid; } } :host([kind="brand"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-inverse); --calcite-internal-button-background-color: var(--calcite-color-brand); --calcite-internal-button-loader-color: var(--calcite-color-text-inverse); @@ -410,8 +391,7 @@ a:hover { } :host([kind="danger"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-inverse); --calcite-internal-button-background-color: var(--calcite-color-status-danger); --calcite-internal-button-loader-color: var(--calcite-color-text-inverse); @@ -426,8 +406,7 @@ a:hover { } } :host([kind="neutral"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-1); --calcite-internal-button-background-color: var(--calcite-color-foreground-3); @@ -445,8 +424,7 @@ a:hover { } } :host([kind="inverse"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-inverse); --calcite-internal-button-background-color: var(--calcite-color-inverse); @@ -465,139 +443,120 @@ a:hover { } // outline :host([appearance="outline-fill"]) { - button, - a { + .button { --calcite-internal-button-background-color: var(--calcite-color-foreground-1); - --calcite-internal-button-shadow: inset 0 0 0 1px transparent; - border-width: var(--calcite-border-width-sm); border-style: solid; } } :host([appearance="outline-fill"][kind="brand"]) { - button, - a { + .button { --calcite-internal-button-border-color: var(--calcite-color-brand); --calcite-internal-button-background-color: var(--calcite-color-foreground-1); --calcite-internal-button-text-color: var(--calcite-color-brand); &:hover { --calcite-internal-button-border-color: var(--calcite-color-brand-hover); --calcite-internal-button-text-color: var(--calcite-color-brand-hover); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover); } &:focus { --calcite-internal-button-border-color: var(--calcite-color-brand); --calcite-internal-button-text-color: var(--calcite-color-brand); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand); } &:active { --calcite-internal-button-border-color: var(--calcite-color-brand-press); --calcite-internal-button-text-color: var(--calcite-color-brand-press); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand-press); } calcite-loader { - --calcite-internal-button-border-color: var(--calcite-color-brand); + --calcite-internal-button-loader-color: var(--calcite-color-brand); } } } :host([appearance="outline-fill"][kind="danger"]) { - button, - a { + .button { --calcite-internal-button-border-color: var(--calcite-color-status-danger); --calcite-internal-button-background-color: var(--calcite-color-foreground-1); --calcite-internal-button-text-color: var(--calcite-color-status-danger); &:hover { --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover); --calcite-internal-button-text-color: var(--calcite-color-status-danger-hover); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover); } &:focus { --calcite-internal-button-border-color: var(--calcite-color-status-danger); --calcite-internal-button-text-color: var(--calcite-color-status-danger); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger); } &:active { --calcite-internal-button-border-color: var(--calcite-color-status-danger-press); --calcite-internal-button-text-color: var(--calcite-color-status-danger-press); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press); } calcite-loader { - --calcite-internal-button-border-color: var(--calcite-color-status-danger); + --calcite-internal-button-loader-color: var(--calcite-color-status-danger); } } } :host([appearance="outline-fill"][kind="neutral"]) { - button, - a { + .button { --calcite-internal-button-border-color: var(--calcite-color-border-1); --calcite-internal-button-background-color: var(--calcite-color-foreground-1); --calcite-internal-button-text-color: var(--calcite-color-text-1); &:hover { - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3); - } - &:focus { - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3); + --calcite-internal-button-border-color: var(--calcite-color-border-3); } + &:focus, &:active { - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3); + --calcite-internal-button-border-color: var(--calcite-color-border-3); } calcite-loader { - --calcite-internal-button-border-color: var(--calcite-color-text-1); + --calcite-internal-button-loader-color: var(--calcite-color-text-1); } } } :host([appearance="outline-fill"][kind="inverse"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-1); --calcite-internal-button-background-color: var(--calcite-color-foreground-1); --calcite-internal-button-border-color: var(--calcite-color-inverse); &:hover { --calcite-internal-button-border-color: var(--calcite-color-inverse-hover); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover); } &:focus { --calcite-internal-button-border-color: var(--calcite-color-inverse); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse); } &:active { --calcite-internal-button-border-color: var(--calcite-color-inverse-press); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press); } calcite-loader { --calcite-internal-button-loader-color: var(--calcite-color-text-1); } } } + :host([appearance="outline"]) { - button, - a { + .button { --calcite-internal-button-background-color: var(--calcite-color-transparent); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-transparent); + + &:hover, + &:focus, + &:active { + --calcite-internal-button-background-color: var(--calcite-color-transparent); + } } } + :host([appearance="outline"][kind="brand"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-brand); --calcite-internal-button-border-color: var(--calcite-color-brand); &:hover { - --calcite-internal-button-background-color: var(--calcite-color-transparent); --calcite-internal-button-border-color: var(--calcite-color-brand-hover); --calcite-internal-button-text-color: var(--calcite-color-brand-hover); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover); } &:focus { - --calcite-internal-button-background-color: var(--calcite-color-transparent); --calcite-internal-button-border-color: var(--calcite-color-brand); --calcite-internal-button-text-color: var(--calcite-color-brand); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand); } &:active { - --calcite-internal-button-background-color: var(--calcite-color-transparent); --calcite-internal-button-border-color: var(--calcite-color-brand-press); --calcite-internal-button-text-color: var(--calcite-color-brand-press); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-brand-press); } calcite-loader { --calcite-internal-button-loader-color: var(--calcite-color-brand); @@ -605,28 +564,21 @@ a:hover { } } :host([appearance="outline"][kind="danger"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-status-danger); --calcite-internal-button-border-color: var(--calcite-color-status-danger); &:hover { - --calcite-internal-button-background-color: var(--calcite-color-transparent); --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover); --calcite-internal-button-text-color: var(--calcite-color-status-danger-hover); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover); } &:focus { - --calcite-internal-button-background-color: var(--calcite-color-transparent); --calcite-internal-button-border-color: var(--calcite-color-status-danger); --calcite-internal-button-text-color: var(--calcite-color-status-danger); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger); } &:active { - --calcite-internal-button-background-color: var(--calcite-color-transparent); --calcite-internal-button-border-color: var(--calcite-color-status-danger-press); --calcite-internal-button-text-color: var(--calcite-color-status-danger-press); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press); } calcite-loader { --calcite-internal-button-loader-color: var(--calcite-color-status-danger); @@ -634,23 +586,16 @@ a:hover { } } :host([appearance="outline"][kind="neutral"]) { - button, - a { + .button { --calcite-internal-button-border-color: var(--calcite-color-border-1); --calcite-internal-button-text-color: var(--calcite-color-text-1); - --calcite-internal-button-background-color: var(--calcite-color-transparent); &:hover { - --calcite-internal-button-background-color: var(--calcite-color-transparent); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3); - } - &:focus { - --calcite-internal-button-background-color: var(--calcite-color-transparent); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3); + --calcite-internal-button-background-color: var(--calcite-color-foreground-3); } + &:focus, &:active { - --calcite-internal-button-background-color: var(--calcite-color-transparent); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3); + --calcite-internal-button-border-color: var(--calcite-color-foreground-3); } calcite-loader { --calcite-internal-button-loader-color: var(--calcite-color-text-1); @@ -658,28 +603,18 @@ a:hover { } } :host([appearance="outline"][kind="inverse"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-1); --calcite-internal-button-border-color: var(--calcite-color-inverse); - &:hover, - &:focus, - &:active { - --calcite-internal-button-background-color: var(--calcite-color-transparent); - } - &:hover { --calcite-internal-button-border-color: var(--calcite-color-inverse-hover); - --calcite-internal-button-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover); } &:focus { --calcite-internal-button-border-color: var(--calcite-color-inverse); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse); } &:active { --calcite-internal-button-border-color: var(--calcite-color-inverse-press); - --calcite-internal-button-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press); } calcite-loader { --calcite-internal-button-loader-color: var(--calcite-color-text-1); @@ -687,22 +622,25 @@ a:hover { } } -:host([appearance="outline-fill"][split-child="primary"]) button, -:host([appearance="outline"][split-child="primary"]) button { - border-inline-end-width: 0; - border-inline-start-width: theme("borderWidth.DEFAULT"); +:host([appearance="outline-fill"][split-child="primary"]), +:host([appearance="outline"][split-child="primary"]) { + .button { + border-inline-end-width: 0; + border-inline-start-width: theme("borderWidth.DEFAULT"); + } } -:host([appearance="outline-fill"][split-child="secondary"]) button, -:host([appearance="outline"][split-child="secondary"]) button { - border-inline-start-width: 0; - border-inline-end-width: theme("borderWidth.DEFAULT"); +:host([appearance="outline-fill"][split-child="secondary"]), +:host([appearance="outline"][split-child="secondary"]) { + .button { + border-inline-start-width: 0; + border-inline-end-width: theme("borderWidth.DEFAULT"); + } } // transparent :host([appearance="transparent"]:not(.enable-editing-button)) { - button, - a { + .button { --calcite-internal-button-background-color: var(--calcite-color-transparent); &:hover, &:focus { @@ -714,8 +652,7 @@ a:hover { } } :host([appearance="transparent"][kind="brand"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-brand); &:hover { --calcite-internal-button-text-color: var(--calcite-color-brand-hover); @@ -733,8 +670,7 @@ a:hover { } :host([appearance="transparent"][kind="danger"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-status-danger); &:hover { --calcite-internal-button-text-color: var(--calcite-color-status-danger-hover); @@ -752,8 +688,7 @@ a:hover { } :host([appearance="transparent"][kind="neutral"]:not(.cancel-editing-button)) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-1); } calcite-loader { @@ -762,7 +697,7 @@ a:hover { } :host([appearance="transparent"][kind="neutral"].cancel-editing-button) { - button { + .button { border-block-color: var(--calcite-button-border-color, var(--calcite-color-border-input)); border-block-style: solid; border-block-width: var(--calcite-border-width-sm); @@ -779,14 +714,13 @@ a:hover { } :host([appearance="transparent"][kind="neutral"].enable-editing-button) { - button { + .button { --calcite-internal-button-background-color: var(--calcite-color-transparent); } } :host([appearance="transparent"][kind="inverse"]) { - button, - a { + .button { --calcite-internal-button-text-color: var(--calcite-color-text-inverse); } calcite-loader { @@ -797,7 +731,7 @@ a:hover { :host(.confirm-changes-button), :host(.cancel-editing-button), :host(.enable-editing-button) { - button { + .button { &:focus { outline-offset: -2px; // ensure focus outlines work in Safari } diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 5eb13e520d0..21f5936308e 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -287,6 +287,7 @@ export class Button aria-label={!this.loading ? getLabelText(this) : this.messages.loading} aria-live="polite" class={{ + [CSS.button]: true, [CSS.buttonPadding]: noStartEndIcons, [CSS.buttonPaddingShrunk]: !noStartEndIcons, [CSS.contentSlotted]: this.hasContent, diff --git a/packages/calcite-components/src/components/button/resources.ts b/packages/calcite-components/src/components/button/resources.ts index 6677324737a..140cc930e87 100644 --- a/packages/calcite-components/src/components/button/resources.ts +++ b/packages/calcite-components/src/components/button/resources.ts @@ -9,6 +9,7 @@ export const CSS = { loadingOut: "loading-out", iconStartEmpty: "icon-start-empty", iconEndEmpty: "icon-end-empty", + button: "button", buttonPadding: "button-padding", buttonPaddingShrunk: "button-padding--shrunk", }; diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 08d897923ee..829aa288a2c 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, disabled, hidden, renders, defaults } from "../../tests/commonTests"; +import { accessible, disabled, hidden, renders, defaults, themed } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-fab", () => { @@ -146,4 +146,39 @@ describe("calcite-fab", () => { }); }); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-fab", { + "--calcite-fab-background-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-background-color", + }, + "--calcite-fab-border-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-border-color", + }, + "--calcite-fab-corner-radius": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-corner-radius", + }, + "--calcite-fab-loader-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-loader-color", + }, + "--calcite-fab-shadow": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-shadow", + }, + "--calcite-fab-text-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-text-color", + }, + "--calcite-fab-icon-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "--calcite-button-icon-color", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index d9d75ddd0e5..4a2cc1b0863 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -45,7 +45,6 @@ calcite-button { --calcite-button-border-color: var(--calcite-fab-border-color); --calcite-button-corner-radius: var(--calcite-fab-corner-radius); --calcite-button-loader-color: var(--calcite-fab-loader-color); - --calcite-button-shadow: var(--calcite-fab-shadow); --calcite-button-text-color: var(--calcite-fab-text-color); --calcite-button-icon-color: var(--calcite-fab-icon-color); --calcite-button-shadow: var( From 7a70cf50e8071ede5b3ac2674ff2dec68621192c Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jun 2024 10:36:04 -0700 Subject: [PATCH 19/46] chore(linting): enable stylelint's length-zero-no-unit rule (#9124) --- packages/calcite-components/.stylelintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calcite-components/.stylelintrc.json b/packages/calcite-components/.stylelintrc.json index 148783395ef..5cbf73c088b 100644 --- a/packages/calcite-components/.stylelintrc.json +++ b/packages/calcite-components/.stylelintrc.json @@ -3,6 +3,7 @@ "extends": "stylelint-config-recommended-scss", "plugins": ["stylelint-use-logical-spec"], "rules": { + "length-zero-no-unit": true, "liberty/use-logical-spec": "always", "no-descending-specificity": [ true, From e24355fb8978e4f669936ae5ffd6580a89f2506b Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 28 Jun 2024 11:03:39 -0700 Subject: [PATCH 20/46] test(block, block-section): add component token E2E tests (#9685) --- .../block-section/block-section.e2e.ts | 93 ++++++++- .../block-section/block-section.scss | 70 ++----- .../block-section/block-section.tsx | 4 +- .../src/components/block/block.e2e.ts | 185 ++++++++++++++++++ .../src/components/block/block.scss | 15 +- 5 files changed, 300 insertions(+), 67 deletions(-) diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts index 0913ae112b9..a2a99b8d8d6 100644 --- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts +++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts @@ -1,5 +1,5 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, reflects, renders, t9n, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -232,4 +232,95 @@ describe("calcite-block-section", () => { expect(await element.getProperty("open")).toBe(false); expect(toggle.getAttribute("aria-expanded")).toBe("false"); } + + describe("theme", () => { + describe("default", () => { + themed(html``, { + "--calcite-block-section-background-color": { + targetProp: "backgroundColor", + }, + "--calcite-block-section-heading-text-color": { + shadowSelector: `.${CSS.sectionHeader}`, + targetProp: "color", + }, + "--calcite-block-section-heading-text-color-hover": { + shadowSelector: `.${CSS.sectionHeader}`, + targetProp: "color", + state: "hover", + }, + "--calcite-block-section-text-color": { + targetProp: "color", + }, + "--calcite-block-section-toggle-icon-color": { + shadowSelector: `.${CSS.chevronIcon}`, + targetProp: "color", + }, + }); + }); + + describe("open", () => { + themed(``, { + "--calcite-block-section-border-color": { + targetProp: "borderColor", + }, + }); + }); + + describe("status icon", () => { + themed(``, { + "--calcite-block-section-status-icon-color": { + shadowSelector: `.${CSS.statusIcon}`, + targetProp: "--calcite-icon-color", + }, + }); + }); + + describe("switch toggle (open)", () => { + themed(``, { + "--calcite-block-section-switch-handle-border-color-checked": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-handle-border-color", + state: "hover", + }, + "--calcite-block-section-switch-track-background-color-checked": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-track-background-color", + }, + "--calcite-block-section-switch-border-color-checked": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-border-color", + }, + }); + }); + + describe("switch toggle (closed)", () => { + themed(``, { + "--calcite-block-section-switch-corner-radius": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-corner-radius", + }, + "--calcite-block-section-switch-handle-background-color": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-handle-background-color", + }, + "--calcite-block-section-switch-handle-border-color": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-handle-border-color", + }, + "--calcite-block-section-switch-handle-border-color-hover": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-handle-border-color", + state: "hover", + }, + "--calcite-block-section-switch-track-background-color": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-track-background-color", + }, + "--calcite-block-section-switch-border-color": { + shadowSelector: `calcite-switch`, + targetProp: "--calcite-switch-border-color", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss index 8e24664b30c..77d10bf355a 100644 --- a/packages/calcite-components/src/components/block-section/block-section.scss +++ b/packages/calcite-components/src/components/block-section/block-section.scss @@ -7,15 +7,18 @@ * @prop --calcite-block-section-border-color: Specifies the border color of the component. Applicable on bottom border when open. * @prop --calcite-block-section-heading-text-color-hover: Specifies the component's heading text color on hover. * @prop --calcite-block-section-heading-text-color: Specifies the component's heading text color. + * @prop --calcite-block-section-icon-color: Specifies the component's heading text color. * @prop --calcite-block-section-status-icon-color: Specifies the status icon color of the component. * @prop --calcite-block-section-switch-corner-radius: Specifies the border radius of the switch. * @prop --calcite-block-section-switch-handle-background-color: Specifies the background color of the switch handle. + * @prop --calcite-block-section-switch-handle-border-color-checked: Specifies the border color of the switch handle when checked. * @prop --calcite-block-section-switch-handle-border-color-hover: Specifies the border color of the switch handle on hover. * @prop --calcite-block-section-switch-handle-border-color: Specifies the border color of the switch handle. * @prop --calcite-block-section-switch-track-background-color-checked: Specifies the background color of the switch track when checked. * @prop --calcite-block-section-switch-track-background-color: Specifies the background color of the switch track. * @prop --calcite-block-section-switch-track-border-color-checked: Specifies the border color of the switch track when checked. * @prop --calcite-block-section-switch-track-border-color: Specifies the border color of the switch track. + * @prop --calcite-block-section-text-color: Specifies the text color of the component. * @prop --calcite-block-section-toggle-icon-color: Specifies the icon color of the toggle. */ @@ -25,7 +28,7 @@ text-n1; background-color: var(--calcite-block-section-background-color, var(--calcite-color-foreground-1)); - color: var(--calcite-color-text-2); + color: var(--calcite-block-section-text-color, var(--calcite-color-text-2)); } :host([open]) { @@ -34,22 +37,6 @@ @apply border-0 border-b border-solid; - - .toggle { - color: var(--calcite-color-text-1); - - &:hover { - color: var(--calcite-color-text-1); - } - } - - .chevron-icon { - color: var(--calcite-color-text-3); - - &:hover { - color: var(--calcite-color-text-1); - } - } } :host(:last-child) { @@ -61,10 +48,6 @@ background-color: var(--calcite-color-transparent); gap: var(--calcite-spacing-md); - - calcite-icon { - --calcite-icon-color: var(--calcite-block-section-toggle-icon-color); - } } .status-icon { @@ -74,12 +57,7 @@ ); gap: var(--calcite-spacing-md); - color: var(--calcite-color-text-2); font-weight: var(--calcite-font-weight-normal); - - &:hover { - color: var(--calcite-color-text-1); - } } .status-icon.valid { @@ -109,7 +87,7 @@ @apply focus-outset; } &:hover { - color: var(--calcite-block-section-heading-text-color, var(--calcite-color-text-1)); + color: var(--calcite-block-section-heading-text-color-hover, var(--calcite-color-text-1)); } } @@ -135,49 +113,30 @@ @apply flex flex-auto items-center; } - .icon--end, - .icon--start, - .chevron-icon { - @apply flex items-center; - - color: var(--calcite-color-text-3); - - &:hover { - color: var(--calcite-color-text-1); - } - } - .switch { @apply flex items-center; } } -.status-icon { - @apply flex items-center; -} - -.status-icon.valid { - color: theme("colors.success"); -} - -.status-icon.invalid { - color: theme("colors.danger"); +.icon--start, +.icon--end { + --calcite-icon-color: var(--calcite-internal-block-section-icon-color, var(--calcite-color-text-3)); } .chevron-icon { - @apply flex items-center; -} + --calcite-icon-color: var(--calcite-block-section-toggle-icon-color, var(--calcite-color-text-3)); -.chevron-icon { - @apply flex items-center; + &:hover { + --calcite-icon-color: var(--calcite-block-section-toggle-icon-color-hover, var(--calcite-color-text-1)); + } } calcite-switch { + --calcite-switch-border-color: var(--calcite-block-section-switch-border-color); --calcite-switch-corner-radius: var(--calcite-block-section-switch-corner-radius); --calcite-switch-handle-background-color: var(--calcite-block-section-switch-handle-background-color); --calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color); --calcite-switch-track-background-color: var(--calcite-block-section-switch-track-background-color); - --calcite-switch-track-border-color: var(--calcite-block-section-switch-track-border-color); &:focus, &:hover { @@ -185,8 +144,9 @@ calcite-switch { } &[checked] { + --calcite-switch-border-color: var(--calcite-block-section-switch-border-color-checked); + --calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color-checked); --calcite-switch-track-background-color: var(--calcite-block-section-switch-track-background-color-checked); - --calcite-switch-track-border-color: var(--calcite-block-section-switch-track-border-color-checked); } } diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 01de828ae29..82f42b74585 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -224,10 +224,10 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC /** Icon scale is not variable as the component does not have a scale property */ return ( ); diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index d632af846e7..49e97a779ac 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -10,6 +10,7 @@ import { renders, slots, t9n, + themed, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { openClose } from "../../tests/commonTests"; @@ -361,4 +362,188 @@ describe("calcite-block", () => { describe("translation support", () => { t9n("calcite-block"); }); + + describe("theme", () => { + describe("default", () => { + themed(html``, { + "--calcite-block-background-color": { + targetProp: "backgroundColor", + }, + "--calcite-block-border-color": { + targetProp: "borderColor", + }, + "--calcite-block-description-text-color": { + shadowSelector: `.${CSS.description}`, + targetProp: "color", + state: "hover", + }, + "--calcite-block-heading-text-color": [ + { + shadowSelector: `.${CSS.header}`, + targetProp: "color", + }, + { + shadowSelector: `.${CSS.heading}`, + targetProp: "color", + }, + ], + "--calcite-block-text-color": { + targetProp: "color", + }, + "--calcite-block-content-space": [ + { + shadowSelector: `.${CSS.content}`, + targetProp: "paddingBlock", + }, + { + shadowSelector: `.${CSS.content}`, + targetProp: "paddingInline", + }, + ], + }); + }); + + describe("collapsible", () => { + themed(html``, { + "--calcite-block-header-background-color": { + shadowSelector: `.${CSS.toggle}`, + targetProp: "backgroundColor", + }, + "--calcite-block-header-background-color-hover": { + shadowSelector: `.${CSS.toggle}`, + targetProp: "backgroundColor", + state: "hover", + }, + "--calcite-block-toggle-icon-color": { + shadowSelector: `.${CSS.toggleIcon}`, + targetProp: "--calcite-icon-color", + }, + "--calcite-block-toggle-icon-color-hover": { + shadowSelector: `.${CSS.toggleIcon}`, + targetProp: "--calcite-icon-color", + state: "hover", + }, + }); + }); + + describe("open", () => { + themed(html``, { + "--calcite-block-heading-text-color-open": { + shadowSelector: `.${CSS.heading}`, + targetProp: "color", + }, + }); + }); + + describe("loading", () => { + themed(html``, { + "--calcite-block-loader-color-start": { + shadowSelector: `calcite-loader`, + targetProp: "--calcite-loader-color-start", + }, + "--calcite-block-loader-color-middle": { + shadowSelector: `calcite-loader`, + targetProp: "--calcite-loader-color-middle", + }, + "--calcite-block-loader-color-end": { + shadowSelector: `calcite-loader`, + targetProp: "--calcite-loader-color-end", + }, + "--calcite-block-scrim-background-color": { + shadowSelector: `calcite-scrim`, + targetProp: "--calcite-scrim-background-color", + }, + }); + }); + + describe("draggable", () => { + themed(html``, { + "--calcite-block-handle-background-color": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-background-color", + }, + "--calcite-block-handle-background-color-hover": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-background-color-hover", + }, + "--calcite-block-handle-background-color-focus": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-background-color-focus", + }, + "--calcite-block-handle-background-color-selected": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-background-color-selected", + }, + "--calcite-block-handle-icon-color": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-icon-color", + }, + "--calcite-block-handle-icon-color-hover": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-icon-color-hover", + }, + "--calcite-block-handle-icon-color-focus": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-icon-color-focus", + }, + "--calcite-block-handle-icon-color-selected": { + shadowSelector: "calcite-handle", + targetProp: "--calcite-handle-icon-color-selected", + }, + }); + }); + + describe("with action menu", () => { + themed( + html` +
+ +
+ `, + { + "--calcite-block-action-menu-border-color": { + shadowSelector: `calcite-action-menu`, + targetProp: "--calcite-action-menu-border-color", + }, + "--calcite-block-action-menu-text-color": { + shadowSelector: `calcite-action-menu`, + targetProp: "--calcite-action-menu-text-color", + }, + }, + ); + }); + + describe("status valid", () => { + themed(html``, { + "--calcite-block-status-icon-color-valid": { + shadowSelector: `.${CSS.statusIcon}`, + targetProp: "--calcite-icon-color", + }, + }); + }); + + describe("status invalid", () => { + themed(html``, { + "--calcite-block-status-icon-color-invalid": { + shadowSelector: `.${CSS.statusIcon}`, + targetProp: "--calcite-icon-color", + }, + }); + }); + + describe("deprecated", () => { + themed(html``, { + "--calcite-block-padding": [ + { + shadowSelector: `.${CSS.content}`, + targetProp: "paddingBlock", + }, + { + shadowSelector: `.${CSS.content}`, + targetProp: "paddingInline", + }, + ], + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss index 1b0d65ba92b..e6f7338a8be 100644 --- a/packages/calcite-components/src/components/block/block.scss +++ b/packages/calcite-components/src/components/block/block.scss @@ -21,10 +21,11 @@ * @prop --calcite-block-header-background-color: Specifies the background color of the component's header. * @prop --calcite-block-heading-text-color-open: Specifies the text color of the component's heading when open. * @prop --calcite-block-heading-text-color: Specifies the text color of the component's heading. - * @prop --calcite-block-loader-color-one-third: Specifies the starting color of the loader + * @prop --calcite-block-loader-color-middle: Specifies the starting color of the loader + * @prop --calcite-block-loader-color-end: Specifies the ending color of the loader * @prop --calcite-block-loader-color-start: Specifies the starting color of the loader - * @prop --calcite-block-loader-color-two-thirds: Specifies the starting color of the loader * @prop --calcite-block-padding: [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot. + * @prop --calcite-block-scrim-background-color: Specifies the background color of the component's scrim. * @prop --calcite-block-text-color: Specifies the text color of the component. * @prop --calcite-block-toggle-icon-color: Specifies the color of the component's toggle icon. * @prop --calcite-block-toggle-icon-color-hover: Specifies the color of the component's toggle icon on hover. @@ -238,18 +239,14 @@ calcite-handle { --calcite-handle-background-color-selected: var(--calcite-block-handle-background-color-selected); } -calcite-icon { - // TODO: add sub-component tokens -} - calcite-loader { - --calcite-loader-color-middle: var(--calcite-block-loader-color-one-third); + --calcite-loader-color-middle: var(--calcite-block-loader-color-middle); --calcite-loader-color-start: var(--calcite-block-loader-color-start); - --calcite-loader-color-end: var(--calcite-block-loader-color-two-thirds); + --calcite-loader-color-end: var(--calcite-block-loader-color-end); } calcite-scrim { - // TODO: add sub-component tokens + --calcite-scrim-background-color: var(--calcite-block-scrim-background-color); } @include base-component(); From 58d9a49d9ae4b4be68188ff1db92ad9a02e5ef13 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Fri, 28 Jun 2024 16:04:17 -0700 Subject: [PATCH 21/46] test(rating): add theme token tests (#9700) **Related Issue:** #7180 ## Summary Adds token tests for theming to `calcite-rating`. --- .../src/components/rating/rating.e2e.ts | 72 +++++++++++++++++++ .../src/components/rating/rating.scss | 2 +- .../src/components/rating/rating.tsx | 17 ++--- .../src/components/rating/resources.ts | 10 +++ 4 files changed, 92 insertions(+), 9 deletions(-) create mode 100644 packages/calcite-components/src/components/rating/resources.ts diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts index f630722825b..420479fc4c8 100644 --- a/packages/calcite-components/src/components/rating/rating.e2e.ts +++ b/packages/calcite-components/src/components/rating/rating.e2e.ts @@ -8,8 +8,12 @@ import { labelable, renders, t9n, + themed, } from "../../tests/commonTests"; import { isElementFocused } from "../../tests/utils"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; +import { html } from "../../../support/formatting"; +import { CSS } from "./resources"; describe("calcite-rating", () => { describe("common tests", () => { @@ -766,4 +770,72 @@ describe("calcite-rating", () => { expect(element).toEqualAttribute("value", "2"); }); }); + + describe("theme", () => { + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-rating-spacing": { + shadowSelector: `.${CSS.fieldset}`, + targetProp: "gap", + }, + "--calcite-rating-spacing-unit": { + shadowSelector: `.${CSS.fieldset}`, + targetProp: "gap", + }, + "--calcite-rating-outline-color": { + shadowSelector: `.${CSS.star}`, + targetProp: "color", + }, + "--calcite-rating-outline-color-hover": { + shadowSelector: `.${CSS.star}`, + targetProp: "color", + state: "hover", + }, + "--calcite-rating-value-fill-color": { + shadowSelector: `.${CSS.star}`, + targetProp: "color", + state: { press: { attribute: "class", value: "star" } }, + }, + }; + themed("calcite-rating", tokens); + }); + describe("deprecated", () => { + const tokens: ComponentTestTokens = { + "--calcite-rating-spacing-unit": { + shadowSelector: `.${CSS.fieldset}`, + targetProp: "gap", + }, + }; + themed("calcite-rating", tokens); + }); + describe("average with chip", () => { + const tokens: ComponentTestTokens = { + "--calcite-rating-average-fill-color": { + shadowSelector: `.${CSS.average}`, + targetProp: "color", + }, + "--calcite-rating-chip-background-color": { + shadowSelector: "calcite-chip", + targetProp: "--calcite-chip-background-color", + }, + "--calcite-rating-chip-border-color": { + shadowSelector: "calcite-chip", + targetProp: "--calcite-chip-border-color", + }, + "--calcite-rating-chip-shadow": { + shadowSelector: "calcite-chip", + targetProp: "--calcite-chip-shadow", + }, + "--calcite-rating-chip-corner-radius": { + shadowSelector: "calcite-chip", + targetProp: "--calcite-chip-corner-radius", + }, + "--calcite-rating-chip-text-color": { + shadowSelector: "calcite-chip", + targetProp: "--calcite-chip-text-color", + }, + }; + themed(html``, tokens); + }); + }); }); diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss index 581e990ae95..643cf459bab 100644 --- a/packages/calcite-components/src/components/rating/rating.scss +++ b/packages/calcite-components/src/components/rating/rating.scss @@ -3,8 +3,8 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-rating-spacing-unit: [Deprecated] Use the `--calcite-rating-spacing` property instead. The amount of spacing between rating items. * @prop --calcite-rating-spacing: Specifies the amount of spacing between rating items. + * @prop --calcite-rating-spacing-unit: [Deprecated] Use the `--calcite-rating-spacing` property instead. The amount of spacing between rating items. * @prop --calcite-rating-outline-color: Specifies the outline color for a rating item. * @prop --calcite-rating-outline-color-hover: Specifies the outline color for a rating item while hovered. * @prop --calcite-rating-value-fill-color: Specifies the fill color for a rating item with value. diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index 5afcad1ed01..7644cfa8cd5 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -39,6 +39,7 @@ import { focusFirstTabbable } from "../../utils/dom"; import { RatingMessages } from "./assets/rating/t9n"; import { StarIcon } from "./functional/star"; import { Star } from "./interfaces"; +import { CSS } from "./resources"; @Component({ tag: "calcite-rating", @@ -228,9 +229,9 @@ export class Rating onPointerOver={this.handleRatingPointerOver} > - -
- + +
+ {this.messages.rating} {this.starsMap.map( ({ average, @@ -246,11 +247,11 @@ export class Rating return (