Skip to content

ComboboxControl: Replace undefined variable usage with color-mix for disabled selection #69621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Mar 19, 2025

What and Why?

Closes #69593

This PR:

  1. Removes the usage of the --wp-components-color-accent--rgb property as the rgb variant does not exist.
  2. Removes the usage of $components-color-accent-transparent-40 SASS variable in favor of color-mix().
  3. The background for disabled and selected/focused options on dark themes is now visible and looks as expected on dark backgrounds.

How?

The corresponding scss file is updated to reflect the above changes.

Testing Instructions

  1. Run the storybook dev server. (npm run storybook:dev)
  2. Navigate to ComboboxControl.
  3. Toggle the theme to dark mode.
  4. Confirm the background is visible for selected/focused disabled options.

Testing Instructions for Keyboard

Same.

Screenshots

Before After
before after

P.S. Please note that a tinted background (although faint) has been added to the first (disabled) option. The second option may appear invisible due to the lack of theming support, which will be addressed once theming is implemented for the component. (Ref. #69593 (comment))

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] UI Components Impacts or related to the UI component system labels Mar 19, 2025
@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review March 19, 2025 07:13
Copy link

github-actions bot commented Mar 19, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Package] Components /packages/components and removed [Feature] UI Components Impacts or related to the UI component system labels Mar 19, 2025
@yogeshbhutkar yogeshbhutkar force-pushed the fix-69593/combobox-control-disabled-state branch from fe899f3 to 2e494b3 Compare March 19, 2025 10:06
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes LGTM 🚀 Thank you for the fix!

A nice follow-up would be to make the whole component themable

@yogeshbhutkar
Copy link
Contributor Author

yogeshbhutkar commented Mar 19, 2025

Thanks for the review, @ciampo.

A nice follow-up would be to make the whole component themable

Will follow-up on this shortly!

@ciampo ciampo enabled auto-merge (squash) March 19, 2025 10:35
@ciampo ciampo merged commit 303a1e1 into WordPress:trunk Mar 19, 2025
61 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.6 milestone Mar 19, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
…for disabled selection (WordPress#69621)

* fix: remove transparent variant for accent color in theme variables

* fix: use `color-mix` to derive color accent variant

* fix: use `background` and reduce alpha to `4%`

* chore: add changelog

---

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ComboboxControl: disabled options don't show with dark themes
4 participants