Using booleans ('italic') instead of strings ('text-style').

Author: Zerline

ipywidgets/widgets/widget_button.py

@@ -12,6 +12,7 @@
 from .widget_core import CoreWidget
 from .widget_style import Style
 from .trait_types import Color, InstanceDict
+from .._version import __jupyter_widgets_controls_version__
 
 from traitlets import Unicode, Bool, CaselessStrEnum, Instance, validate, default
 import warnings
@@ -21,14 +22,17 @@
 class ButtonStyle(Style, CoreWidget):
     """Button style widget."""
     _model_name = Unicode('ButtonStyleModel').tag(sync=True)
+    _view_name = Unicode('ButtonStyleView').tag(sync=True)
+    _view_module = Unicode('@jupyter-widgets/controls').tag(sync=True)
+    _view_module_version = Unicode(__jupyter_widgets_controls_version__).tag(sync=True)
+    bold = Bool(None, allow_none=True, help="Button text bold.").tag(sync=True)
     button_color = Color(None, allow_none=True, help="Color of the button").tag(sync=True)
-    font_family = Unicode(help="Button text font family.").tag(sync=True)
+    font_family = Unicode(None, allow_none=True, help="Button text font family.").tag(sync=True)
     font_size = Unicode(help="Button text font size.").tag(sync=True)
-    font_style = Unicode(help="Button text font style.").tag(sync=True)
-    font_variant = Unicode(help="Button text font variant.").tag(sync=True)
-    font_weight = Unicode(help="Button text font weight.").tag(sync=True)
+    font_variant = Unicode(None, allow_none=True, help="Button text font variant.").tag(sync=True)
+    italic = Bool(None, allow_none=True, help="Button text italic.").tag(sync=True)
     text_color = Unicode(help="Button text color.").tag(sync=True)
-    text_decoration = Unicode(help="Button text decoration.").tag(sync=True)
+    underline = Bool(None, allow_none=True, help="Button text underline.").tag(sync=True)
 
 
 @register

packages/base/src/widget_style.ts

@@ -124,5 +124,9 @@ export class StyleView extends WidgetView {
     }, this);
   }
 
+  get_traitNames(): string[] {
+    return this._traitNames;
+  }
+
   private _traitNames: string[];
 }

packages/controls/src/widget_button.ts

@@ -1,23 +1,49 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { DOMWidgetView, StyleModel } from '@jupyter-widgets/base';
+import { DOMWidgetView, StyleModel, StyleView } from '@jupyter-widgets/base';
 
 import { CoreDOMWidgetModel } from './widget_core';
 
 import { JUPYTER_CONTROLS_VERSION } from './version';
 
+export function bold_to_weight(value: boolean): string | null {
+  if (value == true) return 'bold';
+  if (value == false) return 'normal';
+  return null;
+}
+
+export function italic_to_style(value: boolean): string | null {
+  if (value == true) return 'italic';
+  if (value == false) return 'normal';
+  return null;
+}
+
+export function underline_to_decoration(value: boolean): string | null {
+  if (value == true) return 'underline';
+  if (value == false) return 'none';
+  return null;
+}
+
 export class ButtonStyleModel extends StyleModel {
   defaults(): Backbone.ObjectHash {
     return {
       ...super.defaults(),
       _model_name: 'ButtonStyleModel',
       _model_module: '@jupyter-widgets/controls',
-      _model_module_version: JUPYTER_CONTROLS_VERSION
+      _model_module_version: JUPYTER_CONTROLS_VERSION,
+      _view_name: 'ButtonStyleView',
+      _view_module: '@jupyter-widgets/controls',
+      _view_module_version: JUPYTER_CONTROLS_VERSION
     };
   }
 
   public static styleProperties = {
+    bold: {
+      selector: '',
+      attribute: 'font-weight',
+      default: ''
+    },
     button_color: {
       selector: '',
       attribute: 'background-color',
@@ -33,7 +59,7 @@ export class ButtonStyleModel extends StyleModel {
       attribute: 'font-size',
       default: ''
     },
-    font_style: {
+    italic: {
       selector: '',
       attribute: 'font-style',
       default: ''
@@ -43,24 +69,54 @@ export class ButtonStyleModel extends StyleModel {
       attribute: 'font-variant',
       default: ''
     },
-    font_weight: {
-      selector: '',
-      attribute: 'font-weight',
-      default: ''
-    },
     text_color: {
       selector: '',
       attribute: 'color',
       default: ''
     },
-    text_decoration: {
+    underline: {
       selector: '',
       attribute: 'text-decoration',
       default: ''
     }
   };
 }
 
+export class ButtonStyleView extends StyleView {
+  /**
+   * Handles when a trait value changes
+   */
+  handleChange(trait: string, value: any): void {
+    // should be synchronous so that we can measure later.
+    const parent = this.options.parent as DOMWidgetView;
+    if (parent) {
+      const ModelType = this.model.constructor as typeof StyleModel;
+      const styleProperties = ModelType.styleProperties;
+      const attribute = styleProperties[trait].attribute;
+      const selector = styleProperties[trait].selector;
+      const elements = selector
+        ? parent.el.querySelectorAll<HTMLElement>(selector)
+        : [parent.el];
+      let transform = undefined;
+      if (trait == 'bold') transform = bold_to_weight;
+      if (trait == 'italic') transform = italic_to_style;
+      if (trait == 'underline') transform = underline_to_decoration;
+      if (transform !== undefined) value = transform(value);
+      if (value === null) {
+        for (let i = 0; i !== elements.length; ++i) {
+          elements[i].style.removeProperty(attribute);
+        }
+      } else {
+        for (let i = 0; i !== elements.length; ++i) {
+          elements[i].style.setProperty(attribute, value);
+        }
+      }
+    } else {
+      console.warn('Style not applied because a parent view does not exist');
+    }
+  }
+}
+
 export class ButtonModel extends CoreDOMWidgetModel {
   defaults(): Backbone.ObjectHash {
     return {