8
0
Pārlūkot izejas kodu

Change name LabeledView -> LabeledFieldView.

The commit also changes references #view -> #field.
panr 5 gadi atpakaļ
vecāks
revīzija
6859a205ef

+ 34 - 34
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 
-import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
-import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
+import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview';
+import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
@@ -465,57 +465,57 @@ export default class TableCellPropertiesView extends View {
 		// -- Style ---------------------------------------------------
 
 		const styleLabels = getBorderStyleLabels( t );
-		const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
+		const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown );
 		borderStyleDropdown.set( {
 			label: t( 'Style' ),
 			class: 'ck-table-form__border-style'
 		} );
 
-		borderStyleDropdown.view.buttonView.set( {
+		borderStyleDropdown.field.buttonView.set( {
 			isOn: false,
 			withText: true,
 			tooltip: t( 'Style' )
 		} );
 
-		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
+		borderStyleDropdown.field.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
 			return styleLabels[ value ? value : 'none' ];
 		} );
 
-		borderStyleDropdown.view.on( 'execute', evt => {
+		borderStyleDropdown.field.on( 'execute', evt => {
 			this.borderStyle = evt.source._borderStyleValue;
 		} );
 
-		addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
+		addListToDropdown( borderStyleDropdown.field, getBorderStyleDefinitions( this ) );
 
 		// -- Width ---------------------------------------------------
 
-		const borderWidthInput = new LabeledView( locale, createLabeledInputText );
+		const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		borderWidthInput.set( {
 			label: t( 'Width' ),
 			class: 'ck-table-form__border-width'
 		} );
 
-		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
+		borderWidthInput.field.bind( 'value' ).to( this, 'borderWidth' );
 		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
-		borderWidthInput.view.on( 'input', () => {
-			this.borderWidth = borderWidthInput.view.element.value;
+		borderWidthInput.field.on( 'input', () => {
+			this.borderWidth = borderWidthInput.field.element.value;
 		} );
 
 		// -- Color ---------------------------------------------------
 
-		const borderColorInput = new LabeledView( locale, colorInputCreator );
+		const borderColorInput = new LabeledFieldView( locale, colorInputCreator );
 
 		borderColorInput.set( {
 			label: t( 'Color' ),
 			class: 'ck-table-form__border-color'
 		} );
 
-		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
+		borderColorInput.field.bind( 'value' ).to( this, 'borderColor' );
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 
-		borderColorInput.view.on( 'input', () => {
-			this.borderColor = borderColorInput.view.value;
+		borderColorInput.field.on( 'input', () => {
+			this.borderColor = borderColorInput.field.value;
 		} );
 
 		// Reset the border color and width fields when style is "none".
@@ -541,7 +541,7 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #backgroundInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView}
 	 */
 	_createBackgroundField() {
 		const locale = this.locale;
@@ -551,16 +551,16 @@ export default class TableCellPropertiesView extends View {
 			columns: 5
 		} );
 
-		const backgroundInput = new LabeledView( locale, colorInputCreator );
+		const backgroundInput = new LabeledFieldView( locale, colorInputCreator );
 
 		backgroundInput.set( {
 			label: t( 'Background' ),
 			class: 'ck-table-cell-properties-form__background'
 		} );
 
-		backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
-		backgroundInput.view.on( 'input', () => {
-			this.backgroundColor = backgroundInput.view.value;
+		backgroundInput.field.bind( 'value' ).to( this, 'backgroundColor' );
+		backgroundInput.field.on( 'input', () => {
+			this.backgroundColor = backgroundInput.field.value;
 		} );
 
 		return backgroundInput;
@@ -573,7 +573,7 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #heightInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView}
 	 */
 	_createDimensionFields() {
 		const locale = this.locale;
@@ -586,16 +586,16 @@ export default class TableCellPropertiesView extends View {
 
 		// -- Width ---------------------------------------------------
 
-		const widthInput = new LabeledView( locale, createLabeledInputText );
+		const widthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		widthInput.set( {
 			label: t( 'Width' ),
 			class: 'ck-table-form__dimensions-row__width'
 		} );
 
-		widthInput.view.bind( 'value' ).to( this, 'width' );
-		widthInput.view.on( 'input', () => {
-			this.width = widthInput.view.element.value;
+		widthInput.field.bind( 'value' ).to( this, 'width' );
+		widthInput.field.on( 'input', () => {
+			this.width = widthInput.field.element.value;
 		} );
 
 		// -- Operator ---------------------------------------------------
@@ -615,16 +615,16 @@ export default class TableCellPropertiesView extends View {
 
 		// -- Height ---------------------------------------------------
 
-		const heightInput = new LabeledView( locale, createLabeledInputText );
+		const heightInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		heightInput.set( {
 			label: t( 'Height' ),
 			class: 'ck-table-form__dimensions-row__height'
 		} );
 
-		heightInput.view.bind( 'value' ).to( this, 'height' );
-		heightInput.view.on( 'input', () => {
-			this.height = heightInput.view.element.value;
+		heightInput.field.bind( 'value' ).to( this, 'height' );
+		heightInput.field.on( 'input', () => {
+			this.height = heightInput.field.element.value;
 		} );
 
 		return {
@@ -641,22 +641,22 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #paddingInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView}
 	 */
 	_createPaddingField() {
 		const locale = this.locale;
 		const t = this.t;
 
-		const paddingInput = new LabeledView( locale, createLabeledInputText );
+		const paddingInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		paddingInput.set( {
 			label: t( 'Padding' ),
 			class: 'ck-table-cell-properties-form__padding'
 		} );
 
-		paddingInput.view.bind( 'value' ).to( this, 'padding' );
-		paddingInput.view.on( 'input', () => {
-			this.padding = paddingInput.view.element.value;
+		paddingInput.field.bind( 'value' ).to( this, 'padding' );
+		paddingInput.field.on( 'input', () => {
+			this.padding = paddingInput.field.element.value;
 		} );
 
 		return paddingInput;

+ 29 - 29
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 
-import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
-import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
+import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview';
+import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
@@ -412,57 +412,57 @@ export default class TablePropertiesView extends View {
 		// -- Style ---------------------------------------------------
 
 		const styleLabels = getBorderStyleLabels( this.t );
-		const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
+		const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown );
 		borderStyleDropdown.set( {
 			label: t( 'Style' ),
 			class: 'ck-table-form__border-style'
 		} );
 
-		borderStyleDropdown.view.buttonView.set( {
+		borderStyleDropdown.field.buttonView.set( {
 			isOn: false,
 			withText: true,
 			tooltip: t( 'Style' )
 		} );
 
-		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
+		borderStyleDropdown.field.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
 			return styleLabels[ value ? value : 'none' ];
 		} );
 
-		borderStyleDropdown.view.on( 'execute', evt => {
+		borderStyleDropdown.field.on( 'execute', evt => {
 			this.borderStyle = evt.source._borderStyleValue;
 		} );
 
-		addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
+		addListToDropdown( borderStyleDropdown.field, getBorderStyleDefinitions( this ) );
 
 		// -- Width ---------------------------------------------------
 
-		const borderWidthInput = new LabeledView( locale, createLabeledInputText );
+		const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		borderWidthInput.set( {
 			label: t( 'Width' ),
 			class: 'ck-table-form__border-width'
 		} );
 
-		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
+		borderWidthInput.field.bind( 'value' ).to( this, 'borderWidth' );
 		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
-		borderWidthInput.view.on( 'input', () => {
-			this.borderWidth = borderWidthInput.view.element.value;
+		borderWidthInput.field.on( 'input', () => {
+			this.borderWidth = borderWidthInput.field.element.value;
 		} );
 
 		// -- Color ---------------------------------------------------
 
-		const borderColorInput = new LabeledView( locale, colorInputCreator );
+		const borderColorInput = new LabeledFieldView( locale, colorInputCreator );
 
 		borderColorInput.set( {
 			label: t( 'Color' ),
 			class: 'ck-table-form__border-color'
 		} );
 
-		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
+		borderColorInput.field.bind( 'value' ).to( this, 'borderColor' );
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 
-		borderColorInput.view.on( 'input', () => {
-			this.borderColor = borderColorInput.view.value;
+		borderColorInput.field.on( 'input', () => {
+			this.borderColor = borderColorInput.field.value;
 		} );
 
 		// Reset the border color and width fields when style is "none".
@@ -488,7 +488,7 @@ export default class TablePropertiesView extends View {
 	 * * {@link #backgroundInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView}
 	 */
 	_createBackgroundField() {
 		const backgroundInputCreator = getLabeledColorInputCreator( {
@@ -498,16 +498,16 @@ export default class TablePropertiesView extends View {
 		const locale = this.locale;
 		const t = this.t;
 
-		const backgroundInput = new LabeledView( locale, backgroundInputCreator );
+		const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );
 
 		backgroundInput.set( {
 			label: t( 'Background' ),
 			class: 'ck-table-properties-form__background'
 		} );
 
-		backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
-		backgroundInput.view.on( 'input', () => {
-			this.backgroundColor = backgroundInput.view.value;
+		backgroundInput.field.bind( 'value' ).to( this, 'backgroundColor' );
+		backgroundInput.field.on( 'input', () => {
+			this.backgroundColor = backgroundInput.field.value;
 		} );
 
 		return backgroundInput;
@@ -520,7 +520,7 @@ export default class TablePropertiesView extends View {
 	 * * {@link #heightInput}.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView}
 	 */
 	_createDimensionFields() {
 		const locale = this.locale;
@@ -533,16 +533,16 @@ export default class TablePropertiesView extends View {
 
 		// -- Width ---------------------------------------------------
 
-		const widthInput = new LabeledView( locale, createLabeledInputText );
+		const widthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		widthInput.set( {
 			label: t( 'Width' ),
 			class: 'ck-table-form__dimensions-row__width'
 		} );
 
-		widthInput.view.bind( 'value' ).to( this, 'width' );
-		widthInput.view.on( 'input', () => {
-			this.width = widthInput.view.element.value;
+		widthInput.field.bind( 'value' ).to( this, 'width' );
+		widthInput.field.on( 'input', () => {
+			this.width = widthInput.field.element.value;
 		} );
 
 		// -- Operator ---------------------------------------------------
@@ -562,16 +562,16 @@ export default class TablePropertiesView extends View {
 
 		// -- Height ---------------------------------------------------
 
-		const heightInput = new LabeledView( locale, createLabeledInputText );
+		const heightInput = new LabeledFieldView( locale, createLabeledInputText );
 
 		heightInput.set( {
 			label: t( 'Height' ),
 			class: 'ck-table-form__dimensions-row__height'
 		} );
 
-		heightInput.view.bind( 'value' ).to( this, 'height' );
-		heightInput.view.on( 'input', () => {
-			this.height = heightInput.view.element.value;
+		heightInput.field.bind( 'value' ).to( this, 'height' );
+		heightInput.field.on( 'input', () => {
+			this.height = heightInput.field.element.value;
 		} );
 
 		return {

+ 2 - 2
packages/ckeditor5-table/src/ui/utils.js

@@ -397,7 +397,7 @@ export const defaultColors = [
  *
  * For given options, it returns a function that creates an instance of a
  * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
- * a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in the DOM.
+ * a {@link module:ui/labeledfieldview/labeledfieldview~LabeledFieldView labeled view} in the DOM.
  *
  * The helper does the following:
  *
@@ -413,7 +413,7 @@ export const defaultColors = [
  *			columns: 3,
  *		} );
  *
- *		const labeledInputView = new LabeledView( locale, colorInputCreator );
+ *		const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
  *		console.log( labeledInputView.view ); // A color input instance.
  *
  * @private

+ 58 - 58
packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js

@@ -6,7 +6,7 @@
 /* globals Event */
 
 import TableCellPropertiesView from '../../../src/tablecellproperties/ui/tablecellpropertiesview';
-import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
+import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -90,11 +90,11 @@ describe( 'table cell properties', () => {
 			} );
 
 			it( 'should create child views (and references)', () => {
-				expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledView );
-				expect( view.borderWidthInput ).to.be.instanceOf( LabeledView );
-				expect( view.borderColorInput ).to.be.instanceOf( LabeledView );
-				expect( view.backgroundInput ).to.be.instanceOf( LabeledView );
-				expect( view.paddingInput ).to.be.instanceOf( LabeledView );
+				expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledFieldView );
+				expect( view.borderWidthInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.borderColorInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.backgroundInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.paddingInput ).to.be.instanceOf( LabeledFieldView );
 				expect( view.horizontalAlignmentToolbar ).to.be.instanceOf( ToolbarView );
 				expect( view.verticalAlignmentToolbar ).to.be.instanceOf( ToolbarView );
 
@@ -136,29 +136,29 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should have a button with properties set', () => {
-							expect(	labeledDropdown.view.buttonView.isOn ).to.be.false;
-							expect(	labeledDropdown.view.buttonView.withText ).to.be.true;
-							expect(	labeledDropdown.view.buttonView.tooltip ).to.equal( 'Style' );
+							expect(	labeledDropdown.field.buttonView.isOn ).to.be.false;
+							expect(	labeledDropdown.field.buttonView.withText ).to.be.true;
+							expect(	labeledDropdown.field.buttonView.tooltip ).to.equal( 'Style' );
 						} );
 
 						it( 'should bind button\'s label to #borderStyle property', () => {
 							view.borderStyle = 'dotted';
-							expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dotted' );
+							expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dotted' );
 
 							view.borderStyle = 'dashed';
-							expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dashed' );
+							expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dashed' );
 						} );
 
 						it( 'should change #borderStyle when executed', () => {
-							labeledDropdown.view.listView.items.first.children.first.fire( 'execute' );
+							labeledDropdown.field.listView.items.first.children.first.fire( 'execute' );
 							expect( view.borderStyle ).to.equal( '' );
 
-							labeledDropdown.view.listView.items.last.children.first.fire( 'execute' );
+							labeledDropdown.field.listView.items.last.children.first.fire( 'execute' );
 							expect( view.borderStyle ).to.equal( 'outset' );
 						} );
 
 						it( 'should come with a set of pre–defined border styles', () => {
-							expect( labeledDropdown.view.listView.items.map( item => {
+							expect( labeledDropdown.field.listView.items.map( item => {
 								return item.children.first.label;
 							} ) ).to.have.ordered.members( [
 								'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset'
@@ -185,17 +185,17 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Width' );
 							expect( labeledInput.class ).to.equal( 'ck-table-form__border-width' );
 						} );
 
 						it( 'should reflect #borderWidth property', () => {
 							view.borderWidth = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.borderWidth = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
@@ -207,12 +207,12 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should update #borderWidth on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderWidth ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderWidth ).to.equal( 'bar' );
 						} );
 					} );
@@ -225,12 +225,12 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( ColorInputView );
+							expect( labeledInput.field ).to.be.instanceOf( ColorInputView );
 							expect( labeledInput.label ).to.equal( 'Color' );
 						} );
 
 						it( 'should get the color configuration', () => {
-							expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [
+							expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [
 								{
 									color: 'rgb(255,0,0)',
 									label: 'Red',
@@ -250,10 +250,10 @@ describe( 'table cell properties', () => {
 
 						it( 'should reflect #borderColor property', () => {
 							view.borderColor = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.borderColor = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
@@ -265,12 +265,12 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should update #borderColor on DOM "input" event', () => {
-							labeledInput.view.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderColor ).to.equal( 'foo' );
 
-							labeledInput.view.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderColor ).to.equal( 'bar' );
 						} );
 					} );
@@ -292,13 +292,13 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( ColorInputView );
+							expect( labeledInput.field ).to.be.instanceOf( ColorInputView );
 							expect( labeledInput.label ).to.equal( 'Background' );
 							expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__background' );
 						} );
 
 						it( 'should get the color configuration', () => {
-							expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [
+							expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [
 								{
 									color: 'rgb(0,255,0)',
 									label: 'Green',
@@ -311,19 +311,19 @@ describe( 'table cell properties', () => {
 
 						it( 'should reflect #backgroundColor property', () => {
 							view.backgroundColor = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.backgroundColor = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #backgroundColor on DOM "input" event', () => {
-							labeledInput.view.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.backgroundColor ).to.equal( 'foo' );
 
-							labeledInput.view.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.backgroundColor ).to.equal( 'bar' );
 						} );
 					} );
@@ -349,26 +349,26 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Width' );
 							expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' );
 						} );
 
 						it( 'should reflect #width property', () => {
 							view.width = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.width = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #width on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.width ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.width ).to.equal( 'bar' );
 						} );
 					} );
@@ -381,26 +381,26 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Height' );
 							expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' );
 						} );
 
 						it( 'should reflect #height property', () => {
 							view.height = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.height = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #height on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.height ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.height ).to.equal( 'bar' );
 						} );
 					} );
@@ -423,26 +423,26 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Padding' );
 							expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__padding' );
 						} );
 
 						it( 'should reflect #padding property', () => {
 							view.padding = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.padding = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #padding on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.padding ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.padding ).to.equal( 'bar' );
 						} );
 					} );

+ 54 - 54
packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js

@@ -6,7 +6,7 @@
 /* globals Event */
 
 import TablePropertiesView from '../../../src/tableproperties/ui/tablepropertiesview';
-import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
+import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -90,12 +90,12 @@ describe( 'table properties', () => {
 			} );
 
 			it( 'should create child views (and references)', () => {
-				expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledView );
-				expect( view.borderWidthInput ).to.be.instanceOf( LabeledView );
-				expect( view.borderColorInput ).to.be.instanceOf( LabeledView );
-				expect( view.backgroundInput ).to.be.instanceOf( LabeledView );
-				expect( view.widthInput ).to.be.instanceOf( LabeledView );
-				expect( view.heightInput ).to.be.instanceOf( LabeledView );
+				expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledFieldView );
+				expect( view.borderWidthInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.borderColorInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.backgroundInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.widthInput ).to.be.instanceOf( LabeledFieldView );
+				expect( view.heightInput ).to.be.instanceOf( LabeledFieldView );
 				expect( view.alignmentToolbar ).to.be.instanceOf( ToolbarView );
 
 				expect( view.saveButtonView ).to.be.instanceOf( ButtonView );
@@ -136,29 +136,29 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should have a button with properties set', () => {
-							expect(	labeledDropdown.view.buttonView.isOn ).to.be.false;
-							expect(	labeledDropdown.view.buttonView.withText ).to.be.true;
-							expect(	labeledDropdown.view.buttonView.tooltip ).to.equal( 'Style' );
+							expect(	labeledDropdown.field.buttonView.isOn ).to.be.false;
+							expect(	labeledDropdown.field.buttonView.withText ).to.be.true;
+							expect(	labeledDropdown.field.buttonView.tooltip ).to.equal( 'Style' );
 						} );
 
 						it( 'should bind button\'s label to #borderStyle property', () => {
 							view.borderStyle = 'dotted';
-							expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dotted' );
+							expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dotted' );
 
 							view.borderStyle = 'dashed';
-							expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dashed' );
+							expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dashed' );
 						} );
 
 						it( 'should change #borderStyle when executed', () => {
-							labeledDropdown.view.listView.items.first.children.first.fire( 'execute' );
+							labeledDropdown.field.listView.items.first.children.first.fire( 'execute' );
 							expect( view.borderStyle ).to.equal( '' );
 
-							labeledDropdown.view.listView.items.last.children.first.fire( 'execute' );
+							labeledDropdown.field.listView.items.last.children.first.fire( 'execute' );
 							expect( view.borderStyle ).to.equal( 'outset' );
 						} );
 
 						it( 'should come with a set of pre–defined border styles', () => {
-							expect( labeledDropdown.view.listView.items.map( item => {
+							expect( labeledDropdown.field.listView.items.map( item => {
 								return item.children.first.label;
 							} ) ).to.have.ordered.members( [
 								'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset'
@@ -185,17 +185,17 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Width' );
 							expect( labeledInput.class ).to.equal( 'ck-table-form__border-width' );
 						} );
 
 						it( 'should reflect #borderWidth property', () => {
 							view.borderWidth = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.borderWidth = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
@@ -207,12 +207,12 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should update #borderWidth on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderWidth ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderWidth ).to.equal( 'bar' );
 						} );
 					} );
@@ -225,12 +225,12 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( ColorInputView );
+							expect( labeledInput.field ).to.be.instanceOf( ColorInputView );
 							expect( labeledInput.label ).to.equal( 'Color' );
 						} );
 
 						it( 'should get the color configuration', () => {
-							expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [
+							expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [
 								{
 									color: 'rgb(255,0,0)',
 									label: 'Red',
@@ -249,15 +249,15 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should obtain the columns configuration', () => {
-							expect( labeledInput.view.options.columns ).to.equal( 5 );
+							expect( labeledInput.field.options.columns ).to.equal( 5 );
 						} );
 
 						it( 'should reflect #borderColor property', () => {
 							view.borderColor = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.borderColor = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
@@ -269,12 +269,12 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should update #borderColor on DOM "input" event', () => {
-							labeledInput.view.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderColor ).to.equal( 'foo' );
 
-							labeledInput.view.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.borderColor ).to.equal( 'bar' );
 						} );
 					} );
@@ -296,13 +296,13 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( ColorInputView );
+							expect( labeledInput.field ).to.be.instanceOf( ColorInputView );
 							expect( labeledInput.label ).to.equal( 'Background' );
 							expect( labeledInput.class ).to.equal( 'ck-table-properties-form__background' );
 						} );
 
 						it( 'should get the color configuration', () => {
-							expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [
+							expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [
 								{
 									color: 'rgb(0,255,0)',
 									label: 'Green',
@@ -314,24 +314,24 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should obtain the columns configuration', () => {
-							expect( labeledInput.view.options.columns ).to.equal( 5 );
+							expect( labeledInput.field.options.columns ).to.equal( 5 );
 						} );
 
 						it( 'should reflect #backgroundColor property', () => {
 							view.backgroundColor = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.backgroundColor = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #backgroundColor on DOM "input" event', () => {
-							labeledInput.view.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.backgroundColor ).to.equal( 'foo' );
 
-							labeledInput.view.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.backgroundColor ).to.equal( 'bar' );
 						} );
 					} );
@@ -357,26 +357,26 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Width' );
 							expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' );
 						} );
 
 						it( 'should reflect #width property', () => {
 							view.width = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.width = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #width on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.width ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.width ).to.equal( 'bar' );
 						} );
 					} );
@@ -389,26 +389,26 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be created', () => {
-							expect( labeledInput.view ).to.be.instanceOf( InputTextView );
+							expect( labeledInput.field ).to.be.instanceOf( InputTextView );
 							expect( labeledInput.label ).to.equal( 'Height' );
 							expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' );
 						} );
 
 						it( 'should reflect #height property', () => {
 							view.height = 'foo';
-							expect( labeledInput.view.value ).to.equal( 'foo' );
+							expect( labeledInput.field.value ).to.equal( 'foo' );
 
 							view.height = 'bar';
-							expect( labeledInput.view.value ).to.equal( 'bar' );
+							expect( labeledInput.field.value ).to.equal( 'bar' );
 						} );
 
 						it( 'should update #height on DOM "input" event', () => {
-							labeledInput.view.element.value = 'foo';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'foo';
+							labeledInput.field.fire( 'input' );
 							expect( view.height ).to.equal( 'foo' );
 
-							labeledInput.view.element.value = 'bar';
-							labeledInput.view.fire( 'input' );
+							labeledInput.field.element.value = 'bar';
+							labeledInput.field.fire( 'input' );
 							expect( view.height ).to.equal( 'bar' );
 						} );
 					} );