Merge 6ba61c1 into eb1ce18

src/formheader/formheaderview.js

@@ -15,7 +15,9 @@ import '../../theme/components/formheader/formheader.css';
  * The class component representing a form header view. It should be used in more advanced forms to
  * describe the main purpose of the form.
  *
- * By default the component contains a bolded label view that has to be set. The label is usually a short (at most 3-word) string.
+ * By default the component contains an optional bolded label view, which text can be set through the options (`[options.label]`),
+ * while creating the component. The label text is usually a short (at most 3-word) string. If the label text isn't defined
+ * the label view will not appear.
  * The component can also be extended by any other elements, like: icons, dropdowns, etc.
  *
  * It is used i.a.
@@ -76,9 +78,15 @@ export default class FormHeaderView extends View {
 			children: this.children
 		} );
 
-		const label = new View( locale );
+		/**
+		 * A label view, which text can be set through `options.label` or {@link #label}.
+		 *
+		 * @readonly
+		 * @member {module:ui/view~View}
+		 */
+		this.labelView = new View( locale );
 
-		label.setTemplate( {
+		this.labelView.setTemplate( {
 			tag: 'span',
 			attributes: {
 				class: [
@@ -91,6 +99,28 @@ export default class FormHeaderView extends View {
 			]
 		} );
 
-		this.children.add( label );
+		this.label && this.children.add( this.labelView );
+
+		this.on( 'set:label', () => {
+			if ( !this.children.has( this.labelView ) ) {
+				this.children.add( this.labelView );
+			}
+		} );
+	}
+
+	render() {
+		super.render();
+
+		this.on( 'change:label', evt => {
+			if ( this.children.has( this.labelView ) ) {
+				if ( !evt.source.label ) {
+					// Remove the label view if it is no longer necessary (eg.: label text is empty).
+					this.children.remove( this.labelView );
+				}
+			} else {
+				// Append label view only if it has not been added while creating the instance, but after render.
+				this.children.add( this.labelView );
+			}
+		} );
 	}
 }

tests/formheader/formheaderview.js

@@ -17,7 +17,9 @@ describe( 'FormHeaderView', () => {
 	} );
 
 	afterEach( () => {
-		view.element.remove();
+		if ( view.element ) {
+			view.element.remove();
+		}
 	} );
 
 	describe( 'constructor()', () => {
@@ -26,8 +28,25 @@ describe( 'FormHeaderView', () => {
 		} );
 
 		it( 'should create view#children collection', () => {
+			expect( view.children ).to.be.instanceOf( ViewCollection );
+			expect( view.children ).to.have.length( 0 );
+		} );
+
+		it( 'should contain label view only when view#label is defined', () => {
+			view = new FormHeaderView( locale, {
+				label: 'Foo label'
+			} );
+
+			view.render();
+
 			expect( view.children ).to.be.instanceOf( ViewCollection );
 			expect( view.children ).to.have.length( 1 );
+
+			expect( view.children.first.element.classList.contains( 'ck-form__header__label' ) ).to.be.true;
+
+			view.label = '';
+
+			expect( view.children ).to.have.length( 0 );
 		} );
 
 		it( 'should set view#label', () => {
@@ -89,7 +108,7 @@ describe( 'FormHeaderView', () => {
 
 				view.children.add( child );
 
-				expect( view.element.childNodes[ 1 ] ).to.equal( child.element );
+				expect( view.element.childNodes[ 0 ] ).to.equal( child.element );
 
 				view.destroy();
 			} );

theme/components/formheader/formheader.css

@@ -3,22 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
-	--ck-table-form-header-height: 38px;
-}
-
 .ck.ck-form__header {
-  display: flex;
+	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: space-between;
-	padding: var(--ck-spacing-small) var(--ck-spacing-large);
-	height: var(--ck-table-form-header-height);
-	line-height: var(--ck-table-form-header-height);
-	border-bottom: 1px solid var(--ck-color-base-border);
-
-	& .ck-form__header__label {
-		font-weight: bold;
-	}
 }