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).
ckeditor · Feb 20, 2018 · d490d61 · d490d61
2 parents 34fad4d + 68587a4
commit d490d61
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/src/dropdown/button/splitbuttonview.js b/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' )
 				]
 			},
 

diff --git a/tests/dropdown/button/splitbuttonview.js b/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 = {

diff --git a/theme/components/dropdown/splitbutton.css b/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;
+}