Enable styling via class attribute in ListItemView.

ckeditor · Mar 9, 2017 · ba075e4 · ba075e4
1 parent e42cf46
commit ba075e4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/list/listitemview.js b/src/list/listitemview.js
@@ -38,7 +38,8 @@ export default class ListItemView extends View {
 
 			attributes: {
 				class: [
-					'ck-list__item'
+					'ck-list__item',
+					bind.to( 'class' )
 				],
 				style: bind.to( 'style' ),
 				tabindex: bind.to( 'tabindex' )
@@ -69,6 +70,13 @@ export default class ListItemView extends View {
 		 * @member {String} #style
 		 */
 
+		/**
+		 * (Optional) The additional class set on the {@link #element}.
+		 *
+		 * @observable
+		 * @member {String} #class
+		 */
+
 		/**
 		 * Fired when the list item has been clicked.
 		 *

diff --git a/tests/list/listitemview.js b/tests/list/listitemview.js
@@ -27,6 +27,16 @@ describe( 'ListItemView', () => {
 	} );
 
 	describe( 'DOM bindings', () => {
+		describe( '"class" attribute', () => {
+			it( 'reacts on view#class', () => {
+				expect( view.element.classList ).to.have.length( 1 );
+
+				view.set( 'class', 'foo' );
+
+				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
+			} );
+		} );
+
 		describe( '"style" attribute', () => {
 			it( 'reacts on view#style', () => {
 				expect( view.element.attributes.getNamedItem( 'style' ).value ).to.equal( 'foo' );