Merge pull request #8024 from Lexachoc/fix-modebar-hover

Fix stale modebar hover colors after style updates

Author: KoolADE85

draftlogs/8024_fix.md

@@ -0,0 +1 @@
+- Fix modebar hover colors not updating after `color` or `activecolor` changes [[#8024](https://github.com/plotly/plotly.js/pull/8024)], with thanks to @Lexachoc for the contribution!

src/lib/dom.js

@@ -109,22 +109,29 @@ function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, i
         element = document;
     }
     element.querySelectorAll(selector).forEach(function(el) {
+        el._hoverStyle = {
+            activeStyleParts: activeStyleParts,
+            inactiveStyleParts: inactiveStyleParts
+        };
+
         if(!el.getAttribute(eventAddedAttrName)) {
             // Emulate ":hover" CSS style using JS event handlers to set the
             // style in a strict CSP-compliant manner.
             el.addEventListener('mouseenter', function() {
+                var hoverStyle = this._hoverStyle;
                 var childEl = this.querySelector(childSelector);
                 if(childEl) {
-                    childEl.style[activeStyleParts[0]] = activeStyleParts[1];
+                    childEl.style[hoverStyle.activeStyleParts[0]] = hoverStyle.activeStyleParts[1];
                 }
             });
             el.addEventListener('mouseleave', function() {
+                var hoverStyle = this._hoverStyle;
                 var childEl = this.querySelector(childSelector);
                 if(childEl) {
                     if(activeSelector && this.matches(activeSelector)) {
-                        childEl.style[activeStyleParts[0]] = activeStyleParts[1];
+                        childEl.style[hoverStyle.activeStyleParts[0]] = hoverStyle.activeStyleParts[1];
                     } else {
-                        childEl.style[inactiveStyleParts[0]] = inactiveStyleParts[1];
+                        childEl.style[hoverStyle.inactiveStyleParts[0]] = hoverStyle.inactiveStyleParts[1];
                     }
                 }
             });

test/jasmine/tests/modebar_test.js

@@ -1619,6 +1619,31 @@ describe('ModeBar', function() {
             .then(done, done.fail);
         });
 
+        it('changes hover icon colors', function(done) {
+            Plotly.newPlot(gd, [], {
+                modebar: {
+                    color: colors[0],
+                    activecolor: colors[1]
+                }
+            })
+            .then(function() {
+                button = selectButton(gd._fullLayout._modeBar, targetBtn);
+
+                // intentionally swap colors to verify hover handlers use the updated values
+                return Plotly.relayout(gd, {
+                    'modebar.color': colors[1],
+                    'modebar.activecolor': colors[0]
+                });
+            })
+            .then(function() {
+                button.node.dispatchEvent(new window.MouseEvent('mouseenter'));
+                checkButtonColor(button, colors[0]);
+                button.node.dispatchEvent(new window.MouseEvent('mouseleave'));
+                checkButtonColor(button, colors[1]);
+            })
+            .then(done, done.fail);
+        });
+
         it('changes background color (displayModeBar: hover)', function(done) {
             Plotly.newPlot(gd, [], {modebar: { bgcolor: colors[0]}})
             .then(function() {