Add GridBox widget

Author: Madhu94

ipywidgets/widgets/__init__.py

@@ -10,7 +10,7 @@
 from .widget_core import CoreWidget
 from .widget_bool import Checkbox, ToggleButton, Valid
 from .widget_button import Button, ButtonStyle
-from .widget_box import Box, HBox, VBox
+from .widget_box import Box, HBox, VBox, GridBox
 from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider, FloatLogSlider
 from .widget_image import Image
 from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider, Play, SliderStyle
@@ -23,5 +23,5 @@
 from .widget_controller import Controller
 from .interaction import interact, interactive, fixed, interact_manual, interactive_output
 from .widget_link import jslink, jsdlink
-from .widget_layout import Layout
+from .widget_layout import Layout, GridLayout, GridItemLayout
 from .widget_style import Style

ipywidgets/widgets/domwidget.py

@@ -6,7 +6,7 @@
 from traitlets import Unicode
 from .widget import Widget, widget_serialization
 from .trait_types import InstanceDict, TypedTuple
-from .widget_layout import Layout
+from .widget_layout import Layout, GridLayout, GridItemLayout
 from .widget_style import Style
 
 
@@ -16,6 +16,8 @@ class DOMWidget(Widget):
     _model_name = Unicode('DOMWidgetModel').tag(sync=True)
     _dom_classes = TypedTuple(trait=Unicode(), help="CSS classes applied to widget DOM element").tag(sync=True)
     layout = InstanceDict(Layout).tag(sync=True, **widget_serialization)
+    grid_layout = InstanceDict(GridLayout).tag(sync=True, **widget_serialization)
+    grid_item_layout = InstanceDict(GridItemLayout).tag(sync=True, **widget_serialization)
 
     def add_class(self, className):
         """

ipywidgets/widgets/widget_box.py

@@ -107,3 +107,9 @@ class HBox(Box):
     """
     _model_name = Unicode('HBoxModel').tag(sync=True)
     _view_name = Unicode('HBoxView').tag(sync=True)
+
+@register
+class GridBox(Box):
+    _model_name = Unicode('GridBoxModel').tag(sync=True)
+    _view_name = Unicode('GridBoxView').tag(sync=True)
+ 

ipywidgets/widgets/widget_layout.py

@@ -71,3 +71,34 @@ def validate(self, obj, value):
             return super(LayoutTraitType, self).validate(obj, self.klass(**value))
         else:
             return super(LayoutTraitType, self).validate(obj, value)
+
+@register
+class GridLayout(Widget):
+
+    _view_name = Unicode('GridLayoutView').tag(sync=True)
+    _view_module = Unicode('@jupyter-widgets/base').tag(sync=True)
+    _view_module_version = Unicode(__jupyter_widgets_base_version__).tag(sync=True)
+    _model_name = Unicode('GridLayoutModel').tag(sync=True)
+
+    # Keys
+    auto_columns = Unicode(None, allow_none=True, help="The grid-auto-columns CSS attribute.").tag(sync=True)
+    auto_flow = CaselessStrEnum(['column','row','row dense','column dense']+ CSS_PROPERTIES, allow_none=True, help="The grid-auto-flow CSS attribute.").tag(sync=True)
+    auto_rows = Unicode(None, allow_none=True, help="The grid-auto-rows CSS attribute.").tag(sync=True)
+    row_gap = Unicode(None, allow_none=True, help="The grid-row-gap CSS attribute.").tag(sync=True)
+    column_gap = Unicode(None, allow_none=True, help="The grid-column-gap CSS attribute.").tag(sync=True)
+    template_areas = Unicode(None, allow_none=True, help="The grid-template-areas CSS attribute.").tag(sync=True)
+    template_columns = Unicode(None, allow_none=True, help="The grid-template-columns CSS attribute.").tag(sync=True)
+    template_rows = Unicode(None, allow_none=True, help="The grid-template-rows CSS attribute.").tag(sync=True)
+
+
+@register
+class GridItemLayout(Widget):
+    _view_name = Unicode('GridItemLayoutView').tag(sync=True)
+    _view_module = Unicode('@jupyter-widgets/base').tag(sync=True)
+    _view_module_version = Unicode(__jupyter_widgets_base_version__).tag(sync=True)
+    _model_name = Unicode('GridItemLayoutModel').tag(sync=True)
+
+    row_start = Unicode(None, allow_none=True, help="The row-start CSS attribute.").tag(sync=True)
+    column_start = Unicode(None, allow_none=True, help="The grid-column-start CSS attribute.").tag(sync=True)
+    row_end = Unicode(None, allow_none=True, help="The grid-row-end CSS attribute.").tag(sync=True)
+    column_end = Unicode(None, allow_none=True, help="The grid-column-end CSS attribute.").tag(sync=True)

packages/base/src/widget.ts

@@ -566,6 +566,8 @@ class DOMWidgetModel extends WidgetModel {
     static serializers: ISerializers = {
         ...WidgetModel.serializers,
         layout: {deserialize: unpack_models},
+        grid_layout: {deserialize: unpack_models},
+        grid_item_layout: {deserialize: unpack_models},
         style: {deserialize: unpack_models},
     };
 
@@ -749,7 +751,17 @@ class DOMWidgetView extends WidgetView {
 
         this.layoutPromise = Promise.resolve();
         this.listenTo(this.model, 'change:layout', (model, value) => {
-            this.setLayout(value, model.previous('layout'));
+            this.setLayout('layoutPromise', value, model.previous('layout'));
+        });
+
+        this.gridLayoutPromise = Promise.resolve();
+        this.listenTo(this.model, 'change:grid_layout', (model, value) => {
+            this.setLayout('gridLayoutPromise', value, model.previous('grid_layout'));
+        });
+
+        this.gridItemLayoutPromise = Promise.resolve();
+        this.listenTo(this.model, 'change:grid_item_layout', (model, value) => {
+            this.setLayout('gridItemLayoutPromise', value, model.previous('grid_item_layout'));
         });
 
         this.stylePromise = Promise.resolve();
@@ -759,7 +771,9 @@ class DOMWidgetView extends WidgetView {
 
         this.displayed.then(() => {
             this.update_classes([], this.model.get('_dom_classes'));
-            this.setLayout(this.model.get('layout'));
+            this.setLayout('layoutPromise', this.model.get('layout'));
+            this.setLayout('gridLayoutPromise', this.model.get('grid_layout'));
+            this.setLayout('gridItemLayoutPromise', this.model.get('grid_item_layout'));
             this.setStyle(this.model.get('style'));
         });
 
@@ -769,9 +783,9 @@ class DOMWidgetView extends WidgetView {
         });
     }
 
-    setLayout(layout, oldLayout?) {
+    setLayout(layoutAttrName, layout, oldLayout?) {
         if (layout) {
-            this.layoutPromise = this.layoutPromise.then((oldLayoutView) => {
+            this[layoutAttrName] = this[layoutAttrName].then((oldLayoutView) => {
                 if (oldLayoutView) {
                     oldLayoutView.unlayout();
                     this.stopListening(oldLayoutView.model);
@@ -918,5 +932,7 @@ class DOMWidgetView extends WidgetView {
     '$el': any;
     pWidget: Widget;
     layoutPromise: Promise<any>;
+    gridLayoutPromise: Promise<any>;
+    gridItemLayoutPromise: Promise<any>;
     stylePromise: Promise<any>;
 }

packages/base/src/widget_layout.ts

@@ -41,6 +41,25 @@ let css_properties = {
     width: null
 };
 
+let grid_css_properties = {
+    auto_columns: null,
+    auto_flow: null,
+    auto_rows: null,
+    row_gap: null,
+    column_gap: null,
+    template_areas: null,
+    template_columns: null,
+    template_rows: null
+};
+
+let grid_item_css_properties = {
+    row_start: null,
+    column_start: null,
+    row_end: null,
+    column_end: null
+}
+
+
 export
 class LayoutModel extends WidgetModel {
     defaults() {
@@ -53,14 +72,19 @@ class LayoutModel extends WidgetModel {
 
 export
 class LayoutView extends WidgetView {
+  constructor(options?: Backbone.ViewOptions<LayoutModel> & {options?: any}) {
+      super(options);
+  }
     /**
      * Public constructor
      */
     initialize(parameters) {
         this._traitNames = [];
         super.initialize(parameters);
+        // Allowing override of default css_properties
+        const {options: {css_props = css_properties}} = parameters;
         // Register the traits that live on the Python side
-        for (let key of Object.keys(css_properties)) {
+        for (let key of Object.keys(css_props)) {
             this.registerTrait(key);
         }
     }
@@ -87,7 +111,7 @@ class LayoutView extends WidgetView {
      * @return css property name
      */
     css_name(trait: string): string {
-        return trait.replace('_', '-');
+        return trait.replace(new RegExp('_', 'g'), '-');
     }
 
     /**
@@ -121,5 +145,61 @@ class LayoutView extends WidgetView {
         }, this);
     }
 
-    private _traitNames: string[];
+    protected _traitNames: string[];
+}
+
+export
+class GridLayoutModel extends WidgetModel {
+    defaults() {
+        return assign(super.defaults(), {
+        _model_name: 'GridLayoutModel',
+        _view_name: 'GridLayoutView'
+        }, grid_css_properties);
+    }
+}
+
+export
+class GridLayoutView extends LayoutView {
+    /**
+     * Public constructor
+     */
+     initialize(parameters) {
+         const options = {...parameters.options, css_props: grid_css_properties};
+         super.initialize({...parameters, options});
+     }
+
+     /**
+      * Get the the name of the css property from the trait name
+      * @param  model attribute name
+      * @return css property name
+      */
+     css_name(trait: string): string {
+         return `grid-${trait.replace(new RegExp('_', 'g'), '-')}`;
+     }
+}
+
+
+export
+class GridItemLayoutModel extends WidgetModel {
+    defaults() {
+        return assign(super.defaults(), {
+        _model_name: 'GridItemLayoutModel',
+        _view_name: 'GridItemLayoutView'
+      }, grid_item_css_properties);
+    }
+}
+
+export
+class GridItemLayoutView extends LayoutView {
+  /**
+   * Public constructor
+   */
+   initialize(parameters) {
+     const options = {...parameters.options, css_props: grid_item_css_properties};
+     super.initialize({...parameters, options});
+   }
+
+   css_name(trait: string): string {
+       return `grid-${trait.replace(new RegExp('_', 'g'), '-')}`;
+   }
 }

packages/controls/css/widgets-base.css

@@ -95,6 +95,13 @@
     overflow: auto;
 }
 
+.widget-gridbox {
+    box-sizing: border-box;
+    display: grid;
+    margin: 0;
+    overflow: auto;
+}
+
 .widget-hbox {
     flex-direction: row;
 }

packages/controls/src/widget_box.ts

@@ -214,3 +214,26 @@ class VBoxView extends BoxView {
         this.pWidget.addClass('widget-vbox');
     }
 }
+
+export
+class GridBoxView extends BoxView {
+    /**
+     * Public constructor
+     */
+    initialize(parameters) {
+        super.initialize(parameters);
+        this.pWidget.addClass('widget-gridbox');
+        // display needn't be set to flex and grid 
+        this.pWidget.removeClass('widget-box');
+    }
+}
+
+export
+class GridBoxModel extends BoxModel {
+    defaults() {
+        return _.extend(super.defaults(), {
+            _view_name: 'GridBoxView',
+            _model_name: 'GridBoxModel',
+        });
+    }
+}