From 7fa738052a5063c64b522846591860ff083a5c83 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 7 May 2024 17:42:05 -0400 Subject: [PATCH 1/3] fix(picker): correct disabled state colors The following states were showing a change of colors: - Disabled + hover - Disabled + invalid + hover - Disabled + open - Disabled + open + hover This was caused by two different issues. One is that the .is-open styles had a higher specificity than some of the disabled styles. The other is that the default :hover styles are being moved farther down in the built dist file, as part of the hover media query from the postcss-hover-media-feature plugin. The hover styles with the same specificity as the disabled styles were then in a different order than intended. --- .changeset/sixty-pandas-impress.md | 5 +++ components/picker/index.css | 71 +++++++++++++++--------------- 2 files changed, 41 insertions(+), 35 deletions(-) create mode 100644 .changeset/sixty-pandas-impress.md diff --git a/.changeset/sixty-pandas-impress.md b/.changeset/sixty-pandas-impress.md new file mode 100644 index 00000000000..cff5b2fd597 --- /dev/null +++ b/.changeset/sixty-pandas-impress.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/picker": patch +--- + +Fixes an issue where colors could change when hovering over the Picker in the disabled state and disabled + invalid state. diff --git a/components/picker/index.css b/components/picker/index.css index 045efa74ca5..c1fb6d0cf3e 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -277,6 +277,26 @@ governing permissions and limitations under the License. } } + &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); + + &:hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); + } + } + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); + } + } + &.is-invalid:not(:disabled, .is-disabled) { border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default))); @@ -321,47 +341,28 @@ governing permissions and limitations under the License. } } - &:disabled, - &.is-disabled { - cursor: default; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - - .spectrum-Picker-icon, - .spectrum-Picker-menuIcon, - .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } - - .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - } - } - .spectrum-Picker-icon { flex-shrink: 0; margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); } } -.spectrum-Picker.is-open:not(.spectrum-Picker--quiet) { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); - - &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); - - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); - } +/* Disabled state. */ +.spectrum-Picker.spectrum-Picker:disabled, +.spectrum-Picker.spectrum-Picker.is-disabled { + cursor: default; + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); + border-color: var(--highcontrast-picker-border-color-disabled, transparent); + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + + .spectrum-Picker-icon, + .spectrum-Picker-menuIcon, + .spectrum-Picker-validationIcon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); } - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); + .spectrum-Picker-label.is-placeholder { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); } } @@ -481,8 +482,8 @@ governing permissions and limitations under the License. background-color: var(--highcontrast-picker-background-color, transparent); } - &:disabled, - &.is-disabled { + &.spectrum-Picker:disabled, + &.spectrum-Picker.is-disabled { background-color: var(--highcontrast-picker-background-color, transparent); } } From 8096e583d51417cbc6b1d851a06897045c456988 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 16 May 2024 15:29:52 -0400 Subject: [PATCH 2/3] refactor(picker): remove unused custom property Remove unused custom property picked up by stylelint. --- components/picker/index.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/picker/index.css b/components/picker/index.css index c1fb6d0cf3e..e883dc1d86c 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -32,7 +32,6 @@ governing permissions and limitations under the License. --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-100); --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); @@ -89,7 +88,6 @@ governing permissions and limitations under the License. .spectrum-Picker--sizeS { --spectrum-picker-font-size: var(--spectrum-font-size-75); --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-75); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); @@ -110,7 +108,6 @@ governing permissions and limitations under the License. .spectrum-Picker--sizeL { --spectrum-picker-font-size: var(--spectrum-font-size-200); --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-200); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); @@ -131,7 +128,6 @@ governing permissions and limitations under the License. .spectrum-Picker--sizeXL { --spectrum-picker-font-size: var(--spectrum-font-size-300); --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-300); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); From 879f00b7240ffd7673a5a787584974e164b83faf Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 28 May 2024 12:07:03 -0400 Subject: [PATCH 3/3] fix(picker): alternative approach for disabled hover fix An alernative way to fix the issues caused by the postcss-hover-media-feature plugin moving hover styles below where they should be. Moves disabled styles to the very bottom, so they come after the hover media query added during the build. --- components/picker/index.css | 40 +++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/components/picker/index.css b/components/picker/index.css index e883dc1d86c..06f0bf12a41 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -343,25 +343,6 @@ governing permissions and limitations under the License. } } -/* Disabled state. */ -.spectrum-Picker.spectrum-Picker:disabled, -.spectrum-Picker.spectrum-Picker.is-disabled { - cursor: default; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - - .spectrum-Picker-icon, - .spectrum-Picker-menuIcon, - .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } - - .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - } -} - .spectrum-Picker-label { /* Be the biggest, but also shrink! */ flex: 1 1 auto; @@ -488,3 +469,24 @@ governing permissions and limitations under the License. display: inline-flex; vertical-align: top; } + +/* Disabled state: + Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves + all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ +.spectrum-Picker:disabled, +.spectrum-Picker.is-disabled { + cursor: default; + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); + border-color: var(--highcontrast-picker-border-color-disabled, transparent); + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + + .spectrum-Picker-icon, + .spectrum-Picker-menuIcon, + .spectrum-Picker-validationIcon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + } + + .spectrum-Picker-label.is-placeholder { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + } +}