Browse Source

Added `noText` option to ButtonView.

Oskar Wrobel 9 years ago
parent
commit
e94bc51545

+ 6 - 8
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -159,14 +159,12 @@ function renderButton( ui ) {
 	} ) );
 
 	const notextButton = button( {
-		label: '',
+		label: 'Bold',
+		noText: true,
 		icon: 'bold',
 		iconAlign: 'LEFT'
 	} );
 
-	// TODO: It requires model interface.
-	notextButton.view.element.classList.add( 'ck-button-notext' );
-
 	ui.add( 'button-icon-states', notextButton );
 
 	const colChangeButton = button( {
@@ -196,13 +194,13 @@ function renderButton( ui ) {
 		} ) );
 
 		const notextButton = button( {
-			label: '',
+			label: 'Link',
+			noText: true,
 			icon: 'link',
 			iconAlign: 'LEFT'
 		} );
 
 		// TODO: It requires model interface.
-		notextButton.view.element.classList.add( 'ck-button-notext' );
 		notextButton.view.element.classList.add( 'ck-button-action' );
 
 		ui.add( `button-responsive-${ i }`, notextButton );
@@ -347,8 +345,8 @@ function icon( name ) {
 	return new Controller( null, new IconView( new Model( { icon: name } ) ) );
 }
 
-function button( { label = 'Button', isEnabled = true, isOn = false, icon, iconAlign } = {} ) {
-	const model = new Model( { label, isEnabled, isOn, icon, iconAlign } );
+function button( { label = 'Button', noText = false, isEnabled = true, isOn = false, icon, iconAlign } = {} ) {
+	const model = new Model( { label, noText, isEnabled, isOn, icon, iconAlign } );
 
 	return new Button( model, new ButtonView( model ) );
 }

+ 10 - 0
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -80,6 +80,10 @@ a.ck-button {
 			margin-left: 0;
 			margin-right: 0;
 		}
+
+		.ck-button__label {
+			display: none;
+		}
 	}
 
 	&.ck-on {
@@ -117,4 +121,10 @@ a.ck-button {
 			margin-right: -#{ck-spacing( 'small' )};
 		}
 	}
+
+	.ck-button__label {
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+	}
 }