Merge pull request #256 from ckeditor/i/6110

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

src/linkui.js

@@ -146,15 +146,15 @@ export default class LinkUI extends Plugin {
 
 		const formView = new LinkFormView( editor.locale, linkCommand.manualDecorators );
 
-		formView.urlInputView.bind( 'value' ).to( linkCommand, 'value' );
+		formView.urlInputView.fieldView.bind( 'value' ).to( linkCommand, 'value' );
 
 		// Form elements should be read-only when corresponding commands are disabled.
 		formView.urlInputView.bind( 'isReadOnly' ).to( linkCommand, 'isEnabled', value => !value );
 		formView.saveButtonView.bind( 'isEnabled' ).to( linkCommand );
 
 		// Execute link command after clicking the "Save" button.
 		this.listenTo( formView, 'submit', () => {
-			editor.execute( 'link', formView.urlInputView.inputView.element.value, formView.getDecoratorSwitchesState() );
+			editor.execute( 'link', formView.urlInputView.fieldView.value, formView.getDecoratorSwitchesState() );
 			this._closeFormView();
 		} );
 
@@ -298,16 +298,16 @@ export default class LinkUI extends Plugin {
 
 		// Select input when form view is currently visible.
 		if ( this._balloon.visibleView === this.formView ) {
-			this.formView.urlInputView.select();
+			this.formView.urlInputView.fieldView.select();
 		}
 
 		// Make sure that each time the panel shows up, the URL field remains in sync with the value of
-		// the command. If the user typed in the input, then canceled the balloon (`urlInputView#value` stays
+		// the command. If the user typed in the input, then canceled the balloon (`urlInputView.fieldView#value` stays
 		// unaltered) and re-opened it without changing the value of the link command (e.g. because they
 		// clicked the same link), they would see the old value instead of the actual value of the command.
 		// https://github.com/ckeditor/ckeditor5-link/issues/78
 		// https://github.com/ckeditor/ckeditor5-link/issues/123
-		this.formView.urlInputView.inputView.element.value = linkCommand.value || '';
+		this.formView.urlInputView.fieldView.value = linkCommand.value || '';
 	}
 
 	/**

src/ui/linkformview.js

@@ -12,8 +12,9 @@ import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
-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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -65,7 +66,7 @@ export default class LinkFormView extends View {
 		/**
 		 * The URL input view.
 		 *
-		 * @member {module:ui/labeledinput/labeledinputview~LabeledInputView}
+		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 		 */
 		this.urlInputView = this._createUrlInput();
 
@@ -207,15 +208,15 @@ export default class LinkFormView extends View {
 	 * Creates a labeled input view.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView} Labeled input view instance.
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled field view instance.
 	 */
 	_createUrlInput() {
 		const t = this.locale.t;
 
-		const labeledInput = new LabeledInputView( this.locale, InputTextView );
+		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
 
 		labeledInput.label = t( 'Link URL' );
-		labeledInput.inputView.placeholder = 'https://example.com';
+		labeledInput.fieldView.placeholder = 'https://example.com';
 
 		return labeledInput;
 	}

tests/linkui.js

@@ -236,20 +236,20 @@ describe( 'LinkUI', () => {
 			setModelData( editor.model, '<paragraph><$text linkHref="url">f[]oo</$text></paragraph>' );
 
 			// Mock some leftover value **in DOM**, e.g. after previous editing.
-			formView.urlInputView.inputView.element.value = 'leftover';
+			formView.urlInputView.fieldView.value = 'leftover';
 
 			linkUIFeature._showUI();
 			actionsView.fire( 'edit' );
 
-			expect( formView.urlInputView.inputView.element.value ).to.equal( 'url' );
+			expect( formView.urlInputView.fieldView.value ).to.equal( 'url' );
 		} );
 
 		// https://github.com/ckeditor/ckeditor5-link/issues/123
 		it( 'should make sure the URL input in the #formView always stays in sync with the value of the command (no link selected)', () => {
 			setModelData( editor.model, '<paragraph>f[]oo</paragraph>' );
 
 			linkUIFeature._showUI();
-			expect( formView.urlInputView.inputView.element.value ).to.equal( '' );
+			expect( formView.urlInputView.fieldView.value ).to.equal( '' );
 		} );
 
 		it( 'should optionally force `main` stack to be visible', () => {
@@ -823,7 +823,7 @@ describe( 'LinkUI', () => {
 				linkUIFeature._showUI();
 				linkUIFeature._removeFormView();
 
-				const selectSpy = testUtils.sinon.spy( formView.urlInputView, 'select' );
+				const selectSpy = testUtils.sinon.spy( formView.urlInputView.fieldView, 'select' );
 				actionsView.fire( 'edit' );
 
 				expect( balloon.visibleView ).to.equal( formView );
@@ -913,19 +913,19 @@ describe( 'LinkUI', () => {
 			it( 'should bind formView.urlInputView#value to link command value', () => {
 				const command = editor.commands.get( 'link' );
 
-				expect( formView.urlInputView.value ).to.undefined;
+				expect( formView.urlInputView.fieldView.value ).to.be.undefined;
 
 				command.value = 'http://cksource.com';
-				expect( formView.urlInputView.value ).to.equal( 'http://cksource.com' );
+				expect( formView.urlInputView.fieldView.value ).to.equal( 'http://cksource.com' );
 			} );
 
 			it( 'should execute link command on formView#submit event', () => {
 				const executeSpy = testUtils.sinon.spy( editor, 'execute' );
 
-				formView.urlInputView.value = 'http://ckeditor.com';
-				expect( formView.urlInputView.inputView.element.value ).to.equal( 'http://ckeditor.com' );
+				formView.urlInputView.fieldView.value = 'http://ckeditor.com';
+				expect( formView.urlInputView.fieldView.value ).to.equal( 'http://ckeditor.com' );
 
-				formView.urlInputView.inputView.element.value = 'http://cksource.com';
+				formView.urlInputView.fieldView.value = 'http://cksource.com';
 				formView.fire( 'submit' );
 
 				expect( executeSpy.calledOnce ).to.be.true;
@@ -1056,7 +1056,7 @@ describe( 'LinkUI', () => {
 					const executeSpy = testUtils.sinon.spy( editor, 'execute' );
 
 					setModelData( model, 'f[<$text linkHref="url" linkIsFoo="true">ooba</$text>]r' );
-					expect( formView.urlInputView.inputView.element.value ).to.equal( 'url' );
+					expect( formView.urlInputView.fieldView.element.value ).to.equal( 'url' );
 					expect( formView.getDecoratorSwitchesState() ).to.deep.equal( { linkIsFoo: true } );
 
 					formView.fire( 'submit' );

tests/ui/linkformview.js

@@ -81,7 +81,7 @@ describe( 'LinkFormView', () => {
 
 		describe( 'url input view', () => {
 			it( 'has placeholder', () => {
-				expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' );
+				expect( view.urlInputView.fieldView.placeholder ).to.equal( 'https://example.com' );
 			} );
 		} );