Skip to content

CustomSelectControl: Use dynamic fill color for check icon #69626

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?

Closes #69625

The Check icon displayed next to the selected option does not adapt properly to the theme.

Why?

Since no explicit fill value is applied, the Check icon defaults to its standard appearance.

How?

A simple fill: currentColor; CSS rule fixed it.

Testing Instructions

  1. Open the local storybook server. (npm run storybook:dev)
  2. Navigate to CustomSelectControl.
  3. Verify the Check icon is visible across all the themes (especially dark theme).
  4. Similarly, verify CustomSelectControlV2 implementations.

Screenshots

Before After
before after

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components labels Mar 19, 2025
@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review March 19, 2025 09:25
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: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

@im3dabasia
Copy link
Contributor

Thank you @yogeshbhutkar This change works well for me .

Before After
image image

While testing this, I came across CustomSelectControl v2. It had a similar problem in dark mode. and with this change that too will get resolved

Before After
Screenshot 2025-03-19 at 3 52 10 PM image

@yogeshbhutkar yogeshbhutkar force-pushed the fix-69625/custom-select-control-theme branch from 0028f9d to f9fe673 Compare March 19, 2025 10:56
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

👍

@t-hamano t-hamano merged commit 2a21c93 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
…ss#69626)

* fix: use dynamic fill color for `check` icon

* chore: add changelog

* fix: simplify CSS

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [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.

CustomSelectControl: Selected option’s Check icon doesn’t adapt with dark theme
4 participants