Merge pull request #12 from ckeditor/t/ckeditor5-theme-lark/148

Internal: Removed the `.ck-highlight-button` and `.ck-highlight-dropdown` CSS classes. Used the `IconView#fillColor` API to control the colors of the icons (see ckeditor/ckeditor5-theme-lark#148).

src/highlightui.js

@@ -20,8 +20,6 @@ import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarsepa
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 import { createDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
-import './../theme/highlight.css';
-
 /**
  * The default Highlight UI plugin. It introduces:
  * * the `'highlightDropdown'` drop-down,
@@ -125,13 +123,7 @@ export default class HighlightUI extends Plugin {
 		function decorateHighlightButton( button ) {
 			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
 			button.bind( 'isOn' ).to( command, 'value', value => value === option.model );
-
-			button.extendTemplate( {
-				attributes: {
-					style: `color: ${ option.color }`,
-					class: 'ck-highlight-button'
-				}
-			} );
+			button.iconView.fillColor = option.color;
 		}
 	}
 
@@ -212,12 +204,6 @@ export default class HighlightUI extends Plugin {
 
 			splitButtonView.delegate( 'execute' ).to( dropdownView );
 
-			splitButtonView.extendTemplate( {
-				attributes: {
-					class: 'ck-highlight-button'
-				}
-			} );
-
 			// Create buttons array.
 			const buttons = options.map( option => {
 				// Get existing highlighter button.
@@ -237,14 +223,7 @@ export default class HighlightUI extends Plugin {
 			buttons.push( componentFactory.create( 'removeHighlight' ) );
 
 			addToolbarToDropdown( dropdownView, buttons );
-
-			bindIconStyleToColor( dropdownView );
-
-			dropdownView.extendTemplate( {
-				attributes: {
-					class: [ 'ck-highlight-dropdown' ]
-				}
-			} );
+			bindToolbarIconStyleToActiveColor( dropdownView );
 
 			// Execute current action from dropdown's split button action button.
 			splitButtonView.on( 'execute', () => {
@@ -268,19 +247,10 @@ export default class HighlightUI extends Plugin {
 }
 
 // Extends split button icon style to reflect last used button style.
-function bindIconStyleToColor( dropdownView ) {
+function bindToolbarIconStyleToActiveColor( dropdownView ) {
 	const actionView = dropdownView.buttonView.actionView;
 
-	const bind = actionView.bindTemplate;
-
-	// Color will propagate to iconView.
-	actionView.extendTemplate( {
-		attributes: {
-			style: bind.to( 'color', color => `color:${ color }` )
-		}
-	} );
-
-	actionView.bind( 'color' ).to( dropdownView.buttonView, 'color' );
+	actionView.iconView.bind( 'fillColor' ).to( dropdownView.buttonView, 'color' );
 }
 
 // Returns icon for given highlighter type.

tests/highlightui.js

@@ -82,16 +82,6 @@ describe( 'HighlightUI', () => {
 			expect( button ).to.have.property( 'icon', markerIcon );
 		} );
 
-		it( 'should add custom CSS class to dropdown and dropdown buttons', () => {
-			dropdown.render();
-
-			expect( dropdown.element.classList.contains( 'ck-highlight-dropdown' ) ).to.be.true;
-			expect( dropdown.buttonView.element.classList.contains( 'ck-highlight-button' ) ).to.be.true;
-			// There should be 5 highlight buttons, one separator and highlight remove button in toolbar.
-			expect( dropdown.toolbarView.items.map( button => button.element.classList.contains( 'ck-highlight-button' ) ) )
-				.to.deep.equal( [ true, true, true, true, true, true, false, false ] );
-		} );
-
 		it( 'should have proper icons in dropdown', () => {
 			const toolbar = dropdown.toolbarView;
 
@@ -102,6 +92,21 @@ describe( 'HighlightUI', () => {
 				.to.deep.equal( [ markerIcon, markerIcon, markerIcon, markerIcon, penIcon, penIcon, undefined, eraserIcon ] );
 		} );
 
+		it( 'should have proper colors in dropdown', () => {
+			const toolbar = dropdown.toolbarView;
+
+			expect( toolbar.items.map( item => item.iconView && item.iconView.fillColor ) ).to.deep.equal( [
+				'#fdfd77',
+				'#63f963',
+				'#fc7999',
+				'#72cdfd',
+				'#e91313',
+				'#118800',
+				undefined,
+				'',
+			] );
+		} );
+
 		it( 'should activate current option in dropdown', () => {
 			const toolbar = dropdown.toolbarView;
 
@@ -115,7 +120,8 @@ describe( 'HighlightUI', () => {
 			command.value = 'greenMarker';
 
 			// The second item is 'greenMarker' highlighter.
-			expect( toolbar.items.map( item => item.isOn ) ).to.deep.equal( [ false, true, false, false, false, false, undefined, false ] );
+			expect( toolbar.items.map( item => item.isOn ) )
+				.to.deep.equal( [ false, true, false, false, false, false, undefined, false ] );
 		} );
 
 		describe( 'toolbar button behavior', () => {
@@ -129,7 +135,7 @@ describe( 'HighlightUI', () => {
 
 			function validateButton( which ) {
 				expect( button.icon ).to.equal( buttons[ which ].icon );
-				expect( button.actionView.color ).to.equal( options[ which ].color );
+				expect( button.actionView.iconView.fillColor ).to.equal( options[ which ].color );
 			}
 
 			it( 'should have properties of first defined highlighter', () => {