Merge pull request #407 from ckeditor/t/ckeditor5-table/24

Feature: Implemented list component separators (see ckeditor/ckeditor5-table#24).

Author: jodator

src/dropdown/utils.js

@@ -13,6 +13,7 @@ import DropdownButtonView from './button/dropdownbuttonview';
 import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
+import ListSeparatorView from '../list/listseparatorview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
@@ -173,10 +174,16 @@ export function addListToDropdown( dropdownView, items ) {
 	const listView = dropdownView.listView = new ListView( locale );
 
 	listView.items.bindTo( items ).using( itemModel => {
-		const item = new ListItemView( locale );
+		let item;
 
-		// Bind all attributes of the model to the item view.
-		item.bind( ...Object.keys( itemModel ) ).to( itemModel );
+		if ( itemModel.isSeparator ) {
+			item = new ListSeparatorView( locale );
+		} else {
+			item = new ListItemView( locale );
+
+			// Bind all attributes of the model to the item view.
+			item.bind( ...Object.keys( itemModel ) ).to( itemModel );
+		}
 
 		return item;
 	} );

src/list/listseparatorview.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/list/listseparatorview
+ */
+
+import View from '../view';
+
+/**
+ * The list separator view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class ListSeparatorView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		this.setTemplate( {
+			tag: 'li',
+			attributes: {
+				class: [
+					'ck',
+					'ck-list__separator'
+				]
+			}
+		} );
+	}
+}

tests/dropdown/utils.js

@@ -19,6 +19,7 @@ import View from '../../src/view';
 import ToolbarView from '../../src/toolbar/toolbarview';
 import { createDropdown, addToolbarToDropdown, addListToDropdown } from '../../src/dropdown/utils';
 import ListItemView from '../../src/list/listitemview';
+import ListSeparatorView from '../../src/list/listseparatorview';
 import ListView from '../../src/list/listview';
 
 const assertBinding = utilsTestUtils.assertBinding;
@@ -349,6 +350,14 @@ describe( 'utils', () => {
 
 				dropdownView.listView.items.get( 0 ).fire( 'execute' );
 			} );
+
+			it( 'is filled with separators', () => {
+				const itemModel = new Model( { isSeparator: true } );
+
+				items.add( itemModel );
+
+				expect( dropdownView.listView.items.get( 0 ) ).to.be.instanceOf( ListSeparatorView );
+			} );
 		} );
 	} );
 } );

tests/list/listseparatorview.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import ListSeparatorView from '../../src/list/listseparatorview';
+
+describe( 'ListSeparatorView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new ListSeparatorView();
+
+		view.render();
+	} );
+
+	describe( 'template', () => {
+		it( 'should create element from template', () => {
+			expect( view.element.tagName ).to.equal( 'LI' );
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-list__separator' ) ).to.true;
+		} );
+	} );
+} );

theme/components/list/list.css

@@ -11,12 +11,13 @@
 	/* Crop the the items when the list has huge border-radius. */
 	overflow: hidden;
 
-	& .ck-list__item {
+	& .ck-list__item,
+	& .ck-list__separator {
 		display: block;
+	}
 
-		&:focus {
-			position: relative;
-			z-index: var(--ck-z-default);
-		}
+	& .ck-list__item:focus {
+		position: relative;
+		z-index: var(--ck-z-default);
 	}
 }