Merge pull request #16243 from ckeditor/ck/16192-the-list-properties-…

…toolbar-is-overriden

Fix (List): Order of List and ListProperties plugins should not affect the appearance of the icon in the toolbar. Closes #16192.

packages/ckeditor5-list/src/list/listui.ts

@@ -28,8 +28,14 @@ export default class ListUI extends Plugin {
 	public init(): void {
 		const t = this.editor.t;
 
-		// Create two buttons and link them with numberedList and bulletedList commands.
-		createUIComponents( this.editor, 'numberedList', t( 'Numbered List' ), icons.numberedList );
-		createUIComponents( this.editor, 'bulletedList', t( 'Bulleted List' ), icons.bulletedList );
+		// Create button numberedList.
+		if ( !this.editor.ui.componentFactory.has( 'numberedList' ) ) {
+			createUIComponents( this.editor, 'numberedList', t( 'Numbered List' ), icons.numberedList );
+		}
+
+		// Create button bulletedList.
+		if ( !this.editor.ui.componentFactory.has( 'bulletedList' ) ) {
+			createUIComponents( this.editor, 'bulletedList', t( 'Bulleted List' ), icons.bulletedList );
+		}
 	}
 }

packages/ckeditor5-list/tests/list/listui.js

@@ -8,6 +8,8 @@
 // TODO change to new ListEditing
 import LegacyListEditing from '../../src/legacylist/legacylistediting.js';
 import ListUI from '../../src/list/listui.js';
+import List from '../../src/list.js';
+import ListProperties from '../../src/listproperties.js';
 
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor.js';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
@@ -152,4 +154,34 @@ describe( 'ListUI', () => {
 			expect( numberedListButton.isEnabled ).to.be.false;
 		} );
 	} );
+
+	describe( 'list properties', () => {
+		let editorElement, editor;
+
+		beforeEach( () => {
+			editorElement = document.createElement( 'div' );
+			document.body.appendChild( editorElement );
+
+			return ClassicTestEditor.create( editorElement, {
+				plugins: [ Paragraph, BlockQuote, ListProperties, List ]
+			} )
+				.then( newEditor => {
+					editor = newEditor;
+				} );
+		} );
+
+		afterEach( () => {
+			editorElement.remove();
+
+			return editor.destroy();
+		} );
+
+		it( 'should not override list properties ui components', () => {
+			const bulletedListButton = editor.ui.componentFactory.create( 'bulletedList' );
+			const numberedListButton = editor.ui.componentFactory.create( 'numberedList' );
+
+			expect( bulletedListButton.class ).to.be.equal( 'ck-list-styles-dropdown' );
+			expect( numberedListButton.class ).to.be.equal( 'ck-list-styles-dropdown' );
+		} );
+	} );
 } );