Merge pull request #231 from ckeditor/t/230

Fix: `ContextualToolbar` should have proper editor toolbar styling. Closes #230.

Author: oskarwrobel

src/toolbar/contextual/contextualtoolbar.js

@@ -7,6 +7,7 @@
  * @module ui/toolbar/contextual/contextualtoolbar
  */
 
+import Template from '../../template';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ContextualBalloon from '../../panel/balloon/contextualballoon';
 import ToolbarView from '../toolbarview';
@@ -48,6 +49,12 @@ export default class ContextualToolbar extends Plugin {
 		 */
 		this.toolbarView = new ToolbarView( this.editor.locale );
 
+		Template.extend( this.toolbarView.template, {
+			attributes: {
+				class: 'ck-editor-toolbar'
+			}
+		} );
+
 		/**
 		 * The contextual balloon plugin instance.
 		 *
@@ -170,7 +177,7 @@ export default class ContextualToolbar extends Plugin {
 					this._balloon.add( {
 						view: this.toolbarView,
 						position: this._getBalloonPositionData(),
-						balloonClassName: 'ck-toolbar-container'
+						balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container'
 					} )
 				);
 			} );

tests/toolbar/contextual/contextualtoolbar.js

@@ -58,6 +58,7 @@ describe( 'ContextualToolbar', () => {
 		expect( contextualToolbar ).to.instanceOf( Plugin );
 		expect( contextualToolbar ).to.instanceOf( ContextualToolbar );
 		expect( contextualToolbar.toolbarView ).to.instanceof( ToolbarView );
+		expect( contextualToolbar.toolbarView.element.classList.contains( 'ck-editor-toolbar' ) ).to.be.true;
 	} );
 
 	it( 'should load ContextualBalloon', () => {
@@ -157,7 +158,7 @@ describe( 'ContextualToolbar', () => {
 			return contextualToolbar._showPanel().then( () => {
 				sinon.assert.calledWithExactly( balloonAddSpy, {
 					view: contextualToolbar.toolbarView,
-					balloonClassName: 'ck-toolbar-container',
+					balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
 					position: {
 						target: forwardSelectionRect,
 						positions: [ defaultPositions.southEastArrowNorth, defaultPositions.northEastArrowSouth ]
@@ -175,7 +176,7 @@ describe( 'ContextualToolbar', () => {
 				.then( () => {
 					sinon.assert.calledWithExactly( balloonAddSpy, {
 						view: contextualToolbar.toolbarView,
-						balloonClassName: 'ck-toolbar-container',
+						balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
 						position: {
 							target: backwardSelectionRect,
 							positions: [ defaultPositions.northWestArrowSouth, defaultPositions.southWestArrowNorth ]