Skip to content

Commit d46bfda

Browse files
cdransfcastastrophe
cdransf
authored and
castastrophe
committed
feat(colorslider): S2 migration (#3424)
* feat(colorslider): s2 migration * fix(colorslider): custom property aliasing * chore(colorslider): add color control to story * chore(colorslider): add vertical control to story * chore(colorslider): update custom property name for consistency * fix(colorslider): control name in test * fix(colorslider): arg name and value * chore(colorslider): restore missing files * chore(colorslider): update gradient direction for vertical tests + stories * chore(colorslider): update dist files * fix(colorslider): alpha story gradient * fix(colorslider): adjust inline-block-start for color handle when vertical * fix(colorslider): add missing vertical style; update gradient color
1 parent 7a4d152 commit d46bfda

File tree

6 files changed

+135
-105
lines changed

6 files changed

+135
-105
lines changed

‎.changeset/serious-clouds-jam.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@spectrum-css/colorslider": minor
3+
---
4+
5+
# S2 colorslider migration
6+
7+
This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec.
8+
9+
| Before | After |
10+
| ------------------------- | -------------------------- |
11+
| `--spectrum-gray-900-rgb` | `--spectrum-gray-1000-rgb` |

‎components/colorslider/dist/metadata.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@
3737
"--spectrum-color-slider-border-opacity",
3838
"--spectrum-color-slider-border-rounding",
3939
"--spectrum-color-slider-border-width",
40+
"--spectrum-color-slider-control-track-width",
41+
"--spectrum-color-slider-fill-color-disabled",
4042
"--spectrum-color-slider-length",
4143
"--spectrum-color-slider-minimum-length"
4244
],
4345
"global": [
4446
"--spectrum-color-control-track-width",
4547
"--spectrum-disabled-background-color",
46-
"--spectrum-gray-900-rgb"
48+
"--spectrum-gray-1000-rgb"
4749
],
4850
"passthroughs": ["--mod-colorhandle-hitarea-border-radius"],
4951
"high-contrast": [

‎components/colorslider/index.css

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,24 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
@media (forced-colors: active) {
15-
.spectrum-ColorSlider {
16-
--highcontrast-color-slider-border-color: CanvasText;
17-
--highcontrast-color-slider-border-color-disabled: GrayText;
18-
--highcontrast-color-slider-background-color-disabled: Canvas;
19-
forced-color-adjust: none;
20-
}
21-
}
22-
2314
.spectrum-ColorSlider {
15+
/* Size and Spacing */
16+
--spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width);
17+
2418
/* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
25-
--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity));
19+
--spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity));
2620

2721
/* @passthrough -- settings for nested color handle */
2822
--mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px);
2923

24+
--spectrum-color-slider-fill-color-disabled: var(--spectrum-disabled-background-color);
25+
3026
position: relative;
3127
display: block;
3228

3329
min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length));
3430
inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
35-
block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width));
31+
block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width));
3632

3733
/* Otherwise we randomly drag a file icon */
3834
user-select: none;
@@ -58,7 +54,7 @@
5854
min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)));
5955
block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length)));
6056
min-inline-size: 0;
61-
inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width)));
57+
inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width)));
6258

6359
.spectrum-ColorSlider-handle {
6460
inset-inline-start: 50%;
@@ -85,8 +81,8 @@
8581
}
8682

8783
.spectrum-ColorSlider.is-disabled & {
88-
--spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color)));
89-
background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color)));
84+
--spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled)));
85+
background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled)));
9086
}
9187
}
9288

@@ -114,3 +110,12 @@
114110
margin: 0;
115111
pointer-events: none;
116112
}
113+
114+
@media (forced-colors: active) {
115+
.spectrum-ColorSlider {
116+
--highcontrast-color-slider-border-color: CanvasText;
117+
--highcontrast-color-slider-border-color-disabled: GrayText;
118+
--highcontrast-color-slider-background-color-disabled: Canvas;
119+
forced-color-adjust: none;
120+
}
121+
}

‎components/colorslider/stories/colorslider.stories.js

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,20 @@ export default {
1919
component: "ColorSlider",
2020
argTypes: {
2121
colorHandleStyle: { table: { disable: true } },
22-
vertical: { table: { disable: true } },
2322
isDisabled,
2423
isFocused: {
2524
...isFocused,
2625
if: { arg: "isDisabled", truthy: false },
2726
},
28-
gradientStops: {
29-
name: "Gradient stops",
27+
color: {
28+
name: "Color",
3029
description:
31-
"The <linear-color-stop> value of the CSS linear-gradient. Can be multiple stops separated by commas.",
32-
type: { name: "array" },
33-
table: { disable: true },
30+
"Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code>.",
31+
type: { name: "string", required: true },
32+
table: {
33+
type: { summary: "string" },
34+
},
35+
control: "color",
3436
},
3537
selectedColor: {
3638
name: "Selected color",
@@ -40,12 +42,19 @@ export default {
4042
control: "color",
4143
},
4244
gradientType: {
43-
name: "Gradient type",
44-
description: "The gradient can be defined in the markup using CSS or with an image.",
45-
options: ["gradient", "image"],
45+
name: "Color type",
46+
description:
47+
"The color can be defined in the markup using CSS or with an image.",
48+
options: ["color", "image"],
4649
control: { type: "select" },
4750
table: { disable: true },
4851
},
52+
vertical: {
53+
name: "Vertical",
54+
description: "The orientation of the component.",
55+
type: { name: "boolean" },
56+
control: "boolean",
57+
},
4958
},
5059
args: {
5160
rootClass: "spectrum-ColorSlider",
@@ -70,8 +79,8 @@ export default {
7079
*/
7180
export const Default = ColorSliderGroup.bind({});
7281
Default.args = {
73-
gradientStops:
74-
["rgb(255, 0, 0) 0%", "rgb(255, 255, 0) 17%", "rgb(0, 255, 0) 33%", "rgb(0, 255, 255) 50%", "rgb(0, 0, 255) 67%", "rgb(255, 0, 255) 83%", "rgb(255, 0, 0) 100%"],
82+
color:
83+
"linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
7584
};
7685

7786
// ********* VRT ONLY ********* //
@@ -81,7 +90,7 @@ WithForcedColors.tags = ["!autodocs", "!dev"];
8190
WithForcedColors.parameters = {
8291
chromatic: {
8392
forcedColors: "active",
84-
modes: disableDefaultModes
93+
modes: disableDefaultModes,
8594
},
8695
};
8796

@@ -92,6 +101,8 @@ WithForcedColors.parameters = {
92101
export const Vertical = Template.bind({});
93102
Vertical.args = {
94103
vertical: true,
104+
color:
105+
"linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
95106
};
96107
Vertical.tags = ["!dev"];
97108
Vertical.parameters = {
@@ -100,7 +111,7 @@ Vertical.parameters = {
100111

101112
export const Alpha = Template.bind({});
102113
Alpha.args = {
103-
gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"],
114+
color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)",
104115
selectedColor: "rgba(0, 0, 0, 1)",
105116
};
106117
Alpha.tags = ["!dev"];

‎components/colorslider/stories/colorslider.test.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@ export const ColorSliderGroup = Variants({
1414
{
1515
testHeading: "Vertical",
1616
vertical: true,
17+
color: "linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
1718
wrapperStyles: {
1819
// Adjust for the indicator
1920
"padding-block": "20px",
2021
},
2122
},
2223
{
2324
testHeading: "Alpha",
24-
gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"],
25+
color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)",
2526
selectedColor: "rgba(0, 0, 0, 1)",
2627
wrapperStyles: {
2728
// Adjust for the indicator

‎components/colorslider/stories/template.js

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -7,83 +7,83 @@ import { when } from "lit/directives/when.js";
77

88
import "../index.css";
99

10-
export const Template = ({
11-
rootClass = "spectrum-ColorSlider",
12-
customClasses = [],
13-
customStyles = {},
14-
isDisabled = false,
15-
isFocused = false,
16-
vertical = false,
17-
gradientStops = [
18-
"rgb(255, 0, 0) 0%",
19-
"rgb(255, 255, 0) 17%",
20-
"rgb(0, 255, 0) 33%",
21-
"rgb(0, 255, 255) 50%",
22-
"rgb(0, 0, 255) 67%",
23-
"rgb(255, 0, 255) 83%",
24-
"rgb(255, 0, 0)",
25-
],
26-
gradientType = "gradient",
27-
selectedColor = "rgba(255, 0, 0, 1)",
28-
colorHandleStyle = {},
29-
} = {}, context = {}) => {
10+
export const Template = (
11+
{
12+
rootClass = "spectrum-ColorSlider",
13+
customClasses = [],
14+
customStyles = {},
15+
isDisabled = false,
16+
isFocused = false,
17+
vertical = false,
18+
color = "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
19+
gradientType = "gradient",
20+
selectedColor = "rgba(255, 0, 0, 1)",
21+
colorHandleStyle = {},
22+
} = {},
23+
context = {},
24+
) => {
3025
const { updateArgs } = context;
3126

3227
return html`
33-
<div
34-
class=${classMap({
35-
[rootClass]: true,
36-
[`${rootClass}--vertical`]: vertical,
37-
"is-disabled": isDisabled,
38-
"is-focused": isFocused,
39-
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
40-
})}
41-
style=${styleMap(customStyles)}
42-
@focusin=${function() {
43-
updateArgs({ isFocused: true });
44-
}}
45-
@focusout=${function() {
46-
updateArgs({ isFocused: false });
47-
}}
48-
>
49-
${OpacityCheckerboard({
50-
customClasses: [`${rootClass}-checkerboard`],
51-
content: [
52-
when(
53-
gradientType === "image",
54-
() => html`<img
55-
class="${rootClass}-gradient"
56-
role="presentation"
57-
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="
58-
/>`,
59-
() => html`<div
60-
class="${rootClass}-gradient"
61-
role="presentation"
62-
style=${when(gradientStops && gradientStops.length, () =>
63-
styleMap({
64-
background: `linear-gradient(to ${
65-
vertical ? "bottom" : "right"
66-
}, ${gradientStops.join(", ")})`,
67-
})
68-
)}
69-
></div>`
70-
),
71-
],
72-
role: "presentation",
73-
}, context)}
74-
${ColorHandle({
75-
isDisabled,
76-
isFocused,
77-
selectedColor,
78-
customClasses: [`${rootClass}-handle`],
79-
customStyles: colorHandleStyle,
80-
}, context)}
81-
<input
82-
type="color"
83-
value=${selectedColor}
84-
class=${classMap({
85-
[`${rootClass}-slider`]: true
86-
})} />
87-
</div>
88-
`;
28+
<div
29+
class=${classMap({
30+
[rootClass]: true,
31+
[`${rootClass}--vertical`]: vertical,
32+
"is-disabled": isDisabled,
33+
"is-focused": isFocused,
34+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
35+
})}
36+
style=${styleMap(customStyles)}
37+
@focusin=${function () {
38+
updateArgs({ isFocused: true });
39+
}}
40+
@focusout=${function () {
41+
updateArgs({ isFocused: false });
42+
}}
43+
>
44+
${OpacityCheckerboard(
45+
{
46+
customClasses: [`${rootClass}-checkerboard`],
47+
content: [
48+
when(
49+
gradientType === "image",
50+
() =>
51+
html`<img
52+
class="${rootClass}-gradient"
53+
role="presentation"
54+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="
55+
/>`,
56+
() =>
57+
html`<div
58+
class="${rootClass}-gradient"
59+
role="presentation"
60+
style=${styleMap({
61+
background: `${color}`,
62+
})}
63+
></div>`,
64+
),
65+
],
66+
role: "presentation",
67+
},
68+
context,
69+
)}
70+
${ColorHandle(
71+
{
72+
isDisabled,
73+
isFocused,
74+
selectedColor,
75+
customClasses: [`${rootClass}-handle`],
76+
customStyles: colorHandleStyle,
77+
},
78+
context,
79+
)}
80+
<input
81+
type="color"
82+
value=${selectedColor}
83+
class=${classMap({
84+
[`${rootClass}-slider`]: true,
85+
})}
86+
/>
87+
</div>
88+
`;
8989
};

0 commit comments

Comments
 (0)