diff --git a/ipywidgets/widgets/widget_selection.py b/ipywidgets/widgets/widget_selection.py index 273044a51d..61c30c1ef4 100644 --- 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 index 8bdf95931f..6637d987bb 100644 --- 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 index 3aa6cf40cd..5b659452b9 100644 --- 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)