Repository navigation
Fix: Checkbox icon color in AI settings page - #1183
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #1183 +/- ##
=============================================
+ Coverage 82.17% 82.23% +0.05%
- Complexity 3399 3400 +1
=============================================
Files 136 136
Lines 13187 13210 +23
=============================================
+ Hits 10837 10863 +26
+ Misses 2350 2347 -3
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
@SainathPoojary I'm not able to reproduce this myself, are there some setup instructions I need to follow here? I'm running WordPress 7.2-alpha-64337 and the checkbox looks correct to me. Is the issue here reliant on having Gutenberg installed and certain experiments enabled there? |
|
Thanks for testing, @dkotter! Gutenberg is not installed here. The issue happens on a standard setup with just the AI plugin active. The difference seems to be the WordPress version:
Because the plugin supports WordPress 7.0.3 and above, users on 7.0.x and 7.1.x see the dark checkmark when using the newer icon bundled in @wordpress/dataviews. You can reproduce it by testing on WordPress 7.1.3 through the default wp-env setup. Since 7.2-alpha-63166-src already resolves this upstream in Core, this rule acts as a backward compat for supported 7.0.x–7.1.x versions. Let me know your thoughts. |
dkotter
left a comment
dkotter
left a comment
There was a problem hiding this comment.
Thanks for the fix! Verified the issue exists on WP 7.1 and below and the code here does fix it. The issue doesn't exist on WP 7.2 but the code here doesn't cause any additional problems so looks good to me
What?
Ensures the checkbox checkmark and indeterminate icons are styled with
color: #fffon the AI settings page (/wp-admin/options-general.php?page=ai-wp-admin).Why?
Currently on the AI settings page, checkboxes render with a black/dark checkmark on top of the blue checkbox background.
This appears to be caused by a styling compatibility gap with upstream icon changes:
checkandresetwere redrawn to be stroke-based, andCheckboxControlstyling was updated fromfill: $whitetocolor: $white.@wordpress/dataviews(bumped to19.0.0in Fix: Accordion toggles in the Connectors > AI plugin page miss a focus style #1035), which bundles this newer icon.wp-componentsstylesheet loaded by the admin page still styles checkbox icons usingfill: #fff.colorrather thanfill, it defaults to inheriting the page's text color (black).How?
Adds a scoped compatibility rule inside
.ai-settings-pageinroutes/ai-home/style.scss:color: #fffonsvg.components-checkbox-control__checkedandsvg.components-checkbox-control__indeterminate.color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)on.components-checkbox-control:has(:disabled).Use of AI Tools
AI assistance: Yes
Tool(s): Antigravity
Used for: Investigating and drafting the PR description were assisted by AI. Implementation review, testing, and verification were performed manually.
Testing Instructions
/wp-admin/options-general.php?page=ai-wp-admin).Screenshots
Changelog Entry