diff --git a/src/dropdown/dropdownview.js b/src/dropdown/dropdownview.js index 2bc32c7a..52a33e13 100644 --- a/src/dropdown/dropdownview.js +++ b/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 ) ] }, diff --git a/tests/dropdown/dropdownview.js b/tests/dropdown/dropdownview.js index cbbb8a00..e9f1ff38 100644 --- a/tests/dropdown/dropdownview.js +++ b/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; + } ); } ); } ); } );