Merge pull request #188 from ckeditor/t/187

Other: Made the image text alternative form buttons thicker with a fill color and no background. Closes #187.

Author: dkonopka

src/imagetextalternative/ui/textalternativeformview.js

@@ -65,15 +65,15 @@ export default class TextAlternativeFormView extends View {
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView} #saveButtonView
 		 */
-		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon );
+		this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save' );
 		this.saveButtonView.type = 'submit';
 
 		/**
 		 * A button used to cancel the form.
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView} #cancelButtonView
 		 */
-		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.
@@ -104,14 +104,6 @@ export default class TextAlternativeFormView extends View {
 			}
 		} );
 
-		this.saveButtonView.extendTemplate( {
-			attributes: {
-				class: [
-					'ck-button-action'
-				]
-			}
-		} );
-
 		this.setTemplate( {
 			tag: 'form',
 
@@ -158,10 +150,11 @@ export default class TextAlternativeFormView 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] The 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( {
@@ -170,6 +163,12 @@ export default class TextAlternativeFormView extends View {
 			tooltip: true
 		} );
 
+		button.extendTemplate( {
+			attributes: {
+				class: className
+			}
+		} );
+
 		if ( eventName ) {
 			button.delegate( 'execute' ).to( this, eventName );
 		}

tests/imagetextalternative/ui/textalternativeformview.js

@@ -43,6 +43,11 @@ describe( 'TextAlternativeFormView', () => {
 			expect( view.labeledInput ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
+
+			view.render();
+
+			expect( view.saveButtonView.element.classList.contains( 'ck-button-save' ) ).to.be.true;
+			expect( view.cancelButtonView.element.classList.contains( 'ck-button-cancel' ) ).to.be.true;
 		} );
 
 		it( 'should create #_focusCycler instance', () => {