Introduce a ToggleButtons button_width style attribute.

ipywidgets/widgets/widget_selection.py

@@ -16,7 +16,9 @@
 from .widget_description import DescriptionWidget
 from .valuewidget import ValueWidget
 from .widget_core import CoreWidget
-from .widget import register
+from .widget_style import Style
+from .trait_types import InstanceDict
+from .widget import register, widget_serialization
 from traitlets import (Unicode, Bool, Int, Any, Dict, TraitError, CaselessStrEnum,
                        Tuple, List, Union, observe, validate)
 from ipython_genutils.py3compat import unicode_type
@@ -272,6 +274,11 @@ def _repr_keys(self):
         for key in sorted(chain(keys, ('options',))):
             yield key
 
+@register
+class ToggleButtonsStyle(Style, CoreWidget):
+    """Button style widget."""
+    _model_name = Unicode('ToggleButtonsStyleModel').tag(sync=True)
+    button_width = Unicode(help="The width of each button.").tag(sync=True)
 
 @register
 class ToggleButtons(_Selection):
@@ -284,6 +291,7 @@ class ToggleButtons(_Selection):
 
     tooltips = List(Unicode(), help="Tooltips for each button.").tag(sync=True)
     icons = List(Unicode(), help="Icons names for each button (FontAwesome names without the fa- prefix).").tag(sync=True)
+    style = InstanceDict(ToggleButtonsStyle).tag(sync=True, **widget_serialization)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''],

packages/base/src/widget_style.ts

@@ -41,6 +41,9 @@ class StyleView extends WidgetView {
         for (let key of Object.keys(ModelType.styleProperties)) {
             this.registerTrait(key)
         }
+
+        // Set the initial styles
+        this.style();
     }
 
     /**
@@ -54,9 +57,6 @@ class StyleView extends WidgetView {
         this.listenTo(this.model, 'change:' + trait, (model, value) => {
             this.handleChange(trait, value);
         });
-
-        // Set the initial value on display.
-        this.handleChange(trait, this.model.get(trait));
     }
 
     /**
@@ -85,6 +85,15 @@ class StyleView extends WidgetView {
         }
     }
 
+    /**
+     * Apply styles for all registered traits
+     */
+    style() {
+        for (let trait of this._traitNames) {
+            this.handleChange(trait, this.model.get(trait));
+        }
+     }
+
     /**
      * Remove the styling from the parent view.
      */

packages/controls/css/widgets-base.css

@@ -105,7 +105,10 @@
 /* General Button Styling */
 
 .jupyter-button {
-    padding: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 0px;
+    padding-bottom: 0px;
     display: inline-block;
     white-space: nowrap;
     overflow: hidden;

packages/controls/src/widget_selection.ts

@@ -1,6 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import {
+   StyleModel
+} from '@jupyter-widgets/base';
+
 import {
     CoreDescriptionModel,
 } from './widget_core';
@@ -356,7 +360,24 @@ class RadioButtonsView extends DescriptionView {
 }
 
 export
-class ToggleButtonsModel extends SelectionModel {
+class ToggleButtonsStyleModel extends StyleModel {
+    defaults() {
+        return _.extend(super.defaults(), {
+            _model_name: 'ToggleButtonsStyleModel',
+        });
+    }
+
+    public static styleProperties = {
+        button_width: {
+            selector: '.widget-toggle-button',
+            attribute: 'width',
+            default: null
+        }
+    };
+}
+
+export
+ class ToggleButtonsModel extends SelectionModel {
     defaults() {
         return {...super.defaults(),
             _model_name: 'ToggleButtonsModel',
@@ -463,6 +484,11 @@ class ToggleButtonsView extends DescriptionView {
             }
         });
 
+        this.stylePromise.then(function(style) {
+            if (style) {
+                style.style();
+            }
+        });
         return super.update(options);
     }