Introduce a ToggleButtons button_width style attribute

Fixes #1189

Author: jasongrout

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/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);
     }