8
0
Pārlūkot izejas kodu

Added a "ck-splitbutton__action" class to the split button's action button. Moved visual split button styles to theme-lark.

Aleksander Nowodzinski 7 gadi atpakaļ
vecāks
revīzija
24fdcd7882

+ 11 - 5
packages/ckeditor5-ui/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'
 			}
 		} );
 

+ 2 - 1
packages/ckeditor5-ui/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;
 		} );
 

+ 3 - 21
packages/ckeditor5-ui/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);
 	}
 }