Renamed text alternative form button classes. Added save and cancel b…

…uttons to the manual test.

tests/manual/theme.js

@@ -23,6 +23,9 @@ import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinp
 
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 class TextView extends View {
@@ -114,9 +117,11 @@ function renderButton() {
 	const actionButton = button( { label: 'Action button' } );
 	const roundedButton = button( { label: 'Rounded corners' } );
 	const boldButton = button( { label: 'Bold text' } );
+	const saveButton = button( { label: 'Save', withText: false, icon: checkIcon } );
+	const cancelButton = button( { label: 'Cancel', withText: false, icon: cancelIcon } );
 
 	ui.buttonTypes.add( toolbar( [
-		actionButton, roundedButton, boldButton
+		actionButton, roundedButton, boldButton, saveButton, cancelButton
 	] ) );
 
 	// TODO: It requires model interface.
@@ -128,6 +133,9 @@ function renderButton() {
 	// TODO: It requires model interface.
 	boldButton.element.classList.add( 'ck-button-bold' );
 
+	saveButton.element.classList.add( 'ck-button-save' );
+	cancelButton.element.classList.add( 'ck-button-cancel' );
+
 	// --- Icon ------------------------------------------------------------
 
 	ui.buttonIcon.add( toolbar( [

theme/ckeditor5-ui/components/button/button.css

@@ -68,11 +68,11 @@ a.ck-button {
 		@mixin ck-button-colors --ck-color-button-on;
 	}
 
-	&.ck-button_save {
+	&.ck-button-save {
 		color: var(--ck-color-button-save);
 	}
 
-	&.ck-button_cancel {
+	&.ck-button-cancel {
 		color: var(--ck-color-button-cancel);
 	}