Internal: A minor refactoring in the dropdown ecosystem (see ckeditor…

…/ckeditor5-theme-lark#129).
ckeditor · Feb 9, 2018 · 052bfb1 · 052bfb1
2 parents 31a498a + edfb92f
commit 052bfb1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 33 deletions.
diff --git a/src/dropdown/button/splitbuttonview.js b/src/dropdown/button/splitbuttonview.js
@@ -165,9 +165,9 @@ export default class SplitButtonView extends View {
 	 * @returns {module:ui/button/buttonview~ButtonView}
 	 */
 	_createActionView() {
-		const buttonView = new ButtonView();
+		const actionView = new ButtonView();
 
-		buttonView.bind(
+		actionView.bind(
 			'icon',
 			'isEnabled',
 			'isOn',
@@ -180,9 +180,15 @@ export default class SplitButtonView extends View {
 			'withText'
 		).to( this );
 
-		buttonView.delegate( 'execute' ).to( this );
+		actionView.extendTemplate( {
+			attributes: {
+				class: 'ck-splitbutton__action'
+			}
+		} );
+
+		actionView.delegate( 'execute' ).to( this );
 
-		return buttonView;
+		return actionView;
 	}
 
 	/**
@@ -199,7 +205,7 @@ export default class SplitButtonView extends View {
 
 		arrowView.extendTemplate( {
 			attributes: {
-				class: 'ck-splitbutton-arrow'
+				class: 'ck-splitbutton__arrow'
 			}
 		} );
 

diff --git a/tests/dropdown/button/splitbuttonview.js b/tests/dropdown/button/splitbuttonview.js
@@ -27,11 +27,12 @@ describe( 'SplitButtonView', () => {
 
 		it( 'creates view#actionView', () => {
 			expect( view.actionView ).to.be.instanceOf( ButtonView );
+			expect( view.actionView.element.classList.contains( 'ck-splitbutton__action' ) ).to.be.true;
 		} );
 
 		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.element.classList.contains( 'ck-splitbutton__arrow' ) ).to.be.true;
 			expect( view.arrowView.icon ).to.be.not.undefined;
 		} );
 

diff --git a/theme/components/dropdown/splitbutton.css b/theme/components/dropdown/splitbutton.css
@@ -3,29 +3,11 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-rounded-corners .ck-splitbutton > .ck-button:not(.ck-splitbutton-arrow) {
-	border-top-right-radius: unset;
-	border-bottom-right-radius: unset;
-
-	&:focus {
-		z-index: calc(var(--ck-z-default) + 1);
-	}
-}
-
-.ck-rounded-corners .ck-splitbutton > .ck-splitbutton-arrow {
-	border-top-left-radius: unset;
-	border-bottom-left-radius: unset;
-}
-
-.ck-dropdown {
+.ck-splitbutton {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 
-	& .ck-splitbutton .ck-splitbutton-arrow svg {
-		position: static;
-		top: initial;
-		transform: initial;
-		right: auto;
-		width: var(--ck-dropdown-icon-size);
+	& .ck-splitbutton__action:focus {
+		z-index: calc(var(--ck-z-default) + 1);
 	}
 }
diff --git a/theme/components/dropdown/toolbardropdown.css b/theme/components/dropdown/toolbardropdown.css
@@ -6,12 +6,6 @@
 .ck-toolbar-dropdown {
 	& .ck-toolbar {
 		flex-wrap: nowrap;
-
-		& .ck-toolbar__separator {
-			height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
-			margin-top: 0;
-			margin-left: var(--ck-spacing-small);
-		}
 	}
 
 	& .ck-dropdown__panel .ck-button {