Merge pull request #547 from ckeditor/i/6110

Other: Rename `LabeledView` component to `LabeledFieldView`. See ckeditor/ckeditor5#6110.

BREAKING CHANGE: `LabeledView` component was renamed to `LabeledFieldView`. Also, its instance of a labeled component's view is available through `LabeledFieldView#fieldView`. It replaced `LabeledView#view`.

Author: jodator

src/labeledview/labeledview.js src/labeledfield/labeledfieldview.jssrc/labeledview/labeledview.js renamed to src/labeledfield/labeledfieldview.js

@@ -4,16 +4,16 @@
  */
 
 /**
- * @module ui/labeledview/labeledview
+ * @module ui/labeledfield/labeledfieldview
  */
 
 import View from '../view';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import LabelView from '../label/labelview';
-import '../../theme/components/labeledview/labeledview.css';
+import '../../theme/components/labeledfield/labeledfieldview.css';
 
 /**
- * The labeled view class. It can be used to enhance any view with the following features:
+ * The labeled field view class. It can be used to enhance any view with the following features:
  *
  * * a label,
  * * (optional) an error message,
@@ -25,16 +25,16 @@ import '../../theme/components/labeledview/labeledview.css';
  * The constructor of this class requires a callback that returns a view to be labeled. The callback
  * is called with unique ids that allow binding of DOM properties:
  *
- *		const labeledInputView = new LabeledView( locale, ( labeledView, viewUid, statusUid ) => {
- *			const inputView = new InputTextView( labeledView.locale );
+ *		const labeledInputView = new LabeledFieldView( locale, ( labeledFieldView, viewUid, statusUid ) => {
+ *			const inputView = new InputTextView( labeledFieldView.locale );
  *
  *			inputView.set( {
  *				id: viewUid,
  *				ariaDescribedById: statusUid
  *			} );
  *
- *			inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
- *			inputView.bind( 'hasError' ).to( labeledView, 'errorText', value => !!value );
+ *			inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+ *			inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
  *
  *			return inputView;
  *		} );
@@ -45,23 +45,23 @@ import '../../theme/components/labeledview/labeledview.css';
  *
  *		document.body.append( labeledInputView.element );
  *
- * See {@link module:ui/labeledview/utils} to discover ready–to–use labeled input helpers for common
+ * See {@link module:ui/labeledfield/utils} to discover ready–to–use labeled input helpers for common
  * UI components.
  *
  * @extends module:ui/view~View
  */
-export default class LabeledView extends View {
+export default class LabeledFieldView extends View {
 	/**
-	 * Creates an instance of the labeled view class using a provided creator function
+	 * Creates an instance of the labeled field view class using a provided creator function
 	 * that provides the view to be labeled.
 	 *
 	 * @param {module:utils/locale~Locale} locale The locale instance.
 	 * @param {Function} viewCreator A function that returns a {@link module:ui/view~View}
 	 * that will be labeled. The following arguments are passed to the creator function:
 	 *
-	 * * an instance of the `LabeledView` to allow binding observable properties,
-	 * * an UID string that connects the {@link #labelView label} and the labeled view in DOM,
-	 * * an UID string that connects the {@link #statusView status} and the labeled view in DOM.
+	 * * an instance of the `LabeledFieldView` to allow binding observable properties,
+	 * * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
+	 * * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
 	 */
 	constructor( locale, viewCreator ) {
 		super( locale );
@@ -70,11 +70,11 @@ export default class LabeledView extends View {
 		const statusUid = `ck-labeled-view-status-${ uid() }`;
 
 		/**
-		 * The view that gets labeled.
+		 * The field view that gets labeled.
 		 *
-		 * @member {module:ui/view~View} #view
+		 * @member {module:ui/view~View} #fieldView
 		 */
-		this.view = viewCreator( this, viewUid, statusUid );
+		this.fieldView = viewCreator( this, viewUid, statusUid );
 
 		/**
 		 * The text of the label.
@@ -94,19 +94,19 @@ export default class LabeledView extends View {
 
 		/**
 		 * The validation error text. When set, it will be displayed
-		 * next to the {@link #view} as a typical validation error message.
+		 * next to the {@link #fieldView} as a typical validation error message.
 		 * Set it to `null` to hide the message.
 		 *
 		 * **Note:** Setting this property to anything but `null` will automatically
-		 * make the `hasError` of the {@link #view} `true`.
+		 * make the `hasError` of the {@link #fieldView} `true`.
 		 *
 		 * @observable
 		 * @member {String|null} #errorText
 		 */
 		this.set( 'errorText', null );
 
 		/**
-		 * The additional information text displayed next to the {@link #view} which can
+		 * The additional information text displayed next to the {@link #fieldView} which can
 		 * be used to inform the user about its purpose, provide help or hints.
 		 *
 		 * Set it to `null` to hide the message.
@@ -136,7 +136,7 @@ export default class LabeledView extends View {
 		this.labelView = this._createLabelView( viewUid );
 
 		/**
-		 * The status view for the {@link #view}. It displays {@link #errorText} and
+		 * The status view for the {@link #fieldView}. It displays {@link #errorText} and
 		 * {@link #infoText}.
 		 *
 		 * @member {module:ui/view~View} #statusView
@@ -175,7 +175,7 @@ export default class LabeledView extends View {
 			},
 			children: [
 				this.labelView,
-				this.view,
+				this.fieldView,
 				this.statusView
 			]
 		} );
@@ -199,10 +199,10 @@ export default class LabeledView extends View {
 
 	/**
 	 * Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
-	 * next to the {@link #view}. See {@link #_statusText}.
+	 * next to the {@link #fieldView}. See {@link #_statusText}.
 	 *
 	 * @private
-	 * @param {String} statusUid Unique id of the status, shared with the {@link #view view's}
+	 * @param {String} statusUid Unique id of the status, shared with the {@link #fieldView view's}
 	 * `aria-describedby` attribute.
 	 * @returns {module:ui/view~View}
 	 */
@@ -233,9 +233,9 @@ export default class LabeledView extends View {
 	}
 
 	/**
-	 * Focuses the {@link #view}.
+	 * Focuses the {@link #fieldView}.
 	 */
 	focus() {
-		this.view.focus();
+		this.fieldView.focus();
 	}
 }

src/labeledview/utils.js src/labeledfield/utils.jssrc/labeledview/utils.js renamed to src/labeledfield/utils.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module ui/labeledview/utils
+ * @module ui/labeledfield/utils
  */
 
 import InputTextView from '../inputtext/inputtextview';
@@ -14,7 +14,7 @@ import { createDropdown } from '../dropdown/utils';
  * A helper for creating labeled inputs.
  *
  * It creates an instance of a {@link module:ui/inputtext/inputtextview~InputTextView input text} that is
- * logically related to a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in DOM.
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
  *
  * The helper does the following:
  *
@@ -25,31 +25,31 @@ import { createDropdown } from '../dropdown/utils';
  *
  * Usage:
  *
- *		const labeledInputView = new LabeledView( locale, createLabeledDropdown );
+ *		const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
  *		console.log( labeledInputView.view ); // An input instance.
  *
- * @param {module:ui/labeledview/labeledview~LabeledView} labeledView The instance of the labeled view.
+ * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  * @param {String} viewUid An UID string that allows DOM logical connection between the
- * {@link module:ui/labeledview/labeledview~LabeledView#labelView labeled view's label} and the input.
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
  * @param {String} statusUid An UID string that allows DOM logical connection between the
- * {@link module:ui/labeledview/labeledview~LabeledView#statusView labeled view's status} and the input.
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
  * @returns {module:ui/inputtext/inputtextview~InputTextView} The input text view instance.
  */
-export function createLabeledInputText( labeledView, viewUid, statusUid ) {
-	const inputView = new InputTextView( labeledView.locale );
+export function createLabeledInputText( labeledFieldView, viewUid, statusUid ) {
+	const inputView = new InputTextView( labeledFieldView.locale );
 
 	inputView.set( {
 		id: viewUid,
 		ariaDescribedById: statusUid
 	} );
 
-	inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
-	inputView.bind( 'hasError' ).to( labeledView, 'errorText', value => !!value );
+	inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+	inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
 
 	inputView.on( 'input', () => {
 		// UX: Make the error text disappear and disable the error indicator as the user
 		// starts fixing the errors.
-		labeledView.errorText = null;
+		labeledFieldView.errorText = null;
 	} );
 
 	return inputView;
@@ -59,7 +59,7 @@ export function createLabeledInputText( labeledView, viewUid, statusUid ) {
  * A helper for creating labeled dropdowns.
  *
  * It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} that is
- * logically related to a {@link module:ui/labeledview/labeledview~LabeledView labeled view}.
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled field view}.
  *
  * The helper does the following:
  *
@@ -68,25 +68,25 @@ export function createLabeledInputText( labeledView, viewUid, statusUid ) {
  *
  * Usage:
  *
- *		const labeledInputView = new LabeledView( locale, createLabeledDropdown );
+ *		const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
  *		console.log( labeledInputView.view ); // A dropdown instance.
  *
- * @param {module:ui/labeledview/labeledview~LabeledView} labeledView The instance of the labeled view.
+ * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  * @param {String} viewUid An UID string that allows DOM logical connection between the
- * {@link module:ui/labeledview/labeledview~LabeledView#labelView labeled view label} and the dropdown.
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view label} and the dropdown.
  * @param {String} statusUid An UID string that allows DOM logical connection between the
- * {@link module:ui/labeledview/labeledview~LabeledView#statusView labeled view status} and the dropdown.
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view status} and the dropdown.
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  */
-export function createLabeledDropdown( labeledView, viewUid, statusUid ) {
-	const dropdownView = createDropdown( labeledView.locale );
+export function createLabeledDropdown( labeledFieldView, viewUid, statusUid ) {
+	const dropdownView = createDropdown( labeledFieldView.locale );
 
 	dropdownView.set( {
 		id: viewUid,
 		ariaDescribedById: statusUid
 	} );
 
-	dropdownView.bind( 'isEnabled' ).to( labeledView );
+	dropdownView.bind( 'isEnabled' ).to( labeledFieldView );
 
 	return dropdownView;
 }