@ckeditor/ckeditor5-ui 35.0.1 → 35.2.0

package/lang/translations/ru.po

@@ -103,3 +103,11 @@ msgstr "Синий"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Фиолетовый"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Панель инструментов редактора"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Контекстуальная панель инструментов редактора"

package/lang/translations/sk.po

@@ -103,3 +103,11 @@ msgstr "Modrá"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Fialová"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Panel s nástrojmi obsahu bloku editora"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Kontextový panel nástrojov editora"

package/lang/translations/sl.po

@@ -103,3 +103,11 @@ msgstr "Modra"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Vijolična"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/sq.po

@@ -103,3 +103,11 @@ msgstr ""
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr ""
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/sr-latn.po

@@ -22,7 +22,7 @@ msgstr "Prošireni uređivač teksta"
 
 msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
 msgid "Editor editing area: %0"
-msgstr ""
+msgstr "Oblast za uređivanje urednika: %0"
 
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
@@ -103,3 +103,11 @@ msgstr "Plava"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Ljubičasta"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Traka sa alatkama za blokiranje sadržaja uređivača"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Kontekstualna traka sa alatkama Editor"

package/lang/translations/sr.po

@@ -22,7 +22,7 @@ msgstr "Проширен уређивач текста"
 
 msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
 msgid "Editor editing area: %0"
-msgstr "Uređivačev prostor za uređivanje: %0"
+msgstr "Област за уређивање уредника: %0"
 
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
@@ -103,3 +103,11 @@ msgstr "Плава"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Љубичаста"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Трака са алаткама за блокирање садржаја уређивача"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Контекстуална трака са алаткама Едитор"

package/lang/translations/sv.po

@@ -103,3 +103,11 @@ msgstr "Blå"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Lila"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Verktygsfält vid block av innehåll"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Ordbehandlarens kontextuella verktygsfält"

package/lang/translations/th.po

@@ -103,3 +103,11 @@ msgstr "สีน้ำเงิน"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "สีม่วง"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "แถบเครื่องมือแก้ไขบล็อกเนื้อหา"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "แถบเครื่องมือแก้ไขข้อความ"

package/lang/translations/tk.po

@@ -103,3 +103,11 @@ msgstr "Gök"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Gyrmyzy"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/tr.po

@@ -103,3 +103,11 @@ msgstr "Mavi"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Mor"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Düzenleyici engelleme içerik araç çubuğu"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Düzenleyici içeriksel araç çubuğu"

package/lang/translations/tt.po

@@ -0,0 +1,113 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Tatar (https://www.transifex.com/ckeditor/teams/11143/tt/)\n"
+"Language: tt\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr ""
+
+msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
+msgid "Editor editing area: %0"
+msgstr ""
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr ""
+
+msgctxt "Label for a button showing the next thing (tab, page, etc.)."
+msgid "Next"
+msgstr ""
+
+msgctxt "Label for a button showing the previous thing (tab, page, etc.)."
+msgid "Previous"
+msgstr ""
+
+msgctxt "Label used by assistive technologies describing a generic editor toolbar."
+msgid "Editor toolbar"
+msgstr ""
+
+msgctxt "Label used by assistive technologies describing a toolbar displayed inside a dropdown."
+msgid "Dropdown toolbar"
+msgstr ""
+
+msgctxt "Label of a button that applies a black color in color pickers."
+msgid "Black"
+msgstr "Кара"
+
+msgctxt "Label of a button that applies a dim grey color in color pickers."
+msgid "Dim grey"
+msgstr ""
+
+msgctxt "Label of a button that applies a grey color in color pickers."
+msgid "Grey"
+msgstr "Соры"
+
+msgctxt "Label of a button that applies a light grey color in color pickers."
+msgid "Light grey"
+msgstr "Ачык соры"
+
+msgctxt "Label of a button that applies a white color in color pickers."
+msgid "White"
+msgstr "Ак"
+
+msgctxt "Label of a button that applies a red color in color pickers."
+msgid "Red"
+msgstr "Кызыл"
+
+msgctxt "Label of a button that applies a orange color in color pickers."
+msgid "Orange"
+msgstr "Кызгылт"
+
+msgctxt "Label of a button that applies a yellow color in color pickers."
+msgid "Yellow"
+msgstr "Сары"
+
+msgctxt "Label of a button that applies a light green color in color pickers."
+msgid "Light green"
+msgstr "Ачык яшел"
+
+msgctxt "Label of a button that applies a green color in color pickers."
+msgid "Green"
+msgstr "Яшел"
+
+msgctxt "Label of a button that applies a aquamarine color in color pickers."
+msgid "Aquamarine"
+msgstr "Аквамарин"
+
+msgctxt "Label of a button that applies a turquoise color in color pickers."
+msgid "Turquoise"
+msgstr "Фервоз"
+
+msgctxt "Label of a button that applies a light blue color in color pickers."
+msgid "Light blue"
+msgstr "Ачык зәңгәр"
+
+msgctxt "Label of a button that applies a blue color in color pickers."
+msgid "Blue"
+msgstr "Зәңгәр"
+
+msgctxt "Label of a button that applies a purple color in color pickers."
+msgid "Purple"
+msgstr "Шәмәхә"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/ug.po

@@ -103,3 +103,11 @@ msgstr ""
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr ""
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/uk.po

@@ -103,3 +103,11 @@ msgstr "Синій"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Фіолетовий"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Панель інструментів вмісту блоку редактора"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Контекстна панель інструментів редактора"

package/lang/translations/ur.po

@@ -103,3 +103,11 @@ msgstr "نیلا"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "ارغوانی"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/uz.po

@@ -103,3 +103,11 @@ msgstr "Ko'k"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Siyohrang"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr ""
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr ""

package/lang/translations/vi.po

@@ -103,3 +103,11 @@ msgstr "Xanh biển"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "Tím"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "Thanh công cụ chỉnh sửa khối nội dung"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "Thanh công cụ chỉnh sửa theo ngữ cảnh"

package/lang/translations/zh-cn.po

@@ -103,3 +103,11 @@ msgstr "蓝色"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "紫色"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "编辑器块内容工具栏"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "编辑器上下文工具栏"

package/lang/translations/zh.po

@@ -103,3 +103,11 @@ msgstr "藍色"
 msgctxt "Label of a button that applies a purple color in color pickers."
 msgid "Purple"
 msgstr "紫色"
+
+msgctxt "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs)."
+msgid "Editor block content toolbar"
+msgstr "編輯器區塊內容工具列"
+
+msgctxt "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
+msgid "Editor contextual toolbar"
+msgstr "編輯器關聯式工具列"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "35.0.1",
+  "version": "35.2.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,27 +11,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^35.0.1",
-    "@ckeditor/ckeditor5-core": "^35.0.1",
+    "@ckeditor/ckeditor5-utils": "^35.2.0",
+    "@ckeditor/ckeditor5-core": "^35.2.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
-    "@ckeditor/ckeditor5-engine": "^35.0.1",
-    "@ckeditor/ckeditor5-enter": "^35.0.1",
-    "@ckeditor/ckeditor5-essentials": "^35.0.1",
-    "@ckeditor/ckeditor5-heading": "^35.0.1",
-    "@ckeditor/ckeditor5-image": "^35.0.1",
-    "@ckeditor/ckeditor5-link": "^35.0.1",
-    "@ckeditor/ckeditor5-list": "^35.0.1",
-    "@ckeditor/ckeditor5-mention": "^35.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^35.0.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.0.1",
-    "@ckeditor/ckeditor5-table": "^35.0.1",
-    "@ckeditor/ckeditor5-typing": "^35.0.1"
+    "@ckeditor/ckeditor5-basic-styles": "^35.2.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
+    "@ckeditor/ckeditor5-engine": "^35.2.0",
+    "@ckeditor/ckeditor5-enter": "^35.2.0",
+    "@ckeditor/ckeditor5-essentials": "^35.2.0",
+    "@ckeditor/ckeditor5-font": "^35.2.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^35.2.0",
+    "@ckeditor/ckeditor5-heading": "^35.2.0",
+    "@ckeditor/ckeditor5-image": "^35.2.0",
+    "@ckeditor/ckeditor5-link": "^35.2.0",
+    "@ckeditor/ckeditor5-list": "^35.2.0",
+    "@ckeditor/ckeditor5-mention": "^35.2.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.2.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^35.2.0",
+    "@ckeditor/ckeditor5-table": "^35.2.0",
+    "@ckeditor/ckeditor5-typing": "^35.2.0"
   },
   "engines": {
     "node": ">=14.0.0",

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/bindings/addkeyboardhandlingforgrid
+ */
+
+/**
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
+ *
+ * @param {Object} options Configuration options.
+ * @param {module:utils/keystrokehandler~KeystrokeHandler} options.keystrokeHandler Keystroke handler to register navigation with arrow
+ * keys.
+ * @param {module:utils/focustracker~FocusTracker} options.focusTracker A focus tracker for grid elements.
+ * @param {module:ui/viewcollection~ViewCollection} options.gridItems A collection of grid items.
+ * @param {Number|Function} options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
+ * the number (e.g. for responsive grids).
+ */
+export default function addKeyboardHandlingForGrid( { keystrokeHandler, focusTracker, gridItems, numberOfColumns } ) {
+	const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
+
+	keystrokeHandler.set( 'arrowright', getGridItemFocuser( ( focusedElementIndex, gridItems ) => {
+		if ( focusedElementIndex === gridItems.length - 1 ) {
+			return 0;
+		} else {
+			return focusedElementIndex + 1;
+		}
+	} ) );
+
+	keystrokeHandler.set( 'arrowleft', getGridItemFocuser( ( focusedElementIndex, gridItems ) => {
+		if ( focusedElementIndex === 0 ) {
+			return gridItems.length - 1;
+		} else {
+			return focusedElementIndex - 1;
+		}
+	} ) );
+
+	keystrokeHandler.set( 'arrowup', getGridItemFocuser( ( focusedElementIndex, gridItems ) => {
+		let nextIndex = focusedElementIndex - getNumberOfColumns();
+
+		if ( nextIndex < 0 ) {
+			nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor( gridItems.length / getNumberOfColumns() );
+
+			if ( nextIndex > gridItems.length - 1 ) {
+				nextIndex -= getNumberOfColumns();
+			}
+		}
+
+		return nextIndex;
+	} ) );
+
+	keystrokeHandler.set( 'arrowdown', getGridItemFocuser( ( focusedElementIndex, gridItems ) => {
+		let nextIndex = focusedElementIndex + getNumberOfColumns();
+
+		if ( nextIndex > gridItems.length - 1 ) {
+			nextIndex = focusedElementIndex % getNumberOfColumns();
+		}
+
+		return nextIndex;
+	} ) );
+
+	function getGridItemFocuser( getIndexToFocus ) {
+		return evt => {
+			const focusedElement = gridItems.find( item => item.element === focusTracker.focusedElement );
+			const focusedElementIndex = gridItems.getIndex( focusedElement );
+			const nextIndexToFocus = getIndexToFocus( focusedElementIndex, gridItems );
+
+			gridItems.get( nextIndexToFocus ).focus();
+
+			evt.stopPropagation();
+			evt.preventDefault();
+		};
+	}
+}

package/src/button/button.jsdoc

@@ -51,8 +51,8 @@
  */
 
 /**
- * (Optional) The position of the tooltip. See {@link module:ui/tooltip/tooltipview~TooltipView#position}
- * to learn more about the available position values.
+ * (Optional) The position of the tooltip. See {@link module:ui/tooltipmanager~TooltipManager}
+ * to learn more about the tooltip system.
  *
  * **Note:** It makes sense only when the {@link #tooltip `tooltip` attribute} is defined.
  *

package/src/button/buttonview.js

@@ -9,7 +9,6 @@
 
 import View from '../view';
 import IconView from '../icon/iconview';
-import TooltipView from '../tooltip/tooltipview';
 
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
@@ -71,14 +70,6 @@ export default class ButtonView extends View {
 		 */
 		this.children = this.createCollection();
 
-		/**
-		 * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
-		 *
-		 * @readonly
-		 * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
-		 */
-		this.tooltipView = this._createTooltipView();
-
 		/**
 		 * Label of the button view. It is configurable using the {@link #label label attribute}.
 		 *
@@ -119,7 +110,7 @@ export default class ButtonView extends View {
 		 * @see #_getTooltipString
 		 * @private
 		 * @observable
-		 * @member {Boolean} #_tooltipString
+		 * @member {String|undefined} #_tooltipString
 		 */
 		this.bind( '_tooltipString' ).to(
 			this, 'tooltip',
@@ -146,7 +137,9 @@ export default class ButtonView extends View {
 				tabindex: bind.to( 'tabindex' ),
 				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
 				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
-				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false )
+				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false ),
+				'data-cke-tooltip-text': bind.to( '_tooltipString' ),
+				'data-cke-tooltip-position': bind.to( 'tooltipPosition' )
 			},
 
 			children: this.children,
@@ -189,7 +182,6 @@ export default class ButtonView extends View {
 			this.children.add( this.iconView );
 		}
 
-		this.children.add( this.tooltipView );
 		this.children.add( this.labelView );
 
 		if ( this.withKeystroke && this.keystroke ) {
@@ -204,22 +196,6 @@ export default class ButtonView extends View {
 		this.element.focus();
 	}
 
-	/**
-	 * Creates a {@link module:ui/tooltip/tooltipview~TooltipView} instance and binds it with button
-	 * attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/tooltip/tooltipview~TooltipView}
-	 */
-	_createTooltipView() {
-		const tooltipView = new TooltipView();
-
-		tooltipView.bind( 'text' ).to( this, '_tooltipString' );
-		tooltipView.bind( 'position' ).to( this, 'tooltipPosition' );
-
-		return tooltipView;
-	}
-
 	/**
 	 * Creates a label view instance and binds it with button attributes.
 	 *
@@ -284,7 +260,7 @@ export default class ButtonView extends View {
 	}
 
 	/**
-	 * Gets the text for the {@link #tooltipView} from the combination of
+	 * Gets the text for the tooltip from the combination of
 	 * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
 	 *
 	 * @private

package/src/colorgrid/colorgridview.js

@@ -10,8 +10,9 @@
 import View from '../view';
 import ColorTileView from './colortileview';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
+
 import '../../theme/components/colorgrid/colorgrid.css';
 
 /**
@@ -27,7 +28,7 @@ export default class ColorGridView extends View {
 	 * @param {Object} options Component configuration
 	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} [options.colorDefinitions] Array with definitions
 	 * required to create the {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
-	 * @param {Number} options.columns A number of columns to display the tiles.
+	 * @param {Number} [options.columns=5] A number of columns to display the tiles.
 	 */
 	constructor( locale, options ) {
 		super( locale );
@@ -35,9 +36,15 @@ export default class ColorGridView extends View {
 		const colorDefinitions = options && options.colorDefinitions || [];
 		const viewStyleAttribute = {};
 
-		if ( options && options.columns ) {
-			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr)`;
-		}
+		/**
+		 * A number of columns for the tiles grid.
+		 *
+		 * @readonly
+		 * @member {Number}
+		 */
+		this.columns = options && options.columns ? options.columns : 5;
+
+		viewStyleAttribute.gridTemplateColumns = `repeat( ${ this.columns }, 1fr)`;
 
 		/**
 		 * The color of the currently selected color tile in {@link #items}.
@@ -71,26 +78,6 @@ export default class ColorGridView extends View {
 		 */
 		this.keystrokes = new KeystrokeHandler();
 
-		/**
-		 * Helps cycling over focusable {@link #items} in the grid.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate grid items backwards using the arrowup key.
-				focusPrevious: 'arrowleft',
-
-				// Navigate grid items forwards using the arrowdown key.
-				focusNext: 'arrowright'
-			}
-		} );
-
 		this.items.on( 'add', ( evt, colorTile ) => {
 			colorTile.isOn = colorTile.color === this.selectedColor;
 		} );
@@ -174,6 +161,13 @@ export default class ColorGridView extends View {
 
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
+
+		addKeyboardHandlingForGrid( {
+			keystrokeHandler: this.keystrokes,
+			focusTracker: this.focusTracker,
+			gridItems: this.items,
+			numberOfColumns: this.columns
+		} );
 	}
 
 	/**