Merge pull request #456 from ckeditor/t/450

Other: The "class" property should control the DOM class attribute in all UI components. Closes #450.

BREAKING CHANGE: The `BallonPanelView#className` property was renamed to `#class`.
BREAKING CHANGE: The `ToolbarView#className` property was renamed to `#class`.

Author: oleq

src/panel/balloon/balloonpanelview.js

@@ -125,9 +125,9 @@ export default class BalloonPanelView extends View {
 		 * An additional CSS class added to the {@link #element}.
 		 *
 		 * @observable
-		 * @member {String} #className
+		 * @member {String} #class
 		 */
-		this.set( 'className' );
+		this.set( 'class' );
 
 		/**
 		 * A callback that starts pining the panel when {@link #isVisible} gets
@@ -154,7 +154,7 @@ export default class BalloonPanelView extends View {
 					bind.to( 'position', value => `ck-balloon-panel_${ value }` ),
 					bind.if( 'isVisible', 'ck-balloon-panel_visible' ),
 					bind.if( 'withArrow', 'ck-balloon-panel_with-arrow' ),
-					bind.to( 'className' )
+					bind.to( 'class' )
 				],
 
 				style: {

src/panel/balloon/contextualballoon.js

@@ -205,7 +205,7 @@ export default class ContextualBalloon extends Plugin {
 	 * @param {String} [data.balloonClassName=''] Additional class name which will added to the {#_balloon} view.
 	 */
 	_show( { view, balloonClassName = '' } ) {
-		this.view.className = balloonClassName;
+		this.view.class = balloonClassName;
 
 		this.view.content.add( view );
 		this.view.pin( this._getBalloonPosition() );

src/toolbar/block/blocktoolbar.js

@@ -187,7 +187,7 @@ export default class BlockToolbar extends Plugin {
 		const panelView = new BalloonPanelView( editor.locale );
 
 		panelView.content.add( this.toolbarView );
-		panelView.className = 'ck-toolbar-container';
+		panelView.class = 'ck-toolbar-container';
 		editor.ui.view.body.add( panelView );
 		editor.ui.focusTracker.add( panelView.element );
 

src/toolbar/toolbarview.js

@@ -68,9 +68,9 @@ export default class ToolbarView extends View {
 		 * An additional CSS class added to the {@link #element}.
 		 *
 		 * @observable
-		 * @member {String} #className
+		 * @member {String} #class
 		 */
-		this.set( 'className' );
+		this.set( 'class' );
 
 		/**
 		 * Helps cycling over focusable {@link #items} in the toolbar.
@@ -99,7 +99,7 @@ export default class ToolbarView extends View {
 					'ck',
 					'ck-toolbar',
 					bind.if( 'isVertical', 'ck-toolbar_vertical' ),
-					bind.to( 'className' )
+					bind.to( 'class' )
 				]
 			},
 

tests/panel/balloon/balloonpanelview.js

@@ -97,13 +97,13 @@ describe( 'BalloonPanelView', () => {
 			} );
 		} );
 
-		describe( 'className', () => {
+		describe( 'class', () => {
 			it( 'should set additional class to the view#element', () => {
-				view.className = 'foo';
+				view.class = 'foo';
 
 				expect( view.element.classList.contains( 'foo' ) ).to.true;
 
-				view.className = '';
+				view.class = '';
 
 				expect( view.element.classList.contains( 'foo' ) ).to.false;
 			} );

tests/panel/balloon/contextualballoon.js

@@ -287,7 +287,7 @@ describe( 'ContextualBalloon', () => {
 				balloonClassName: 'foo'
 			} );
 
-			expect( balloon.view.className ).to.equal( 'foo' );
+			expect( balloon.view.class ).to.equal( 'foo' );
 
 			balloon.add( {
 				view: viewB,
@@ -298,7 +298,7 @@ describe( 'ContextualBalloon', () => {
 				balloonClassName: 'bar'
 			} );
 
-			expect( balloon.view.className ).to.equal( 'bar' );
+			expect( balloon.view.class ).to.equal( 'bar' );
 		} );
 	} );
 
@@ -392,7 +392,7 @@ describe( 'ContextualBalloon', () => {
 
 			balloon.remove( viewB );
 
-			expect( balloon.view.className ).to.equal( 'foo' );
+			expect( balloon.view.class ).to.equal( 'foo' );
 		} );
 	} );
 

tests/toolbar/block/blocktoolbar.js

@@ -58,7 +58,7 @@ describe( 'BlockToolbar', () => {
 			} );
 
 			it( 'should have an additional class name', () => {
-				expect( blockToolbar.panelView.className ).to.equal( 'ck-toolbar-container' );
+				expect( blockToolbar.panelView.class ).to.equal( 'ck-toolbar-container' );
 			} );
 
 			it( 'should be added to the ui.view.body collection', () => {

tests/toolbar/toolbarview.js

@@ -85,14 +85,14 @@ describe( 'ToolbarView', () => {
 				expect( view.element.classList.contains( 'ck-toolbar_vertical' ) ).to.be.true;
 			} );
 
-			it( 'reacts on view#className', () => {
-				view.className = 'foo';
+			it( 'reacts on view#class', () => {
+				view.class = 'foo';
 				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
 
-				view.className = 'bar';
+				view.class = 'bar';
 				expect( view.element.classList.contains( 'bar' ) ).to.be.true;
 
-				view.className = false;
+				view.class = false;
 				expect( view.element.classList.contains( 'foo' ) ).to.be.false;
 				expect( view.element.classList.contains( 'bar' ) ).to.be.false;
 			} );