From 96d0d40419e9f0b2d1ed77528dc062b1e62aeea5 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 8 Sep 2023 17:40:41 -0400 Subject: [PATCH] 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 --- .circleci/config.yml | 2 +- packages/color-handle/package.json | 2 +- packages/color-handle/src/color-handle.css | 45 ++++ packages/color-slider/package.json | 2 +- packages/color-slider/src/ColorSlider.ts | 5 +- packages/color-slider/src/color-slider.css | 4 - .../src/spectrum-color-slider.css | 193 +++++++++--------- .../color-slider/test/color-slider.test.ts | 6 +- yarn.lock | 16 +- 9 files changed, 161 insertions(+), 114 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 7d01607926..88be314eac 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 0cebb3fccf2241ffa7850ab5368ab3d8aef9f0e4 + default: 6872683e2c47918e89c8c73a15367ca97b15b38e wireit_cache_name: type: string default: wireit diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index d7959eec57..f0254afbe7 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/color-loupe": "^0.38.0" }, "devDependencies": { - "@spectrum-css/colorhandle": "^7.0.6" + "@spectrum-css/colorhandle": "^7.0.7" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/src/color-handle.css b/packages/color-handle/src/color-handle.css index 270dc0bea8..49a853e04b 100644 --- a/packages/color-handle/src/color-handle.css +++ b/packages/color-handle/src/color-handle.css @@ -14,6 +14,51 @@ governing permissions and limitations under the License. :host { touch-action: none; + transition: inline-size + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ), + block-size + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ), + border-width + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ), + margin-inline + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ), + margin-block + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ); } :host(:focus) { diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index 752ef5bffa..b7cb803bba 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -68,7 +68,7 @@ "@spectrum-web-components/shared": "^0.38.0" }, "devDependencies": { - "@spectrum-css/colorslider": "^3.0.23" + "@spectrum-css/colorslider": "^5.0.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts index 7b28fc4ae2..feac664ee2 100644 --- a/packages/color-slider/src/ColorSlider.ts +++ b/packages/color-slider/src/ColorSlider.ts @@ -32,6 +32,7 @@ import { } from '@spectrum-web-components/reactive-controllers/src/Color.js'; import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js'; +import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js'; import styles from './color-slider.css.js'; /** @@ -42,7 +43,7 @@ import styles from './color-slider.css.js'; */ export class ColorSlider extends Focusable { public static override get styles(): CSSResultArray { - return [styles]; + return [opacityCheckerBoardStyles, styles]; } @property({ type: String, reflect: true }) @@ -303,7 +304,7 @@ export class ColorSlider extends Focusable { protected override render(): TemplateResult { return html`