Repository navigation
Fix modebar icon color for custom SVG icons with multiple paths - #8164
Draft
thelastbackspace wants to merge 2 commits into
Draft
thelastbackspace wants to merge 2 commits into
thelastbackspace wants to merge 2 commits into
Conversation
The hover handlers and updateActiveButton only styled the first '.icon path' of a button, so custom SVG icons made of several paths were only partly recolored. Apply the fill to every matching path. Fixes plotly#7669
KoolADE85
self-requested a review
November 9, 2026 21:02
Contributor
|
Moving this to draft until the path forward is agreed upon. |
camdecoster
marked this pull request as draft
November 12, 2026 20:46
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.
Fixes #7669
Since the modebar hover styling moved to JS event handlers (for strict CSP), the fill color is set on
button.querySelector('.icon path'), which only returns the first path. A customsvgicon made of several<path>elements ends up with only its first path colored, while the rest stay black.This changes both places that set the fill (the mouseenter/mouseleave handlers in
Lib.setStyleOnHoverandupdateButtonStyleinmodebar.updateActiveButton) to usequerySelectorAlland style every matching path. Built-in icons have a single path, so they behave the same as before.Testing:
modebar_test.jsthat adds a custom button with a two-path SVG icon and checks the computed fill of both paths at rest, on mouseenter and on mouseleave. It fails on main (second path isrgb(0, 0, 0)) and passes with the fix.modebar lib config localize draw_newshape plot_api plot_api_react axes cartesian_interact sankey, skipping gl/flaky/noCI) plusnpm run lint,npm run test-syntaxandnpm run typecheck. Everything passes except twoinsiderangetests inaxes_test.js, which fail the same way on main on my machine (looks like font metrics).