Merge pull request #1376 from jasongrout/label

Make label width configurable

ipywidgets/widgets/domwidget.py

@@ -3,10 +3,11 @@
 
 """Contains the DOMWidget class"""
 
-from traitlets import Unicode, Bool, Tuple, default
+from traitlets import Unicode, Tuple
 from .widget import Widget, widget_serialization
-from .trait_types import Color, InstanceDict
+from .trait_types import InstanceDict
 from .widget_layout import Layout
+from .widget_style import Style
 
 
 class DOMWidget(Widget):
@@ -37,8 +38,17 @@ def remove_class(self, className):
         return self
 
 
-class LabeledWidget(DOMWidget):
-    """Widget that has a description label to the side."""
+class DescriptionStyle(Style, Widget):
+    """Description style widget."""
+    _model_name = Unicode('DescriptionStyleModel').tag(sync=True)
+    description_width = Unicode().tag(sync=True)
+
 
-    _model_name = Unicode('LabeledWidgetModel').tag(sync=True)
+class DescriptionWidget(DOMWidget):
+    """Widget that has a description label to the side."""
+    _model_name = Unicode('DescriptionModel').tag(sync=True)
     description = Unicode('', help="Description of the control.").tag(sync=True)
+    style = InstanceDict(DescriptionStyle).tag(sync=True, **widget_serialization)
+
+# For backwards compatibility to ipywidgets 6.0
+LabeledWidget = DescriptionWidget

ipywidgets/widgets/widget_int.py

@@ -6,11 +6,10 @@
 Represents an unbounded int using a widget.
 """
 
-from .domwidget import LabeledWidget
+from .domwidget import LabeledWidget, DescriptionStyle
 from .valuewidget import ValueWidget
 from .widget import register, widget_serialization
 from .widget_core import CoreWidget
-from .widget_style import Style
 from traitlets import Instance
 from .trait_types import Color, InstanceDict
 from traitlets import (
@@ -143,7 +142,7 @@ class BoundedIntText(_BoundedInt):
 
 
 @register
-class SliderStyle(Style, CoreWidget):
+class SliderStyle(DescriptionStyle, CoreWidget):
     """Button style widget."""
     _model_name = Unicode('SliderStyleModel').tag(sync=True)
     handle_color = Color(None, allow_none=True).tag(sync=True)
@@ -167,7 +166,7 @@ class IntSlider(_BoundedInt):
 
 
 @register
-class ProgressStyle(Style, CoreWidget):
+class ProgressStyle(DescriptionStyle, CoreWidget):
     """Button style widget."""
     _model_name = Unicode('ProgressStyleModel').tag(sync=True)
     bar_color = Color(None, allow_none=True).tag(sync=True)

jupyter-js-widgets/.gitignore

@@ -2,3 +2,4 @@ css/widgets.built.css
 lib-embed/
 docs-embed/
 dist/
+test/coverage/

jupyter-js-widgets/css/widgets-base.css

@@ -21,8 +21,7 @@
     --jp-widgets-inline-width-short: calc(var(--jp-widgets-inline-width) / 2 - var(--jp-widgets-margin));
     --jp-widgets-inline-width-tiny: calc(var(--jp-widgets-inline-width-short) / 2 - var(--jp-widgets-margin));
     --jp-widgets-inline-margin: 4px; /* margin between inline elements */
-    --jp-widgets-inline-label-min-width: 80px;
-    --jp-widgets-inline-label-max-width: calc(var(--jp-widgets-inline-width) - var(--jp-widgets-inline-margin) - var(--jp-widgets-inline-width-short));
+    --jp-widgets-inline-label-width: 80px;
     --jp-widgets-border-width: var(--jp-border-width);
     --jp-widgets-vertical-height: 200px;
     --jp-widgets-horizontal-tab-height: 24px;
@@ -262,6 +261,11 @@
 
 /* Widget Label Styling */
 
+/* Override Bootstrap label css */
+.jupyter-widgets label.widget-label {
+    margin-bottom: initial;
+}
+
 .widget-label-basic {
     /* Basic Label */
     color: var(--jp-widgets-label-color);
@@ -288,8 +292,7 @@
     color: var(--jp-widgets-label-color);
     text-align: right;
     margin-right: calc( var(--jp-widgets-inline-margin) * 2 );
-    max-width: var(--jp-widgets-inline-label-max-width);
-    min-width: var(--jp-widgets-inline-label-min-width);
+    width: var(--jp-widgets-inline-label-width);
     flex-shrink: 0;
 }
 

jupyter-js-widgets/src/index.ts

@@ -20,6 +20,7 @@ export * from "./widget_controller";
 export * from "./widget_selection";
 export * from "./widget_selectioncontainer";
 export * from "./widget_string";
+export * from "./widget_description";
 
 export
 const version = (require('../package.json') as any).version;

jupyter-js-widgets/src/widget.ts

@@ -953,41 +953,3 @@ class DOMWidgetView extends WidgetView {
     layoutPromise: Promise<any>;
     stylePromise: Promise<any>;
 }
-
-
-export
-class LabeledDOMWidgetModel extends DOMWidgetModel {
-    defaults() {
-        return _.extend(super.defaults(), {
-            description: '',
-        });
-    }
-}
-
-export
-class LabeledDOMWidgetView extends DOMWidgetView {
-
-    render() {
-        this.label = document.createElement('div');
-        this.el.appendChild(this.label);
-        this.label.className = 'widget-label';
-        this.label.style.display = 'none';
-
-        this.listenTo(this.model, 'change:description', this.updateDescription);
-        this.updateDescription();
-    }
-
-    updateDescription() {
-        let description = this.model.get('description');
-        if (description.length === 0) {
-            this.label.style.display = 'none';
-        } else {
-            this.label.innerHTML = description;
-            this.typeset(this.label);
-            this.label.style.display = '';
-        }
-        this.label.title = description;
-    }
-
-    label: HTMLDivElement;
-}

jupyter-js-widgets/src/widget_bool.ts

@@ -2,18 +2,22 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-    CoreLabeledDOMWidgetModel
+    CoreDescriptionModel
 } from './widget_core';
 
 import {
-    DOMWidgetView, LabeledDOMWidgetView
+    DescriptionView
+} from './widget_description';
+
+import {
+    DOMWidgetView
 } from './widget';
 
 import * as _ from 'underscore';
 
 
 export
-class BoolModel extends CoreLabeledDOMWidgetModel {
+class BoolModel extends CoreDescriptionModel {
     defaults() {
         return _.extend(super.defaults(), {
             value: false,
@@ -24,7 +28,7 @@ class BoolModel extends CoreLabeledDOMWidgetModel {
 }
 
 export
-class CheckboxModel extends CoreLabeledDOMWidgetModel {
+class CheckboxModel extends CoreDescriptionModel {
     defaults() {
         return _.extend(super.defaults(), {
             indent: true,
@@ -35,7 +39,7 @@ class CheckboxModel extends CoreLabeledDOMWidgetModel {
 }
 
 export
-class CheckboxView extends LabeledDOMWidgetView {
+class CheckboxView extends DescriptionView {
     /**
      * Called when view is rendered.
      */
@@ -261,7 +265,7 @@ class ValidModel extends BoolModel {
 }
 
 export
-class ValidView extends LabeledDOMWidgetView {
+class ValidView extends DescriptionView {
     /**
      * Called when view is rendered.
      */

jupyter-js-widgets/src/widget_color.ts

@@ -2,18 +2,22 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-    LabeledDOMWidgetView
-} from './widget';
+    CoreDescriptionModel
+} from './widget_core';
 
 import {
-    CoreLabeledDOMWidgetModel
-} from './widget_core';
+    DescriptionView
+} from './widget_description';
+
+import {
+    uuid
+} from './utils';
 
 import * as _ from 'underscore';
 
 
 export
-class ColorPickerModel extends CoreLabeledDOMWidgetModel {
+class ColorPickerModel extends CoreDescriptionModel {
     defaults() {
         return _.extend(super.defaults(), {
             value: 'black',
@@ -25,7 +29,7 @@ class ColorPickerModel extends CoreLabeledDOMWidgetModel {
 }
 
 export
-class ColorPickerView extends LabeledDOMWidgetView {
+class ColorPickerView extends DescriptionView {
     render() {
         super.render();
         this.el.classList.add('jupyter-widgets');
@@ -38,6 +42,7 @@ class ColorPickerView extends LabeledDOMWidgetView {
 
         this._textbox = document.createElement('input');
         this._textbox.setAttribute('type', 'text');
+        this._textbox.id = this.label.htmlFor = uuid();
 
         this._color_container.appendChild(this._textbox);
         this._textbox.value = this.model.get('value');

jupyter-js-widgets/src/widget_core.ts

@@ -5,9 +5,13 @@
 // that are not to be used directly by third-party widget authors.
 
 import {
-    DOMWidgetModel, WidgetModel, LabeledDOMWidgetModel
+    DOMWidgetModel, WidgetModel
 } from './widget';
 
+import {
+    DescriptionModel
+} from './widget_description';
+
 import * as _ from 'underscore';
 
 export
@@ -29,10 +33,10 @@ class CoreDOMWidgetModel extends DOMWidgetModel {
 }
 
 export
-class CoreLabeledDOMWidgetModel extends LabeledDOMWidgetModel {
+class CoreDescriptionModel extends DescriptionModel {
     defaults() {
         return _.extend(super.defaults(), {
-            _model_name: 'CoreLabeledDOMWidgetModel',
+            _model_name: 'CoreDescriptionModel',
         });
     }
 }

jupyter-js-widgets/src/widget_date.ts

@@ -2,13 +2,17 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-    LabeledDOMWidgetView
-} from './widget';
+    DescriptionView
+} from './widget_description';
 
 import {
-    CoreLabeledDOMWidgetModel
+    CoreDescriptionModel
 } from './widget_core';
 
+import {
+    uuid
+} from './utils';
+
 import {
     ManagerBase
 } from './manager-base'
@@ -58,9 +62,9 @@ function deserialize_date(value: SerializedDate) {
 };
 
 export
-class DatePickerModel extends CoreLabeledDOMWidgetModel {
+class DatePickerModel extends CoreDescriptionModel {
     static serializers = {
-        ...CoreLabeledDOMWidgetModel.serializers,
+        ...CoreDescriptionModel.serializers,
         value: {
             serialize: serialize_date,
             deserialize: deserialize_date
@@ -77,7 +81,7 @@ class DatePickerModel extends CoreLabeledDOMWidgetModel {
 }
 
 export
-class DatePickerView extends LabeledDOMWidgetView {
+class DatePickerView extends DescriptionView {
     render() {
         super.render();
         this.el.classList.add('jupyter-widgets');
@@ -86,6 +90,8 @@ class DatePickerView extends LabeledDOMWidgetView {
 
         this._datepicker = document.createElement('input');
         this._datepicker.setAttribute('type', 'date');
+        this._datepicker.id = this.label.htmlFor = uuid();
+
         this.el.appendChild(this._datepicker);
 
         this.listenTo(this.model, 'change:value', this._update_value);