Merge pull request #185 from ckeditor/t/ckeditor5-image/187

Other: Used .ck-button_save and _cancel CSS classes to make the link form view buttons colorful (see ckeditor/ckeditor5-image#187).

Author: dkonopka

src/ui/linkformview.js

@@ -67,15 +67,15 @@ export default class LinkFormView extends View {
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
-		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon );
+		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save' );
 		this.saveButtonView.type = 'submit';
 
 		/**
 		 * The Cancel button view.
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
-		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'cancel' );
+		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
 
 		/**
 		 * A collection of views which can be focused in the form.
@@ -184,10 +184,11 @@ export default class LinkFormView extends View {
 	 * @private
 	 * @param {String} label The button label.
 	 * @param {String} icon The button's icon.
+	 * @param {String} className The additional button CSS class name.
 	 * @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
 	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
 	 */
-	_createButton( label, icon, eventName ) {
+	_createButton( label, icon, className, eventName ) {
 		const button = new ButtonView( this.locale );
 
 		button.set( {
@@ -196,6 +197,12 @@ export default class LinkFormView extends View {
 			tooltip: true
 		} );
 
+		button.extendTemplate( {
+			attributes: {
+				class: className
+			}
+		} );
+
 		if ( eventName ) {
 			button.delegate( 'execute' ).to( this, eventName );
 		}

tests/ui/linkformview.js

@@ -35,6 +35,9 @@ describe( 'LinkFormView', () => {
 			expect( view.saveButtonView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 
+			expect( view.saveButtonView.element.classList.contains( 'ck-button-save' ) ).to.be.true;
+			expect( view.cancelButtonView.element.classList.contains( 'ck-button-cancel' ) ).to.be.true;
+
 			expect( view._unboundChildren.get( 0 ) ).to.equal( view.urlInputView );
 			expect( view._unboundChildren.get( 1 ) ).to.equal( view.saveButtonView );
 			expect( view._unboundChildren.get( 2 ) ).to.equal( view.cancelButtonView );