From 1bfefa5397bdb5f402690957112d8c692d47e0fe Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 6 Jan 2025 09:08:38 -0800 Subject: [PATCH] feat(colorwheel): s2 migration - chore(colorwheel): update property name - chore(colorwheel): wip inset borders - chore(colorwheel): fix lint violations - chore(colorwheel): move mod declarations - chore(colorwheel): drop unused property + update metadata - chore(colorwheel): remove underlying border node + class - chore(colorwheel): remove unused property - fix(colorwheel): add missing mod - fix(colorwheel): comments for updated before spacing/positioning - fix(colorwheel): adopt proper token for border opacity - fix(colorwheel): remove inset border on disabled state - fix(colorwheel): remove global token reference - chore(colorwheel): highlight removed/added mods - chore(colorwheel): update copyright year - chore(colorwheel): add color loupe to default story - fix(colorwheel): correct WHC disabled background color value - chore(colorwheel): update test heading - fix(colorwheel): typos - chore(colorwheel): update token usage - chore(colorwheel): add without loupe test - chore(colorwheel): restore WHC styles - chore(colorwheel): move isWithColorLoupe property - fix(colorwheel): whc disabled background --- .changeset/giant-windows-smoke.md | 20 ++++ components/colorwheel/dist/metadata.json | 21 ++-- components/colorwheel/index.css | 102 +++++++++++------- .../colorwheel/stories/colorwheel.stories.js | 12 ++- .../colorwheel/stories/colorwheel.test.js | 4 + components/colorwheel/stories/template.js | 11 +- 6 files changed, 117 insertions(+), 53 deletions(-) create mode 100644 .changeset/giant-windows-smoke.md diff --git a/.changeset/giant-windows-smoke.md b/.changeset/giant-windows-smoke.md new file mode 100644 index 00000000000..a290fa90d1f --- /dev/null +++ b/.changeset/giant-windows-smoke.md @@ -0,0 +1,20 @@ +--- +"@spectrum-css/colorwheel": major +--- + +# colorwheel S2 migration + +This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function. + +This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs. + +The following mods have been removed: + +```css +--mod-colorwheel-height +--mod-colorwheel-path-borders +--mod-colorwheel-track-width +--mod-colorwheel-width +``` + +The mod `--mod-colorwheel-track-width` has been added. diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index 07c9f09723f..9fcb81125ac 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -4,17 +4,19 @@ ".spectrum-ColorWheel", ".spectrum-ColorWheel-ColorArea-handle", ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)", - ".spectrum-ColorWheel-border", - ".spectrum-ColorWheel-border.is-disabled", ".spectrum-ColorWheel-colorarea-container", ".spectrum-ColorWheel-handle", ".spectrum-ColorWheel-inner", + ".spectrum-ColorWheel-inner:before", ".spectrum-ColorWheel-slider", ".spectrum-ColorWheel-wheel", ".spectrum-ColorWheel-wheel.is-disabled", ".spectrum-ColorWheel.is-disabled", + ".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before", + ".spectrum-ColorWheel.is-disabled:before", ".spectrum-ColorWheel.is-dragged", ".spectrum-ColorWheel.is-focused", + ".spectrum-ColorWheel:before", "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" ], "modifiers": [ @@ -23,24 +25,25 @@ "--mod-colorwheel-colorarea-container-size", "--mod-colorwheel-colorarea-margin", "--mod-colorwheel-fill-color-disabled", - "--mod-colorwheel-height", - "--mod-colorwheel-min-width", + "--mod-colorwheel-min-inline-size", "--mod-colorwheel-path", - "--mod-colorwheel-path-borders", - "--mod-colorwheel-track-width", - "--mod-colorwheel-width" + "--mod-colorwheel-track-width" ], "component": [ + "--spectrum-color-wheel-border-opacity", "--spectrum-color-wheel-color-area-margin", "--spectrum-color-wheel-minimum-width", "--spectrum-color-wheel-width", "--spectrum-colorwheel-border-color", + "--spectrum-colorwheel-border-color-rgb", + "--spectrum-colorwheel-border-opacity", "--spectrum-colorwheel-border-width", "--spectrum-colorwheel-colorarea-container-size", + "--spectrum-colorwheel-colorarea-margin", "--spectrum-colorwheel-fill-color-disabled", "--spectrum-colorwheel-height", + "--spectrum-colorwheel-min-inline-size", "--spectrum-colorwheel-path", - "--spectrum-colorwheel-path-borders", "--spectrum-colorwheel-track-width", "--spectrum-colorwheel-width" ], @@ -48,7 +51,7 @@ "--spectrum-border-width-100", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-transparent-black-300" + "--spectrum-gray-1000-rgb" ], "passthroughs": [], "high-contrast": [ diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index fe4b7865baf..3a6047543d3 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,46 +11,64 @@ * governing permissions and limitations under the License. */ -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorWheel { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; +.spectrum-ColorWheel { + --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); - forced-color-adjust: none; - } -} + /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ + --spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb); -.spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity); + --spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity)); + + --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); + --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); + + --spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width); - --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); - --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); - --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); - --spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100)); - --spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width)); + --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ - --_track-width: var(--spectrum-colorwheel-track-width); + --_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ - --_border-width: var(--spectrum-colorwheel-border-width); + --_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); position: relative; display: block; - min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width)); + min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size)); inline-size: var(--spectrum-colorwheel-width); block-size: var(--spectrum-colorwheel-height); user-select: none; cursor: default; + /* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the exterior edge of the colorwheel. The size is reduced and positioning adjusted to create the border effect. */ + &::before { + inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width))); + block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width))); + inset-block-start: var(--spectrum-colorwheel-border-width); + inset-inline-start: var(--spectrum-colorwheel-border-width); + content: ""; + position: absolute; + border-width: var(--spectrum-colorwheel-border-width); + border-style: solid; + border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + border-radius: 100%; + z-index: 1; + } + &.is-focused { z-index: 2; } &.is-disabled { pointer-events: none; + + &::before, + .spectrum-ColorWheel-inner::before { + border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent); + } } &.is-dragged { @@ -69,6 +87,21 @@ inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); margin: auto; + + /* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the interior edge of the colorwheel. The size is increased and positioning adjusted to create the border effect. */ + &::before { + inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width))); + block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width))); + inset-block-start: calc(-2 * var(--spectrum-colorwheel-border-width)); + inset-inline-start: calc(-2 * var(--spectrum-colorwheel-border-width)); + content: ""; + position: absolute; + border-width: var(--spectrum-colorwheel-border-width); + border-style: solid; + border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + border-radius: 100%; + z-index: 1; + } } .spectrum-ColorWheel-colorarea-container { @@ -77,7 +110,7 @@ display: flex; align-items: center; justify-content: center; - margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin)); + margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin)); } .spectrum-ColorWheel-slider { @@ -93,7 +126,7 @@ } .spectrum-ColorWheel-handle { - transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0); + transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) / 2), 0); inset-block-start: 50%; inset-inline: 50%; } @@ -107,19 +140,6 @@ } } -/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */ -.spectrum-ColorWheel-border { - position: relative; - background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); - inline-size: var(--spectrum-colorwheel-width); - block-size: var(--spectrum-colorwheel-height); - clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); - - &.is-disabled { - background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)); - } -} - .spectrum-ColorWheel-wheel { position: absolute; background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red); @@ -129,6 +149,16 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)); + background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } +} + +/* Windows High Contrast Mode */ +@media (forced-colors: active) { + .spectrum-ColorWheel { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + + forced-color-adjust: none; } } diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 15bba48a20a..9b95c8d7548 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -23,7 +23,16 @@ export default { if: { arg: "isDisabled", truthy: false }, }, isWithColorArea: { - name: "With Color Area", + name: "With color area", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isWithColorLoupe: { + name: "With color loupe", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -44,6 +53,7 @@ export default { isDisabled: false, isFocused: false, isWithColorArea: false, + isWithColorLoupe: true, selectedColor: "rgba(255, 0, 0, 50%)", }, parameters: { diff --git a/components/colorwheel/stories/colorwheel.test.js b/components/colorwheel/stories/colorwheel.test.js index 7271a8d0808..a420c54b4c7 100644 --- a/components/colorwheel/stories/colorwheel.test.js +++ b/components/colorwheel/stories/colorwheel.test.js @@ -11,6 +11,10 @@ export const ColorWheelGroup = Variants({ testHeading: "With color area", isWithColorArea: true, }, + { + testHeading: "Without color loupe", + isWithColorLoupe: false, + }, ], stateData: [ { diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 1d02f5e7823..91831c0af3e 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -12,6 +12,7 @@ export const Template = ({ isDisabled = false, isFocused = false, isWithColorArea = false, + isWithColorLoupe = true, colorHandleStyle = {}, selectedColor = "rgba(255, 0, 0, 50%)", } = {}, context = {}) => { @@ -37,20 +38,16 @@ export const Template = ({
-
-
+ })}> ${ColorHandle({ isDisabled, isFocused, customClasses: [`${rootClass}-handle`], selectedColor, customStyles: colorHandleStyle, + isWithColorLoupe, }, context)}