Introduce a ToggleButtons button_width style attribute.

Fixes #1189

Author: jasongrout

ipywidgets/widgets/widget_selection.py

@@ -15,7 +15,9 @@
 from .domwidget import LabeledWidget
 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
@@ -202,6 +204,11 @@ def _validate_value(self, proposal):
         except KeyError as k:
             raise TraitError('Invalid selection: %r'%(k.args[0],))
 
+@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):
@@ -214,6 +221,7 @@ class ToggleButtons(_Selection):
 
     tooltips = List(Unicode()).tag(sync=True)
     icons = List(Unicode()).tag(sync=True)
+    style = InstanceDict(ToggleButtonsStyle).tag(sync=True, **widget_serialization)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''],

jupyter-js-widgets/src/widget_selection.ts

@@ -5,6 +5,10 @@ import {
     CoreLabeledDOMWidgetModel,
 } from './widget_core';
 
+import {
+    StyleModel
+} from './widget_style';
+
 import {
     LabeledDOMWidgetView, unpack_models, ViewList
 } from './widget';
@@ -316,6 +320,23 @@ class RadioButtonsView extends LabeledDOMWidgetView {
     container: HTMLDivElement;
 }
 
+export
+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() {
@@ -424,6 +445,12 @@ class ToggleButtonsView extends LabeledDOMWidgetView {
             }
         });
 
+        this.stylePromise.then(function(style) {
+            if (style) {
+                style.style();
+            }
+        });
+
         return super.update(options);
     }
 

jupyter-js-widgets/src/widget_style.ts

@@ -41,6 +41,8 @@ class StyleView extends WidgetView {
         for (let key of Object.keys(ModelType.styleProperties)) {
             this.registerTrait(key)
         }
+        // Set the initial styles
+        this.style();
     }
 
     /**
@@ -54,9 +56,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 +84,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.
      */