ソースを参照

Merge branch 'master' into i/6406

Marek Lewandowski 5 年 前
コミット
6bc0a16520

+ 36 - 35
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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 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/labeledfield/labeledfieldview';
+import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
@@ -28,7 +28,8 @@ import {
 	getLabeledColorInputCreator
 	getLabeledColorInputCreator
 } from '../../ui/utils';
 } from '../../ui/utils';
 import FormRowView from '../../ui/formrowview';
 import FormRowView from '../../ui/formrowview';
-import FormHeaderView from '../../ui/formheaderview';
+
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
 
 
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
@@ -465,57 +466,57 @@ export default class TableCellPropertiesView extends View {
 		// -- Style ---------------------------------------------------
 		// -- Style ---------------------------------------------------
 
 
 		const styleLabels = getBorderStyleLabels( t );
 		const styleLabels = getBorderStyleLabels( t );
-		const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
+		const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown );
 		borderStyleDropdown.set( {
 		borderStyleDropdown.set( {
 			label: t( 'Style' ),
 			label: t( 'Style' ),
 			class: 'ck-table-form__border-style'
 			class: 'ck-table-form__border-style'
 		} );
 		} );
 
 
-		borderStyleDropdown.view.buttonView.set( {
+		borderStyleDropdown.fieldView.buttonView.set( {
 			isOn: false,
 			isOn: false,
 			withText: true,
 			withText: true,
 			tooltip: t( 'Style' )
 			tooltip: t( 'Style' )
 		} );
 		} );
 
 
-		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
+		borderStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
 			return styleLabels[ value ? value : 'none' ];
 			return styleLabels[ value ? value : 'none' ];
 		} );
 		} );
 
 
-		borderStyleDropdown.view.on( 'execute', evt => {
+		borderStyleDropdown.fieldView.on( 'execute', evt => {
 			this.borderStyle = evt.source._borderStyleValue;
 			this.borderStyle = evt.source._borderStyleValue;
 		} );
 		} );
 
 
-		addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
+		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
 
 
 		// -- Width ---------------------------------------------------
 		// -- Width ---------------------------------------------------
 
 
-		const borderWidthInput = new LabeledView( locale, createLabeledInputText );
+		const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		borderWidthInput.set( {
 		borderWidthInput.set( {
 			label: t( 'Width' ),
 			label: t( 'Width' ),
 			class: 'ck-table-form__border-width'
 			class: 'ck-table-form__border-width'
 		} );
 		} );
 
 
-		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
+		borderWidthInput.fieldView.bind( 'value' ).to( this, 'borderWidth' );
 		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
-		borderWidthInput.view.on( 'input', () => {
-			this.borderWidth = borderWidthInput.view.element.value;
+		borderWidthInput.fieldView.on( 'input', () => {
+			this.borderWidth = borderWidthInput.fieldView.element.value;
 		} );
 		} );
 
 
 		// -- Color ---------------------------------------------------
 		// -- Color ---------------------------------------------------
 
 
-		const borderColorInput = new LabeledView( locale, colorInputCreator );
+		const borderColorInput = new LabeledFieldView( locale, colorInputCreator );
 
 
 		borderColorInput.set( {
 		borderColorInput.set( {
 			label: t( 'Color' ),
 			label: t( 'Color' ),
 			class: 'ck-table-form__border-color'
 			class: 'ck-table-form__border-color'
 		} );
 		} );
 
 
-		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
+		borderColorInput.fieldView.bind( 'value' ).to( this, 'borderColor' );
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 
 
-		borderColorInput.view.on( 'input', () => {
-			this.borderColor = borderColorInput.view.value;
+		borderColorInput.fieldView.on( 'input', () => {
+			this.borderColor = borderColorInput.fieldView.value;
 		} );
 		} );
 
 
 		// Reset the border color and width fields when style is "none".
 		// Reset the border color and width fields when style is "none".
@@ -541,7 +542,7 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #backgroundInput}.
 	 * * {@link #backgroundInput}.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 	 */
 	 */
 	_createBackgroundField() {
 	_createBackgroundField() {
 		const locale = this.locale;
 		const locale = this.locale;
@@ -551,16 +552,16 @@ export default class TableCellPropertiesView extends View {
 			columns: 5
 			columns: 5
 		} );
 		} );
 
 
-		const backgroundInput = new LabeledView( locale, colorInputCreator );
+		const backgroundInput = new LabeledFieldView( locale, colorInputCreator );
 
 
 		backgroundInput.set( {
 		backgroundInput.set( {
 			label: t( 'Background' ),
 			label: t( 'Background' ),
 			class: 'ck-table-cell-properties-form__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.fieldView.bind( 'value' ).to( this, 'backgroundColor' );
+		backgroundInput.fieldView.on( 'input', () => {
+			this.backgroundColor = backgroundInput.fieldView.value;
 		} );
 		} );
 
 
 		return backgroundInput;
 		return backgroundInput;
@@ -573,7 +574,7 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #heightInput}.
 	 * * {@link #heightInput}.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 	 */
 	 */
 	_createDimensionFields() {
 	_createDimensionFields() {
 		const locale = this.locale;
 		const locale = this.locale;
@@ -586,16 +587,16 @@ export default class TableCellPropertiesView extends View {
 
 
 		// -- Width ---------------------------------------------------
 		// -- Width ---------------------------------------------------
 
 
-		const widthInput = new LabeledView( locale, createLabeledInputText );
+		const widthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		widthInput.set( {
 		widthInput.set( {
 			label: t( 'Width' ),
 			label: t( 'Width' ),
 			class: 'ck-table-form__dimensions-row__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.fieldView.bind( 'value' ).to( this, 'width' );
+		widthInput.fieldView.on( 'input', () => {
+			this.width = widthInput.fieldView.element.value;
 		} );
 		} );
 
 
 		// -- Operator ---------------------------------------------------
 		// -- Operator ---------------------------------------------------
@@ -615,16 +616,16 @@ export default class TableCellPropertiesView extends View {
 
 
 		// -- Height ---------------------------------------------------
 		// -- Height ---------------------------------------------------
 
 
-		const heightInput = new LabeledView( locale, createLabeledInputText );
+		const heightInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		heightInput.set( {
 		heightInput.set( {
 			label: t( 'Height' ),
 			label: t( 'Height' ),
 			class: 'ck-table-form__dimensions-row__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.fieldView.bind( 'value' ).to( this, 'height' );
+		heightInput.fieldView.on( 'input', () => {
+			this.height = heightInput.fieldView.element.value;
 		} );
 		} );
 
 
 		return {
 		return {
@@ -641,22 +642,22 @@ export default class TableCellPropertiesView extends View {
 	 * * {@link #paddingInput}.
 	 * * {@link #paddingInput}.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 	 */
 	 */
 	_createPaddingField() {
 	_createPaddingField() {
 		const locale = this.locale;
 		const locale = this.locale;
 		const t = this.t;
 		const t = this.t;
 
 
-		const paddingInput = new LabeledView( locale, createLabeledInputText );
+		const paddingInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		paddingInput.set( {
 		paddingInput.set( {
 			label: t( 'Padding' ),
 			label: t( 'Padding' ),
 			class: 'ck-table-cell-properties-form__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.fieldView.bind( 'value' ).to( this, 'padding' );
+		paddingInput.fieldView.on( 'input', () => {
+			this.padding = paddingInput.fieldView.element.value;
 		} );
 		} );
 
 
 		return paddingInput;
 		return paddingInput;

+ 31 - 30
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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 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/labeledfield/labeledfieldview';
+import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
@@ -28,7 +28,8 @@ import {
 	getLabeledColorInputCreator
 	getLabeledColorInputCreator
 } from '../../ui/utils';
 } from '../../ui/utils';
 import FormRowView from '../../ui/formrowview';
 import FormRowView from '../../ui/formrowview';
-import FormHeaderView from '../../ui/formheaderview';
+
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
 
 
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
@@ -412,57 +413,57 @@ export default class TablePropertiesView extends View {
 		// -- Style ---------------------------------------------------
 		// -- Style ---------------------------------------------------
 
 
 		const styleLabels = getBorderStyleLabels( this.t );
 		const styleLabels = getBorderStyleLabels( this.t );
-		const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
+		const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown );
 		borderStyleDropdown.set( {
 		borderStyleDropdown.set( {
 			label: t( 'Style' ),
 			label: t( 'Style' ),
 			class: 'ck-table-form__border-style'
 			class: 'ck-table-form__border-style'
 		} );
 		} );
 
 
-		borderStyleDropdown.view.buttonView.set( {
+		borderStyleDropdown.fieldView.buttonView.set( {
 			isOn: false,
 			isOn: false,
 			withText: true,
 			withText: true,
 			tooltip: t( 'Style' )
 			tooltip: t( 'Style' )
 		} );
 		} );
 
 
-		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
+		borderStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
 			return styleLabels[ value ? value : 'none' ];
 			return styleLabels[ value ? value : 'none' ];
 		} );
 		} );
 
 
-		borderStyleDropdown.view.on( 'execute', evt => {
+		borderStyleDropdown.fieldView.on( 'execute', evt => {
 			this.borderStyle = evt.source._borderStyleValue;
 			this.borderStyle = evt.source._borderStyleValue;
 		} );
 		} );
 
 
-		addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
+		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
 
 
 		// -- Width ---------------------------------------------------
 		// -- Width ---------------------------------------------------
 
 
-		const borderWidthInput = new LabeledView( locale, createLabeledInputText );
+		const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		borderWidthInput.set( {
 		borderWidthInput.set( {
 			label: t( 'Width' ),
 			label: t( 'Width' ),
 			class: 'ck-table-form__border-width'
 			class: 'ck-table-form__border-width'
 		} );
 		} );
 
 
-		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
+		borderWidthInput.fieldView.bind( 'value' ).to( this, 'borderWidth' );
 		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
-		borderWidthInput.view.on( 'input', () => {
-			this.borderWidth = borderWidthInput.view.element.value;
+		borderWidthInput.fieldView.on( 'input', () => {
+			this.borderWidth = borderWidthInput.fieldView.element.value;
 		} );
 		} );
 
 
 		// -- Color ---------------------------------------------------
 		// -- Color ---------------------------------------------------
 
 
-		const borderColorInput = new LabeledView( locale, colorInputCreator );
+		const borderColorInput = new LabeledFieldView( locale, colorInputCreator );
 
 
 		borderColorInput.set( {
 		borderColorInput.set( {
 			label: t( 'Color' ),
 			label: t( 'Color' ),
 			class: 'ck-table-form__border-color'
 			class: 'ck-table-form__border-color'
 		} );
 		} );
 
 
-		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
+		borderColorInput.fieldView.bind( 'value' ).to( this, 'borderColor' );
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 
 
-		borderColorInput.view.on( 'input', () => {
-			this.borderColor = borderColorInput.view.value;
+		borderColorInput.fieldView.on( 'input', () => {
+			this.borderColor = borderColorInput.fieldView.value;
 		} );
 		} );
 
 
 		// Reset the border color and width fields when style is "none".
 		// Reset the border color and width fields when style is "none".
@@ -488,7 +489,7 @@ export default class TablePropertiesView extends View {
 	 * * {@link #backgroundInput}.
 	 * * {@link #backgroundInput}.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 	 */
 	 */
 	_createBackgroundField() {
 	_createBackgroundField() {
 		const backgroundInputCreator = getLabeledColorInputCreator( {
 		const backgroundInputCreator = getLabeledColorInputCreator( {
@@ -498,16 +499,16 @@ export default class TablePropertiesView extends View {
 		const locale = this.locale;
 		const locale = this.locale;
 		const t = this.t;
 		const t = this.t;
 
 
-		const backgroundInput = new LabeledView( locale, backgroundInputCreator );
+		const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );
 
 
 		backgroundInput.set( {
 		backgroundInput.set( {
 			label: t( 'Background' ),
 			label: t( 'Background' ),
 			class: 'ck-table-properties-form__background'
 			class: 'ck-table-properties-form__background'
 		} );
 		} );
 
 
-		backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
-		backgroundInput.view.on( 'input', () => {
-			this.backgroundColor = backgroundInput.view.value;
+		backgroundInput.fieldView.bind( 'value' ).to( this, 'backgroundColor' );
+		backgroundInput.fieldView.on( 'input', () => {
+			this.backgroundColor = backgroundInput.fieldView.value;
 		} );
 		} );
 
 
 		return backgroundInput;
 		return backgroundInput;
@@ -520,7 +521,7 @@ export default class TablePropertiesView extends View {
 	 * * {@link #heightInput}.
 	 * * {@link #heightInput}.
 	 *
 	 *
 	 * @private
 	 * @private
-	 * @returns {module:ui/labeledview/labeledview~LabeledView}
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 	 */
 	 */
 	_createDimensionFields() {
 	_createDimensionFields() {
 		const locale = this.locale;
 		const locale = this.locale;
@@ -533,16 +534,16 @@ export default class TablePropertiesView extends View {
 
 
 		// -- Width ---------------------------------------------------
 		// -- Width ---------------------------------------------------
 
 
-		const widthInput = new LabeledView( locale, createLabeledInputText );
+		const widthInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		widthInput.set( {
 		widthInput.set( {
 			label: t( 'Width' ),
 			label: t( 'Width' ),
 			class: 'ck-table-form__dimensions-row__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.fieldView.bind( 'value' ).to( this, 'width' );
+		widthInput.fieldView.on( 'input', () => {
+			this.width = widthInput.fieldView.element.value;
 		} );
 		} );
 
 
 		// -- Operator ---------------------------------------------------
 		// -- Operator ---------------------------------------------------
@@ -562,16 +563,16 @@ export default class TablePropertiesView extends View {
 
 
 		// -- Height ---------------------------------------------------
 		// -- Height ---------------------------------------------------
 
 
-		const heightInput = new LabeledView( locale, createLabeledInputText );
+		const heightInput = new LabeledFieldView( locale, createLabeledInputText );
 
 
 		heightInput.set( {
 		heightInput.set( {
 			label: t( 'Height' ),
 			label: t( 'Height' ),
 			class: 'ck-table-form__dimensions-row__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.fieldView.bind( 'value' ).to( this, 'height' );
+		heightInput.fieldView.on( 'input', () => {
+			this.height = heightInput.fieldView.element.value;
 		} );
 		} );
 
 
 		return {
 		return {

+ 0 - 90
packages/ckeditor5-table/src/ui/formheaderview.js

@@ -1,90 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module table/ui/formheaderview
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-
-import '../../theme/formheader.css';
-
-/**
- * The class representing a header in a complex form.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @private
- * @extends module:ui/view~View
- */
-export default class FormHeaderView extends View {
-	/**
-	 * Creates an instance of the form header view class.
-	 *
-	 * @param {module:utils/locale~Locale} locale The locale instance.
-	 * @param {Object} [options]
-	 * @param {String} [options.class] When passed, the class will be set on the header element.
-	 * @param {String} [options.label] When passed, the label will be used for the header.
-	 */
-	constructor( locale, options = {} ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * A collection of header items.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		/**
-		 * An additional CSS class added to the {@link #element}.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-		this.set( 'class', options.class || null );
-
-		/**
-		 * The label of the header.
-		 *
-		 * @readonly
-		 * @member {String} #label
-		 */
-		this.set( 'label', options.label || '' );
-
-		const label = new View( locale );
-
-		label.setTemplate( {
-			tag: 'span',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__header__label'
-				]
-			},
-			children: [
-				{ text: bind.to( 'label' ) }
-			]
-		} );
-
-		this.children.add( label );
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__header',
-					bind.to( 'class' )
-				]
-			},
-			children: this.children
-		} );
-	}
-}

+ 7 - 7
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
  * For given options, it returns a function that creates an instance of a
  * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
  * {@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/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM.
  *
  *
  * The helper does the following:
  * The helper does the following:
  *
  *
@@ -413,7 +413,7 @@ export const defaultColors = [
  *			columns: 3,
  *			columns: 3,
  *		} );
  *		} );
  *
  *
- *		const labeledInputView = new LabeledView( locale, colorInputCreator );
+ *		const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
  *		console.log( labeledInputView.view ); // A color input instance.
  *		console.log( labeledInputView.view ); // A color input instance.
  *
  *
  * @private
  * @private
@@ -425,8 +425,8 @@ export const defaultColors = [
  * @returns {Function}
  * @returns {Function}
  */
  */
 export function getLabeledColorInputCreator( options ) {
 export function getLabeledColorInputCreator( options ) {
-	return ( labeledView, viewUid, statusUid ) => {
-		const inputView = new ColorInputView( labeledView.locale, {
+	return ( labeledFieldView, viewUid, statusUid ) => {
+		const inputView = new ColorInputView( labeledFieldView.locale, {
 			colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
 			colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ),
 			columns: options.columns
 			columns: options.columns
 		} );
 		} );
@@ -436,13 +436,13 @@ export function getLabeledColorInputCreator( options ) {
 			ariaDescribedById: statusUid
 			ariaDescribedById: statusUid
 		} );
 		} );
 
 
-		inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
-		inputView.bind( 'errorText' ).to( labeledView );
+		inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+		inputView.bind( 'errorText' ).to( labeledFieldView );
 
 
 		inputView.on( 'input', () => {
 		inputView.on( 'input', () => {
 			// UX: Make the error text disappear and disable the error indicator as the user
 			// UX: Make the error text disappear and disable the error indicator as the user
 			// starts fixing the errors.
 			// starts fixing the errors.
-			labeledView.errorText = null;
+			labeledFieldView.errorText = null;
 		} );
 		} );
 
 
 		return inputView;
 		return inputView;

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

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

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

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

+ 0 - 98
packages/ckeditor5-table/tests/ui/formheaderview.js

@@ -1,98 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import FormHeaderView from '../../src/ui/formheaderview';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-
-describe( 'FormHeaderView', () => {
-	let view, locale;
-
-	beforeEach( () => {
-		locale = { t: val => val };
-		view = new FormHeaderView( locale );
-		view.render();
-	} );
-
-	afterEach( () => {
-		view.element.remove();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should set view#locale', () => {
-			expect( view.locale ).to.equal( locale );
-		} );
-
-		it( 'should create view#children collection', () => {
-			expect( view.children ).to.be.instanceOf( ViewCollection );
-			expect( view.children ).to.have.length( 1 );
-		} );
-
-		it( 'should set view#label', () => {
-			expect( view.label ).to.equal( '' );
-		} );
-
-		it( 'should set view#class', () => {
-			expect( view.class ).to.be.null;
-		} );
-
-		it( 'should set the template', () => {
-			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-form__header' ) ).to.be.true;
-		} );
-
-		describe( 'options', () => {
-			it( 'should set view#class when class was passed', () => {
-				const view = new FormHeaderView( locale, {
-					class: 'foo'
-				} );
-
-				expect( view.class ).to.equal( 'foo' );
-
-				view.destroy();
-			} );
-
-			it( 'should use a label text when passed', () => {
-				const view = new FormHeaderView( locale, {
-					label: 'foo'
-				} );
-
-				view.render();
-
-				expect( view.element.firstChild.classList.contains( 'ck' ) ).to.be.true;
-				expect( view.element.firstChild.classList.contains( 'ck-form__header__label' ) ).to.be.true;
-				expect( view.element.firstChild.textContent ).to.equal( 'foo' );
-
-				view.destroy();
-			} );
-		} );
-
-		describe( 'template bindings', () => {
-			it( 'should bind #class to the template', () => {
-				view.class = 'foo';
-				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
-			} );
-
-			it( 'should bind #label to the template', () => {
-				view.label = 'bar';
-				expect( view.element.firstChild.textContent ).to.equal( 'bar' );
-
-				view.label = 'baz';
-				expect( view.element.firstChild.textContent ).to.equal( 'baz' );
-			} );
-
-			it( 'should bind #children to the template', () => {
-				const child = new View();
-				child.setTemplate( { tag: 'div' } );
-
-				view.children.add( child );
-
-				expect( view.element.childNodes[ 1 ] ).to.equal( child.element );
-
-				view.destroy();
-			} );
-		} );
-	} );
-} );