Explorar el Código

Changed the list separator tag to <li>. Used #isSeparator instead of #separator in the list model.

Aleksander Nowodzinski hace 7 años
padre
commit
7701de33aa

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -176,7 +176,7 @@ export function addListToDropdown( dropdownView, items ) {
 	listView.items.bindTo( items ).using( itemModel => {
 		let item;
 
-		if ( itemModel.separator ) {
+		if ( itemModel.isSeparator ) {
 			item = new ListSeparatorView( locale );
 		} else {
 			item = new ListItemView( locale );

+ 1 - 1
packages/ckeditor5-ui/src/list/listseparatorview.js

@@ -22,7 +22,7 @@ export default class ListSeparatorView extends View {
 		super( locale );
 
 		this.setTemplate( {
-			tag: 'span',
+			tag: 'li',
 			attributes: {
 				class: [
 					'ck',

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -352,7 +352,7 @@ describe( 'utils', () => {
 			} );
 
 			it( 'is filled with separators', () => {
-				const itemModel = new Model( { separator: true } );
+				const itemModel = new Model( { isSeparator: true } );
 
 				items.add( itemModel );
 

+ 1 - 1
packages/ckeditor5-ui/tests/list/listseparatorview.js

@@ -16,7 +16,7 @@ describe( 'ListSeparatorView', () => {
 
 	describe( 'template', () => {
 		it( 'should create element from template', () => {
-			expect( view.element.tagName ).to.equal( 'SPAN' );
+			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;
 		} );

+ 5 - 8
packages/ckeditor5-ui/theme/components/list/list.css

@@ -11,16 +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__separator {
-		display: block;
+	& .ck-list__item:focus {
+		position: relative;
+		z-index: var(--ck-z-default);
 	}
 }