Skip to content

Commit

Permalink
feat(color-slider): migrate to core tokens (#3507)
Browse files Browse the repository at this point in the history 
* 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 <westbrook.johnson@gmail.com>
  • Loading branch information
@jawinn @Westbrook
jawinn and Westbrook committed Sep 8, 2023
1 parent e7e2b76 commit 96d0d40
Show file tree
Hide file tree
Showing 9 changed files with 161 additions and 114 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: 0cebb3fccf2241ffa7850ab5368ab3d8aef9f0e4
default: 6872683e2c47918e89c8c73a15367ca97b15b38e
wireit_cache_name:
type: string
default: wireit
Expand Down
2 changes: 1 addition & 1 deletion packages/color-handle/package.json
View file
Expand Up @@ -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",
Expand Down
45 changes: 45 additions & 0 deletions packages/color-handle/src/color-handle.css
View file
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion packages/color-slider/package.json
View file
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions packages/color-slider/src/ColorSlider.ts
View file
Expand Up @@ -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';

/**
Expand All @@ -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 })
Expand Down Expand Up @@ -303,7 +304,7 @@ export class ColorSlider extends Focusable {
protected override render(): TemplateResult {
return html`
<div
class="checkerboard"
class="opacity-checkerboard checkerboard"
role="presentation"
@pointerdown=${this.handleGradientPointerdown}
>
Expand Down
4 changes: 0 additions & 4 deletions packages/color-slider/src/color-slider.css
View file
Expand Up @@ -37,10 +37,6 @@ governing permissions and limitations under the License.
overflow: hidden;
}

:host([dir='rtl']) .gradient {
transform: scaleX(-1);
}

::slotted(*) {
width: 100%;
height: 100%;
Expand Down
193 changes: 99 additions & 94 deletions packages/color-slider/src/spectrum-color-slider.css
View file
Expand Up @@ -12,149 +12,154 @@ governing permissions and limitations under the License.

/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
--spectrum-colorslider-handle-hitarea-border-radius: 0%;
--spectrum-colorslider-handle-hitarea-width: var(
--spectrum-global-dimension-size-300
--spectrum-color-slider-handle-margin-block: var(
--spectrum-component-top-to-text-75
);
--spectrum-colorslider-handle-hitarea-height: var(
--spectrum-global-dimension-size-300
--spectrum-color-slider-border-color-rgba: rgba(
var(--spectrum-gray-900-rgb),
var(--spectrum-color-slider-border-opacity)
);
--spectrum-colorslider-checkerboard-size: var(
--spectrum-color-slider-checkerboard-size: var(
--spectrum-opacity-checkerboard-square-size
);
--spectrum-colorslider-checkerboard-dark-color: var(
--spectrum-color-slider-checkerboard-dark-color: var(
--spectrum-opacity-checkerboard-square-dark
);
--spectrum-colorslider-checkerboard-light-color: var(
--spectrum-color-slider-checkerboard-light-color: var(
--spectrum-opacity-checkerboard-square-light
);
--mod-colorhandle-hitarea-border-radius: var(
--mod-color-slider-handle-hitarea-border-radius,
0px
);
}
.slider {
height: 100%;
left: 0;
margin: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
@media (forced-colors: active) {
:host {
--highcontrast-color-slider-border-color: CanvasText;
--highcontrast-color-slider-border-color-disabled: GrayText;
--highcontrast-color-slider-background-color-disabled: Canvas;
forced-color-adjust: none;
}
}
:host {
block-size: var(
--mod-color-slider-control-track-width,
var(--spectrum-color-control-track-width)
);
cursor: default;
display: block;
height: var(
--spectrum-colorslider-height,
var(--spectrum-global-dimension-size-300)
inline-size: var(
--mod-color-slider-length,
var(--spectrum-color-slider-length)
);
min-inline-size: var(
--mod-color-slider-minimum-length,
var(--spectrum-color-slider-minimum-length)
);
position: relative;
-webkit-user-select: none;
user-select: none;
width: var(
--spectrum-colorslider-default-length,
var(--spectrum-global-dimension-size-2400)
);
}
:host([focused]) {
z-index: 2;
}
:host([disabled]) {
pointer-events: none;
}
:host([disabled]) .gradient {
display: none;
}
:host([vertical]) {
block-size: var(
--mod-color-slider-vertical-height,
var(--mod-color-slider-length, var(--spectrum-color-slider-length))
);
display: inline-block;
height: var(
--spectrum-colorslider-vertical-default-length,
var(--spectrum-global-dimension-size-2400)
inline-size: var(
--mod-color-slider-vertical-control-track-width,
var(
--mod-color-slider-control-track-height,
var(--spectrum-color-control-track-width)
)
);
width: var(
--spectrum-colorslider-vertical-width,
var(--spectrum-global-dimension-size-300)
min-block-size: var(
--mod-color-slider-vertical-minimum-height,
var(
--mod-color-slider-minimum-length,
var(--spectrum-color-slider-minimum-length)
)
);
min-inline-size: 0;
}
:host([vertical]) .handle {
left: 50%;
top: 0;
inset-block-start: 0;
inset-inline-start: 50%;
}
.handle {
left: 0;
top: 50%;
}
.handle:after {
border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius);
height: var(--spectrum-colorslider-handle-hitarea-height);
width: var(--spectrum-colorslider-handle-hitarea-width);
inset-block-start: 50%;
inset-inline-start: 0;
}
.checkerboard {
background: repeating-conic-gradient(
var(--spectrum-colorslider-checkerboard-light-color) 0 25%,
var(--spectrum-colorslider-checkerboard-dark-color) 0 50%
--spectrum-color-slider-border-color-local: var(
--highcontrast-color-slider-border-color,
var(
--mod-color-slider-border-color,
var(--spectrum-color-slider-border-color-rgba)
)
0 0 / calc(var(--spectrum-colorslider-checkerboard-size) * 2)
calc(var(--spectrum-colorslider-checkerboard-size) * 2);
);
}
.checkerboard:before {
border-radius: var(
--spectrum-colorslider-border-radius,
var(--spectrum-alias-border-radius-regular)
--mod-color-slider-border-rounding,
var(--spectrum-color-slider-border-rounding)
);
box-shadow: inset 0 0 0
var(
--mod-color-slider-border-width,
var(--spectrum-color-slider-border-width)
)
var(--spectrum-color-slider-border-color-local);
content: '';
inset: 0;
position: absolute;
z-index: 1;
}
.checkerboard,
.gradient {
border-radius: var(
--spectrum-colorslider-border-radius,
var(--spectrum-alias-border-radius-regular)
);
height: 100%;
width: 100%;
}
:host {
--spectrum-colorslider-border-color: var(
--spectrum-colorarea-border-color,
var(--spectrum-alias-border-color-translucent)
);
}
.checkerboard:before {
box-shadow: inset 0 0 0
:host([disabled]) .checkerboard {
--spectrum-color-slider-border-color-local: var(
--highcontrast-color-slider-border-color-disabled,
var(
--spectrum-colorslider-border-size,
var(--spectrum-alias-border-size-thin)
--mod-color-slider-border-color-disabled,
var(--spectrum-disabled-background-color)
)
var(
--spectrum-colorslider-border-color,
var(--spectrum-alias-border-color-translucent)
);
}
:host([disabled]) .checkerboard {
background: var(
--spectrum-colorslider-fill-color-disabled,
var(--spectrum-alias-track-color-disabled)
);
}
:host([disabled]) .checkerboard:before {
box-shadow: 0 0 0
background: var(
--highcontrast-color-slider-background-color-disabled,
var(
--spectrum-colorslider-border-size,
var(--spectrum-alias-border-size-thin)
--mod-color-slider-background-color-disabled,
var(--spectrum-disabled-background-color)
)
var(
--spectrum-colorslider-border-color-disabled,
var(--spectrum-alias-track-color-disabled)
);
);
}
:host([disabled]) .gradient {
display: none;
.checkerboard,
.gradient {
block-size: 100%;
border-radius: var(
--mod-color-slider-border-rounding,
var(--spectrum-color-slider-border-rounding)
);
inline-size: 100%;
}
@media (forced-colors: active) {
:host {
--spectrum-colorslider-border-color-disabled: GrayText;
--spectrum-colorslider-fill-color-disabled: Canvas;
}
:host {
forced-color-adjust: none;
}
:host([dir='rtl']) .gradient {
transform: scaleX(-1);
}
.slider {
block-size: 100%;
inline-size: 100%;
inset-block-start: 0;
inset-inline-start: 0;
margin: 0;
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 0;
}
6 changes: 3 additions & 3 deletions packages/color-slider/test/color-slider.test.ts
View file
Expand Up @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/

import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
import { elementUpdated, expect, html } from '@open-wc/testing';
import {
arrowDownEvent,
arrowDownKeyupEvent,
Expand All @@ -20,6 +20,7 @@ import {
arrowRightKeyupEvent,
arrowUpEvent,
arrowUpKeyupEvent,
fixture,
testForLitDevWarnings,
} from '../../../test/testing-helpers.js';

Expand Down Expand Up @@ -229,7 +230,6 @@ describe('ColorSlider', () => {

await elementUpdated(el);


expect(el.sliderHandlePosition).to.be.approximately(
(2 * 100) / 360,
0.000001
Expand Down Expand Up @@ -543,7 +543,7 @@ describe('ColorSlider', () => {
boundingClientRect.top + boundingClientRect.height / 2,
];
const targetLocation: [number, number] = [
handleLocation[0] + 100,
handleLocation[0] + 105,
handleLocation[1],
];

Expand Down

0 comments on commit 96d0d40

Please sign in to comment.