Merge pull request #130 from ckeditor/t/129

Other: Manual tests should be aligned to the newest dropdown API (ckeditor/ckeditor5-ui#356). Minor refactoring in the drop-down ecosystem. Closes #129.

tests/manual/theme.html

@@ -5,9 +5,9 @@
 			line-height: 3em;
 		}
 
-		*[id*="icon"] .ck-icon + .ck-icon,
-		*[id*="button"] .ck-button + .ck-button,
-		*[id*="dropdown"] .ck-dropdown + .ck-dropdown {
+		*:not(.ck-toolbar) > .ck-icon + .ck-icon,
+		*:not(.ck-toolbar) > .ck-button + .ck-button:not(.ck-splitbutton__arrow),
+		*:not(.ck-toolbar) > .ck-dropdown + .ck-dropdown {
 			margin-left: 0.3em;
 		}
 

tests/manual/theme.js

@@ -14,7 +14,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
-import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import { createDropdown, addListToDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
@@ -23,6 +23,7 @@ import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinp
 
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
+import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 class TextView extends View {
 	constructor() {
@@ -236,7 +237,7 @@ function renderDropdown() {
 		items: collection
 	} ) );
 
-	ui.buttonDropdown.add( buttonDropdown( {
+	ui.buttonDropdown.add( toolbarDropdown( {
 		label: 'Normal state',
 		isEnabled: true,
 		buttons: [
@@ -253,7 +254,7 @@ function renderDropdown() {
 		]
 	} ) );
 
-	ui.buttonDropdown.add( buttonDropdown( {
+	ui.buttonDropdown.add( toolbarDropdown( {
 		label: 'Disabled',
 		isEnabled: false,
 		buttons: [
@@ -291,6 +292,11 @@ function renderToolbar() {
 			icon: boldIcon
 		} ),
 		listDropdown(),
+		splitButtonDropdown( {
+			label: 'Split button dropdown',
+			withText: false,
+			icon: boldIcon
+		} ),
 		button()
 	] ) );
 
@@ -409,23 +415,44 @@ function listDropdown( {
 	items = new Collection( { idProperty: 'label' } )
 } = {} ) {
 	const dropdown = createDropdown( {} );
-	dropdown.set( { label, isEnabled, isOn, withText } );
-
 	addListToDropdown( dropdown, items );
 
+	dropdown.buttonView.set( { label, isEnabled, isOn, withText } );
+
 	return dropdown;
 }
 
-function buttonDropdown( {
+function toolbarDropdown( {
 	label = 'Button dropdown',
 	isEnabled = true,
 	isOn = false,
 	withText = true,
 	isVertical = true,
 	buttons = []
 } = {} ) {
-	const model = new Model( { label, isEnabled, buttons, isVertical, isOn, withText } );
-	const dropdown = createButtonDropdown( model, {} );
+	const dropdown = createDropdown( {} );
+
+	addToolbarToDropdown( dropdown, buttons );
+
+	dropdown.buttonView.set( { label, isEnabled, isVertical, isOn, withText } );
+
+	return dropdown;
+}
+
+function splitButtonDropdown( {
+	label = 'Button dropdown',
+	icon = undefined,
+	isEnabled = true,
+	isOn = false,
+	withText = true,
+	isVertical = true,
+	buttons = []
+} = {} ) {
+	const dropdown = createDropdown( {}, SplitButtonView );
+
+	addToolbarToDropdown( dropdown, buttons );
+
+	dropdown.buttonView.set( { icon, label, isEnabled, isVertical, isOn, withText } );
 
 	return dropdown;
 }

theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -8,7 +8,7 @@
 @import "../../../mixins/_shadow.css";
 
 :root {
-	--ck-dropdown-icon-size: calc(0.5 * var(--ck-icon-size));
+	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 }
 
 .ck-dropdown {
@@ -17,7 +17,7 @@
 
 	& .ck-dropdown__arrow {
 		right: var(--ck-spacing-standard);
-		width: var(--ck-dropdown-icon-size);
+		width: var(--ck-dropdown-arrow-size);
 	}
 
 	&.ck-disabled .ck-dropdown__arrow {

theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck-splitbutton {
+	& > .ck-splitbutton__action {
+		/* Don't round the first button on the right side */
+		@mixin ck-rounded-corners {
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
+		}
+	}
+
+	& > .ck-splitbutton__arrow {
+		/* Disable a double border between the button and the arrow button. */
+		border-left: 0;
+
+		/* Don't round the arrow button on the right side */
+		@mixin ck-rounded-corners {
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
+
+		& svg {
+			width: var(--ck-dropdown-arrow-size);
+		}
+	}
+}

theme/ckeditor5-ui/components/dropdown/toolbardropdown.css

@@ -5,11 +5,4 @@
 
 .ck-toolbar-dropdown .ck-toolbar {
 	border: 0;
-	padding: 0;
-
-	& .ck-button {
-		border-radius: 0;
-		border: 0;
-		margin: 0;
-	}
 }