Checkbox descriptions are clickable and on the right, improved spacing for radios and descriptions

Author: maxnoy

ipywidgets/widgets/widget_bool.py

@@ -38,9 +38,12 @@ class Checkbox(_Bool):
        value of the checkbox: True-checked, False-unchecked
     description : str
 	     description displayed next to the checkbox
+    indent : {True,False}
+        indent the control to align with other controls with a description
     """
     _view_name = Unicode('CheckboxView').tag(sync=True)
     _model_name = Unicode('CheckboxModel').tag(sync=True)
+    indent = Bool(True, help="Indent the control to align with other controls with a description").tag(sync=True)
 
 
 @register

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

@@ -30,6 +30,8 @@
     --jp-widgets-progress-thickness: 20px;
     --jp-widgets-container-padding: 15px;
     --jp-widgets-input-padding: 4px;
+    --jp-widgets-radio-item-height-adjustment: 8px;
+    --jp-widgets-radio-item-height: calc(var(--jp-widgets-inline-height) - var(--jp-widgets-radio-item-height-adjustment));
     --jp-widgets-slider-track-thickness: 4px;
     --jp-widgets-slider-border-width: var(--jp-widgets-border-width);
     --jp-widgets-slider-handle-size: 16px;
@@ -243,6 +245,16 @@
 
 /* Widget Label Styling */
 
+.widget-label-basic {
+    /* Basic Label */
+    color: var(--jp-widgets-label-color);
+    font-size: var(--jp-widgets-font-size);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: var(--jp-widgets-inline-height);
+}
+
 .widget-label {
     /* Label */
     color: var(--jp-widgets-label-color);
@@ -258,7 +270,7 @@
     /* Horizontal Widget Label */
     color: var(--jp-widgets-label-color);
     text-align: right;
-    margin-right: var(--jp-widgets-inline-margin);
+    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);
     flex-shrink: 0;
@@ -320,14 +332,13 @@
 /* Widget Checkbox Styling */
 
 .widget-checkbox {
-    width: var(--jp-widgets-inline-width-short);
+    width: var(--jp-widgets-inline-width);
     height: var(--jp-widgets-inline-height);
     line-height: var(--jp-widgets-inline-height);
-    justify-content: space-between;
 }
 
 .widget-checkbox input[type="checkbox"] {
-    margin: 0px var(--jp-widgets-inline-margin) 0px var(--jp-widgets-inline-margin);
+    margin: 0px calc( var(--jp-widgets-inline-margin) * 2 ) 0px 0px;
     line-height: var(--jp-widgets-inline-height);
     font-size: large;
     flex-grow: 1;
@@ -713,18 +724,19 @@
     align-items: stretch;
     box-sizing: border-box;
     flex-grow: 1;
+    margin-bottom: var(--jp-widgets-radio-item-height-adjustment);
 }
 
 .widget-radio-box label {
-    height: var(--jp-widgets-inline-height);
-    line-height: var(--jp-widgets-inline-height);
+    height: var(--jp-widgets-radio-item-height);
+    line-height: var(--jp-widgets-radio-item-height);
     font-size: var(--jp-widgets-font-size);
 }
 
 .widget-radio-box input {
-    height: var(--jp-widgets-inline-height);
-    line-height: var(--jp-widgets-inline-height);
-    margin: 0 var(--jp-widgets-input-padding) 0 var(--jp-widgets-input-padding);
+    height: var(--jp-widgets-radio-item-height);
+    line-height: var(--jp-widgets-radio-item-height);
+    margin: 0 calc( var(--jp-widgets-input-padding) * 2 ) 0 1px;
     float: left;
 }
 

jupyter-js-widgets/src/widget_bool.ts

@@ -27,6 +27,7 @@ export
 class CheckboxModel extends CoreLabeledDOMWidgetModel {
     defaults() {
         return _.extend(super.defaults(), {
+            indent: true,
             _view_name: 'CheckboxView',
             _model_name: 'CheckboxModel'
         });
@@ -44,11 +45,57 @@ class CheckboxView extends LabeledDOMWidgetView {
         this.el.classList.add('widget-inline-hbox');
         this.el.classList.add('widget-checkbox');
 
+        // adding a zero-width space to the label to help 
+        // the browser set the baseline correctly
+        this.label.innerHTML = '​'
+
+        // label containing the checkbox and description span
+        this.checkboxLabel = document.createElement('label');
+        this.checkboxLabel.classList.add('widget-label-basic');
+        this.el.appendChild(this.checkboxLabel);
+
+        // checkbox
         this.checkbox = document.createElement('input');
         this.checkbox.setAttribute('type', 'checkbox');
-        this.el.appendChild(this.checkbox);
+        this.checkboxLabel.appendChild(this.checkbox);
+
+        // span to the right of the checkbox that will render the description
+        this.descriptionSpan = document.createElement('span');
+        this.checkboxLabel.appendChild(this.descriptionSpan);
+
+        this.listenTo(this.model, 'change:indent', this.updateIndent);
 
         this.update(); // Set defaults.
+        this.updateDescription();
+        this.updateIndent();
+    }
+
+    /**
+     * Overriden from super class
+     * 
+     * Update the description span (rather than the label) since 
+     * we want the description to the right of the checkbox.
+     */
+    updateDescription() {
+        // can be called before the view is fully initialized
+        if (this.checkboxLabel == null)
+            return;
+
+        let description = this.model.get('description');
+        this.descriptionSpan.innerHTML = description;
+        this.typeset(this.descriptionSpan);
+        this.descriptionSpan.title = description;
+        this.checkbox.title = description;
+    }
+
+    /**
+     * Update the visibility of the label in the super class
+     * to provide the optional indent.
+     */
+    updateIndent() {
+        console.log('updating indent');
+        let indent = this.model.get('indent');
+        this.label.style.display = indent ? '' : 'none';
     }
 
     events(): {[e: string]: string} {
@@ -83,7 +130,10 @@ class CheckboxView extends LabeledDOMWidgetView {
         }
         return super.update();
     }
+
     checkbox: HTMLInputElement;
+    checkboxLabel: HTMLLabelElement;
+    descriptionSpan: HTMLSpanElement;
 }