Parcourir la source

Merge pull request #15 from ckeditor/i/6109

Other: Made `SpecialCharactersNavigationView` an instance of the new `FormHeaderView` UI. See ckeditor/ckeditor5#6109.

BREAKING CHANGE: From now the `SpecialCharactersNavigationView` is an instance of the `FormHeaderView` and unnecessary `SpecialCharactersNavigationView#labelView` was removed.
Maciej il y a 5 ans
Parent
commit
51e3b75f0d

+ 16 - 25
packages/ckeditor5-special-characters/src/ui/specialcharactersnavigationview.js

@@ -7,22 +7,22 @@
  * @module special-characters/ui/specialcharactersnavigationview
  */
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
-import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import {
 	createDropdown,
 	addListToDropdown
 } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
+
 /**
  * A class representing the navigation part of the special characters UI. It is responsible
  * for describing the feature and allowing the user to select a particular character group.
  *
- * @extends module:ui/view~View
+ * @extends module:ui/formheader/formheaderview~FormHeaderView
  */
-export default class SpecialCharactersNavigationView extends View {
+export default class SpecialCharactersNavigationView extends FormHeaderView {
 	/**
 	 * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
 	 * class.
@@ -35,13 +35,7 @@ export default class SpecialCharactersNavigationView extends View {
 
 		const t = locale.t;
 
-		/**
-		 * The label of the navigation view describing its purpose.
-		 *
-		 * @member {module:ui/label/labelview~LabelView}
-		 */
-		this.labelView = new LabelView( locale );
-		this.labelView.text = t( 'Special characters' );
+		this.set( 'class', 'ck-special-characters-navigation' );
 
 		/**
 		 * A dropdown that allows selecting a group of special characters to be displayed.
@@ -51,19 +45,15 @@ export default class SpecialCharactersNavigationView extends View {
 		this.groupDropdownView = this._createGroupDropdown( groupNames );
 		this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
 
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-special-characters-navigation'
-				]
-			},
-			children: [
-				this.labelView,
-				this.groupDropdownView
-			]
-		} );
+		/**
+		 * @inheritDoc
+		 */
+		this.label = t( 'Special characters' );
+
+		/**
+		 * @inheritDoc
+		 */
+		this.children.add( this.groupDropdownView );
 	}
 
 	/**
@@ -95,7 +85,8 @@ export default class SpecialCharactersNavigationView extends View {
 		dropdown.buttonView.set( {
 			isOn: false,
 			withText: true,
-			tooltip: t( 'Character categories' )
+			tooltip: t( 'Character categories' ),
+			class: [ 'ck-dropdown__button_label-width_auto' ]
 		} );
 
 		dropdown.on( 'execute', evt => {

+ 38 - 19
packages/ckeditor5-special-characters/tests/ui/specialcharactersnavigationview.js

@@ -4,8 +4,10 @@
  */
 
 import SpecialCharactersNavigationView from '../../src/ui/specialcharactersnavigationview';
-import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 
 describe( 'SpecialCharactersNavigationView', () => {
 	let view, locale;
@@ -26,20 +28,29 @@ describe( 'SpecialCharactersNavigationView', () => {
 	} );
 
 	describe( 'constructor()', () => {
-		it( 'creates #labelView', () => {
-			expect( view.labelView ).to.be.instanceOf( LabelView );
-			expect( view.labelView.text ).to.equal( 'Special characters' );
+		it( 'should be an instance of the FormHeaderView', () => {
+			expect( view ).to.be.instanceOf( FormHeaderView );
+		} );
+
+		it( 'should have "Special characters" label', () => {
+			expect( view.label ).to.equal( 'Special characters' );
 		} );
 
 		it( 'creates #groupDropdownView', () => {
+			expect( view.groupDropdownView ).to.be.instanceOf( DropdownView );
 		} );
 
 		it( 'creates #element from template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-special-characters-navigation' ) ).to.be.true;
 
-			expect( view.element.firstChild ).to.equal( view.labelView.element );
-			expect( view.element.lastChild ).to.equal( view.groupDropdownView.element );
+			expect( view.element.firstChild.classList.contains( 'ck-form__header__label' ) ).to.be.true;
+			expect( view.element.lastChild.classList.contains( 'ck-dropdown' ) ).to.be.true;
+		} );
+
+		it( 'should contain following instances as children: View, Dropdown', () => {
+			expect( view.children.first ).to.be.instanceOf( View );
+			expect( view.children.last ).to.be.instanceOf( DropdownView );
 		} );
 	} );
 
@@ -81,19 +92,6 @@ describe( 'SpecialCharactersNavigationView', () => {
 			view.destroy();
 		} );
 
-		it( 'binds its buttonView#label to #value', () => {
-			expect( groupDropdownView.buttonView.label ).to.equal( 'groupA' );
-
-			groupDropdownView.listView.items.last.children.first.fire( 'execute' );
-			expect( groupDropdownView.buttonView.label ).to.equal( 'groupB' );
-		} );
-
-		it( 'configures the #buttonView', () => {
-			expect( groupDropdownView.buttonView.isOn ).to.be.false;
-			expect( groupDropdownView.buttonView.withText ).to.be.true;
-			expect( groupDropdownView.buttonView.tooltip ).to.equal( 'Character categories' );
-		} );
-
 		it( 'delegates #execute to the naviation view', () => {
 			const spy = sinon.spy();
 
@@ -103,6 +101,27 @@ describe( 'SpecialCharactersNavigationView', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 
+		describe( 'buttonView', () => {
+			it( 'binds #label to #value', () => {
+				expect( groupDropdownView.buttonView.label ).to.equal( 'groupA' );
+
+				groupDropdownView.listView.items.last.children.first.fire( 'execute' );
+				expect( groupDropdownView.buttonView.label ).to.equal( 'groupB' );
+			} );
+
+			it( 'should be configured by the #groupDropdownView', () => {
+				expect( groupDropdownView.buttonView.isOn ).to.be.false;
+				expect( groupDropdownView.buttonView.withText ).to.be.true;
+				expect( groupDropdownView.buttonView.tooltip ).to.equal( 'Character categories' );
+			} );
+
+			it( 'should have class "ck-dropdown__button_label-width_auto"', () => {
+				const element = groupDropdownView.buttonView.element;
+
+				expect( element.classList.contains( 'ck-dropdown__button_label-width_auto' ) ).to.be.true;
+			} );
+		} );
+
 		describe( 'character group list items', () => {
 			it( 'have basic properties', () => {
 				expect( groupDropdownView.listView.items