Merge pull request #99 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/classiceditoruiview.js

@@ -45,7 +45,9 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 		 * @readonly
 		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
-		this.toolbar = new ToolbarView( locale );
+		this.toolbar = new ToolbarView( locale, {
+			shouldGroupWhenFull: true
+		} );
 
 		/**
 		 * Editable UI view.

tests/classiceditorui.js

@@ -164,38 +164,40 @@ describe( 'ClassicEditorUI', () => {
 			} );
 		} );
 
-		describe( 'view.toolbar#items', () => {
-			it( 'are filled with the config.toolbar (specified as an Array)', () => {
-				return VirtualClassicTestEditor
-					.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 VirtualClassicTestEditor
+						.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 VirtualClassicTestEditor
-					.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 VirtualClassicTestEditor
+						.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/classiceditoruiview.js

@@ -58,6 +58,10 @@ describe( 'ClassicEditorUIView', () => {
 			it( 'is put into the "stickyPanel.content" collection', () => {
 				expect( view.stickyPanel.content.get( 0 ) ).to.equal( view.toolbar );
 			} );
+
+			it( 'has automatic items grouping enabled', () => {
+				expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+			} );
 		} );
 
 		describe( '#editable', () => {