Repository navigation
fix(plugins): render inspector fact cards and chips using os-icon inside shadow DOM - #1057
Merged
epeicher merged 2 commits intoOct 30, 2026
Conversation
- Replace bare Dashicons spans with <os-icon> in fact cards, hero status chips, and the fallback icon. - Add os-icon selectors alongside .dashicons in styles.ts to ensure proper sizing and color. - Fix blank icons caused by global dashicons.min.css stylesheets being inaccessible inside the inspector's shadow DOM.
- Add unit tests to verify that icons inside the plugin inspector's shadow DOM render using <os-icon>. - Verify that fact card icons for tag and media-document render with the expected size attributes. - Verify that hero status chip icons for wordpress render with the expected size attributes. - Verify that the hero fallback icon for admin-plugins renders with the expected size attributes. - Ensure icon rendering is consistent across fact cards, hero status chips, and the hero fallback UI.
KarunyaChavan
marked this pull request as ready for review
October 28, 2026 12:17
epeicher
approved these changes
Oct 30, 2026
epeicher
left a comment
epeicher
left a comment
Collaborator
There was a problem hiding this comment.
Thanks @KarunyaChavan for fixing this! I have reviewed and tested the changes and they LGTM!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The plugin details inspector lives inside a Shadow DOM, which isolates it from WordPress's global Dashicons stylesheet. As a result, icons created using standard Dashicons spans were invisible because their
:beforepseudo-element styles were not available inside the shadow root.Closes #1056
This PR replaces those spans with the
<os-icon>web component, which renders the Dashicons glyph directly as text. This ensures icons display correctly inside the inspector.What Changed
detailIcon()helper and migrated fact card icons, status chips, and the hero fallback icon to<os-icon>.<os-icon>while maintaining backward compatibility with existing Dashicons elements.Steps to Test
admin-pluginsfallback icon.Use of AI
AI Used: Yes
Tool: Antigravity
Model: Gemini 3.8 Flash
Used For: Confirming the root cause and adding tests for the updated patch