Merge pull request #448 from lucasreppewelander/t/447

Feature: Added the optional `DropdownView#class` property to set a custom CSS class on the main element in DOM. Closes #447.

Thanks to [@lucasreppewelander](https://github.com/lucasreppewelander)!

Author: oleq

src/dropdown/dropdownview.js

@@ -120,6 +120,14 @@ export default class DropdownView extends View {
 		 */
 		this.set( 'isEnabled', true );
 
+		/**
+		 * (Optional) The additional CSS class set on the dropdown {@link #element}.
+		 *
+		 * @observable
+		 * @member {String} #class
+		 */
+		this.set( 'class' );
+
 		/**
 		 * Tracks information about DOM focus in the dropdown.
 		 *
@@ -147,6 +155,7 @@ export default class DropdownView extends View {
 				class: [
 					'ck',
 					'ck-dropdown',
+					bind.to( 'class' ),
 					bind.if( 'isEnabled', 'ck-disabled', value => !value )
 				]
 			},

tests/dropdown/dropdownview.js

@@ -97,15 +97,20 @@ describe( 'DropdownView', () => {
 				} );
 			} );
 
-			describe( 'DOM', () => {
-				describe( 'view#element .ck-disabled class to view#isEnabled', () => {
-					it( 'is activated', () => {
+			describe( 'DOM element bindings', () => {
+				describe( 'class', () => {
+					it( 'reacts on view#isEnabled', () => {
 						view.isEnabled = true;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
 
 						view.isEnabled = false;
 						expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
 					} );
+
+					it( 'reacts on view#class', () => {
+						view.class = 'custom-css-class';
+						expect( view.element.classList.contains( 'custom-css-class' ) ).to.be.true;
+					} );
 				} );
 			} );
 		} );