Add trbl padding to sliders

Author: rreusser

src/components/sliders/attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var fontAttrs = require('../../plots/font_attributes');
+var padAttrs = require('../../plots/pad_attributes');
 var colorAttrs = require('../color/attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var animationAttrs = require('../../plots/animation_attributes');
@@ -22,7 +23,7 @@ var stepsAttrs = {
         dflt: 'restyle',
         role: 'info',
         description: [
-            'Sets the Plotly method to be called on click.'
+            'Sets the Plotly method to be called when the slider value is changed.'
         ].join(' ')
     },
     args: {
@@ -95,10 +96,11 @@ module.exports = {
             'value when an event of type `updateevent` is received. If',
             'undefined, the data argument itself is used. If a string,',
             'that property is used, and if a string with dots, e.g.',
-            '`item.0.label`, then `data[\'item\'][0][\'label\']` will',
-            'be used. If an array, it is matched to the respective',
-            'updateevent item or if there is no corresponding updatevalue',
-            'for a particular updateevent, it is interpreted as `undefined` and defaults to the data property itself.'
+            '`item.0.label`, then `data[0].label` is used. If an array,',
+            'it is matched to the respective updateevent item or if there',
+            'is no corresponding updatevalue for a particular updateevent,',
+            'it is interpreted as `undefined` and defaults to the data',
+            'property itself.'
         ].join(' ')
     },
 
@@ -134,20 +136,9 @@ module.exports = {
         role: 'style',
         description: 'Sets the x position (in normalized coordinates) of the slider.'
     },
-    xpad: {
-        valType: 'number',
-        min: 0,
-        dflt: 10,
-        role: 'style',
-        description: 'Sets the amount of padding (in px) along the x direction'
-    },
-    ypad: {
-        valType: 'number',
-        min: 0,
-        dflt: 10,
-        role: 'style',
-        description: 'Sets the amount of padding (in px) along the x direction'
-    },
+    pad: extendFlat({}, padAttrs, {
+        description: 'Set the padding of the slider component along each side.'
+    }),
     xanchor: {
         valType: 'enumerated',
         values: ['auto', 'left', 'center', 'right'],

src/components/sliders/defaults.js

@@ -60,8 +60,10 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
     coerce('len');
     coerce('lenmode');
 
-    coerce('xpad');
-    coerce('ypad');
+    coerce('pad.t');
+    coerce('pad.r');
+    coerce('pad.b');
+    coerce('pad.l');
 
     coerce('updateevent');
     coerce('updatevalue');

src/components/sliders/draw.js

@@ -145,7 +145,7 @@ function findDimensions(gd, sliderOpts) {
 
     // The length of the rail, *excluding* padding on either end:
     sliderOpts.inputAreaStart = 0;
-    sliderOpts.inputAreaLength = Math.round(sliderOpts.outerLength - sliderOpts.xpad * 2);
+    sliderOpts.inputAreaLength = Math.round(sliderOpts.outerLength - sliderOpts.pad.l - sliderOpts.pad.r);
     sliderOpts.railInset = Math.round(Math.max(0, constants.gripWidth - constants.railWidth) * 0.5);
     sliderOpts.stepInset = Math.round(Math.max(sliderOpts.railInset, constants.gripWidth * 0.5));
 
@@ -155,7 +155,7 @@ function findDimensions(gd, sliderOpts) {
     sliderOpts.labelStride = Math.max(1, Math.ceil(computedSpacePerLabel / availableSpacePerLabel));
     sliderOpts.labelHeight = labelHeight;
 
-    sliderOpts.height = constants.tickOffset + constants.tickLength + sliderOpts.labelHeight + sliderOpts.ypad * 2;
+    sliderOpts.height = constants.tickOffset + constants.tickLength + sliderOpts.labelHeight + sliderOpts.pad.t + sliderOpts.pad.b;
 
     var xanchor = 'left';
     if(anchorUtils.isRightAnchor(sliderOpts)) {
@@ -202,7 +202,7 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
         .call(drawGrip, gd, sliderOpts);
 
     // Position the rectangle:
-    Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.xpad, sliderOpts.ly + sliderOpts.ypad);
+    Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
 
     // Every time the slider is draw from scratch, just detach and reattach the event listeners.
     // This could perhaps be avoided.

src/plots/pad_attributes.js

@@ -0,0 +1,40 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = {
+    t: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) along the top of the component.'
+    },
+    r: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) on the right side of the component.'
+    },
+    b: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) along the bottom of the component.'
+    },
+    l: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        role: 'style',
+        description: 'The amount of padding (in px) on the left side of the component.'
+    }
+};