浏览代码

Merge pull request #373 from ckeditor/t/ckeditor5-theme-lark/134

Other: Added a CSS class to the SplitButtonView when the arrow is on (see ckeditor/ckeditor5-theme-lark#134).
Damian Konopka 7 年之前
父节点
当前提交
8a542ed3e2

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

@@ -109,7 +109,8 @@ export default class SplitButtonView extends View {
 			attributes: {
 				class: [
 					'ck-splitbutton',
-					bind.if( 'isVisible', 'ck-hidden', value => !value )
+					bind.if( 'isVisible', 'ck-hidden', value => !value ),
+					this.arrowView.bindTemplate.if( 'isOn', 'ck-splitbutton_open' )
 				]
 			},
 

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

@@ -52,6 +52,14 @@ describe( 'SplitButtonView', () => {
 			expect( view.actionView.element.classList.contains( 'ck-hidden' ) ).to.be.false;
 		} );
 
+		it( 'binds arrowView#isOn to the template', () => {
+			view.arrowView.isOn = true;
+			expect( view.element.classList.contains( 'ck-splitbutton_open' ) ).to.be.true;
+
+			view.arrowView.isOn = false;
+			expect( view.element.classList.contains( 'ck-splitbutton_open' ) ).to.be.false;
+		} );
+
 		describe( 'activates keyboard navigation for the toolbar', () => {
 			it( 'so "arrowright" on view#arrowView does nothing', () => {
 				const keyEvtData = {

+ 7 - 0
packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "../tooltip/mixins/_tooltip.css";
+
 .ck-splitbutton {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
@@ -11,3 +13,8 @@
 		z-index: calc(var(--ck-z-default) + 1);
 	}
 }
+
+/* Disable tooltips for the buttons when the button is "open" */
+.ck-splitbutton.ck-splitbutton_open > .ck-button {
+	@mixin ck-tooltip_disabled;
+}