Merge pull request #44 from ckeditor/t/ckeditor5/416d

Feature: Enabled automatic items grouping in the main editor toolbar when there is not enough space to display them in a single row (see ckeditor/ckeditor5#416).

src/decouplededitoruiview.js

@@ -10,7 +10,6 @@
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
  * The decoupled editor UI view. It is a virtual view providing an inline
@@ -41,7 +40,9 @@ export default class DecoupledEditorUIView extends EditorUIView {
 		 * @readonly
 		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
-		this.toolbar = new ToolbarView( locale );
+		this.toolbar = new ToolbarView( locale, {
+			shouldGroupWhenFull: true
+		} );
 
 		/**
 		 * The editable of the decoupled editor UI.
@@ -55,7 +56,7 @@ export default class DecoupledEditorUIView extends EditorUIView {
 		// Because of the above, make sure the toolbar supports rounded corners.
 		// Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
 		// and some toolbar item styles depend on this attribute.
-		Template.extend( this.toolbar.template, {
+		this.toolbar.extendTemplate( {
 			attributes: {
 				class: [
 					'ck-reset_all',

tests/decouplededitorui.js

@@ -136,38 +136,40 @@ describe( 'DecoupledEditorUI', () => {
 			} );
 		} );
 
-		describe( 'view.toolbar#items', () => {
-			it( 'are filled with the config.toolbar (specified as an Array)', () => {
-				return VirtualDecoupledTestEditor
-					.create( '', {
-						toolbar: [ 'foo', 'bar' ]
-					} )
-					.then( editor => {
-						const items = editor.ui.view.toolbar.items;
-
-						expect( items.get( 0 ).name ).to.equal( 'foo' );
-						expect( items.get( 1 ).name ).to.equal( 'bar' );
-
-						return editor.destroy();
-					} );
-			} );
+		describe( 'view.toolbar', () => {
+			describe( '#items', () => {
+				it( 'are filled with the config.toolbar (specified as an Array)', () => {
+					return VirtualDecoupledTestEditor
+						.create( '', {
+							toolbar: [ 'foo', 'bar' ]
+						} )
+						.then( editor => {
+							const items = editor.ui.view.toolbar.items;
+
+							expect( items.get( 0 ).name ).to.equal( 'foo' );
+							expect( items.get( 1 ).name ).to.equal( 'bar' );
+
+							return editor.destroy();
+						} );
+				} );
 
-			it( 'are filled with the config.toolbar (specified as an Object)', () => {
-				return VirtualDecoupledTestEditor
-					.create( '', {
-						toolbar: {
-							items: [ 'foo', 'bar' ],
-							viewportTopOffset: 100
-						}
-					} )
-					.then( editor => {
-						const items = editor.ui.view.toolbar.items;
+				it( 'are filled with the config.toolbar (specified as an Object)', () => {
+					return VirtualDecoupledTestEditor
+						.create( '', {
+							toolbar: {
+								items: [ 'foo', 'bar' ],
+								viewportTopOffset: 100
+							}
+						} )
+						.then( editor => {
+							const items = editor.ui.view.toolbar.items;
 
-						expect( items.get( 0 ).name ).to.equal( 'foo' );
-						expect( items.get( 1 ).name ).to.equal( 'bar' );
+							expect( items.get( 0 ).name ).to.equal( 'foo' );
+							expect( items.get( 1 ).name ).to.equal( 'bar' );
 
-						return editor.destroy();
-					} );
+							return editor.destroy();
+						} );
+				} );
 			} );
 		} );
 

tests/decouplededitoruiview.js

@@ -45,6 +45,10 @@ describe( 'DecoupledEditorUIView', () => {
 			it( 'is not rendered', () => {
 				expect( view.toolbar.isRendered ).to.be.false;
 			} );
+
+			it( 'has automatic items grouping enabled', () => {
+				expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+			} );
 		} );
 
 		describe( '#editable', () => {