Merge pull request #1834 from Doodledun/1719-support-more-styles-to-t…

…oggle-buttons 1719 support more styles to toggle buttons
jupyter-widgets · Nov 22, 2017 · 95b91f3 · 95b91f3
2 parents ce19a86 + 90e8c93
commit 95b91f3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/ipywidgets/widgets/widget_selection.py b/ipywidgets/widgets/widget_selection.py
@@ -17,7 +17,7 @@
 from .valuewidget import ValueWidget
 from .widget_core import CoreWidget
 from .widget_style import Style
-from .trait_types import InstanceDict
+from .trait_types import InstanceDict, Color
 from .widget import register, widget_serialization
 from .docutils import doc_subst
 from traitlets import (Unicode, Bool, Int, Any, Dict, TraitError, CaselessStrEnum,
@@ -375,6 +375,7 @@ def _repr_keys(self):
         for key in sorted(chain(keys, ('options',))):
             yield key
 
+
 @register
 class ToggleButtonsStyle(DescriptionStyle, CoreWidget):
     """Button style widget.
@@ -384,9 +385,22 @@ class ToggleButtonsStyle(DescriptionStyle, CoreWidget):
     button_width: str
         The width of each button. This should be a valid CSS
         width, e.g. '10px' or '5em'.
+
+    button_color: str or None
+        The color of each button. This should be a valid CSS color unit,
+        for example 'yellow' or '#FFFF00'.
+
+    font_weight: str
+        The text font weight of each button, This should be a valid CSS font
+        weight unit, for example 'bold' or '600'
     """
     _model_name = Unicode('ToggleButtonsStyleModel').tag(sync=True)
     button_width = Unicode(help="The width of each button.").tag(sync=True)
+    button_color = Color(None, allow_none=True,
+                         help="Color of each button.").tag(sync=True)
+    font_weight = Unicode(
+        help="Text font weight of each button."
+    ).tag(sync=True)
 
 
 @register

diff --git a/packages/controls/src/widget_selection.ts b/packages/controls/src/widget_selection.ts
@@ -380,6 +380,16 @@ class ToggleButtonsStyleModel extends DescriptionStyleModel {
             selector: '.widget-toggle-button',
             attribute: 'width',
             default: null
+        },
+        button_color: {
+            selector: '.widget-toggle-button',
+            attribute: 'background-color',
+            default: null
+        },
+        font_weight: {
+            selector: '.widget-toggle-button',
+            attribute: 'font-weight',
+            default: ''
         }
     };
 }

diff --git a/packages/schema/jupyterwidgetmodels.v7.md b/packages/schema/jupyterwidgetmodels.v7.md
@@ -837,6 +837,8 @@ Attribute        | Type             | Default          | Help
 `_view_module_version` | string           | `'1.0.0'`        | 
 `_view_name`     | string           | `'StyleView'`    | 
 `button_width`   | string           | `''`             | The width of each button.
+`button_color`   | `null` or string | `null`           | The color of each button
+`font_weight`    | string           | `''`             | The button text font weight of each button.
 
 ### VBoxModel (@jupyter-widgets/controls, 1.0.0); VBoxView (@jupyter-widgets/controls, 1.0.0)