Review dropdown creation process in AlignmentUI.

src/alignmentui.js

@@ -85,37 +85,38 @@ export default class AlignmentUI extends Plugin {
 		componentFactory.add( 'alignmentDropdown', locale => {
 			const dropdownView = createDropdown( locale );
 
+			// Get alignment buttons.
+			const buttons = options.map( option => componentFactory.create( commandNameFromOptionName( option ) ) );
+
+			addToolbarToDropdown( dropdownView, buttons );
+
+			// Configure dropdown properties an behavior.
 			dropdownView.set( {
 				label: t( 'Text alignment' ),
-				defaultIcon: alignLeftIcon,
-				withText: false,
 				isVertical: true,
 				tooltip: true
 			} );
 
-			const buttons = options.map( option => {
-				return componentFactory.create( commandNameFromOptionName( option ) );
-			} );
-
-			// TODO: binding with callback as in headings
-			// Add specialised behavior
+			// The default icon is align left as we do not support RTL yet (see #3).
+			const defaultIcon = alignLeftIcon;
 
-			// Change icon upon selection
+			// Change icon to reflect current selection's alignment.
 			dropdownView.bind( 'icon' ).toMany( buttons, 'isOn', ( ...areActive ) => {
+				// Get the index of an active button.
 				const index = areActive.findIndex( value => value );
 
-				// If none of the commands is active, display either defaultIcon or first button icon.
-				if ( index < 0 && dropdownView.defaultIcon ) {
-					return dropdownView.defaultIcon;
+				// If none of the commands is active, display either defaultIcon or the first button's icon.
+				if ( index < 0 ) {
+					return defaultIcon;
 				}
 
-				return buttons[ index < 0 ? 0 : index ].icon;
+				// Return active button's icon.
+				return buttons[ index ].icon;
 			} );
 
+			// Enable button if any of the buttons is enabled.
 			dropdownView.bind( 'isEnabled' ).toMany( buttons, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled ) );
 
-			addToolbarToDropdown( dropdownView, buttons );
-
 			return dropdownView;
 		} );
 	}
@@ -154,13 +155,3 @@ export default class AlignmentUI extends Plugin {
 		} );
 	}
 }
-
-/**
- * TODO: move somewhere
- * Defines default icon which is used when no button is active.
- *
- * Also see {@link #icon}.
- *
- * @observable
- * @member {String} #defaultIcon
- */

tests/alignmentui.js

@@ -209,13 +209,12 @@ describe( 'Alignment UI', () => {
 			dropdown = editor.ui.componentFactory.create( 'alignmentDropdown' );
 		} );
 
-		it( 'button has the base properties', () => {
+		it( '#buttonView has the base properties', () => {
 			const button = dropdown.buttonView;
 
 			expect( button ).to.have.property( 'label', 'Text alignment' );
 			expect( button ).to.have.property( 'icon' );
 			expect( button ).to.have.property( 'tooltip', true );
-			expect( button ).to.have.property( 'withText', false );
 		} );
 
 		it( '#toolbarView has the base properties', () => {