Selaa lähdekoodia

Use LabelView in Form Header View component

panr 5 vuotta sitten
vanhempi
commit
2c39b8d05e

+ 13 - 15
packages/ckeditor5-ui/src/formheader/formheaderview.js

@@ -8,6 +8,7 @@
  */
 
 import View from '../view';
+import LabelView from '../label/labelview';
 
 import '../../theme/components/formheader/formheader.css';
 
@@ -41,33 +42,30 @@ export default class FormHeaderView extends View {
 		 */
 		this.children = this.createCollection();
 
-		const label = new View( locale );
-
-		label.setTemplate( {
-			tag: 'span',
+		this.setTemplate( {
+			tag: 'div',
 			attributes: {
 				class: [
 					'ck',
-					'ck-form__header__label'
+					'ck-form__header',
+					bind.to( 'class' )
 				]
 			},
-			children: [
-				{ text: bind.to( 'label' ) }
-			]
+			children: this.children
 		} );
 
-		this.children.add( label );
+		const label = new LabelView( locale );
 
-		this.setTemplate( {
-			tag: 'div',
+		label.bind( 'text' ).to( this, 'label' );
+		label.extendTemplate( {
 			attributes: {
 				class: [
 					'ck',
-					'ck-form__header',
-					bind.to( 'class' )
+					'ck-form__header__label'
 				]
-			},
-			children: this.children
+			}
 		} );
+
+		this.children.add( label );
 	}
 }

+ 0 - 4
packages/ckeditor5-ui/theme/components/formheader/formheader.css

@@ -17,8 +17,4 @@
 	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;
-	}
 }