Merge pull request #539 from ckeditor/i/6112

Feature: Implemented the `Toolbar#isCompact` property to turn regular toolbars into compact ones (with less spacing) (see ckeditor/ckeditor5#6112).

Author: jodator

src/toolbar/toolbarview.js

@@ -94,6 +94,15 @@ export default class ToolbarView extends View {
 		 */
 		this.set( 'class' );
 
+		/**
+		 * When set true, makes the toolbar look compact with {@link #element}.
+		 *
+		 * @observable
+		 * @default false
+		 * @member {String} #isCompact
+		 */
+		this.set( 'isCompact', false );
+
 		/**
 		 * A (child) view containing {@link #items toolbar items}.
 		 *
@@ -168,7 +177,8 @@ export default class ToolbarView extends View {
 				class: [
 					'ck',
 					'ck-toolbar',
-					bind.to( 'class' )
+					bind.to( 'class' ),
+					bind.if( 'isCompact', 'ck-toolbar_compact' ),
 				],
 				role: 'toolbar',
 				'aria-label': bind.to( 'ariaLabel' )

tests/toolbar/toolbarview.js

@@ -54,6 +54,10 @@ describe( 'ToolbarView', () => {
 			expect( view.locale ).to.equal( locale );
 		} );
 
+		it( 'should set view#isCompact', () => {
+			expect( view.isCompact ).to.be.false;
+		} );
+
 		describe( '#options', () => {
 			it( 'should be an empty object if none were passed', () => {
 				expect( view.options ).to.deep.equal( {} );
@@ -166,6 +170,14 @@ describe( 'ToolbarView', () => {
 				expect( view.element.classList.contains( 'foo' ) ).to.be.false;
 				expect( view.element.classList.contains( 'bar' ) ).to.be.false;
 			} );
+
+			it( 'reacts on view#isCompact', () => {
+				view.isCompact = false;
+				expect( view.element.classList.contains( 'ck-toolbar_compact' ) ).to.be.false;
+
+				view.isCompact = true;
+				expect( view.element.classList.contains( 'ck-toolbar_compact' ) ).to.be.true;
+			} );
 		} );
 	} );