8
0
Просмотр исходного кода

Changed: Make ButtonClass as a parameter of `createDropdown()`.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
e91834af38

+ 4 - 4
packages/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js

@@ -42,7 +42,7 @@ export default class DropdownButtonView extends ButtonView {
 		 * @readonly
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
-		this.selectView = this._createSelectView();
+		this.arrowView = this._createArrowView();
 
 		// Dropdown expects "select" event on button view upon which the dropdown will open.
 		this.delegate( 'execute' ).to( this, 'select' );
@@ -54,17 +54,17 @@ export default class DropdownButtonView extends ButtonView {
 	render() {
 		super.render();
 
-		this.children.add( this.selectView );
+		this.children.add( this.arrowView );
 	}
 
 	/**
-	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #selectView} and binds it with main split button
+	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #arrowView} and binds it with main split button
 	 * attributes.
 	 *
 	 * @private
 	 * @returns {module:ui/button/buttonview~ButtonView}
 	 */
-	_createSelectView() {
+	_createArrowView() {
 		const arrowView = new IconView();
 
 		arrowView.content = dropdownArrowIcon;

+ 14 - 14
packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js

@@ -137,7 +137,7 @@ export default class SplitButtonView extends View {
 		 * @readonly
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
-		this.selectView = this._createSelectView();
+		this.arrowView = this._createArrowView();
 
 		/**
 		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
@@ -177,17 +177,17 @@ export default class SplitButtonView extends View {
 		super.render();
 
 		this.children.add( this.actionView );
-		this.children.add( this.selectView );
+		this.children.add( this.arrowView );
 
 		this.focusTracker.add( this.actionView.element );
-		this.focusTracker.add( this.selectView.element );
+		this.focusTracker.add( this.arrowView.element );
 
 		this.keystrokes.listenTo( this.element );
 
 		// Overrides toolbar focus cycling behavior.
 		this.keystrokes.set( 'arrowright', ( evt, cancel ) => {
 			if ( this.focusTracker.focusedElement === this.actionView.element ) {
-				this.selectView.focus();
+				this.arrowView.focus();
 
 				cancel();
 			}
@@ -195,7 +195,7 @@ export default class SplitButtonView extends View {
 
 		// Overrides toolbar focus cycling behavior.
 		this.keystrokes.set( 'arrowleft', ( evt, cancel ) => {
-			if ( this.focusTracker.focusedElement === this.selectView.element ) {
+			if ( this.focusTracker.focusedElement === this.arrowView.element ) {
 				this.actionView.focus();
 
 				cancel();
@@ -228,27 +228,27 @@ export default class SplitButtonView extends View {
 	}
 
 	/**
-	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #selectView} and binds it with main split button
+	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #arrowView} and binds it with main split button
 	 * attributes.
 	 *
 	 * @private
 	 * @returns {module:ui/button/buttonview~ButtonView}
 	 */
-	_createSelectView() {
-		const selectView = new ButtonView();
+	_createArrowView() {
+		const arrowView = new ButtonView();
 
-		selectView.icon = dropdownArrowIcon;
+		arrowView.icon = dropdownArrowIcon;
 
-		selectView.extendTemplate( {
+		arrowView.extendTemplate( {
 			attributes: {
-				class: 'ck-splitbutton-select'
+				class: 'ck-splitbutton-arrow'
 			}
 		} );
 
-		selectView.bind( 'isEnabled' ).to( this );
+		arrowView.bind( 'isEnabled' ).to( this );
 
-		selectView.delegate( 'execute' ).to( this, 'select' );
+		arrowView.delegate( 'execute' ).to( this, 'select' );
 
-		return selectView;
+		return arrowView;
 	}
 }

+ 6 - 12
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -31,8 +31,7 @@ import '../../theme/components/dropdown/dropdown.css';
  *		// Will render a dropdown with a panel containing a "Content of the panel" text.
  *		document.body.appendChild( dropdown.element );
  *
- * Also see {@link module:ui/dropdown/utils~createDropdown} and {@link module:ui/dropdown/utils~createSplitButtonDropdown}
- * to learn about different dropdown creation helpers.
+ * Also see {@link module:ui/dropdown/utils~createDropdown} to learn about dropdown creation helper.
  *
  * @extends module:ui/view~View
  */
@@ -134,8 +133,7 @@ export default class DropdownView extends View {
 		/**
 		 * The label of the dropdown.
 		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown} or
-		 * {@link module:ui/dropdown/utils~createSplitButtonDropdown}.
+		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
 		 *
 		 * Also see {@link module:ui/button/buttonview~ButtonView#label}.
 		 *
@@ -146,8 +144,7 @@ export default class DropdownView extends View {
 		/**
 		 * Controls whether the dropdown is enabled, i.e. it opens the panel when clicked.
 		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown} or
-		 * {@link module:ui/dropdown/utils~createSplitButtonDropdown}.
+		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
 		 *
 		 * Also see {@link module:ui/button/buttonview~ButtonView#isEnabled}.
 		 *
@@ -159,8 +156,7 @@ export default class DropdownView extends View {
 		 * Controls whether the dropdown is "on". It makes sense when a feature it represents
 		 * is currently active.
 		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown} or
-		 * {@link module:ui/dropdown/utils~createSplitButtonDropdown}.
+		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
 		 *
 		 * Also see {@link module:ui/button/buttonview~ButtonView#isOn}.
 		 *
@@ -171,8 +167,7 @@ export default class DropdownView extends View {
 		/**
 		 * (Optional) Controls whether the label of the dropdown is visible.
 		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown} or
-		 * {@link module:ui/dropdown/utils~createSplitButtonDropdown}.
+		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
 		 *
 		 * Also see {@link module:ui/button/buttonview~ButtonView#withText}.
 		 *
@@ -183,8 +178,7 @@ export default class DropdownView extends View {
 		/**
 		 * (Optional) Controls the icon of the dropdown.
 		 *
-		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown} or
-		 * {@link module:ui/dropdown/utils~createSplitButtonDropdown}.
+		 * **Note**: Only supported when dropdown was created using {@link module:ui/dropdown/utils~createDropdown}.
 		 *
 		 * Also see {@link module:ui/button/buttonview~ButtonView#withText}.
 		 *

+ 21 - 50
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -10,7 +10,6 @@
 import DropdownPanelView from './dropdownpanelview';
 import DropdownView from './dropdownview';
 import DropdownButtonView from './button/dropdownbuttonview';
-import SplitButtonView from './button/splitbuttonview';
 import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
@@ -21,7 +20,9 @@ import '../../theme/components/dropdown/toolbardropdown.css';
 
 /**
  * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class with an instance of
- * {@link module:ui/button/buttonview~ButtonView} in toolbar.
+ * a button class passed as `ButtonClass` parameter`
+ *
+ * The default value of `ButtonClass` is {@link module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView} class.
  *
  *		const dropdown = createDropdown( model );
  *
@@ -38,26 +39,11 @@ import '../../theme/components/dropdown/toolbardropdown.css';
  *		// Will render a dropdown labeled "A dropdown" with an empty panel.
  *		document.body.appendChild( dropdown.element );
  *
- * Also see {@link module:ui/dropdown/utils~createSplitButtonDropdown}, {@link module:ui/dropdown/utils~addListToDropdown}
- * and {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+ * The second supported button class is {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView}
  *
- * @param {module:utils/locale~Locale} locale The locale instance.
- * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
- */
-export function createDropdown( locale ) {
-	const buttonView = new DropdownButtonView( locale );
-
-	const dropdownView = prepareDropdown( locale, buttonView );
-	addDefaultBehavior( dropdownView );
-
-	return dropdownView;
-}
-
-/**
- * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class with an instance of
- * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} in toolbar.
+ * 		import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
  *
- *		const dropdown = createSplitButtonDropdown( model );
+ *		const dropdown = createDropdown( model, SplitButtonView );
  *
  *		// Configure dropdown properties:
  *		dropdown.set( {
@@ -71,19 +57,25 @@ export function createDropdown( locale ) {
  *		// Will render a dropdown labeled "A dropdown" with an empty panel.
  *		document.body.appendChild( dropdown.element );
  *
- * Also see {@link module:ui/dropdown/utils~createDropdown}, {@link module:ui/dropdown/utils~addListToDropdown}
- * and {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+ * Also see {@link module:ui/dropdown/utils~addListToDropdown} and {@link module:ui/dropdown/utils~addToolbarToDropdown}.
  *
  * @param {module:utils/locale~Locale} locale The locale instance.
+ * @param {Function} ButtonClass The dropdown button view class.
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  */
-export function createSplitButtonDropdown( locale ) {
-	const buttonView = new SplitButtonView( locale );
+export function createDropdown( locale, ButtonClass = DropdownButtonView ) {
+	const buttonView = new ButtonClass( locale );
 
-	const dropdownView = prepareDropdown( locale, buttonView );
-	addDefaultBehavior( dropdownView );
+	const panelView = new DropdownPanelView( locale );
+	const dropdownView = new DropdownView( locale, buttonView, panelView );
 
-	buttonView.delegate( 'execute' ).to( dropdownView );
+	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( dropdownView );
+
+	buttonView.bind( 'isOn' ).to( dropdownView, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
+		return isOn || isOpen;
+	} );
+
+	addDefaultBehavior( dropdownView );
 
 	return dropdownView;
 }
@@ -108,8 +100,7 @@ export function createSplitButtonDropdown( locale ) {
  *		dropdown.render()
  *		document.body.appendChild( dropdown.element );
  *
- * See {@link module:ui/dropdown/utils~createDropdown}, {@link module:ui/dropdown/utils~createSplitButtonDropdown}
- * and {@link module:ui/toolbar/toolbarview~ToolbarView}.
+ * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
  *
  * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ToolbarView` will be added.
  * @param {Iterable.<module:ui/button/buttonview~ButtonView>} buttons
@@ -151,8 +142,7 @@ export function addToolbarToDropdown( dropdownView, buttons ) {
  * {@link module:ui/list/listitemview~ListItemView list items}.
  *
  *
- * See {@link module:ui/dropdown/utils~createDropdown}, {@link module:ui/dropdown/utils~createSplitButtonDropdown}
- * and {@link module:list/list~List}.
+ * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:list/list~List}.
  *
  * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ListVIew` will be added.
  * @param {module:utils/collection~Collection} items
@@ -178,25 +168,6 @@ export function addListToDropdown( dropdownView, items ) {
 	listView.items.delegate( 'execute' ).to( dropdownView );
 }
 
-// Creates a dropdown view instance and binds dropdown view with a button view.
-//
-// @param {module:utils/locale~Locale} locale The locale instance.
-// @param {module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView|module:ui/dropdown/button/splitbuttonview~SplitButtonView}
-// buttonView // The button view instance.
-// @returns {module:ui/dropdown/dropdownview~DropdownView}
-function prepareDropdown( locale, buttonView ) {
-	const panelView = new DropdownPanelView( locale );
-	const dropdownView = new DropdownView( locale, buttonView, panelView );
-
-	buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( dropdownView );
-
-	buttonView.bind( 'isOn' ).to( dropdownView, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
-		return isOn || isOpen;
-	} );
-
-	return dropdownView;
-}
-
 // Add a set of default behaviors to dropdown view.
 //
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView

+ 47 - 0
packages/ckeditor5-ui/tests/dropdown/button/dropdownbuttonview.js

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import IconView from '../../../src/icon/iconview';
+import DropdownButtonView from '../../../src/dropdown/button/dropdownbuttonview';
+
+testUtils.createSinonSandbox();
+
+describe( 'DropdownButtonView', () => {
+	let locale, view;
+
+	beforeEach( () => {
+		locale = { t() {} };
+
+		view = new DropdownButtonView( locale );
+		view.render();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'sets view#locale', () => {
+			expect( view.locale ).to.equal( locale );
+		} );
+
+		it( 'creates view#arrowView', () => {
+			expect( view.arrowView ).to.be.instanceOf( IconView );
+		} );
+
+		it( 'creates element from template', () => {
+			expect( view.element.tagName ).to.equal( 'BUTTON' );
+		} );
+	} );
+
+	describe( 'bindings', () => {
+		it( 'delegates view#execute to view#select', () => {
+			const spy = sinon.spy();
+
+			view.on( 'select', spy );
+
+			view.fire( 'execute' );
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+} );

+ 16 - 16
packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js

@@ -29,10 +29,10 @@ describe( 'SplitButtonView', () => {
 			expect( view.actionView ).to.be.instanceOf( ButtonView );
 		} );
 
-		it( 'creates view#selectView', () => {
-			expect( view.selectView ).to.be.instanceOf( ButtonView );
-			expect( view.selectView.element.classList.contains( 'ck-splitbutton-select' ) ).to.be.true;
-			expect( view.selectView.icon ).to.be.not.undefined;
+		it( 'creates view#arrowView', () => {
+			expect( view.arrowView ).to.be.instanceOf( ButtonView );
+			expect( view.arrowView.element.classList.contains( 'ck-splitbutton-arrow' ) ).to.be.true;
+			expect( view.arrowView.icon ).to.be.not.undefined;
 		} );
 
 		it( 'creates element from template', () => {
@@ -41,7 +41,7 @@ describe( 'SplitButtonView', () => {
 		} );
 
 		describe( 'activates keyboard navigation for the toolbar', () => {
-			it( 'so "arrowright" on view#selectView does nothing', () => {
+			it( 'so "arrowright" on view#arrowView does nothing', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.arrowright,
 					preventDefault: sinon.spy(),
@@ -49,7 +49,7 @@ describe( 'SplitButtonView', () => {
 				};
 
 				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view.selectView.element;
+				view.focusTracker.focusedElement = view.arrowView.element;
 
 				const spy = sinon.spy( view.actionView, 'focus' );
 
@@ -59,7 +59,7 @@ describe( 'SplitButtonView', () => {
 				sinon.assert.notCalled( keyEvtData.stopPropagation );
 			} );
 
-			it( 'so "arrowleft" on view#selectView focuses view#actionView', () => {
+			it( 'so "arrowleft" on view#arrowView focuses view#actionView', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.arrowleft,
 					preventDefault: sinon.spy(),
@@ -67,7 +67,7 @@ describe( 'SplitButtonView', () => {
 				};
 
 				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view.selectView.element;
+				view.focusTracker.focusedElement = view.arrowView.element;
 
 				const spy = sinon.spy( view.actionView, 'focus' );
 
@@ -77,7 +77,7 @@ describe( 'SplitButtonView', () => {
 				sinon.assert.calledOnce( keyEvtData.stopPropagation );
 			} );
 
-			it( 'so "arrowright" on view#actionView focuses view#selectView', () => {
+			it( 'so "arrowright" on view#actionView focuses view#arrowView', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.arrowright,
 					preventDefault: sinon.spy(),
@@ -87,7 +87,7 @@ describe( 'SplitButtonView', () => {
 				view.focusTracker.isFocused = true;
 				view.focusTracker.focusedElement = view.actionView.element;
 
-				const spy = sinon.spy( view.selectView, 'focus' );
+				const spy = sinon.spy( view.arrowView, 'focus' );
 
 				view.keystrokes.press( keyEvtData );
 				sinon.assert.calledOnce( spy );
@@ -105,7 +105,7 @@ describe( 'SplitButtonView', () => {
 				view.focusTracker.isFocused = true;
 				view.focusTracker.focusedElement = view.actionView.element;
 
-				const spy = sinon.spy( view.selectView, 'focus' );
+				const spy = sinon.spy( view.arrowView, 'focus' );
 
 				view.keystrokes.press( keyEvtData );
 				sinon.assert.notCalled( spy );
@@ -150,22 +150,22 @@ describe( 'SplitButtonView', () => {
 			expect( view.actionView.label ).to.equal( 'foo' );
 		} );
 
-		it( 'delegates selectView#execute to view#select', () => {
+		it( 'delegates arrowView#execute to view#select', () => {
 			const spy = sinon.spy();
 
 			view.on( 'select', spy );
 
-			view.selectView.fire( 'execute' );
+			view.arrowView.fire( 'execute' );
 
 			sinon.assert.calledOnce( spy );
 		} );
 
-		it( 'binds selectView#isEnabled to view', () => {
-			expect( view.selectView.isEnabled ).to.be.true;
+		it( 'binds arrowView#isEnabled to view', () => {
+			expect( view.arrowView.isEnabled ).to.be.true;
 
 			view.isEnabled = false;
 
-			expect( view.selectView.isEnabled ).to.be.false;
+			expect( view.arrowView.isEnabled ).to.be.false;
 		} );
 	} );
 

+ 2 - 9
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -8,7 +8,6 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import ButtonView from '../../src/button/buttonview';
-import IconView from '../../src/icon/iconview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 
 describe( 'DropdownView', () => {
@@ -55,21 +54,15 @@ describe( 'DropdownView', () => {
 
 		it( 'creates #element from template', () => {
 			expect( view.element.classList.contains( 'ck-dropdown' ) ).to.be.true;
-			expect( view.element.children ).to.have.length( 3 );
+			expect( view.element.children ).to.have.length( 2 );
 			expect( view.element.children[ 0 ] ).to.equal( buttonView.element );
-			expect( view.element.children[ 1 ] ).to.equal( view.arrowView.element );
-			expect( view.element.children[ 2 ] ).to.equal( panelView.element );
+			expect( view.element.children[ 1 ] ).to.equal( panelView.element );
 		} );
 
 		it( 'sets view#buttonView class', () => {
 			expect( view.buttonView.element.classList.contains( 'ck-dropdown__button' ) ).to.be.true;
 		} );
 
-		it( 'creates #arrowView icon instance', () => {
-			expect( view.arrowView ).to.be.instanceOf( IconView );
-			expect( view.arrowView.element.classList.contains( 'ck-dropdown__arrow' ) );
-		} );
-
 		describe( 'bindings', () => {
 			describe( 'view#isOpen to view.buttonView#select', () => {
 				it( 'is activated', () => {

+ 112 - 222
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -17,7 +17,7 @@ import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import SplitButtonView from '../../src/dropdown/button/splitbuttonview';
 import View from '../../src/view';
 import ToolbarView from '../../src/toolbar/toolbarview';
-import { createDropdown, createSplitButtonDropdown, addToolbarToDropdown, addListToDropdown } from '../../src/dropdown/utils';
+import { createDropdown, addToolbarToDropdown, addListToDropdown } from '../../src/dropdown/utils';
 import ListItemView from '../../src/list/listitemview';
 import ListView from '../../src/list/listview';
 
@@ -52,6 +52,12 @@ describe( 'utils', () => {
 			expect( dropdownView.buttonView ).to.be.instanceOf( ButtonView );
 		} );
 
+		it( 'creates dropdown#buttonView out of passed SplitButtonView', () => {
+			dropdownView = createDropdown( locale, SplitButtonView );
+
+			expect( dropdownView.buttonView ).to.be.instanceOf( SplitButtonView );
+		} );
+
 		it( 'binds button attributes to the model', () => {
 			const modelDef = {
 				label: 'foo',
@@ -127,120 +133,137 @@ describe( 'utils', () => {
 			it( 'is a ButtonView instance', () => {
 				expect( dropdownView.buttonView ).to.be.instanceof( ButtonView );
 			} );
+		} );
 
-			it( 'delegates "execute" to "select" event', () => {
-				const spy = sinon.spy();
+		describe( 'hasDefaultBehavior', () => {
+			describe( 'closeDropdownOnBlur()', () => {
+				beforeEach( () => {
+					dropdownView.render();
+					document.body.appendChild( dropdownView.element );
+				} );
 
-				dropdownView.buttonView.on( 'select', spy );
+				afterEach( () => {
+					dropdownView.element.remove();
+				} );
 
-				dropdownView.buttonView.fire( 'execute' );
+				it( 'listens to view#isOpen and reacts to DOM events (valid target)', () => {
+					// Open the dropdown.
+					dropdownView.isOpen = true;
+					// Fire event from outside of the dropdown.
+					document.body.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
+					// Closed the dropdown.
+					expect( dropdownView.isOpen ).to.be.false;
+					// Fire event from outside of the dropdown.
+					document.body.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
+					// Dropdown is still closed.
+					expect( dropdownView.isOpen ).to.be.false;
+				} );
 
-				sinon.assert.calledOnce( spy );
-			} );
-		} );
+				it( 'listens to view#isOpen and reacts to DOM events (invalid target)', () => {
+					// Open the dropdown.
+					dropdownView.isOpen = true;
 
-		addDefaultBehaviorTests();
-	} );
+					// Event from view.element should be discarded.
+					dropdownView.element.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
 
-	describe( 'createSplitButtonDropdown()', () => {
-		beforeEach( () => {
-			dropdownView = createSplitButtonDropdown( locale );
-		} );
+					// Dropdown is still open.
+					expect( dropdownView.isOpen ).to.be.true;
 
-		it( 'accepts locale', () => {
-			expect( dropdownView.locale ).to.equal( locale );
-			expect( dropdownView.panelView.locale ).to.equal( locale );
-		} );
+					// Event from within view.element should be discarded.
+					const child = document.createElement( 'div' );
+					dropdownView.element.appendChild( child );
 
-		it( 'returns view', () => {
-			expect( dropdownView ).to.be.instanceOf( DropdownView );
-		} );
+					child.dispatchEvent( new Event( 'mousedown', {
+						bubbles: true
+					} ) );
 
-		it( 'creates dropdown#panelView out of DropdownPanelView', () => {
-			expect( dropdownView.panelView ).to.be.instanceOf( DropdownPanelView );
-		} );
+					// Dropdown is still open.
+					expect( dropdownView.isOpen ).to.be.true;
+				} );
+			} );
 
-		it( 'creates dropdown#buttonView out of SplitButtonView', () => {
-			expect( dropdownView.buttonView ).to.be.instanceOf( SplitButtonView );
-		} );
+			describe( 'closeDropdownOnExecute()', () => {
+				beforeEach( () => {
+					dropdownView.render();
+					document.body.appendChild( dropdownView.element );
+				} );
 
-		it( 'binds button attributes to the model', () => {
-			const modelDef = {
-				label: 'foo',
-				isOn: false,
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
+				afterEach( () => {
+					dropdownView.element.remove();
+				} );
 
-			dropdownView = createDropdown( locale );
-			dropdownView.set( modelDef );
+				it( 'changes view#isOpen on view#execute', () => {
+					dropdownView.isOpen = true;
 
-			assertBinding( dropdownView.buttonView,
-				modelDef,
-				[
-					[ dropdownView, { label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true } ]
-				],
-				{ label: 'bar', isEnabled: false, isOn: true, withText: true, tooltip: true }
-			);
-		} );
+					dropdownView.fire( 'execute' );
+					expect( dropdownView.isOpen ).to.be.false;
 
-		it( 'binds button#isOn do dropdown #isOpen and model #isOn', () => {
-			const modelDef = {
-				label: 'foo',
-				isOn: false,
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
+					dropdownView.fire( 'execute' );
+					expect( dropdownView.isOpen ).to.be.false;
+				} );
+			} );
 
-			dropdownView = createDropdown( locale );
-			dropdownView.set( modelDef );
+			describe( 'focusDropdownContentsOnArrows()', () => {
+				let panelChildView;
 
-			dropdownView.isOpen = false;
-			expect( dropdownView.buttonView.isOn ).to.be.false;
+				beforeEach( () => {
+					panelChildView = new View();
+					panelChildView.setTemplate( { tag: 'div' } );
+					panelChildView.focus = () => {};
+					panelChildView.focusLast = () => {};
 
-			dropdownView.isOn = true;
-			expect( dropdownView.buttonView.isOn ).to.be.true;
+					dropdownView.panelView.children.add( panelChildView );
 
-			dropdownView.isOpen = true;
-			expect( dropdownView.buttonView.isOn ).to.be.true;
+					dropdownView.render();
+					document.body.appendChild( dropdownView.element );
+				} );
 
-			dropdownView.isOn = false;
-			expect( dropdownView.buttonView.isOn ).to.be.true;
-		} );
+				afterEach( () => {
+					dropdownView.element.remove();
+				} );
 
-		it( 'binds dropdown#isEnabled to the model', () => {
-			const modelDef = {
-				label: 'foo',
-				isEnabled: true,
-				withText: false,
-				tooltip: false
-			};
+				it( '"arrowdown" focuses the #innerPanelView if dropdown is open', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.arrowdown,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+					const spy = sinon.spy( panelChildView, 'focus' );
 
-			dropdownView = createDropdown( locale );
-			dropdownView.set( modelDef );
+					dropdownView.isOpen = false;
+					dropdownView.keystrokes.press( keyEvtData );
+					sinon.assert.notCalled( spy );
 
-			assertBinding( dropdownView,
-				{ isEnabled: true },
-				[
-					[ dropdownView, { isEnabled: false } ]
-				],
-				{ isEnabled: false }
-			);
-		} );
+					dropdownView.isOpen = true;
+					dropdownView.keystrokes.press( keyEvtData );
 
-		describe( '#buttonView', () => {
-			it( 'accepts locale', () => {
-				expect( dropdownView.buttonView.locale ).to.equal( locale );
-			} );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( '"arrowup" focuses the last #item in #innerPanelView if dropdown is open', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.arrowup,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+					const spy = sinon.spy( panelChildView, 'focusLast' );
+
+					dropdownView.isOpen = false;
+					dropdownView.keystrokes.press( keyEvtData );
+					sinon.assert.notCalled( spy );
 
-			it( 'returns SplitButtonView instance', () => {
-				expect( dropdownView.buttonView ).to.be.instanceof( SplitButtonView );
+					dropdownView.isOpen = true;
+					dropdownView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 		} );
-
-		addDefaultBehaviorTests();
 	} );
 
 	describe( 'addToolbarToDropdown()', () => {
@@ -381,137 +404,4 @@ describe( 'utils', () => {
 			} );
 		} );
 	} );
-
-	function addDefaultBehaviorTests() {
-		describe( 'hasDefaultBehavior', () => {
-			describe( 'closeDropdownOnBlur()', () => {
-				beforeEach( () => {
-					dropdownView.render();
-					document.body.appendChild( dropdownView.element );
-				} );
-
-				afterEach( () => {
-					dropdownView.element.remove();
-				} );
-
-				it( 'listens to view#isOpen and reacts to DOM events (valid target)', () => {
-					// Open the dropdown.
-					dropdownView.isOpen = true;
-					// Fire event from outside of the dropdown.
-					document.body.dispatchEvent( new Event( 'mousedown', {
-						bubbles: true
-					} ) );
-					// Closed the dropdown.
-					expect( dropdownView.isOpen ).to.be.false;
-					// Fire event from outside of the dropdown.
-					document.body.dispatchEvent( new Event( 'mousedown', {
-						bubbles: true
-					} ) );
-					// Dropdown is still closed.
-					expect( dropdownView.isOpen ).to.be.false;
-				} );
-
-				it( 'listens to view#isOpen and reacts to DOM events (invalid target)', () => {
-					// Open the dropdown.
-					dropdownView.isOpen = true;
-
-					// Event from view.element should be discarded.
-					dropdownView.element.dispatchEvent( new Event( 'mousedown', {
-						bubbles: true
-					} ) );
-
-					// Dropdown is still open.
-					expect( dropdownView.isOpen ).to.be.true;
-
-					// Event from within view.element should be discarded.
-					const child = document.createElement( 'div' );
-					dropdownView.element.appendChild( child );
-
-					child.dispatchEvent( new Event( 'mousedown', {
-						bubbles: true
-					} ) );
-
-					// Dropdown is still open.
-					expect( dropdownView.isOpen ).to.be.true;
-				} );
-			} );
-
-			describe( 'closeDropdownOnExecute()', () => {
-				beforeEach( () => {
-					dropdownView.render();
-					document.body.appendChild( dropdownView.element );
-				} );
-
-				afterEach( () => {
-					dropdownView.element.remove();
-				} );
-
-				it( 'changes view#isOpen on view#execute', () => {
-					dropdownView.isOpen = true;
-
-					dropdownView.fire( 'execute' );
-					expect( dropdownView.isOpen ).to.be.false;
-
-					dropdownView.fire( 'execute' );
-					expect( dropdownView.isOpen ).to.be.false;
-				} );
-			} );
-
-			describe( 'focusDropdownContentsOnArrows()', () => {
-				let panelChildView;
-
-				beforeEach( () => {
-					panelChildView = new View();
-					panelChildView.setTemplate( { tag: 'div' } );
-					panelChildView.focus = () => {};
-					panelChildView.focusLast = () => {};
-
-					// TODO: describe this as #contentView instead of #listView and #toolbarView
-					dropdownView.panelView.children.add( panelChildView );
-
-					dropdownView.render();
-					document.body.appendChild( dropdownView.element );
-				} );
-
-				afterEach( () => {
-					dropdownView.element.remove();
-				} );
-
-				it( '"arrowdown" focuses the #innerPanelView if dropdown is open', () => {
-					const keyEvtData = {
-						keyCode: keyCodes.arrowdown,
-						preventDefault: sinon.spy(),
-						stopPropagation: sinon.spy()
-					};
-					const spy = sinon.spy( panelChildView, 'focus' );
-
-					dropdownView.isOpen = false;
-					dropdownView.keystrokes.press( keyEvtData );
-					sinon.assert.notCalled( spy );
-
-					dropdownView.isOpen = true;
-					dropdownView.keystrokes.press( keyEvtData );
-
-					sinon.assert.calledOnce( spy );
-				} );
-
-				it( '"arrowup" focuses the last #item in #innerPanelView if dropdown is open', () => {
-					const keyEvtData = {
-						keyCode: keyCodes.arrowup,
-						preventDefault: sinon.spy(),
-						stopPropagation: sinon.spy()
-					};
-					const spy = sinon.spy( panelChildView, 'focusLast' );
-
-					dropdownView.isOpen = false;
-					dropdownView.keystrokes.press( keyEvtData );
-					sinon.assert.notCalled( spy );
-
-					dropdownView.isOpen = true;
-					dropdownView.keystrokes.press( keyEvtData );
-					sinon.assert.calledOnce( spy );
-				} );
-			} );
-		} );
-	}
 } );

+ 3 - 3
packages/ckeditor5-ui/theme/components/button/splitbutton.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-select) {
+.ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-arrow) {
 	border-top-right-radius: unset;
 	border-bottom-right-radius: unset;
 
@@ -12,7 +12,7 @@
 	}
 }
 
-.ck-rounded-corners .ck-splitbutton > .ck-splitbutton-select {
+.ck-rounded-corners .ck-splitbutton > .ck-splitbutton-arrow {
 	border-top-left-radius: unset;
 	border-bottom-left-radius: unset;
 }
@@ -21,7 +21,7 @@
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 
-	& .ck-splitbutton .ck-splitbutton-select svg {
+	& .ck-splitbutton .ck-splitbutton-arrow svg {
 		position: static;
 		top: initial;
 		transform: initial;