Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #547 from ckeditor/i/6110
Browse files Browse the repository at this point in the history 
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`.
  • Loading branch information
@jodator
jodator authored Mar 26, 2020
2 parents e070119 + c5f7e82 commit 5a7aca7
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 318 deletions.
50 changes: 25 additions & 25 deletions src/labeledview/labeledview.js → src/labeledfield/labeledfieldview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
* } );
Expand All @@ -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 );
Expand All @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -175,7 +175,7 @@ export default class LabeledView extends View {
},
children: [
this.labelView,
this.view,
this.fieldView,
this.statusView
]
} );
Expand All @@ -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}
*/
Expand Down Expand Up @@ -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();
}
}
38 changes: 19 additions & 19 deletions src/labeledview/utils.js → src/labeledfield/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

/**
* @module ui/labeledview/utils
* @module ui/labeledfield/utils
*/

import InputTextView from '../inputtext/inputtextview';
Expand All @@ -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:
*
Expand All @@ -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;
Expand All @@ -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:
*
Expand All @@ -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;
}
Loading

0 comments on commit 5a7aca7

Please sign in to comment.