update default button style:

- default style has fill with Color.lightLine
- active and hovered over buttons are shown in a darker grey (#d3d3d3)

Author: etpinard

src/components/rangeselector/attributes.js

@@ -77,7 +77,7 @@ module.exports = {
 
     bgcolor: {
         valType: 'color',
-        dflt: colorAttrs.background,
+        dflt: colorAttrs.lightLine,
         role: 'style',
         description: 'Sets the background color of the range selector buttons.'
     },

src/components/rangeselector/constants.js

@@ -19,5 +19,8 @@ module.exports = {
 
     // buttons rect radii
     rx: 3,
-    ry: 3
+    ry: 3,
+
+    // color given to active and hovered buttons
+    activeColor: '#d3d3d3'
 };

src/components/rangeselector/defaults.js

@@ -38,7 +38,7 @@ module.exports = function rangeSelectorDefaults(containerIn, containerOut, layou
 
     Lib.coerceFont(coerce, 'font', layout.font);
 
-    coerce('bgcolor', layout.paper_bgcolor);
+    coerce('bgcolor');
     coerce('bordercolor');
     coerce('borderwidth');
 };

src/components/rangeselector/draw.js

@@ -142,16 +142,15 @@ function drawButtonRect(button, selectorLayout, d) {
 
 function getFillColor(selectorLayout, d) {
     return (d.isActive || d.isHovered) ?
-        Color.lightLine :
+        constants.activeColor :
         selectorLayout.bgcolor;
 }
 
 function drawButtonText(button, selectorLayout, d) {
     function textLayout(s) {
-        svgTextUtils.convertToTspans(s, function() {
-            // TODO do we need this???
-            // if(gd.firstRender) repositionLegend(gd, traces);
-        });
+        svgTextUtils.convertToTspans(s);
+
+        // TODO do we need anything else here?
     }
 
     var text = button.selectAll('text')

test/image/baselines/range_selector.png

@@ -1,9 +1,11 @@
 var RangeSelector = require('@src/components/rangeselector');
 var getUpdateObject = require('@src/components/rangeselector/get_update_object');
+var constants = require('@src/components/rangeselector/constants');
 
 var d3 = require('d3');
 var Plotly = require('@lib');
 var Lib = require('@src/lib');
+var Color = require('@src/components/color');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var getRectCenter = require('../assets/get_rect_center');
@@ -440,13 +442,16 @@ describe('[range selector suite]', function() {
             var button = d3.select('.button').select('rect');
             var pos = getRectCenter(button.node());
 
-            expect(button.style('fill')).toEqual('rgb(255, 255, 255)');
+            var fillColor = Color.rgb(gd._fullLayout.xaxis.rangeselector.bgcolor);
+            var activeColor = Color.rgb(constants.activeColor);
+
+            expect(button.style('fill')).toEqual(fillColor);
 
             mouseEvent('mouseover', pos[0], pos[1]);
-            expect(button.style('fill')).toEqual('rgb(238, 238, 238)');
+            expect(button.style('fill')).toEqual(activeColor);
 
             mouseEvent('mouseout', pos[0], pos[1]);
-            expect(button.style('fill')).toEqual('rgb(255, 255, 255)');
+            expect(button.style('fill')).toEqual(fillColor);
         });
 
         it('should update is active relayout calls', function(done) {