Merge pull request #345 from ckeditor/i/6110

Other: Replaced `LabeledInputView` with `LabeledFieldView`. See ckeditor/ckeditor5#6110.

Author: jodator

src/imagetextalternative/imagetextalternativeui.js

@@ -117,7 +117,7 @@ export default class ImageTextAlternativeUI extends Plugin {
 
 		this.listenTo( this._form, 'submit', () => {
 			editor.execute( 'imageTextAlternative', {
-				newValue: this._form.labeledInput.inputView.element.value
+				newValue: this._form.labeledInput.fieldView.element.value
 			} );
 
 			this._hideForm( true );
@@ -177,9 +177,9 @@ export default class ImageTextAlternativeUI extends Plugin {
 		// stays unaltered) and re-opened it without changing the value of the command, they would see the
 		// old value instead of the actual value of the command.
 		// https://github.com/ckeditor/ckeditor5-image/issues/114
-		labeledInput.value = labeledInput.inputView.element.value = command.value || '';
+		labeledInput.fieldView.value = labeledInput.fieldView.element.value = command.value || '';
 
-		this._form.labeledInput.select();
+		this._form.labeledInput.fieldView.select();
 	}
 
 	/**

src/imagetextalternative/ui/textalternativeformview.js

@@ -11,8 +11,9 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
-import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
+
+import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
+import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
 
 import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
@@ -54,9 +55,9 @@ export default class TextAlternativeFormView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
-		 * A textarea with a label.
+		 * An input with a label.
 		 *
-		 * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} #labeledTextarea
+		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView} #labeledInput
 		 */
 		this.labeledInput = this._createLabeledInputView();
 
@@ -181,14 +182,14 @@ export default class TextAlternativeFormView extends View {
 	 * Creates an input with a label.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView}
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled field view instance.
 	 */
 	_createLabeledInputView() {
 		const t = this.locale.t;
-		const labeledInput = new LabeledInputView( this.locale, InputTextView );
+		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
 
 		labeledInput.label = t( 'Text alternative' );
-		labeledInput.inputView.placeholder = t( 'Text alternative' );
+		labeledInput.fieldView.placeholder = t( 'Text alternative' );
 
 		return labeledInput;
 	}

tests/imagetextalternative/imagetextalternativeui.js

@@ -78,43 +78,42 @@ describe( 'ImageTextAlternativeUI', () => {
 		} );
 
 		it( 'should set alt attribute value to textarea and select it', () => {
-			const spy = sinon.spy( form.labeledInput, 'select' );
+			const spy = sinon.spy( form.labeledInput.fieldView, 'select' );
 
 			setData( model, '[<image src="" alt="foo bar"></image>]' );
 
 			button.fire( 'execute' );
 			sinon.assert.calledOnce( spy );
-			expect( form.labeledInput.value ).equals( 'foo bar' );
+			expect( form.labeledInput.fieldView.value ).equals( 'foo bar' );
 		} );
 
 		it( 'should set empty text to textarea and select it when there is no alt attribute', () => {
-			const spy = sinon.spy( form.labeledInput, 'select' );
+			const spy = sinon.spy( form.labeledInput.fieldView, 'select' );
 
 			setData( model, '[<image src=""></image>]' );
 
 			button.fire( 'execute' );
 			sinon.assert.calledOnce( spy );
-			expect( form.labeledInput.value ).equals( '' );
+			expect( form.labeledInput.fieldView.value ).equals( '' );
 		} );
 	} );
 
 	describe( 'balloon panel form', () => {
 		// https://github.com/ckeditor/ckeditor5-image/issues/114
 		it( 'should make sure the input always stays in sync with the value of the command', () => {
 			const button = editor.ui.componentFactory.create( 'imageTextAlternative' );
-
 			// Mock the value of the input after some past editing.
-			form.labeledInput.value = 'foo';
+			form.labeledInput.fieldView.value = 'foo';
 
 			// Mock the user using the form, changing the value but clicking "Cancel".
 			// so the command's value is not updated.
-			form.labeledInput.inputView.element.value = 'This value was canceled.';
+			form.labeledInput.fieldView.element.value = 'This value was canceled.';
 
 			// Mock the user editing the same image once again.
 			setData( model, '[<image src="" alt="foo"></image>]' );
 
 			button.fire( 'execute' );
-			expect( form.labeledInput.inputView.element.value ).to.equal( 'foo' );
+			expect( form.labeledInput.fieldView.element.value ).to.equal( 'foo' );
 		} );
 
 		it( 'should execute command on submit', () => {
@@ -123,7 +122,7 @@ describe( 'ImageTextAlternativeUI', () => {
 
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, 'imageTextAlternative', {
-				newValue: form.labeledInput.inputView.element.value
+				newValue: form.labeledInput.fieldView.element.value
 			} );
 		} );