Merge pull request #108 from ckeditor/t/ckeditor5-ui/403

Internal: Aligned the `HeadingUI` to the new architecture of the `addListToDropdown` helper (see ckeditor/ckeditor5-ui#402).

Also:
* Updated  the `HeadingUI` to consider `ListItemView` just a container for buttons.

src/headingui.js

@@ -36,39 +36,43 @@ export default class HeadingUI extends Plugin {
 		// Register UI component.
 		editor.ui.componentFactory.add( 'heading', locale => {
 			const titles = {};
-			const dropdownItems = new Collection();
+			const itemDefinitions = new Collection();
 
 			const headingCommand = editor.commands.get( 'heading' );
 			const paragraphCommand = editor.commands.get( 'paragraph' );
 
 			const commands = [ headingCommand ];
 
 			for ( const option of options ) {
-				const itemModel = new Model( {
-					label: option.title,
-					class: option.class
-				} );
+				const def = {
+					type: 'button',
+					model: new Model( {
+						label: option.title,
+						class: option.class,
+						withText: true
+					} )
+				};
 
 				if ( option.model === 'paragraph' ) {
-					itemModel.bind( 'isActive' ).to( paragraphCommand, 'value' );
-					itemModel.set( 'commandName', 'paragraph' );
+					def.model.bind( 'isOn' ).to( paragraphCommand, 'value' );
+					def.model.set( 'commandName', 'paragraph' );
 					commands.push( paragraphCommand );
 				} else {
-					itemModel.bind( 'isActive' ).to( headingCommand, 'value', value => value === option.model );
-					itemModel.set( {
+					def.model.bind( 'isOn' ).to( headingCommand, 'value', value => value === option.model );
+					def.model.set( {
 						commandName: 'heading',
 						commandValue: option.model
 					} );
 				}
 
 				// Add the option to the collection.
-				dropdownItems.add( itemModel );
+				itemDefinitions.add( def );
 
 				titles[ option.model ] = option.title;
 			}
 
 			const dropdownView = createDropdown( locale );
-			addListToDropdown( dropdownView, dropdownItems );
+			addListToDropdown( dropdownView, itemDefinitions );
 
 			dropdownView.buttonView.set( {
 				isOn: false,

tests/headingui.js

@@ -195,7 +195,7 @@ describe( 'HeadingUI', () => {
 			it( 'works for the listView#items in the panel', () => {
 				const listView = dropdown.listView;
 
-				expect( listView.items.map( item => item.label ) ).to.deep.equal( [
+				expect( listView.items.map( item => item.children.first.label ) ).to.deep.equal( [
 					'Akapit',
 					'Nagłówek 1',
 					'Nagłówek 2'
@@ -209,7 +209,7 @@ describe( 'HeadingUI', () => {
 				] ).then( () => {
 					const listView = dropdown.listView;
 
-					expect( listView.items.map( item => item.label ) ).to.deep.equal( [
+					expect( listView.items.map( item => item.children.first.label ) ).to.deep.equal( [
 						'Custom paragraph title',
 						'Custom heading1 title',
 					] );
@@ -222,7 +222,7 @@ describe( 'HeadingUI', () => {
 				] ).then( () => {
 					const listView = dropdown.listView;
 
-					expect( listView.items.map( item => item.label ) ).to.deep.equal( [
+					expect( listView.items.map( item => item.children.first.label ) ).to.deep.equal( [
 						'Akapit'
 					] );
 				} );
@@ -258,7 +258,7 @@ describe( 'HeadingUI', () => {
 			it( 'is set for the listView#items in the panel', () => {
 				const listView = dropdown.listView;
 
-				expect( listView.items.map( item => item.class ) ).to.deep.equal( [
+				expect( listView.items.map( item => item.children.first.class ) ).to.deep.equal( [
 					'ck-heading_paragraph',
 					'ck-heading_heading1',
 					'ck-heading_heading2',
@@ -271,7 +271,7 @@ describe( 'HeadingUI', () => {
 
 				setData( editor.model, '<heading2>f{}oo</heading2>' );
 
-				expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [
+				expect( listView.items.map( item => item.children.first.isOn ) ).to.deep.equal( [
 					false,
 					false,
 					true,