Procházet zdrojové kódy

Docs: Improved font (background) color feature docs. Fixed spelling and wording. Fixed code–style in various classes and methods.

Aleksander Nowodzinski před 6 roky
rodič
revize
ca3b9aac67

+ 10 - 8
packages/ckeditor5-font/src/fontbackgroundcolor.js

@@ -42,7 +42,7 @@ export default class FontBackgroundColor extends Plugin {
  *
  *		ClassicEditor
  *			.create( {
- * 				fontBackgroundColor: ... // Font family feature configuration.
+ *				fontBackgroundColor: ... // Font background color feature configuration.
  *			} )
  *			.then( ... )
  *			.catch( ... );
@@ -53,7 +53,9 @@ export default class FontBackgroundColor extends Plugin {
  */
 
 /**
- * Available 'font background color' colors defined as an array of strings or objects. The default value is:
+ * Available font background colors defined as an array of strings or objects.
+ *
+ * The default value registers 15 colors:
  *
  *		const fontBackgroundColorConfig = {
  *			colors: [
@@ -107,18 +109,18 @@ export default class FontBackgroundColor extends Plugin {
  *			]
  *		};
  *
- * which configures 15 default colors. Each color is used in dropdown as available color to choose from dropdown.
+ * *Note*: The colors are displayed in the `'fontBackgroundColor'` dropdown.
  *
  * @member {Array.<String|Object>} module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors
  */
 
 /**
- * Value represent amount of drawn columns in color panel. It also represent amount of visible recently used colors.
- * The default value is:
+ * Represents the amount of columns in the dropdown. It also represents the number of background colors
+ * recently used by the user displayed in the dropdown. The default value is:
  *
- * 		const fontBackgroundColorConfig = {
- * 			columns: 5
- * 		}
+ *		const fontBackgroundColorConfig = {
+ *			columns: 5
+ *		}
  *
  * @member {Numebr} module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns
  */

+ 3 - 3
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorcommand.js

@@ -11,13 +11,13 @@ import FontCommand from '../fontcommand';
 import { FONT_BACKGROUND_COLOR } from '../utils';
 
 /**
- * The font background color command. It's used by
+ * The font background color command. It's used by the
  * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
  * to apply the font background color.
  *
- * 		editor.execute( 'fontBackgroundColor', { value: 'rgb(250, 20, 20)' } );
+ *		editor.execute( 'fontBackgroundColor', { value: 'rgb(250, 20, 20)' } );
  *
- * **Note**: Executing the command with value equal null removes the attribute from the model.
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
  *
  * @extends module:font/fontcommand~FontCommand
  */

+ 1 - 1
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -16,7 +16,7 @@ import { FONT_BACKGROUND_COLOR, renderDowncastElement, renderUpcastAttribute } f
  *
  * It introduces the {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand command} and
  * the `fontBackgroundColor` attribute in the {@link module:engine/model/model~Model model} which renders
- * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="background-color: hsl(0, 0%, 100%)">`),
+ * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
  * depending on the {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig configuration}.
  *
  * @extends module:core/plugin~Plugin

+ 3 - 1
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -18,11 +18,13 @@ import fontBackgroundColorIcon from '../../theme/icons/font-background.svg';
  */
 export default class FontBackgroundColorUI extends ColorUI {
 	constructor( editor ) {
+		const t = editor.locale.t;
+
 		super( editor, {
 			commandName: FONT_BACKGROUND_COLOR,
 			componentName: FONT_BACKGROUND_COLOR,
 			icon: fontBackgroundColorIcon,
-			dropdownLabel: 'Font Background Color'
+			dropdownLabel: t( 'Font Background Color' )
 		} );
 	}
 

+ 10 - 8
packages/ckeditor5-font/src/fontcolor.js

@@ -41,7 +41,7 @@ export default class FontColor extends Plugin {
  *
  *		ClassicEditor
  *			.create( {
- * 				fontColor: ... // Font family feature configuration.
+ *				fontColor: ... // Font color feature configuration.
  *			} )
  *			.then( ... )
  *			.catch( ... );
@@ -52,7 +52,9 @@ export default class FontColor extends Plugin {
  */
 
 /**
- * Available 'font color' colors defined as an array of strings or objects. The default value is:
+ * Available font colors defined as an array of strings or objects.
+ *
+ * The default value registers 15 colors:
  *
  *		const fontColorConfig = {
  *			colors: [
@@ -106,18 +108,18 @@ export default class FontColor extends Plugin {
  *			]
  *		};
  *
- * which configures 15 default colors. Each color is used in dropdown as available color to choose from dropdown.
+ * *Note*: The colors are displayed in the `'fontColor'` dropdown.
  *
  * @member {Array.<String|Object>} module:font/fontcolor~FontColorConfig#colors
  */
 
 /**
- * Value represent amount of drawn columns in color panel. It also represents amount of visible recently used colors.
- * The default value is:
+ * Represents the amount of columns in the dropdown. It also represents the number of font colors
+ * recently used by the user displayed in the dropdown. The default value is:
  *
- * 		const fontColorConfig = {
- * 			columns: 5
- * 		}
+ *		const fontColorConfig = {
+ *			columns: 5
+ *		}
  *
  * @member {Numebr} module:font/fontcolor~FontColorConfig#columns
  */

+ 3 - 3
packages/ckeditor5-font/src/fontcolor/fontcolorcommand.js

@@ -11,12 +11,12 @@ import FontCommand from '../fontcommand';
 import { FONT_COLOR } from '../utils';
 
 /**
- * The font color command. It's used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
+ * The font color command. It's used by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
  * to apply the font color.
  *
- * 		editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ *		editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
  *
- * **Note**: Executing the command with value equal null removes the attribute from the model.
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
  *
  * @extends module:font/fontcommand~FontCommand
  */

+ 1 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -16,7 +16,7 @@ import { FONT_COLOR, renderDowncastElement, renderUpcastAttribute } from '../uti
  *
  * It introduces the {@link module:font/fontcolor/fontcolorcommand~FontColorCommand command} and
  * the `fontColor` attribute in the {@link module:engine/model/model~Model model} which renders
- * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="color: hsl(0, 0%, 100%)">`),
+ * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="color: ...">`),
  * depending on the {@link module:font/fontcolor~FontColorConfig configuration}.
  *
  * @extends module:core/plugin~Plugin

+ 4 - 2
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -12,17 +12,19 @@ import { FONT_COLOR } from '../utils';
 import fontColorIcon from '../../theme/icons/font-color.svg';
 
 /**
- * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ * The font background color UI plugin. It introduces the `'fontColor'` dropdown.
  *
  * @extends module:core/plugin~Plugin
  */
 export default class FontColorUI extends ColorUI {
 	constructor( editor ) {
+		const t = editor.locale.t;
+
 		super( editor, {
 			commandName: FONT_COLOR,
 			componentName: FONT_COLOR,
 			icon: fontColorIcon,
-			dropdownLabel: 'Font Color'
+			dropdownLabel: t( 'Font Color' )
 		} );
 	}
 

+ 23 - 23
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -14,13 +14,13 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 /**
- * It keeps nicely collection of {@link module:font/ui/colortile~ColorTile}.
+ * A grid of {@link module:font/ui/colortile~ColorTile}.
  *
  * @extends module:ui/view~View
  */
 export default class ColorGrid extends View {
 	/**
-	 * Construct instance of color grid used to display {@link module:font/ui/colortile~ColorTile} in drop down.
+	 * Creates an instance of a color grid containing {@link module:font/ui/colortile~ColorTile}.
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {Object} config Configuration
@@ -31,7 +31,7 @@ export default class ColorGrid extends View {
 		super( locale );
 
 		/**
-		 * Collection of the child list views.
+		 * Collection of the child tile views.
 		 *
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
@@ -39,7 +39,7 @@ export default class ColorGrid extends View {
 		this.items = this.createCollection();
 
 		/**
-		 * Tracks information about DOM focus in the list.
+		 * Tracks information about DOM focus in the grid.
 		 *
 		 * @readonly
 		 * @member {module:utils/focustracker~FocusTracker}
@@ -55,7 +55,7 @@ export default class ColorGrid extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
-		 * Helps cycling over focusable {@link #items} in the list.
+		 * Helps cycling over focusable {@link #items} in the grid.
 		 *
 		 * @readonly
 		 * @protected
@@ -66,22 +66,24 @@ export default class ColorGrid extends View {
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
 			actions: {
-				// Navigate list items backwards using the arrowup key.
+				// Navigate grid items backwards using the arrowup key.
 				focusPrevious: 'arrowleft',
 
-				// Navigate toolbar items forwards using the arrowdown key.
+				// Navigate grid items forwards using the arrowdown key.
 				focusNext: 'arrowright',
 			}
 		} );
 
 		colorsDefinition.forEach( item => {
 			const colorTile = new ColorTile();
+
 			colorTile.set( {
 				color: item.color,
 				label: item.label,
 				tooltip: true,
 				hasBorder: item.options.hasBorder
 			} );
+
 			colorTile.on( 'execute', () => {
 				this.fire( 'execute', {
 					value: item.color,
@@ -89,6 +91,7 @@ export default class ColorGrid extends View {
 					label: item.label
 				} );
 			} );
+
 			this.items.add( colorTile );
 		} );
 
@@ -147,26 +150,23 @@ export default class ColorGrid extends View {
 }
 
 /**
- * Color definition used to build {@link module:font/ui/colortile~ColorTile}.
+ * A color definition used to create a {@link module:font/ui/colortile~ColorTile}.
  *
- * 		{
- * 			color: hsl(0, 0%, 75%),
- * 			label: 'Light Grey',
- * 			options: {
- * 				hasBorder: true
- * 			}
- * 		}
+ *		{
+ *			color: hsl(0, 0%, 75%),
+ *			label: 'Light Grey',
+ *			options: {
+ *				hasBorder: true
+ *			}
+ *		}
  *
  * @typedef {Object} module:font/ui/colorgrid~ColorDefinition
  * @type Object
  *
- * @property {String} color String representing inserted color.
- * It's used as value of background-color style in {@link module:font/ui/colortile~ColorTile}.
- *
+ * @property {String} color String representing a color.
+ * It is used as value of background-color style in {@link module:font/ui/colortile~ColorTile}.
  * @property {String} label String used as label for {@link module:font/ui/colortile~ColorTile}.
- *
- * @property {Object} options Additional options passed to build {@link module:font/ui/colortile~ColorTile}.
- *
- * @property {Boolean} options.hasBorder Flag indicates if special CSS class should be added
- * to {@link module:font/ui/colortile~ColorTile}, which draw border around it.
+ * @property {Object} options Additional options passed to create a {@link module:font/ui/colortile~ColorTile}.
+ * @property {Boolean} options.hasBorder A flag that indicates if special a CSS class should be added
+ * to {@link module:font/ui/colortile~ColorTile}, which renders a border around it.
  */

+ 53 - 26
packages/ckeditor5-font/src/ui/colortableview.js

@@ -19,25 +19,27 @@ import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import '../../theme/fontcolor.css';
 
 /**
- * Class which represents view with {@link module:font/ui/colorgrid~ColorGrid}
- * and remove buttons inside {@link module:ui/dropdown/dropdownview~DropdownView}.
+ * Class which represents a view with {@link module:font/ui/colorgrid~ColorGrid}
+ * and remove color buttons.
  *
  * @extends module:ui/view~View
  */
 export default class ColorTableView extends View {
 	/**
-	 * Construct view which will be inserted as child of {@link module:ui/dropdown/dropdownview~DropdownView}
+	 * Creates a view to be inserted as child of {@link module:ui/dropdown/dropdownview~DropdownView}.
+	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {Object} config Configuration object
-	 * @param {Array.<Object>} config.colors Array with objects drawn as static set of available colors in color table.
-	 * @param {Number} config.colorColumns Number of columns in color grid. Determines how many recent color will be displayed.
-	 * @param {String} config.removeButtonTooltip Description of button responsible for removing color attributes.
+	 * @param {Array.<Object>} config.colors Array with definitions of colors to be displayed in the table.
+	 * @param {Number} config.colorColumns Number of columns in the color grid.
+	 * Also determines how many recent color will be displayed.
+	 * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
 	 */
-	constructor( locale, { colors, colorColumns, removeButtonTooltip } ) {
+	constructor( locale, { colors, colorColumns, removeButtonLabel } ) {
 		super( locale );
 
 		/**
-		 * Collection of the child list views.
+		 * Collection of the children of the table.
 		 *
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
@@ -45,7 +47,8 @@ export default class ColorTableView extends View {
 		this.items = this.createCollection();
 
 		/**
-		 * Array with objects representing color to be drawn in color grid.
+		 * An array with objects representing colors to be displayed in the grid.
+		 *
 		 * @type {Arrray.<Object>}
 		 */
 		this.colorsDefinition = colors;
@@ -67,25 +70,28 @@ export default class ColorTableView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
-		 * Keeps value of command for current selection.
+		 * Keeps value of the command associated with the table for current selection.
+		 *
 		 * @type {String}
 		 */
 		this.set( 'selectedColor' );
 
 		/**
-		 * Description of button responsible for removing color attributes.
+		 * A label of the button responsible for removing color attributes.
+		 *
 		 * @type {String}
 		 */
-		this.removeButtonTooltip = removeButtonTooltip;
+		this.removeButtonLabel = removeButtonLabel;
 
 		/**
-		 * Number of columns in color grid. Determines how many recent color will be displayed.
+		 * The number of columns in color grid. Also determines the number of recent color to be displayed.
+		 *
 		 * @type {Number}
 		 */
 		this.colorColumns = colorColumns;
 
 		/**
-		 * Collection kept model of colors used for Recent Colors section.
+		 * A collection storing definitions of recently used colors.
 		 *
 		 * @readonly
 		 * @member {module:utils/collection~Collection}
@@ -107,7 +113,7 @@ export default class ColorTableView extends View {
 				// Navigate list items backwards using the arrowup key.
 				focusPrevious: 'arrowup',
 
-				// Navigate toolbar items forwards using the arrowdown key.
+				// Navigate list items forwards using the arrowdown key.
 				focusNext: 'arrowdown',
 			}
 		} );
@@ -127,27 +133,31 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Adds remove color button as child for current view.
+	 * Adds the remove color button as child for current view.
 	 *
 	 * @private
 	 */
 	removeColorButton() {
-		const btnView = new ButtonView();
-		btnView.set( {
+		const buttonView = new ButtonView();
+
+		buttonView.set( {
 			withText: true,
 			icon: removeButtonIcon,
 			tooltip: true,
-			label: this.removeButtonTooltip
+			label: this.removeButtonLabel
 		} );
-		btnView.class = 'ck-color-table__remove-color';
-		btnView.on( 'execute', () => {
+
+		buttonView.class = 'ck-color-table__remove-color';
+		buttonView.on( 'execute', () => {
 			this.fire( 'execute', { value: null } );
 		} );
-		return btnView;
+
+		return buttonView;
 	}
 
 	/**
-	 * Creates static color table grid based on editor config.
+	 * Creates a static color table grid based on editor config.
+	 *
 	 * @private
 	 */
 	createStaticColorTable() {
@@ -155,12 +165,15 @@ export default class ColorTableView extends View {
 			colorsDefinition: this.colorsDefinition,
 			colorColumns: this.colorColumns
 		} );
+
 		colorGrid.delegate( 'execute' ).to( this );
+
 		return colorGrid;
 	}
 
 	/**
-	 * Adds recently used color section view and bind it to {@link #recentlyUsedColors}.
+	 * Adds recently used colors section view and binds it to {@link #recentlyUsedColors}.
+	 *
 	 * @private
 	 */
 	recentlyUsed() {
@@ -169,42 +182,56 @@ export default class ColorTableView extends View {
 		recentViews.items.bindTo( this.recentlyUsedColors ).using(
 			colorObj => {
 				const colorTile = new ColorTile();
+
 				colorTile.set( {
 					color: colorObj.color,
 					hasBorder: colorObj.hasBorder
 				} );
+
 				if ( colorObj.label ) {
 					colorTile.set( {
 						label: colorObj.label,
 						tooltip: true
 					} );
 				}
+
 				if ( colorObj.isEnabled === false ) {
 					colorTile.set( 'isEnabled', false );
 				}
+
 				colorTile.on( 'execute', () => {
-					this.fire( 'execute', { value: colorObj.color, hasBorder: colorObj.hasBorder, label: colorObj.label } );
+					this.fire( 'execute', {
+						value: colorObj.color,
+						hasBorder: colorObj.hasBorder,
+						label: colorObj.label
+					} );
 				} );
+
 				return colorTile;
 			}
 		);
 
 		this.recentlyUsedColors.on( 'add', ( evt, item ) => {
 			const duplicates = this.recentlyUsedColors.filter( element => element.color === item.color, this );
+
 			if ( duplicates.length === 2 ) {
 				this.recentlyUsedColors.remove( duplicates[ 1 ] );
 			}
+
 			if ( this.recentlyUsedColors.length > this.colorColumns ) {
 				this.recentlyUsedColors.remove( this.recentlyUsedColors.length - 1 );
 			}
 		} );
 
 		recentViews.delegate( 'execute' ).to( this );
+
 		return recentViews;
 	}
 
 	/**
-	 * Populate {@link #recentlyUsedColors} with empty non-clickable buttons, which represents space for colors.
+	 * Populates {@link #recentlyUsedColors} with empty non-clickable buttons, which represent placeholders
+	 * for colors.
+	 *
 	 * @private
 	 */
 	initRecentCollection() {

+ 5 - 5
packages/ckeditor5-font/src/ui/colortile.js

@@ -10,25 +10,25 @@
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 /**
- * Class represents single color tile possible to click in dropdown. Element was designed
- * for being used in {@link module:font/ui/colorgrid~ColorGrid}.
+ * This class represents a single color tile in the {@link module:font/ui/colorgrid~ColorGrid}.
  *
  * @extends module:ui/button/buttonview~ButtonView
  */
 export default class ColorTile extends ButtonView {
 	constructor( locale ) {
 		super( locale );
+
 		const bind = this.bindTemplate;
 
 		/**
-		 * String representing color which will be shown as tile's background.
+		 * String representing a color shown as tile's background.
 		 * @type {String}
 		 */
 		this.set( 'color' );
 
 		/**
-		 * Parameter which trigger adding special CSS class to button.
-		 * This class is responsible for displaying border around button.
+		 * A flag that toggles a special CSS class responsible for displaying
+		 * a border around the button.
 		 * @type {Boolean}
 		 */
 		this.set( 'hasBorder' );

+ 26 - 19
packages/ckeditor5-font/src/ui/colorui.js

@@ -9,54 +9,59 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { normalizeOptions, addColorsToDropdown } from '../utils';
+import {
+	normalizeOptions,
+	addColorsToDropdown
+} from '../utils';
 
 /**
- * The color UI plugin. It's template for creating the `'fontBackgroundColor'` and the `'fotnColor'` dropdown.
- * Plugin separates common logic responsible for displaying dropdown with color grids.
+ * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
+ * It is used to create the `'fontBackgroundColor'` and the `'fontColor'` dropdowns.
  *
  * @extends module:core/plugin~Plugin
  */
 export default class ColorUI extends Plugin {
 	/**
-	 * Creates plugin which adds UI with {@link module:font/ui/colortableview~ColorTableView} with proper configuration.
+	 * Creates a plugin which brings dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}
 	 *
 	 * @param {module:core/editor/editor~Editor} editor
 	 * @param {Object} config Configuration object
-	 * @param {String} config.commandName Name of command which will be execute after click into selected color tile.config.
-	 * @param {String} config.componentName Name of this component in {@link module:ui/componentfactory~ComponentFactory}
-	 * @param {String} config.icon SVG icon used in toolbar for displaying this UI element.
-	 * @param {String} config.dropdownLabel Label used for icon in toolbar for this element.
+	 * @param {String} config.commandName Name of command which will be executed when a color tile is clicked.
+	 * @param {String} config.componentName Name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
+	 * and the configuration scope name in `editor.config`.
+	 * @param {String} config.icon SVG icon used by the dropdown.
+	 * @param {String} config.dropdownLabel Label used by the dropdown.
 	 */
 	constructor( editor, { commandName, icon, componentName, dropdownLabel } ) {
 		super( editor );
 
 		/**
-		 * Name of command which will be execute after click into selected color tile.config.
+		 * Name of the command which will be executed when a color tile is clicked.
 		 * @type {String}
 		 */
 		this.commandName = commandName;
 
 		/**
-		 * Name of this component in {@link module:ui/componentfactory~ComponentFactory}.
+		 * Name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
+		 * Also the configuration scope name in `editor.config`.
 		 * @type {String}
 		 */
 		this.componentName = componentName;
 
 		/**
-		 * SVG icon used in toolbar for displaying this UI element.
+		 * SVG icon used by the dropdown.
 		 * @type {String}
 		 */
 		this.icon = icon;
 
 		/**
-		 * Label used for icon in toolbar for this element.
+		 * Label used by the dropdown.
 		 * @type {String}
 		 */
 		this.dropdownLabel = dropdownLabel;
 
 		/**
-		 * Number of columns in color grid. Determines how many recent color will be displayed.
+		 * Number of columns in color grid. Determines the number of recent colors to be displayed.
 		 * @type {Number}
 		 */
 		this.colorColumns = editor.config.get( `${ this.componentName }.columns` );
@@ -69,7 +74,6 @@ export default class ColorUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const command = editor.commands.get( this.commandName );
-
 		const options = this._getLocalizedOptions();
 
 		// Register UI component.
@@ -85,13 +89,13 @@ export default class ColorUI extends Plugin {
 					}
 				} ) ),
 				colorColumns: this.colorColumns,
-				removeButtonTooltip: t( 'Remove color' )
+				removeButtonLabel: t( 'Remove color' )
 			} );
 
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 
 			dropdownView.buttonView.set( {
-				label: t( this.dropdownLabel ),
+				label: this.dropdownLabel,
 				icon: this.icon,
 				tooltip: true
 			} );
@@ -109,9 +113,10 @@ export default class ColorUI extends Plugin {
 					colorTableView.recentlyUsedColors.add( {
 						color: data.value,
 						hasBorder: data.hasBorder,
-						label: data.label },
-					0 );
+						label: data.label
+					}, 0 );
 				}
+
 				editor.execute( this.commandName, data );
 				editor.editing.view.focus();
 			} );
@@ -121,7 +126,7 @@ export default class ColorUI extends Plugin {
 	}
 
 	/**
-	 * Returns options as defined in `config` but processed to account for
+	 * Returns options as defined in the `editor.config` but processed to account for
 	 * editor localization, i.e. to display {@link module:font/fontcolor~FontColorConfig}
 	 * or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig} in the correct language.
 	 *
@@ -135,9 +140,11 @@ export default class ColorUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const options = normalizeOptions( editor.config.get( `${ this.componentName }.colors` ) );
+
 		options.forEach( option => {
 			option.label = t( option.label );
 		} );
+
 		return options;
 	}
 }