From a9e5b107772d4c652bf2c85c60f4acb3015e7c49 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Wed, 29 Jan 2025 09:53:58 -0500 Subject: [PATCH 1/2] fix(opacitycheckerboard): remove unused var causing error (#3525) Resolves linting error: 'size' is assigned a value but never used no-unused-vars --- components/opacitycheckerboard/stories/template.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index be0c3f3aed..733789c5f3 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -13,7 +13,6 @@ export const Template = ({ customStyles = {}, id = getRandomId("opacity-checkerboard"), content = [], - size, role, } = {}) => { return html` From a2be4d1330253067832e406497a9e2233f8ca57a Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 29 Jan 2025 10:18:45 -0800 Subject: [PATCH 2/2] 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 --- .changeset/serious-clouds-jam.md | 11 ++ components/colorslider/dist/metadata.json | 4 +- components/colorslider/index.css | 33 ++-- .../stories/colorslider.stories.js | 37 +++-- .../colorslider/stories/colorslider.test.js | 3 +- components/colorslider/stories/template.js | 152 +++++++++--------- 6 files changed, 135 insertions(+), 105 deletions(-) create mode 100644 .changeset/serious-clouds-jam.md diff --git a/.changeset/serious-clouds-jam.md b/.changeset/serious-clouds-jam.md new file mode 100644 index 0000000000..ca1191d684 --- /dev/null +++ b/.changeset/serious-clouds-jam.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/colorslider": minor +--- + +# S2 colorslider migration + +This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec. + +| Before | After | +| ------------------------- | -------------------------- | +| `--spectrum-gray-900-rgb` | `--spectrum-gray-1000-rgb` | diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index de2b20d0bf..497550155a 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -37,13 +37,15 @@ "--spectrum-color-slider-border-opacity", "--spectrum-color-slider-border-rounding", "--spectrum-color-slider-border-width", + "--spectrum-color-slider-control-track-width", + "--spectrum-color-slider-fill-color-disabled", "--spectrum-color-slider-length", "--spectrum-color-slider-minimum-length" ], "global": [ "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-gray-900-rgb" + "--spectrum-gray-1000-rgb" ], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 2876596753..50983a0e53 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -11,28 +11,24 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-ColorSlider { - --highcontrast-color-slider-border-color: CanvasText; - --highcontrast-color-slider-border-color-disabled: GrayText; - --highcontrast-color-slider-background-color-disabled: Canvas; - forced-color-adjust: none; - } -} - .spectrum-ColorSlider { + /* Size and Spacing */ + --spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width); + /* @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(). */ - --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity)); /* @passthrough -- settings for nested color handle */ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); + --spectrum-color-slider-fill-color-disabled: var(--spectrum-disabled-background-color); + position: relative; display: block; min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)); inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length)); - block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width)); + block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width)); /* Otherwise we randomly drag a file icon */ user-select: none; @@ -58,7 +54,7 @@ min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))); block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length))); min-inline-size: 0; - inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))); + inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width))); .spectrum-ColorSlider-handle { inset-inline-start: 50%; @@ -85,8 +81,8 @@ } .spectrum-ColorSlider.is-disabled & { - --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))); - background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))); + --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))); + background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); } } @@ -114,3 +110,12 @@ margin: 0; pointer-events: none; } + +@media (forced-colors: active) { + .spectrum-ColorSlider { + --highcontrast-color-slider-border-color: CanvasText; + --highcontrast-color-slider-border-color-disabled: GrayText; + --highcontrast-color-slider-background-color-disabled: Canvas; + forced-color-adjust: none; + } +} diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 633fa48b8b..010b0f3151 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -19,18 +19,20 @@ export default { component: "ColorSlider", argTypes: { colorHandleStyle: { table: { disable: true } }, - vertical: { table: { disable: true } }, isDisabled, isFocused: { ...isFocused, if: { arg: "isDisabled", truthy: false }, }, - gradientStops: { - name: "Gradient stops", + color: { + name: "Color", description: - "The value of the CSS linear-gradient. Can be multiple stops separated by commas.", - type: { name: "array" }, - table: { disable: true }, + "Supports standard color input or any valid input for the background property such as, linear-gradient(red, blue).", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + }, + control: "color", }, selectedColor: { name: "Selected color", @@ -40,12 +42,19 @@ export default { control: "color", }, gradientType: { - name: "Gradient type", - description: "The gradient can be defined in the markup using CSS or with an image.", - options: ["gradient", "image"], + name: "Color type", + description: + "The color can be defined in the markup using CSS or with an image.", + options: ["color", "image"], control: { type: "select" }, table: { disable: true }, }, + vertical: { + name: "Vertical", + description: "The orientation of the component.", + type: { name: "boolean" }, + control: "boolean", + }, }, args: { rootClass: "spectrum-ColorSlider", @@ -70,8 +79,8 @@ export default { */ export const Default = ColorSliderGroup.bind({}); Default.args = { - gradientStops: - ["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%"], + 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%)", }; // ********* VRT ONLY ********* // @@ -81,7 +90,7 @@ WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes + modes: disableDefaultModes, }, }; @@ -92,6 +101,8 @@ WithForcedColors.parameters = { export const Vertical = Template.bind({}); Vertical.args = { vertical: true, + 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%)", }; Vertical.tags = ["!dev"]; Vertical.parameters = { @@ -100,7 +111,7 @@ Vertical.parameters = { export const Alpha = Template.bind({}); Alpha.args = { - gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"], + color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", selectedColor: "rgba(0, 0, 0, 1)", }; Alpha.tags = ["!dev"]; diff --git a/components/colorslider/stories/colorslider.test.js b/components/colorslider/stories/colorslider.test.js index 166960e935..ceb4f5dac8 100644 --- a/components/colorslider/stories/colorslider.test.js +++ b/components/colorslider/stories/colorslider.test.js @@ -14,6 +14,7 @@ export const ColorSliderGroup = Variants({ { testHeading: "Vertical", vertical: true, + 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%)", wrapperStyles: { // Adjust for the indicator "padding-block": "20px", @@ -21,7 +22,7 @@ export const ColorSliderGroup = Variants({ }, { testHeading: "Alpha", - gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"], + color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", selectedColor: "rgba(0, 0, 0, 1)", wrapperStyles: { // Adjust for the indicator diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js index f4c1573501..73f7f12356 100644 --- a/components/colorslider/stories/template.js +++ b/components/colorslider/stories/template.js @@ -7,83 +7,83 @@ import { when } from "lit/directives/when.js"; import "../index.css"; -export const Template = ({ - rootClass = "spectrum-ColorSlider", - customClasses = [], - customStyles = {}, - isDisabled = false, - isFocused = false, - vertical = false, - gradientStops = [ - "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)", - ], - gradientType = "gradient", - selectedColor = "rgba(255, 0, 0, 1)", - colorHandleStyle = {}, -} = {}, context = {}) => { +export const Template = ( + { + rootClass = "spectrum-ColorSlider", + customClasses = [], + customStyles = {}, + isDisabled = false, + isFocused = false, + vertical = false, + 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%)", + gradientType = "gradient", + selectedColor = "rgba(255, 0, 0, 1)", + colorHandleStyle = {}, + } = {}, + context = {}, +) => { const { updateArgs } = context; return html` -
({ ...a, [c]: true }), {}), - })} - style=${styleMap(customStyles)} - @focusin=${function() { - updateArgs({ isFocused: true }); - }} - @focusout=${function() { - updateArgs({ isFocused: false }); - }} - > - ${OpacityCheckerboard({ - customClasses: [`${rootClass}-checkerboard`], - content: [ - when( - gradientType === "image", - () => html``, - () => html`` - ), - ], - role: "presentation", - }, context)} - ${ColorHandle({ - isDisabled, - isFocused, - selectedColor, - customClasses: [`${rootClass}-handle`], - customStyles: colorHandleStyle, - }, context)} - -
- `; +
({ ...a, [c]: true }), {}), + })} + style=${styleMap(customStyles)} + @focusin=${function () { + updateArgs({ isFocused: true }); + }} + @focusout=${function () { + updateArgs({ isFocused: false }); + }} + > + ${OpacityCheckerboard( + { + customClasses: [`${rootClass}-checkerboard`], + content: [ + when( + gradientType === "image", + () => + html``, + () => + html``, + ), + ], + role: "presentation", + }, + context, + )} + ${ColorHandle( + { + isDisabled, + isFocused, + selectedColor, + customClasses: [`${rootClass}-handle`], + customStyles: colorHandleStyle, + }, + context, + )} + +
+ `; };