Redesign on state in menu and dropdowns

packages/ckeditor5-basic-styles/src/bold/boldui.ts

@@ -30,7 +30,6 @@ export default class BoldUI extends Plugin {
 	public init(): void {
 		const editor = this.editor;
 		const t = editor.locale.t;
-		const command = editor.commands.get( BOLD )!;
 		const createButton = getButtonCreator( {
 			editor,
 			commandName: BOLD,
@@ -48,21 +47,9 @@ export default class BoldUI extends Plugin {
 				tooltip: true
 			} );
 
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + BOLD, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + BOLD, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/code/codeui.ts

@@ -33,8 +33,6 @@ export default class CodeUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command = editor.commands.get( CODE )!;
-
 		const t = editor.locale.t;
 		const createButton = getButtonCreator( {
 			editor,
@@ -52,22 +50,9 @@ export default class CodeUI extends Plugin {
 				tooltip: true
 			} );
 
-			// Bind button model to command.
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + CODE, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + CODE, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/italic/italicui.ts

@@ -31,7 +31,6 @@ export default class ItalicUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command = editor.commands.get( ITALIC )!;
 		const t = editor.locale.t;
 		const createButton = getButtonCreator( {
 			editor,
@@ -50,21 +49,9 @@ export default class ItalicUI extends Plugin {
 				tooltip: true
 			} );
 
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + ITALIC, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + ITALIC, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.ts

@@ -31,7 +31,6 @@ export default class StrikethroughUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command = editor.commands.get( STRIKETHROUGH )!;
 		const t = editor.locale.t;
 		const createButton = getButtonCreator( {
 			editor,
@@ -50,22 +49,9 @@ export default class StrikethroughUI extends Plugin {
 				tooltip: true
 			} );
 
-			// Bind button model to command.
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + STRIKETHROUGH, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + STRIKETHROUGH, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/subscript/subscriptui.ts

@@ -32,7 +32,6 @@ export default class SubscriptUI extends Plugin {
 	public init(): void {
 		const editor = this.editor;
 		const t = editor.locale.t;
-		const command = editor.commands.get( SUBSCRIPT )!;
 
 		const createButton = getButtonCreator( {
 			editor,
@@ -50,22 +49,9 @@ export default class SubscriptUI extends Plugin {
 				tooltip: true
 			} );
 
-			// Bind button model to command.
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + SUBSCRIPT, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + SUBSCRIPT, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/superscript/superscriptui.ts

@@ -32,7 +32,6 @@ export default class SuperscriptUI extends Plugin {
 	public init(): void {
 		const editor = this.editor;
 		const t = editor.locale.t;
-		const command = editor.commands.get( SUPERSCRIPT )!;
 		const createButton = getButtonCreator( {
 			editor,
 			commandName: SUPERSCRIPT,
@@ -49,22 +48,9 @@ export default class SuperscriptUI extends Plugin {
 				tooltip: true
 			} );
 
-			// Bind button model to command.
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + SUPERSCRIPT, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + SUPERSCRIPT, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/underline/underlineui.ts

@@ -31,7 +31,6 @@ export default class UnderlineUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command = editor.commands.get( UNDERLINE )!;
 		const t = editor.locale.t;
 		const createButton = getButtonCreator( {
 			editor,
@@ -50,21 +49,9 @@ export default class UnderlineUI extends Plugin {
 				tooltip: true
 			} );
 
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:' + UNDERLINE, () => {
-			const buttonView = createButton( MenuBarMenuListItemButtonView );
-
-			buttonView.set( {
-				role: 'menuitemcheckbox'
-			} );
-
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
-			return buttonView;
-		} );
+		editor.ui.componentFactory.add( 'menuBar:' + UNDERLINE, () => createButton( MenuBarMenuListItemButtonView ) );
 	}
 }

packages/ckeditor5-basic-styles/src/utils.ts

@@ -9,7 +9,7 @@
 
 import type { Editor, Plugin } from 'ckeditor5/src/core.js';
 import type AttributeCommand from './attributecommand.js';
-import type { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { ListItemButtonView, type ButtonView, type MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 
 /**
  * Returns a function that creates a (toolbar or menu bar) button for a basic style feature.
@@ -36,6 +36,13 @@ export function getButtonCreator( {
 		} );
 
 		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+		view.bind( 'isOn' ).to( command, 'value' );
+
+		if ( view instanceof ListItemButtonView ) {
+			view.set( {
+				role: 'menuitemcheckbox'
+			} );
+		}
 
 		// Execute the command.
 		plugin.listenTo( view, 'execute', () => {

packages/ckeditor5-block-quote/src/blockquoteui.ts

@@ -9,7 +9,6 @@
 
 import { Plugin, icons } from 'ckeditor5/src/core.js';
 import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import type BlockQuoteCommand from './blockquotecommand.js';
 
 import '../theme/blockquote.css';
 
@@ -33,7 +32,6 @@ export default class BlockQuoteUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const command: BlockQuoteCommand = editor.commands.get( 'blockQuote' )!;
 
 		editor.ui.componentFactory.add( 'blockQuote', () => {
 			const buttonView = this._createButton( ButtonView );
@@ -42,13 +40,18 @@ export default class BlockQuoteUI extends Plugin {
 				tooltip: true
 			} );
 
-			// Bind button model to command.
-			buttonView.bind( 'isOn' ).to( command, 'value' );
-
 			return buttonView;
 		} );
 
-		editor.ui.componentFactory.add( 'menuBar:blockQuote', () => this._createButton( MenuBarMenuListItemButtonView ) );
+		editor.ui.componentFactory.add( 'menuBar:blockQuote', () => {
+			const buttonView = this._createButton( MenuBarMenuListItemButtonView );
+
+			buttonView.set( {
+				role: 'menuitemcheckbox'
+			} );
+
+			return buttonView;
+		} );
 	}
 
 	/**
@@ -68,6 +71,7 @@ export default class BlockQuoteUI extends Plugin {
 		} );
 
 		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+		view.bind( 'isOn' ).to( command, 'value' );
 
 		// Execute the command.
 		this.listenTo( view, 'execute', () => {

packages/ckeditor5-find-and-replace/src/findandreplaceui.ts

@@ -214,6 +214,15 @@ export default class FindAndReplaceUI extends Plugin {
 	private _createDialogButtonForMenuBar(): MenuBarMenuListItemButtonView {
 		const buttonView = this._createButton( MenuBarMenuListItemButtonView );
 		const dialogPlugin = this.editor.plugins.get( 'Dialog' );
+		const dialog = this.editor.plugins.get( 'Dialog' );
+
+		buttonView.set( {
+			role: 'menuitemcheckbox',
+			isToggleable: true
+		} );
+
+		// Button should be on when the find and replace dialog is opened.
+		buttonView.bind( 'isOn' ).to( dialog, 'id', id => id === 'findAndReplace' );
 
 		buttonView.on( 'execute', () => {
 			if ( dialogPlugin.id === 'findAndReplace' ) {

packages/ckeditor5-find-and-replace/tests/findandreplaceui.js

@@ -122,6 +122,10 @@ describe( 'FindAndReplaceUI', () => {
 					} );
 
 					testButton();
+
+					it( 'should have proper role set', () => {
+						expect( button.role ).to.be.equal( 'menuitemcheckbox' );
+					} );
 				} );
 
 				function testButton() {
@@ -139,6 +143,16 @@ describe( 'FindAndReplaceUI', () => {
 							sinon.assert.callOrder( disableCssTransitionsSpy, selectSpy, enableCssTransitionsSpy );
 						} );
 
+						it( 'should be bound to dialog id', () => {
+							dialogPlugin.id = 'findAndReplace';
+
+							expect( button.isOn ).to.be.true;
+
+							dialogPlugin.id = null;
+
+							expect( button.isOn ).to.be.false;
+						} );
+
 						it( 'the form should be reset', () => {
 							const spy = sinon.spy( form, 'reset' );
 

packages/ckeditor5-highlight/src/highlightui.ts

@@ -291,9 +291,10 @@ export default class HighlightUI extends Plugin {
 					isToggleable: true
 				} );
 
+				buttonView.iconView.fillColor = option.color;
+
 				buttonView.delegate( 'execute' ).to( menuView );
 				buttonView.bind( 'isOn' ).to( command, 'value', value => value === option.model );
-				buttonView.iconView.bind( 'fillColor' ).to( buttonView, 'isOn', value => value ? 'transparent' : option.color );
 
 				buttonView.on( 'execute', () => {
 					editor.execute( 'highlight', { value: option.model } );

packages/ckeditor5-highlight/tests/highlightui.js

@@ -425,32 +425,6 @@ describe( 'HighlightUI', () => {
 				] );
 			} );
 
-			it( 'should bind #fillColor to #isOn', () => {
-				command.value = 'pinkMarker';
-
-				expect( dumpItems( buttonView => buttonView.iconView.fillColor ) ).to.have.deep.ordered.members( [
-					[ 'Yellow marker', 'var(--ck-highlight-marker-yellow)' ],
-					[ 'Green marker', 'var(--ck-highlight-marker-green)' ],
-					[ 'Pink marker', 'transparent' ],
-					[ 'Blue marker', 'var(--ck-highlight-marker-blue)' ],
-					[ 'Red pen', 'var(--ck-highlight-pen-red)' ],
-					[ 'Green pen', 'var(--ck-highlight-pen-green)' ],
-					[ 'Remove highlight', '' ]
-				] );
-
-				command.value = 'redPen';
-
-				expect( dumpItems( buttonView => buttonView.iconView.fillColor ) ).to.have.deep.ordered.members( [
-					[ 'Yellow marker', 'var(--ck-highlight-marker-yellow)' ],
-					[ 'Green marker', 'var(--ck-highlight-marker-green)' ],
-					[ 'Pink marker', 'var(--ck-highlight-marker-pink)' ],
-					[ 'Blue marker', 'var(--ck-highlight-marker-blue)' ],
-					[ 'Red pen', 'transparent' ],
-					[ 'Green pen', 'var(--ck-highlight-pen-green)' ],
-					[ 'Remove highlight', '' ]
-				] );
-			} );
-
 			it( 'should delegate #execute from an item to the menu', () => {
 				const spy = sinon.spy();