From 827d83a6d9dd6c837d304dce0c9b3656f37b0cd8 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Tue, 12 Sep 2023 17:04:38 +0530 Subject: [PATCH 01/10] fix(number-field): update inputValue on pressing return fix(number-field): update value on pressing enter fix(number-field): request update on return fix(number-field): updated value update logic to call call renderUpdate in numberfield fix(number-field): blur the element on pressing enter fix(slider): updated test chore: fixed merge conflicts feat(color-slider): migrate to core tokens (#3507) * build(color-slider): use beta of 5.0 spectrum css component New version of Spectrum CSS colorslider that has migrated to using core tokens. * fix(color-slider): remove css that is now a duplicate Remove recently added CSS for reversing the gradient in RTL mode that is now included in the new spectrum CSS colorslider (same rule now exists in generated spectrum-color-slider.css). * build(color-slider): update beta version of CSS * feat(color-slider): use opacity-checkerboard Use the new opacity checkerboard tools class. * build(color-slider): update to 5.0 spectrum css release Update version of spectrum CSS color slider to the latest 5.0 release, just out of beta. * test: correct tests for layout updates * ci: update golden images cache --------- Co-authored-by: Westbrook Johnson fix(number-field): update value on pressing enter chore(number-field): update value on pressing enter fix(number-field): request update on return fix(number-field): update inputValue on clicking return --- packages/number-field/src/NumberField.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts index 18f84898c49..9d76397ddef 100644 --- a/packages/number-field/src/NumberField.ts +++ b/packages/number-field/src/NumberField.ts @@ -340,6 +340,13 @@ export class NumberField extends TextfieldBase { new Event('change', { bubbles: true, composed: true }) ); break; + case 'Enter': + event.preventDefault(); + this.inputElement.value = this.formattedValue; + this.dispatchEvent( + new Event('change', { bubbles: true, composed: true }) + ); + break; } } From d755f0f51ac0b99b486c1f69f1652e3c2212a8e5 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Wed, 13 Sep 2023 11:54:19 -0400 Subject: [PATCH 02/10] chore: use latest Spectrum CSS dependencies (#3637) * chore: use latest non-breaking CSS dependencies * ci: update golden images cache * chore: use latest breaking CSS dependencies * ci: update golden images cache --- .circleci/config.yml | 2 +- packages/meter/package.json | 2 +- packages/meter/src/spectrum-meter.css | 6 ++--- packages/progress-bar/package.json | 2 +- .../tokens/spectrum/custom-dark-vars.css | 12 ---------- .../tokens/spectrum/custom-darkest-vars.css | 12 ---------- .../tokens/spectrum/custom-large-vars.css | 9 -------- .../tokens/spectrum/custom-light-vars.css | 12 ---------- .../tokens/spectrum/custom-medium-vars.css | 10 -------- yarn.lock | 23 +++++++++++++++++++ 10 files changed, 29 insertions(+), 61 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index d98ec8dab47..6f8c35e3b6d 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 3a64ac12c8f693d633deef93ca1f7556163a2565 + default: 884613ae56baf07dd7eaa6316db4d79cf8216b1f wireit_cache_name: type: string default: wireit diff --git a/packages/meter/package.json b/packages/meter/package.json index d2dca5676bf..f7f4ace4548 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^0.38.0" }, "devDependencies": { - "@spectrum-css/progressbar": "^3.0.73" + "@spectrum-css/progressbar": "^3.0.71" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 6747c040c92..7cfb07b0c13 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -117,7 +117,7 @@ governing permissions and limitations under the License. var(--spectrum-meter-min-width) ); } -:host([variant='positive']) .fill { +:host([positive]) .fill { background-color: var( --highcontrast-progressbar-fill-color, var( @@ -126,7 +126,7 @@ governing permissions and limitations under the License. ) ); } -:host([variant='notice']) .fill { +:host([notice]) .fill { background-color: var( --highcontrast-progressbar-fill-color, var( @@ -135,7 +135,7 @@ governing permissions and limitations under the License. ) ); } -:host([variant='negative']) .fill { +:host([negative]) .fill { background-color: var( --highcontrast-progressbar-fill-color, var( diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index 62b0bebf654..dd5b2c8bf6e 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/field-label": "^0.38.0" }, "devDependencies": { - "@spectrum-css/progressbar": "^3.0.73" + "@spectrum-css/progressbar": "^3.0.71" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css index ea93718cf30..e430a616ee5 100644 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens/spectrum/custom-dark-vars.css @@ -56,16 +56,4 @@ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); } diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css index 5cff438c202..c4f29063f4b 100644 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens/spectrum/custom-darkest-vars.css @@ -57,16 +57,4 @@ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); } diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index 4fa5429a2b6..6907a6d9bf0 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -63,17 +63,8 @@ --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-well-padding: 20px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; - - --spectrum-icon-chevron-size-50: 8px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; } diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css index 3f756770d7a..9699b327bec 100644 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ b/tools/styles/tokens/spectrum/custom-light-vars.css @@ -56,16 +56,4 @@ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); } diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 32b2050a7c4..a1c20f173b9 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -67,14 +67,4 @@ --spectrum-well-margin-top: var(--spectrum-spacing-75); --spectrum-well-min-width: 240px; --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-icon-chevron-size-50: 6px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; } diff --git a/yarn.lock b/yarn.lock index 9a38a83140e..d5a8012b3d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5699,9 +5699,15 @@ integrity sha512-mnxdnF2NGNdba+3OomwFURPG0XqNRD+S2cmX0ARYnia9lv84HpzhbSoGuqmQO4+4+dXe46zYjnKRe2L8oJM/zw== "@spectrum-css/fieldgroup@^4.0.72": +<<<<<<< HEAD version "4.0.75" resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-4.0.75.tgz#fb645b3206ca7e6486a2f16ea55b9b0820676346" integrity sha512-Pue6Wb3mjyPRW6E70I33eqtb47ghefsmDIEQ/gyO3KQBg39okYIisxgkW+kYeXCuGeM0Xaip6haJ1J/y+8ewLA== +======= + version "4.0.72" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-4.0.72.tgz#105806d79fc6caa9250f37e00e6eeea58d79aeb5" + integrity sha512-SnGJXuEcgDqQnOkDBqWpzj8jcoM08mr4bDkzx7kH6WOrbzLZAziQBlZV/bLtrexOEdu3Q39ZirVJBLkGgb9S+w== +>>>>>>> cb257e8f2 (chore: use latest Spectrum CSS dependencies (#3637)) "@spectrum-css/fieldlabel@^7.0.33": version "7.0.33" @@ -5754,6 +5760,7 @@ integrity sha512-p2bbFZ7Dao4543Q9vkWTeO0+1NSSn3WBrXB5yGFwQ+W2UJ4PU9aOft1l7W+0iKY1JnBTI5CPEyaNOYxD/D2cCA== "@spectrum-css/popover@^6.0.74": +<<<<<<< HEAD version "6.0.77" resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-6.0.77.tgz#a05e41572a27c26467b7434b47eac4a134604d27" integrity sha512-Ddb0Q+0dszhCn3bNsNTjeY6sp+IuPPBuSW+CdNdJGibIej1vE98jRYBSPDs4gyFDY0hINMhD8EnyTWuVaSWu8g== @@ -5762,6 +5769,16 @@ version "3.0.73" resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-3.0.73.tgz#ac195ebb36b8a97b856b9635473896146bc21f6a" integrity sha512-yKB16LMRpcLbIe9tzVK7YNmo5hUe2jxrHUSc4JW9m9oR0Suxcm1XJ6we/Q0YLoLPMOTIwcAntmcKmdUkzOEu+g== +======= + version "6.0.74" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-6.0.74.tgz#8b85c3aad298275ba085f3add883acb504b3c9c5" + integrity sha512-TNm4zCBjjFeBpVCU3pDZjL6o1Vr6VpM/2xWy5XuorXeOjAzd00pLRIYSqqdbHjDYK4iZr76a5vbjtYpYRWYehQ== + +"@spectrum-css/progressbar@^3.0.71": + version "3.0.71" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-3.0.71.tgz#514bcefd0883838f50b24891b31d113484e84f6b" + integrity sha512-2sCXZOajotMOPYb5lwp9w9RNyIAS0PXsBumPKBb0PExbgQTygzJsbpiD6DGB70yK4fvtU35+hsshYHWAETUh3w== +>>>>>>> cb257e8f2 (chore: use latest Spectrum CSS dependencies (#3637)) "@spectrum-css/progresscircle@^2.0.65": version "2.0.65" @@ -5864,9 +5881,15 @@ integrity sha512-MPCfhNrOqZrvAMe7uidm4FRZCN6F6RZwnhy90WtnG5D+MVTThUYmPnQn30GgfApSb2pHxrkYxufs30NJnIJTaQ== "@spectrum-css/tokens@^11.3.4": +<<<<<<< HEAD version "11.3.7" resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-11.3.7.tgz#b4a32faa3febe1e0dc33a109e0ff5545a02bfac6" integrity sha512-WX0dPqwb2t9u9WBzIRzzYXL/ZJc0r/cSBb7eJxw1xCyg5NQnUKIhGtRT+cMTTCQP0SERFgCk9CZEJcJkZDphGw== +======= + version "11.3.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-11.3.4.tgz#f10a43eceb54fcb22b7cc757a4f57148dd67a7c6" + integrity sha512-JLY6GyzNYAXvN6CISo2R+N6OTgKZHY/Cu3vjUp2QmqeliqvM98lH6PpEW0Mxb3UALnORwzrUGxWNOwUVrSpOrA== +>>>>>>> cb257e8f2 (chore: use latest Spectrum CSS dependencies (#3637)) "@spectrum-css/tooltip@^5.1.11": version "5.1.11" From d066207ecc026fffa8bf207e2726755a485a96d7 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Mon, 11 Sep 2023 20:14:01 -0400 Subject: [PATCH 03/10] fix(overlay): ensure position when closing overlays over the top-layer --- packages/overlay/src/OverlayPopover.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts index aed604b6a0e..6fc18ed920f 100644 --- a/packages/overlay/src/OverlayPopover.ts +++ b/packages/overlay/src/OverlayPopover.ts @@ -44,6 +44,20 @@ function isOpen(el: HTMLElement): boolean { return popoverOpen || open; } +function isOpen(el: HTMLElement): boolean { + let popoverOpen = false; + try { + popoverOpen = el.matches(':popover-open'); + // eslint-disable-next-line no-empty + } catch (error) {} + let open = false; + try { + open = el.matches(':open'); + // eslint-disable-next-line no-empty + } catch (error) {} + return popoverOpen || open; +} + export function OverlayPopover>( constructor: T ): T & Constructor { From a1e087597a4e2183996b3f81a33bdb9302fb7c6a Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Mon, 18 Sep 2023 08:09:52 -0400 Subject: [PATCH 04/10] ci: update golden images cache --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 6f8c35e3b6d..ac505b6c05d 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 884613ae56baf07dd7eaa6316db4d79cf8216b1f + default: 707045e284a1aa060762b7441c320c3f48222234 wireit_cache_name: type: string default: wireit From 22a4fe72f2a40ab64a721e77873766a329f2c778 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Mon, 18 Sep 2023 08:31:53 -0400 Subject: [PATCH 05/10] ci: update golden images cache --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ac505b6c05d..8846d26a627 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 707045e284a1aa060762b7441c320c3f48222234 + default: 9494051c6e69193df911d0f2571c794fe6f20f00 wireit_cache_name: type: string default: wireit From e6b89b5cb459955c8c94bf01c2dcdbbb62f1c21e Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Mon, 18 Sep 2023 12:32:16 -0400 Subject: [PATCH 06/10] fix(overlay): allow "receives-focus" to target the root of an overlay (#3658) * fix(overlay): allow "receives-focus" to target the root of an overlay * ci: update golden images cache * docs(overlay): massage types --- .circleci/config.yml | 2 +- packages/overlay/src/OverlayPopover.ts | 14 -------------- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8846d26a627..a58fd9f399f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 9494051c6e69193df911d0f2571c794fe6f20f00 + default: a1b36206c9a867825429a05c55190164ddfeb3be wireit_cache_name: type: string default: wireit diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts index 6fc18ed920f..aed604b6a0e 100644 --- a/packages/overlay/src/OverlayPopover.ts +++ b/packages/overlay/src/OverlayPopover.ts @@ -44,20 +44,6 @@ function isOpen(el: HTMLElement): boolean { return popoverOpen || open; } -function isOpen(el: HTMLElement): boolean { - let popoverOpen = false; - try { - popoverOpen = el.matches(':popover-open'); - // eslint-disable-next-line no-empty - } catch (error) {} - let open = false; - try { - open = el.matches(':open'); - // eslint-disable-next-line no-empty - } catch (error) {} - return popoverOpen || open; -} - export function OverlayPopover>( constructor: T ): T & Constructor { From 0532b5340a988ac69d8ace04bcef5bd9324e968b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Sep 2023 20:39:47 +0000 Subject: [PATCH 07/10] chore: bump @spectrum-css/tokens from 11.3.4 to 11.3.7 Bumps [@spectrum-css/tokens](https://github.com/adobe/spectrum-css/tree/HEAD/components/tokens) from 11.3.4 to 11.3.7. - [Release notes](https://github.com/adobe/spectrum-css/releases) - [Changelog](https://github.com/adobe/spectrum-css/blob/main/components/tokens/CHANGELOG.md) - [Commits](https://github.com/adobe/spectrum-css/commits/@spectrum-css/tokens@11.3.7/components/tokens) --- updated-dependencies: - dependency-name: "@spectrum-css/tokens" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- tools/styles/tokens/spectrum/custom-dark-vars.css | 12 ++++++++++++ tools/styles/tokens/spectrum/custom-darkest-vars.css | 12 ++++++++++++ tools/styles/tokens/spectrum/custom-large-vars.css | 9 +++++++++ tools/styles/tokens/spectrum/custom-light-vars.css | 12 ++++++++++++ tools/styles/tokens/spectrum/custom-medium-vars.css | 10 ++++++++++ yarn.lock | 6 ++++++ 6 files changed, 61 insertions(+) diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css index e430a616ee5..ea93718cf30 100644 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens/spectrum/custom-dark-vars.css @@ -56,4 +56,16 @@ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); } diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css index c4f29063f4b..5cff438c202 100644 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens/spectrum/custom-darkest-vars.css @@ -57,4 +57,16 @@ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.08 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); } diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index 6907a6d9bf0..4fa5429a2b6 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -63,8 +63,17 @@ --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; + --spectrum-well-padding: 20px; --spectrum-well-margin-top: 5px; --spectrum-well-min-width: 300px; --spectrum-well-border-radius: 5px; + + --spectrum-icon-chevron-size-50: 8px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; } diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css index 9699b327bec..3f756770d7a 100644 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ b/tools/styles/tokens/spectrum/custom-light-vars.css @@ -56,4 +56,16 @@ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: var(--spectrum-black-rgb); + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-800 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); } diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index a1c20f173b9..32b2050a7c4 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -67,4 +67,14 @@ --spectrum-well-margin-top: var(--spectrum-spacing-75); --spectrum-well-min-width: 240px; --spectrum-well-border-radius: var(--spectrum-spacing-75); + + --spectrum-icon-chevron-size-50: 6px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var( + --spectrum-spacing-400 + ); + --spectrum-treeview-indicator-inset-block-start: 5px; } diff --git a/yarn.lock b/yarn.lock index d5a8012b3d2..6ef875f5428 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5881,6 +5881,7 @@ integrity sha512-MPCfhNrOqZrvAMe7uidm4FRZCN6F6RZwnhy90WtnG5D+MVTThUYmPnQn30GgfApSb2pHxrkYxufs30NJnIJTaQ== "@spectrum-css/tokens@^11.3.4": +<<<<<<< HEAD <<<<<<< HEAD version "11.3.7" resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-11.3.7.tgz#b4a32faa3febe1e0dc33a109e0ff5545a02bfac6" @@ -5890,6 +5891,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-11.3.4.tgz#f10a43eceb54fcb22b7cc757a4f57148dd67a7c6" integrity sha512-JLY6GyzNYAXvN6CISo2R+N6OTgKZHY/Cu3vjUp2QmqeliqvM98lH6PpEW0Mxb3UALnORwzrUGxWNOwUVrSpOrA== >>>>>>> cb257e8f2 (chore: use latest Spectrum CSS dependencies (#3637)) +======= + version "11.3.7" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-11.3.7.tgz#b4a32faa3febe1e0dc33a109e0ff5545a02bfac6" + integrity sha512-WX0dPqwb2t9u9WBzIRzzYXL/ZJc0r/cSBb7eJxw1xCyg5NQnUKIhGtRT+cMTTCQP0SERFgCk9CZEJcJkZDphGw== +>>>>>>> bc7ffca4f (chore: bump @spectrum-css/tokens from 11.3.4 to 11.3.7) "@spectrum-css/tooltip@^5.1.11": version "5.1.11" From db88a029946eaeb03527e3abbd5d3e3b11ea3c6a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Sep 2023 20:44:17 +0000 Subject: [PATCH 08/10] chore: bump @spectrum-css/fieldgroup from 4.0.72 to 4.0.75 Bumps [@spectrum-css/fieldgroup](https://github.com/adobe/spectrum-css/tree/HEAD/components/fieldgroup) from 4.0.72 to 4.0.75. - [Release notes](https://github.com/adobe/spectrum-css/releases) - [Changelog](https://github.com/adobe/spectrum-css/blob/main/components/fieldgroup/CHANGELOG.md) - [Commits](https://github.com/adobe/spectrum-css/commits/@spectrum-css/fieldgroup@4.0.75/components/fieldgroup) --- updated-dependencies: - dependency-name: "@spectrum-css/fieldgroup" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- yarn.lock | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/yarn.lock b/yarn.lock index 6ef875f5428..55f2cd640e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5699,6 +5699,7 @@ integrity sha512-mnxdnF2NGNdba+3OomwFURPG0XqNRD+S2cmX0ARYnia9lv84HpzhbSoGuqmQO4+4+dXe46zYjnKRe2L8oJM/zw== "@spectrum-css/fieldgroup@^4.0.72": +<<<<<<< HEAD <<<<<<< HEAD version "4.0.75" resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-4.0.75.tgz#fb645b3206ca7e6486a2f16ea55b9b0820676346" @@ -5708,6 +5709,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-4.0.72.tgz#105806d79fc6caa9250f37e00e6eeea58d79aeb5" integrity sha512-SnGJXuEcgDqQnOkDBqWpzj8jcoM08mr4bDkzx7kH6WOrbzLZAziQBlZV/bLtrexOEdu3Q39ZirVJBLkGgb9S+w== >>>>>>> cb257e8f2 (chore: use latest Spectrum CSS dependencies (#3637)) +======= + version "4.0.75" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-4.0.75.tgz#fb645b3206ca7e6486a2f16ea55b9b0820676346" + integrity sha512-Pue6Wb3mjyPRW6E70I33eqtb47ghefsmDIEQ/gyO3KQBg39okYIisxgkW+kYeXCuGeM0Xaip6haJ1J/y+8ewLA== +>>>>>>> 40041b59d (chore: bump @spectrum-css/fieldgroup from 4.0.72 to 4.0.75) "@spectrum-css/fieldlabel@^7.0.33": version "7.0.33" From 053f35b5a406d7e85757a0f32ce6cf8adf6525e9 Mon Sep 17 00:00:00 2001 From: Piyush Vashisht Date: Thu, 21 Sep 2023 02:13:58 +0530 Subject: [PATCH 09/10] feat(meter): add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514) * refactor(meter): migrated to chore tokens * refactor(meter): migration to core tokens * chore(meter): bump progressbar in meter * chore(meter): updated golden image cache * chore(meter): adding back size m and xl to storybook * chore(meter): updated golden image cache * chore(meter): bump progressbar version * chore(meter): update golden image hash * chore(meter): updated css * chore(meter): update golden image cache * chore: accept code review --------- Co-authored-by: Rajdeep Chandra Co-authored-by: Westbrook Johnson --- .circleci/config.yml | 2 +- packages/meter/package.json | 2 +- packages/meter/src/spectrum-meter.css | 6 +++--- packages/progress-bar/package.json | 2 +- yarn.lock | 11 +++++++++++ 5 files changed, 17 insertions(+), 6 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index a58fd9f399f..d98ec8dab47 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: a1b36206c9a867825429a05c55190164ddfeb3be + default: 3a64ac12c8f693d633deef93ca1f7556163a2565 wireit_cache_name: type: string default: wireit diff --git a/packages/meter/package.json b/packages/meter/package.json index f7f4ace4548..d2dca5676bf 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/shared": "^0.38.0" }, "devDependencies": { - "@spectrum-css/progressbar": "^3.0.71" + "@spectrum-css/progressbar": "^3.0.73" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 7cfb07b0c13..6747c040c92 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -117,7 +117,7 @@ governing permissions and limitations under the License. var(--spectrum-meter-min-width) ); } -:host([positive]) .fill { +:host([variant='positive']) .fill { background-color: var( --highcontrast-progressbar-fill-color, var( @@ -126,7 +126,7 @@ governing permissions and limitations under the License. ) ); } -:host([notice]) .fill { +:host([variant='notice']) .fill { background-color: var( --highcontrast-progressbar-fill-color, var( @@ -135,7 +135,7 @@ governing permissions and limitations under the License. ) ); } -:host([negative]) .fill { +:host([variant='negative']) .fill { background-color: var( --highcontrast-progressbar-fill-color, var( diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index dd5b2c8bf6e..62b0bebf654 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/field-label": "^0.38.0" }, "devDependencies": { - "@spectrum-css/progressbar": "^3.0.71" + "@spectrum-css/progressbar": "^3.0.73" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/yarn.lock b/yarn.lock index 55f2cd640e7..96860ecee37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5766,6 +5766,7 @@ integrity sha512-p2bbFZ7Dao4543Q9vkWTeO0+1NSSn3WBrXB5yGFwQ+W2UJ4PU9aOft1l7W+0iKY1JnBTI5CPEyaNOYxD/D2cCA== "@spectrum-css/popover@^6.0.74": +<<<<<<< HEAD <<<<<<< HEAD version "6.0.77" resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-6.0.77.tgz#a05e41572a27c26467b7434b47eac4a134604d27" @@ -5785,6 +5786,16 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-3.0.71.tgz#514bcefd0883838f50b24891b31d113484e84f6b" integrity sha512-2sCXZOajotMOPYb5lwp9w9RNyIAS0PXsBumPKBb0PExbgQTygzJsbpiD6DGB70yK4fvtU35+hsshYHWAETUh3w== >>>>>>> cb257e8f2 (chore: use latest Spectrum CSS dependencies (#3637)) +======= + version "6.0.77" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-6.0.77.tgz#a05e41572a27c26467b7434b47eac4a134604d27" + integrity sha512-Ddb0Q+0dszhCn3bNsNTjeY6sp+IuPPBuSW+CdNdJGibIej1vE98jRYBSPDs4gyFDY0hINMhD8EnyTWuVaSWu8g== + +"@spectrum-css/progressbar@^3.0.73": + version "3.0.73" + resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-3.0.73.tgz#ac195ebb36b8a97b856b9635473896146bc21f6a" + integrity sha512-yKB16LMRpcLbIe9tzVK7YNmo5hUe2jxrHUSc4JW9m9oR0Suxcm1XJ6we/Q0YLoLPMOTIwcAntmcKmdUkzOEu+g== +>>>>>>> 644ad2957 (feat(meter): add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (#3514)) "@spectrum-css/progresscircle@^2.0.65": version "2.0.65" From f587ae3ea5de3b4448166130eee23a1527ae905b Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Thu, 21 Sep 2023 12:58:14 +0530 Subject: [PATCH 10/10] chore(number-field): updated tests --- .../src/spectrum-action-button.css | 3 - .../src/spectrum-action-group.css | 10 +- packages/button/src/spectrum-button.css | 2 - packages/checkbox/src/spectrum-checkbox.css | 4 +- .../src/spectrum-close-button.css | 36 +++- .../field-group/src/spectrum-field-group.css | 1 + packages/meter/src/spectrum-meter.css | 105 ++++------ packages/modal/src/spectrum-modal.css | 7 +- packages/number-field/src/NumberField.ts | 4 - .../number-field/test/number-field.test.ts | 8 +- packages/picker/src/spectrum-picker.css | 185 +++--------------- packages/popover/src/spectrum-popover.css | 24 +-- .../src/spectrum-progress-bar.css | 105 ++++------ packages/radio/src/spectrum-radio.css | 10 +- .../src/spectrum-split-button.css | 14 +- .../split-view/src/spectrum-split-view.css | 26 ++- packages/switch/src/spectrum-switch.css | 44 ++--- packages/tags/src/spectrum-tag.css | 1 - packages/textfield/src/spectrum-textfield.css | 5 - .../tokens/express/custom-dark-vars.css | 1 - .../tokens/express/custom-darkest-vars.css | 1 - .../tokens/express/custom-light-vars.css | 1 - .../tokens/spectrum/custom-dark-vars.css | 17 -- .../tokens/spectrum/custom-darkest-vars.css | 17 -- .../tokens/spectrum/custom-large-vars.css | 22 --- .../tokens/spectrum/custom-light-vars.css | 17 -- .../tokens/spectrum/custom-medium-vars.css | 23 --- tools/styles/tokens/spectrum/custom-vars.css | 1 - 28 files changed, 226 insertions(+), 468 deletions(-) diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 1e6730e30aa..630d8197e6b 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -552,7 +552,6 @@ governing permissions and limitations under the License. var(--spectrum-actionbutton-font-size) ); overflow: hidden; - pointer-events: none; text-overflow: ellipsis; white-space: nowrap; } @@ -621,11 +620,9 @@ governing permissions and limitations under the License. } :host(.focus-visible) { box-shadow: none; - outline: none; } :host(:focus-visible) { box-shadow: none; - outline: none; } :host(.focus-visible):after { box-shadow: 0 0 0 diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 61b66d6eaec..e1c57c02396 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -43,12 +43,6 @@ governing permissions and limitations under the License. ::slotted(*) { flex-shrink: 0; } -::slotted(.focus-visible) { - z-index: 3; -} -::slotted(:focus-visible) { - z-index: 3; -} :host(:not([vertical]):not([compact])) ::slotted(*) { flex-shrink: 0; } @@ -145,10 +139,10 @@ governing permissions and limitations under the License. :host([compact]:not([quiet])) ::slotted(:hover) { z-index: 2; } -:host([compact]:not([quiet])) ::slotted(.focus-visible) { +:host([compact]:not([quiet]).focus-visible) ::slotted(*) { z-index: 3; } -:host([compact]:not([quiet])) ::slotted(:focus-visible) { +:host([compact]:not([quiet]):focus-visible) ::slotted(*) { z-index: 3; } :host([compact]:not([quiet])[vertical]) { diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 3d71fcf657d..25ee95db14d 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -372,11 +372,9 @@ governing permissions and limitations under the License. } :host(.focus-visible) { box-shadow: none; - outline: none; } :host(:focus-visible) { box-shadow: none; - outline: none; } :host(.focus-visible):after { box-shadow: 0 0 0 diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index a4eff094a95..9abe56ded1a 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -303,8 +303,8 @@ governing permissions and limitations under the License. :host([indeterminate]) #input:checked + #box #checkmark { display: none; } -:host([indeterminate]) #box #partialCheckmark, -:host([indeterminate]) #input:checked + #box #partialCheckmark { +:host([indeterminate]) #box .spectrum-Icon#partialCheckmark, +:host([indeterminate]) #input:checked + #box .spectrum-Icon#partialCheckmark { display: block; opacity: 1; transform: scale(1); diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css index c7fe0b2581c..49a10a47925 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -172,11 +172,28 @@ governing permissions and limitations under the License. --highcontrast-closebutton-focus-indicator-color: ButtonText; } :host(.focus-visible):after { + border-radius: 100%; + box-shadow: 0 0 0 + var( + --mod-closebutton-focus-indicator-thickness, + var(--spectrum-closebutton-focus-indicator-thickness) + ) + var( + --highcontrast-closebutton-focus-indicator-color, + var( + --mod-closebutton-focus-indicator-color, + var(--spectrum-closebutton-focus-indicator-color) + ) + ); + content: ''; + display: block; forced-color-adjust: none; + inset: 0; margin: var( --mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap) ); + position: absolute; transition: opacity var( --mod-closebutton-animation-duration, @@ -191,11 +208,28 @@ governing permissions and limitations under the License. ease-out; } :host(:focus-visible):after { + border-radius: 100%; + box-shadow: 0 0 0 + var( + --mod-closebutton-focus-indicator-thickness, + var(--spectrum-closebutton-focus-indicator-thickness) + ) + var( + --highcontrast-closebutton-focus-indicator-color, + var( + --mod-closebutton-focus-indicator-color, + var(--spectrum-closebutton-focus-indicator-color) + ) + ); + content: ''; + display: block; forced-color-adjust: none; + inset: 0; margin: var( --mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap) ); + position: absolute; transition: opacity var( --mod-closebutton-animation-duration, @@ -273,11 +307,9 @@ governing permissions and limitations under the License. } :host(.focus-visible) { box-shadow: none; - outline: none; } :host(:focus-visible) { box-shadow: none; - outline: none; } :host(.focus-visible):after { box-shadow: 0 0 0 diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index a65f3bbb5e1..764e7778555 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -22,6 +22,7 @@ governing permissions and limitations under the License. flex-direction: row; } .group { + align-items: top; display: flex; flex-flow: column wrap; } diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index 6747c040c92..99d07d66a28 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -56,12 +56,6 @@ governing permissions and limitations under the License. --spectrum-transparent-white-300 ); --spectrum-progressbar-fill-color-white: var(--spectrum-white); - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - --spectrum-meter-inline-size: var(--spectrum-meter-default-width); - --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); - --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); } :host([size='s']) { --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); @@ -103,46 +97,13 @@ governing permissions and limitations under the License. --spectrum-component-top-to-text-300 ); } -:host { - --spectrum-progressbar-size-default: var( - --mod-meter-inline-size, - var(--spectrum-meter-inline-size) - ); - --spectrum-progressbar-max-size: var( - --mod-meter-max-width, - var(--spectrum-meter-max-width) - ); - --spectrum-progressbar-min-size: var( - --mod-meter-min-width, - var(--spectrum-meter-min-width) - ); -} -:host([variant='positive']) .fill { - background-color: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color-positive, - var(--spectrum-progressbar-fill-color-positive) - ) - ); -} -:host([variant='notice']) .fill { - background-color: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color-notice, - var(--spectrum-progressbar-fill-color-notice) - ) - ); -} -:host([variant='negative']) .fill { - background-color: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color-negative, - var(--spectrum-progressbar-fill-color-negative) - ) - ); +@media (forced-colors: active) { + .track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + border: 1px solid ButtonText; + forced-color-adjust: none; + } } :host { align-items: center; @@ -210,32 +171,60 @@ governing permissions and limitations under the License. ); } .track { - background-color: var( + background: var( --highcontrast-progressbar-track-color, var( --mod-progressbar-track-color, var(--spectrum-progressbar-track-color) ) ); + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); border-radius: var(--spectrum-progressbar-corner-radius); inline-size: 100%; overflow: hidden; } -.fill, -.track { - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) +:host([variant='positive']) .fill { + background: var( + --highcontrast-progressbar-fill-color, + var( + --mod-progressbar-fill-color-positive, + var(--spectrum-progressbar-fill-color-positive) + ) + ); +} +:host([variant='notice']) .fill { + background: var( + --highcontrast-progressbar-fill-color, + var( + --mod-progressbar-fill-color-notice, + var(--spectrum-progressbar-fill-color-notice) + ) + ); +} +:host([variant='negative']) .fill { + background: var( + --highcontrast-progressbar-fill-color, + var( + --mod-progressbar-fill-color-negative, + var(--spectrum-progressbar-fill-color-negative) + ) ); } .fill { - background-color: var( + background: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color) ) ); + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); border: none; transition: width 1s; } @@ -281,7 +270,7 @@ governing permissions and limitations under the License. text-align: end; } :host([static='white']) .fill { - background-color: var( + background: var( --mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white) ); @@ -356,11 +345,3 @@ governing permissions and limitations under the License. ); } } -@media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - border: 1px solid ButtonText; - forced-color-adjust: none; - } -} diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index 52008a4ae8a..04b2bb599b4 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -31,7 +31,6 @@ governing permissions and limitations under the License. --spectrum-dialog-confirm-exit-animation-delay: 0s; --spectrum-dialog-fullscreen-margin: 32px; --spectrum-dialog-max-height: 90vh; - --spectrum-dialog-max-width: 90%; } .modal { border-radius: var( @@ -39,7 +38,6 @@ governing permissions and limitations under the License. var(--spectrum-alias-component-border-radius) ); max-height: var(--spectrum-dialog-max-height); - max-width: var(--spectrum-dialog-max-width); outline: none; overflow: hidden; pointer-events: auto; @@ -130,5 +128,8 @@ governing permissions and limitations under the License. transform: none; } .modal { - background: var(--spectrum-gray-100); + background: var( + --spectrum-dialog-confirm-background-color, + var(--spectrum-alias-background-color-default) + ); } diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts index 9d76397ddef..0f63339a748 100644 --- a/packages/number-field/src/NumberField.ts +++ b/packages/number-field/src/NumberField.ts @@ -341,11 +341,7 @@ export class NumberField extends TextfieldBase { ); break; case 'Enter': - event.preventDefault(); this.inputElement.value = this.formattedValue; - this.dispatchEvent( - new Event('change', { bubbles: true, composed: true }) - ); break; } } diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts index df97459b83b..6fc58cb56e9 100644 --- a/packages/number-field/test/number-field.test.ts +++ b/packages/number-field/test/number-field.test.ts @@ -438,9 +438,9 @@ describe('NumberField', () => { await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 await sendKeys({ type: '1' }); // Visible text: 1EUR 45.007 await sendKeys({ press: 'Enter' }); // Visible text: EUR 145.01 - expect(el.value).to.equal(145.007); + expect(el.value).to.equal(145.01); // element value will update on pressing enter expect(inputSpy.calledWith(145.007), 'second input').to.be.true; - expect(changeSpy.calledWith(145.007), 'change').to.be.true; + expect(changeSpy.calledWith(145.01), 'change').to.be.true; }); it('one input/one change for each Arrow*', async () => { el.focus(); @@ -751,7 +751,7 @@ describe('NumberField', () => { await sendKeys({ press: 'Enter' }); await elementUpdated(el); expect(lastInputValue, 'last input value').to.equal(10); - expect(lastChangeValue, 'last change value').to.equal(10); + expect(lastChangeValue, 'last change value').to.equal(0); // onchange won't be triggered unless the value actually changes in the input expect(el.formattedValue).to.equal('10'); expect(el.valueAsString).to.equal('10'); expect(el.value).to.equal(10); @@ -811,7 +811,7 @@ describe('NumberField', () => { await sendKeys({ press: 'Enter' }); await elementUpdated(el); expect(lastInputValue, 'last input value').to.equal(10); - expect(lastChangeValue, 'last change value').to.equal(10); + expect(lastChangeValue, 'last change value').to.equal(0); expect(el.formattedValue).to.equal('10'); expect(el.valueAsString).to.equal('10'); expect(el.value).to.equal(10); diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index d3dea627e83..c2fba8bd81f 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -16,6 +16,7 @@ governing permissions and limitations under the License. -moz-osx-font-smoothing: grayscale; align-items: center; -webkit-appearance: button; + box-sizing: border-box; cursor: pointer; display: inline-flex; font-family: var( @@ -69,55 +70,27 @@ governing permissions and limitations under the License. #button:disabled { cursor: default; } +.spectrum--medium { + --spectrum-picker-popover-quiet-offset-x: 12px; +} +.spectrum--large { + --spectrum-picker-popover-quiet-offset-x: 14px; +} :host { - --spectrum-picker-font-size: var(--spectrum-font-size-100); --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); --spectrum-picker-placeholder-font-style: var( --spectrum-default-font-style ); --spectrum-picker-line-height: var(--spectrum-line-height-100); - --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); --spectrum-picker-spacing-edge-to-text: var( --spectrum-component-edge-to-text-100 ); --spectrum-picker-spacing-edge-to-text-quiet: var( --spectrum-field-edge-to-text-quiet ); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-field-label-top-margin-medium - ); - --spectrum-picker-spacing-label-to-picker: var( - --spectrum-field-label-to-component - ); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-alert-icon-inline-start: var( - --spectrum-field-text-to-alert-icon-medium - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 + --spectrum-field-top-to-disclosure-icon-100 ); --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( --spectrum-picker-end-edge-to-disclousure-icon-quiet @@ -200,18 +173,6 @@ governing permissions and limitations under the License. :host([size='s']) { --spectrum-picker-font-size: var(--spectrum-font-size-75); --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-field-label-top-margin-small - ); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); --spectrum-picker-spacing-text-to-alert-icon-inline-start: var( --spectrum-field-text-to-alert-icon-small @@ -222,12 +183,6 @@ governing permissions and limitations under the License. --spectrum-picker-spacing-label-to-picker-quiet: var( --spectrum-field-label-to-component-quiet-small ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); --spectrum-picker-spacing-top-to-disclosure-icon: var( --spectrum-field-top-to-disclosure-icon-75 ); @@ -235,21 +190,29 @@ governing permissions and limitations under the License. --spectrum-field-end-edge-to-disclosure-icon-75 ); } -:host([size='l']) { - --spectrum-picker-font-size: var(--spectrum-font-size-200); - --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-field-label-top-margin-large +:host { + --spectrum-picker-font-size: var(--spectrum-font-size-100); + --spectrum-picker-block-size: var(--spectrum-component-height-100); + --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-picker-spacing-text-to-alert-icon-inline-start: var( + --spectrum-field-text-to-alert-icon-medium ); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 + --spectrum-picker-spacing-label-to-picker-quiet: var( + --spectrum-field-label-to-component-quiet-medium ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); +} +:host([size='l']) { + --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-block-size: var(--spectrum-component-height-200); --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); --spectrum-picker-spacing-text-to-alert-icon-inline-start: var( --spectrum-field-text-to-alert-icon-large @@ -260,12 +223,6 @@ governing permissions and limitations under the License. --spectrum-picker-spacing-label-to-picker-quiet: var( --spectrum-field-label-to-component-quiet-large ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); --spectrum-picker-spacing-top-to-disclosure-icon: var( --spectrum-field-top-to-disclosure-icon-200 ); @@ -276,18 +233,6 @@ governing permissions and limitations under the License. :host([size='xl']) { --spectrum-picker-font-size: var(--spectrum-font-size-300); --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var( - --spectrum-field-label-top-margin-extra-large - ); - --spectrum-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); --spectrum-picker-spacing-text-to-alert-icon-inline-start: var( --spectrum-field-text-to-alert-icon-extra-large @@ -298,12 +243,6 @@ governing permissions and limitations under the License. --spectrum-picker-spacing-label-to-picker-quiet: var( --spectrum-field-label-to-component-quiet-extra-large ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); --spectrum-picker-spacing-top-to-disclosure-icon: var( --spectrum-field-top-to-disclosure-icon-300 ); @@ -377,7 +316,6 @@ governing permissions and limitations under the License. --mod-picker-border-width, var(--spectrum-picker-border-width) ); - box-sizing: border-box; color: var( --highcontrast-picker-font-color-default, var( @@ -386,14 +324,6 @@ governing permissions and limitations under the License. ) ); display: flex; - inline-size: var( - --mod-picker-inline-size, - var(--spectrum-picker-inline-size) - ); - margin-block-start: var( - --mod-picker-spacing-label-to-picker, - var(--spectrum-picker-spacing-label-to-picker) - ); max-inline-size: 100%; min-inline-size: calc( var(--spectrum-picker-minimum-width-multiplier) * @@ -890,25 +820,15 @@ governing permissions and limitations under the License. #label { flex: auto; font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); - font-weight: var( - --mod-picker-font-weight, - var(--spectrum-picker-font-weight) + line-height: calc( + var(--mod-picker-block-size, var(--spectrum-picker-block-size)) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * + 2 ); line-height: var( --mod-picker-line-height, var(--spectrum-picker-line-height) ); - margin-block-end: calc( - var( - --mod-picker-spacing-bottom-to-text, - var(--spectrum-picker-spacing-bottom-to-text) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-start: var( - --mod-picker-spacing-top-to-text, - var(--spectrum-picker-spacing-top-to-text) - ); overflow: hidden; text-align: start; text-overflow: ellipsis; @@ -927,7 +847,7 @@ governing permissions and limitations under the License. var(--spectrum-picker-placeholder-font-style) ); font-weight: var( - --mod-picker-placeholder-font-weight, + --mod-picker-font-weight, var(--spectrum-picker-font-weight) ); transition: color @@ -998,38 +918,6 @@ governing permissions and limitations under the License. var(--spectrum-picker-spacing-text-to-alert-icon-inline-start) ); } -.validation-icon { - margin-block-end: calc( - var( - --mod-picker-spacing-top-to-alert-icon, - var(--spectrum-picker-spacing-top-to-alert-icon) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-start: calc( - var( - --mod-picker-spacing-top-to-alert-icon, - var(--spectrum-picker-spacing-top-to-alert-icon) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); -} -#button .spectrum-ProgressCircle { - margin-block-end: calc( - var( - --mod-picker-spacing-top-to-progress-circle, - var(--spectrum-picker-spacing-top-to-progress-circle) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-start: calc( - var( - --mod-picker-spacing-top-to-progress-circle, - var(--spectrum-picker-spacing-top-to-progress-circle) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); -} #label ~ .picker { margin-inline-start: var( --mod-picker-spacing-text-to-icon, @@ -1058,11 +946,6 @@ governing permissions and limitations under the License. var(--spectrum-picker-spacing-edge-to-text-quiet) ); } -:host([quiet]) #button.spectrum-Picker--sideLabel { - margin-block-start: calc( - var(--spectrum-picker-spacing-top-to-text-side-label-quiet) * -1 - ); -} :host([quiet]) #button .picker { margin-inline-end: var( --mod-picker-spacing-edge-to-disclosure-icon-quiet, @@ -1155,10 +1038,6 @@ governing permissions and limitations under the License. :host([quiet][disabled]) #button { background-color: #0000; } -.spectrum-Picker--sideLabel { - display: inline-flex; - vertical-align: top; -} :host { --spectrum-picker-background-color-default: var( --system-spectrum-picker-background-color-default diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 69e2e4dd380..9e05309b6e6 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -74,8 +74,7 @@ governing permissions and limitations under the License. ); } :host { - --flow-direction: 1; - --spectrum-popover-offset: 0px; + --spectrum-popover-cross-offset: 0; --spectrum-popover-background-color: var( --spectrum-background-layer-2-color ); @@ -99,9 +98,6 @@ governing permissions and limitations under the License. var(--spectrum-popover-tip-width) / 2 ); } -:host([dir='rtl']) { - --flow-direction: -1; -} @media (forced-colors: active) { :host { --highcontrast-popover-border-color: CanvasText; @@ -179,40 +175,34 @@ governing permissions and limitations under the License. .spectrum-Popover--top-right, .spectrum-Popover--top-start, :host([placement*='top']) { - margin-bottom: var(--mod-popover-offset, var(--spectrum-popover-offset)); + margin-bottom: var(--spectrum-popover-cross-offset); } .spectrum-Popover--bottom-end, .spectrum-Popover--bottom-left, .spectrum-Popover--bottom-right, .spectrum-Popover--bottom-start, :host([placement*='bottom']) { - margin-top: var(--mod-popover-offset, var(--spectrum-popover-offset)); + margin-top: var(--spectrum-popover-cross-offset); } .spectrum-Popover--right-bottom, .spectrum-Popover--right-top, :host([placement*='right']) { - margin-left: var(--mod-popover-offset, var(--spectrum-popover-offset)); + margin-left: var(--spectrum-popover-cross-offset); } .spectrum-Popover--left-bottom, .spectrum-Popover--left-top, :host([placement*='left']) { - margin-right: var(--mod-popover-offset, var(--spectrum-popover-offset)); + margin-right: var(--spectrum-popover-cross-offset); } .spectrum-Popover--start, .spectrum-Popover--start-bottom, .spectrum-Popover--start-top { - margin-inline-end: var( - --mod-popover-offset, - var(--spectrum-popover-offset) - ); + margin-inline-end: var(--spectrum-popover-cross-offset); } .spectrum-Popover--end, .spectrum-Popover--end-bottom, .spectrum-Popover--end-top { - margin-inline-start: var( - --mod-popover-offset, - var(--spectrum-popover-offset) - ); + margin-inline-start: var(--spectrum-popover-cross-offset); } :host([tip]) #tip, :host([tip]) .spectrum-Popover--bottom-end #tip, diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css index f33a347b890..b4df9e00db9 100644 --- a/packages/progress-bar/src/spectrum-progress-bar.css +++ b/packages/progress-bar/src/spectrum-progress-bar.css @@ -56,12 +56,6 @@ governing permissions and limitations under the License. --spectrum-transparent-white-300 ); --spectrum-progressbar-fill-color-white: var(--spectrum-white); - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - --spectrum-meter-inline-size: var(--spectrum-meter-default-width); - --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); - --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); } :host([size='s']) { --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); @@ -103,46 +97,13 @@ governing permissions and limitations under the License. --spectrum-component-top-to-text-300 ); } -.spectrum-Meter { - --spectrum-progressbar-size-default: var( - --mod-meter-inline-size, - var(--spectrum-meter-inline-size) - ); - --spectrum-progressbar-max-size: var( - --mod-meter-max-width, - var(--spectrum-meter-max-width) - ); - --spectrum-progressbar-min-size: var( - --mod-meter-min-width, - var(--spectrum-meter-min-width) - ); -} -:host([positive]) .spectrum-Meter .fill { - background-color: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color-positive, - var(--spectrum-progressbar-fill-color-positive) - ) - ); -} -:host([notice]) .spectrum-Meter .fill { - background-color: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color-notice, - var(--spectrum-progressbar-fill-color-notice) - ) - ); -} -:host([negative]) .spectrum-Meter .fill { - background-color: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color-negative, - var(--spectrum-progressbar-fill-color-negative) - ) - ); +@media (forced-colors: active) { + .track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + border: 1px solid ButtonText; + forced-color-adjust: none; + } } :host { align-items: center; @@ -210,32 +171,60 @@ governing permissions and limitations under the License. ); } .track { - background-color: var( + background: var( --highcontrast-progressbar-track-color, var( --mod-progressbar-track-color, var(--spectrum-progressbar-track-color) ) ); + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); border-radius: var(--spectrum-progressbar-corner-radius); inline-size: 100%; overflow: hidden; } -.fill, -.track { - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) +:host([positive]) .fill { + background: var( + --highcontrast-progressbar-fill-color, + var( + --mod-progressbar-fill-color-positive, + var(--spectrum-progressbar-fill-color-positive) + ) + ); +} +:host([notice]) .fill { + background: var( + --highcontrast-progressbar-fill-color, + var( + --mod-progressbar-fill-color-notice, + var(--spectrum-progressbar-fill-color-notice) + ) + ); +} +:host([negative]) .fill { + background: var( + --highcontrast-progressbar-fill-color, + var( + --mod-progressbar-fill-color-negative, + var(--spectrum-progressbar-fill-color-negative) + ) ); } .fill { - background-color: var( + background: var( --highcontrast-progressbar-fill-color, var( --mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color) ) ); + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); border: none; transition: width 1s; } @@ -281,7 +270,7 @@ governing permissions and limitations under the License. text-align: end; } :host([static='white']) .fill { - background-color: var( + background: var( --mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white) ); @@ -356,11 +345,3 @@ governing permissions and limitations under the License. ); } } -@media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - border: 1px solid ButtonText; - forced-color-adjust: none; - } -} diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 144350c45d8..ad07422e333 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -34,9 +34,7 @@ governing permissions and limitations under the License. --spectrum-radio-disabled-content-color: var( --spectrum-disabled-content-color ); - --spectrum-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); + --spectrum-radio-disabled-border-color: var(--spectrum-gray-400); --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); --spectrum-radio-emphasized-accent-color-hover: var( --spectrum-accent-color-1000 @@ -448,7 +446,8 @@ governing permissions and limitations under the License. var(--spectrum-radio-button-selection-indicator) / 2 ); } -#input.focus-visible + #button:after { +#input.focus-visible + #button:after, +:host(.focus-visible) #input + #button:after { border-color: var( --highcontrast-radio-focus-indicator-color, var( @@ -470,7 +469,8 @@ governing permissions and limitations under the License. var(--spectrum-radio-focus-indicator-gap) * 2 ); } -#input:focus-visible + #button:after { +#input:focus-visible + #button:after, +:host(:focus-visible) #input + #button:after { border-color: var( --highcontrast-radio-focus-indicator-color, var( diff --git a/packages/split-button/src/spectrum-split-button.css b/packages/split-button/src/spectrum-split-button.css index 46b9749bb78..d920ce4501f 100644 --- a/packages/split-button/src/spectrum-split-button.css +++ b/packages/split-button/src/spectrum-split-button.css @@ -227,10 +227,10 @@ governing permissions and limitations under the License. var(--spectrum-alias-border-size-thick) ); } -.trigger.focus-visible { +:host(.focus-visible) .trigger { box-shadow: none; } -.trigger:focus-visible { +:host(:focus-visible) .trigger { box-shadow: none; } :host([dir='ltr']) .trigger:after { @@ -253,14 +253,8 @@ governing permissions and limitations under the License. .trigger { position: relative; } -#button.focus-visible, -.trigger.focus-visible { - outline: none; - z-index: 1; -} -#button:focus-visible, -.trigger:focus-visible { - outline: none; +#button:focus, +.trigger:focus { z-index: 1; } :host([dir='ltr']) #button .label + .spectrum-Icon { diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css index 2ef6a6f7b48..94f5a271f75 100644 --- a/packages/split-view/src/spectrum-split-view.css +++ b/packages/split-view/src/spectrum-split-view.css @@ -289,13 +289,19 @@ governing permissions and limitations under the License. :host([resizable]) #splitter:focus { outline: none; } -:host([resizable]) #splitter:focus-ring { +:host([resizable]) #splitter.focus-visible { background-color: var( --spectrum-alias-focus-color, var(--spectrum-global-color-blue-400) ); } -:host([resizable]) #splitter:focus-ring #gripper { +:host([resizable]) #splitter:focus-visible { + background-color: var( + --spectrum-alias-focus-color, + var(--spectrum-global-color-blue-400) + ); +} +:host([resizable]) #splitter.focus-visible #gripper { border-color: var( --spectrum-alias-focus-color, var(--spectrum-global-color-blue-400) @@ -303,7 +309,21 @@ governing permissions and limitations under the License. box-shadow: 0 0 0 1px var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)); } -:host([resizable]) #splitter:focus-ring #gripper:before { +:host([resizable]) #splitter:focus-visible #gripper { + border-color: var( + --spectrum-alias-focus-color, + var(--spectrum-global-color-blue-400) + ); + box-shadow: 0 0 0 1px + var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400)); +} +:host([resizable]) #splitter.focus-visible #gripper:before { + background-color: var( + --spectrum-alias-focus-color, + var(--spectrum-global-color-blue-400) + ); +} +:host([resizable]) #splitter:focus-visible #gripper:before { background-color: var( --spectrum-alias-focus-color, var(--spectrum-global-color-blue-400) diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index 4cfe821695b..d0385d74ca5 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -203,12 +203,12 @@ governing permissions and limitations under the License. :host([disabled]) #input { cursor: default; } -#input.focus-visible + #switch:after { +:host(.focus-visible) #input + #switch:after { margin: calc( var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 ); } -#input:focus-visible + #switch:after { +:host(:focus-visible) #input + #switch:after { margin: calc( var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 ); @@ -508,8 +508,8 @@ governing permissions and limitations under the License. ) ); } -#input.focus-visible + #switch:after, -:host(:hover) #input.focus-visible + #switch:after { +:host(.focus-visible) #input + #switch:after, +:host(.focus-visible:hover) #input + #switch:after { box-shadow: 0 0 0 var( --mod-switch-focus-indicator-thickness, @@ -523,8 +523,8 @@ governing permissions and limitations under the License. ) ); } -#input:focus-visible + #switch:after, -:host(:hover) #input:focus-visible + #switch:after { +:host(:focus-visible) #input + #switch:after, +:host(:focus-visible:hover) #input + #switch:after { box-shadow: 0 0 0 var( --mod-switch-focus-indicator-thickness, @@ -538,8 +538,8 @@ governing permissions and limitations under the License. ) ); } -#input.focus-visible + #switch:before, -:host(:hover) #input.focus-visible + #switch:before { +:host(.focus-visible) #input + #switch:before, +:host(.focus-visible:hover) #input + #switch:before { border-color: var( --highcontrast-switch-handle-border-color-focus, var( @@ -548,8 +548,8 @@ governing permissions and limitations under the License. ) ); } -#input:focus-visible + #switch:before, -:host(:hover) #input:focus-visible + #switch:before { +:host(:focus-visible) #input + #switch:before, +:host(:focus-visible:hover) #input + #switch:before { border-color: var( --highcontrast-switch-handle-border-color-focus, var( @@ -558,8 +558,8 @@ governing permissions and limitations under the License. ) ); } -:host([checked]) #input.focus-visible + #switch, -:host([checked]:hover) #input.focus-visible + #switch { +:host(.focus-visible[checked]) #input + #switch, +:host(.focus-visible[checked]:hover) #input + #switch { background-color: var( --highcontrast-switch-background-color-selected-focus, var( @@ -568,8 +568,8 @@ governing permissions and limitations under the License. ) ); } -:host([checked]) #input:focus-visible + #switch, -:host([checked]:hover) #input:focus-visible + #switch { +:host(:focus-visible[checked]) #input + #switch, +:host(:focus-visible[checked]:hover) #input + #switch { background-color: var( --highcontrast-switch-background-color-selected-focus, var( @@ -578,8 +578,8 @@ governing permissions and limitations under the License. ) ); } -:host([checked]) #input.focus-visible + #switch:before, -:host([checked]:hover) #input.focus-visible + #switch:before { +:host(.focus-visible[checked]) #input + #switch:before, +:host(.focus-visible[checked]:hover) #input + #switch:before { border-color: var( --highcontrast-switch-handle-border-color-selected-focus, var( @@ -588,8 +588,8 @@ governing permissions and limitations under the License. ) ); } -:host([checked]) #input:focus-visible + #switch:before, -:host([checked]:hover) #input:focus-visible + #switch:before { +:host(:focus-visible[checked]) #input + #switch:before, +:host(:focus-visible[checked]:hover) #input + #switch:before { border-color: var( --highcontrast-switch-handle-border-color-selected-focus, var( @@ -598,8 +598,8 @@ governing permissions and limitations under the License. ) ); } -#input.focus-visible ~ #label, -:host(:hover) #input.focus-visible ~ #label { +:host(.focus-visible) #input ~ #label, +:host(.focus-visible:hover) #input ~ #label { color: var( --highcontrast-switch-label-color-focus, var( @@ -608,8 +608,8 @@ governing permissions and limitations under the License. ) ); } -#input:focus-visible ~ #label, -:host(:hover) #input:focus-visible ~ #label { +:host(:focus-visible) #input ~ #label, +:host(:focus-visible:hover) #input ~ #label { color: var( --highcontrast-switch-label-color-focus, var( diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 713f2bda300..09521fd9749 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -329,7 +329,6 @@ governing permissions and limitations under the License. ); } .clear-button { - --mod-clear-button-width: fit-content; --spectrum-clearbutton-fill-size: fit-content; --spectrum-clearbutton-fill-background-color: transparent; box-sizing: border-box; diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 565149bde44..f754134d99b 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -12,7 +12,6 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); --spectrum-texfield-animation-duration: var( --spectrum-animation-duration-100 ); @@ -599,7 +598,6 @@ governing permissions and limitations under the License. ); grid-area: 2/1 / auto/span 2; inline-size: 100%; - line-height: var(--spectrum-textfield-input-line-height); margin: 0; min-inline-size: var( --mod-textfield-min-width, @@ -1096,9 +1094,6 @@ governing permissions and limitations under the License. .spectrum-Textfield--sideLabel .input { grid-area: 1/2 / span 1 / span 1; } -:host([multiline]) { - --spectrum-textfield-input-line-height: normal; -} :host([multiline]) .input { min-block-size: var( --mod-text-area-min-block-size, diff --git a/tools/styles/tokens/express/custom-dark-vars.css b/tools/styles/tokens/express/custom-dark-vars.css index 3e90ada4ec1..0147085758e 100644 --- a/tools/styles/tokens/express/custom-dark-vars.css +++ b/tools/styles/tokens/express/custom-dark-vars.css @@ -4,5 +4,4 @@ --spectrum-drop-zone-background-color-rgb: var( --spectrum-indigo-900-rgb ); /* var(--spectrum-accent-color-900);*/ - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); } diff --git a/tools/styles/tokens/express/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css index 3e90ada4ec1..0147085758e 100644 --- a/tools/styles/tokens/express/custom-darkest-vars.css +++ b/tools/styles/tokens/express/custom-darkest-vars.css @@ -4,5 +4,4 @@ --spectrum-drop-zone-background-color-rgb: var( --spectrum-indigo-900-rgb ); /* var(--spectrum-accent-color-900);*/ - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); } diff --git a/tools/styles/tokens/express/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css index 6fa2b0d1459..02e79133166 100644 --- a/tools/styles/tokens/express/custom-light-vars.css +++ b/tools/styles/tokens/express/custom-light-vars.css @@ -4,5 +4,4 @@ --spectrum-drop-zone-background-color-rgb: var( --spectrum-indigo-800-rgb ); /* var(--spectrum-accent-color-800);*/ - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); } diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css index ea93718cf30..f5482dbeb58 100644 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens/spectrum/custom-dark-vars.css @@ -51,21 +51,4 @@ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); } diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css index 5cff438c202..fca3c6e398f 100644 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens/spectrum/custom-darkest-vars.css @@ -52,21 +52,4 @@ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); } diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index 4fa5429a2b6..1b36f005a94 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -54,26 +54,4 @@ --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - - --spectrum-icon-chevron-size-50: 8px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; } diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css index 3f756770d7a..487b5850949 100644 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ b/tools/styles/tokens/spectrum/custom-light-vars.css @@ -51,21 +51,4 @@ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); } diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 32b2050a7c4..78dd4bd70ff 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -54,27 +54,4 @@ --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-icon-chevron-size-50: 6px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; } diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 95815f049c8..7bd415fe67b 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -15,7 +15,6 @@ --spectrum-animation-duration-1000: 500ms; --spectrum-animation-duration-2000: 1000ms; --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);