Merge pull request #69 from ckeditor/t/68

Fix: Changed the default heading drop-down title to a more meaningful one. Closes #68.

lang/contexts.json

@@ -1,6 +1,7 @@
 {
 	"Paragraph": "Drop-down option label for the paragraph format.",
-	"Heading": "Tooltip and default label for the heading drop-down.",
+	"Heading": "Tooltip for the heading drop-down.",
+	"Choose heading": "Default label for the heading drop-down.",
 	"Heading 1": "Drop-down option label for the heading level 1 format.",
 	"Heading 2": "Drop-down option label for the heading level 2 format.",
 	"Heading 3": "Drop-down option label for the heading level 3 format."

src/heading.js

@@ -13,6 +13,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 import '../theme/theme.scss';
 
@@ -39,7 +40,8 @@ export default class Heading extends Plugin {
 		const options = this._getLocalizedOptions();
 		const commands = [];
 		const t = editor.t;
-		const defaultTitle = t( 'Heading' );
+		const defaultTitle = t( 'Choose heading' );
+		const dropdownTooltip = t( 'Heading' );
 
 		for ( let option of options ) {
 			const command = editor.commands.get( option.modelElement );
@@ -61,7 +63,7 @@ export default class Heading extends Plugin {
 		const dropdownModel = new Model( {
 			withText: true,
 			items: dropdownItems,
-			tooltip: defaultTitle
+			tooltip: dropdownTooltip
 		} );
 
 		dropdownModel.bind( 'isEnabled' ).to(
@@ -87,6 +89,14 @@ export default class Heading extends Plugin {
 		editor.ui.componentFactory.add( 'headings', ( locale ) => {
 			const dropdown = createListDropdown( dropdownModel, locale );
 
+			Template.extend( dropdown.template, {
+				attributes: {
+					class: [
+						'ck-heading-dropdown'
+					]
+				}
+			} );
+
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdown, 'execute', ( evt ) => {
 				editor.execute( evt.source.commandName );

tests/heading.js

@@ -13,6 +13,7 @@ import { add } from '@ckeditor/ckeditor5-utils/src/translation-service';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 add( 'pl', {
+	'Choose heading': 'Wybierz nagłówek',
 	'Paragraph': 'Akapit',
 	'Heading': 'Nagłówek',
 	'Heading 1': 'Nagłówek 1',
@@ -59,7 +60,7 @@ describe( 'Heading', () => {
 			expect( dropdown ).to.be.instanceOf( DropdownView );
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isOn ).to.be.undefined;
-			expect( dropdown.buttonView.label ).to.equal( 'Heading' );
+			expect( dropdown.buttonView.label ).to.equal( 'Choose heading' );
 			expect( dropdown.buttonView.tooltip ).to.equal( 'Heading' );
 		} );
 
@@ -84,6 +85,11 @@ describe( 'Heading', () => {
 			sinon.assert.calledOnce( focusSpy );
 		} );
 
+		it( 'should add custom CSS class to dropdown', () => {
+			const dropdown = editor.ui.componentFactory.create( 'headings' );
+			expect( dropdown.element.classList.contains( 'ck-heading-dropdown' ) ).to.be.true;
+		} );
+
 		describe( 'model to command binding', () => {
 			let commands;
 
@@ -111,7 +117,7 @@ describe( 'Heading', () => {
 					commands[ name ].value = false;
 				}
 
-				expect( dropdown.buttonView.label ).to.equal( 'Heading' );
+				expect( dropdown.buttonView.label ).to.equal( 'Choose heading' );
 
 				commands.heading2.value = true;
 				expect( dropdown.buttonView.label ).to.equal( 'Heading 2' );
@@ -140,7 +146,8 @@ describe( 'Heading', () => {
 			it( 'works for the #buttonView', () => {
 				const buttonView = dropdown.buttonView;
 
-				expect( buttonView.label ).to.equal( 'Nagłówek' );
+				expect( buttonView.label ).to.equal( 'Wybierz nagłówek' );
+				expect( buttonView.tooltip ).to.equal( 'Nagłówek' );
 
 				commands.paragraph.value = true;
 				expect( buttonView.label ).to.equal( 'Akapit' );

theme/theme.scss

@@ -29,3 +29,14 @@
 [class*="ck-heading_heading"] {
 	font-weight: bold;
 }
+
+// Resize dropdown's button label.
+.ck-dropdown {
+	&.ck-heading-dropdown {
+		.ck-dropdown__button {
+			.ck-button__label {
+				width: 8em;
+			}
+		}
+	}
+}