8
0
Просмотр исходного кода

Merge branch 'master' into t/ckeditor5/1655

Kamil Piechaczek 6 лет назад
Родитель
Сommit
70aa311aae
100 измененных файлов с 705 добавлено и 122 удалено
  1. 1 1
      packages/ckeditor5-ui/.eslintrc.js
  2. 1 5
      packages/ckeditor5-ui/.travis.yml
  3. 16 0
      packages/ckeditor5-ui/CHANGELOG.md
  4. 1 1
      packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js
  5. 1 1
      packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui.js
  6. 1 1
      packages/ckeditor5-ui/docs/_snippets/features/blocktoolbar.js
  7. 1 1
      packages/ckeditor5-ui/lang/translations/es.po
  8. 29 0
      packages/ckeditor5-ui/lang/translations/id.po
  9. 2 2
      packages/ckeditor5-ui/lang/translations/sr-latn.po
  10. 1 1
      packages/ckeditor5-ui/lang/translations/sr.po
  11. 16 16
      packages/ckeditor5-ui/package.json
  12. 1 1
      packages/ckeditor5-ui/src/bindings/clickoutsidehandler.js
  13. 1 1
      packages/ckeditor5-ui/src/bindings/preventdefault.js
  14. 1 1
      packages/ckeditor5-ui/src/bindings/submithandler.js
  15. 1 1
      packages/ckeditor5-ui/src/button/button.jsdoc
  16. 1 1
      packages/ckeditor5-ui/src/button/buttonview.js
  17. 1 1
      packages/ckeditor5-ui/src/button/switchbuttonview.js
  18. 195 0
      packages/ckeditor5-ui/src/colorgrid/colorgridview.js
  19. 63 0
      packages/ckeditor5-ui/src/colorgrid/colortileview.js
  20. 1 1
      packages/ckeditor5-ui/src/componentfactory.js
  21. 1 1
      packages/ckeditor5-ui/src/dropdown/button/dropdownbutton.jsdoc
  22. 1 1
      packages/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js
  23. 1 1
      packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js
  24. 1 1
      packages/ckeditor5-ui/src/dropdown/dropdownpanelfocusable.jsdoc
  25. 1 1
      packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js
  26. 1 1
      packages/ckeditor5-ui/src/dropdown/dropdownview.js
  27. 1 1
      packages/ckeditor5-ui/src/dropdown/utils.js
  28. 17 2
      packages/ckeditor5-ui/src/editableui/editableuiview.js
  29. 1 1
      packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js
  30. 1 1
      packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
  31. 1 1
      packages/ckeditor5-ui/src/editorui/editoruiview.js
  32. 1 1
      packages/ckeditor5-ui/src/focuscycler.js
  33. 1 1
      packages/ckeditor5-ui/src/icon/iconview.js
  34. 1 1
      packages/ckeditor5-ui/src/iframe/iframeview.js
  35. 1 1
      packages/ckeditor5-ui/src/inputtext/inputtextview.js
  36. 1 1
      packages/ckeditor5-ui/src/label/labelview.js
  37. 1 1
      packages/ckeditor5-ui/src/labeledinput/labeledinputview.js
  38. 1 1
      packages/ckeditor5-ui/src/list/listitemview.js
  39. 1 1
      packages/ckeditor5-ui/src/list/listseparatorview.js
  40. 1 1
      packages/ckeditor5-ui/src/list/listview.js
  41. 1 1
      packages/ckeditor5-ui/src/model.js
  42. 1 1
      packages/ckeditor5-ui/src/notification/notification.js
  43. 1 1
      packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
  44. 1 1
      packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js
  45. 1 1
      packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js
  46. 1 1
      packages/ckeditor5-ui/src/template.js
  47. 1 1
      packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js
  48. 1 1
      packages/ckeditor5-ui/src/toolbar/block/blockbuttonview.js
  49. 1 1
      packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js
  50. 1 1
      packages/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus.js
  51. 1 1
      packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js
  52. 1 1
      packages/ckeditor5-ui/src/toolbar/toolbarseparatorview.js
  53. 1 1
      packages/ckeditor5-ui/src/toolbar/toolbarview.js
  54. 1 1
      packages/ckeditor5-ui/src/tooltip/tooltipview.js
  55. 1 1
      packages/ckeditor5-ui/src/view.js
  56. 1 1
      packages/ckeditor5-ui/src/viewcollection.js
  57. 1 1
      packages/ckeditor5-ui/tests/_utils-tests/utils.js
  58. 1 1
      packages/ckeditor5-ui/tests/_utils/utils.js
  59. 1 1
      packages/ckeditor5-ui/tests/bindings/clickoutsidehandler.js
  60. 1 1
      packages/ckeditor5-ui/tests/bindings/preventdefault.js
  61. 1 1
      packages/ckeditor5-ui/tests/bindings/submithandler.js
  62. 1 1
      packages/ckeditor5-ui/tests/button/buttonview.js
  63. 1 1
      packages/ckeditor5-ui/tests/button/switchbuttonview.js
  64. 203 0
      packages/ckeditor5-ui/tests/colorgrid/colorgridview.js
  65. 39 0
      packages/ckeditor5-ui/tests/colorgrid/colortileview.js
  66. 1 1
      packages/ckeditor5-ui/tests/componentfactory.js
  67. 1 1
      packages/ckeditor5-ui/tests/dropdown/button/dropdownbuttonview.js
  68. 1 1
      packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js
  69. 1 1
      packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js
  70. 1 1
      packages/ckeditor5-ui/tests/dropdown/dropdownview.js
  71. 1 1
      packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js
  72. 1 1
      packages/ckeditor5-ui/tests/dropdown/manual/panelposition.js
  73. 1 1
      packages/ckeditor5-ui/tests/dropdown/utils.js
  74. 35 8
      packages/ckeditor5-ui/tests/editableui/editableuiview.js
  75. 1 1
      packages/ckeditor5-ui/tests/editableui/inline/inlineeditableuiview.js
  76. 1 1
      packages/ckeditor5-ui/tests/editorui/boxed/boxededitoruiview.js
  77. 1 1
      packages/ckeditor5-ui/tests/editorui/editoruiview.js
  78. 1 1
      packages/ckeditor5-ui/tests/focuscycler.js
  79. 1 1
      packages/ckeditor5-ui/tests/icon/iconview.js
  80. 1 1
      packages/ckeditor5-ui/tests/iframe/iframeview.js
  81. 1 1
      packages/ckeditor5-ui/tests/inputtext/inputtextview.js
  82. 1 1
      packages/ckeditor5-ui/tests/label/labelview.js
  83. 1 1
      packages/ckeditor5-ui/tests/labeledinput/labeledinputview.js
  84. 1 1
      packages/ckeditor5-ui/tests/list/listitemview.js
  85. 1 1
      packages/ckeditor5-ui/tests/list/listseparatorview.js
  86. 1 1
      packages/ckeditor5-ui/tests/list/listview.js
  87. 1 1
      packages/ckeditor5-ui/tests/manual/balloontoolbar/balloontoolbar.js
  88. 1 1
      packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.js
  89. 1 1
      packages/ckeditor5-ui/tests/manual/contextualballoon/contextualballoon.js
  90. 1 1
      packages/ckeditor5-ui/tests/manual/contextualballoon/externalchanges.js
  91. 1 1
      packages/ckeditor5-ui/tests/manual/icon/icon.js
  92. 1 1
      packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js
  93. 1 1
      packages/ckeditor5-ui/tests/manual/panel/sticky/stickypanelview.js
  94. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/126/1.js
  95. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/170/1.js
  96. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/198/1.js
  97. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/228/1.js
  98. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/385/1.js
  99. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/418/1.js
  100. 1 1
      packages/ckeditor5-ui/tests/manual/tickets/76/1.js

+ 1 - 1
packages/ckeditor5-ui/.eslintrc.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* eslint-env node */

+ 1 - 5
packages/ckeditor5-ui/.travis.yml

@@ -1,12 +1,8 @@
 sudo: required
 dist: trusty
 addons:
+  chrome: stable
   firefox: latest
-  apt:
-    sources:
-    - google-chrome
-    packages:
-    - google-chrome-stable
 language: node_js
 node_js:
 - '8'

+ 16 - 0
packages/ckeditor5-ui/CHANGELOG.md

@@ -1,6 +1,22 @@
 Changelog
 =========
 
+## [12.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v12.0.0...v12.1.0) (2019-04-10)
+
+### Features
+
+* Implemented `ColorGridView` and `ColorTileView` components. See [ckeditor/ckeditor5#1457](https://github.com/ckeditor/ckeditor5/issues/1457). ([6be52b4](https://github.com/ckeditor/ckeditor5-ui/commit/6be52b4))
+
+### Bug fixes
+
+* Fixed `View#render` collision when moving focus from a one editable to the other in multi-root editor. Closes https://github.com/ckeditor/ckeditor5/issues/1676. ([17e86f9](https://github.com/ckeditor/ckeditor5-ui/commit/17e86f9))
+
+### Other changes
+
+* Optimized icons. ([5325ea8](https://github.com/ckeditor/ckeditor5-ui/commit/5325ea8))
+* Updated translations. ([dcdca2e](https://github.com/ckeditor/ckeditor5-ui/commit/dcdca2e))
+
+
 ## [12.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.2.0...v12.0.0) (2019-02-28)
 
 ### Bug fixes

+ 1 - 1
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals $, window, console:false */

+ 1 - 1
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* config { "dependencies": [ "examples/bootstrap-ui-inner" ] } */

+ 1 - 1
packages/ckeditor5-ui/docs/_snippets/features/blocktoolbar.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals console, window, document */

+ 1 - 1
packages/ckeditor5-ui/lang/translations/es.po

@@ -26,4 +26,4 @@ msgstr "Editor de Texto Enriquecido"
 
 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 ""
+msgstr "Cuadro de edición"

+ 29 - 0
packages/ckeditor5-ui/lang/translations/id.po

@@ -0,0 +1,29 @@
+# Copyright (c) 2003-2019, CKSource - Frederico Knabben. 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: Indonesian (https://www.transifex.com/ckeditor/teams/11143/id/)\n"
+"Language: id\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "Editor Teks Kaya, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "Editor Teks Kaya"
+
+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 "Sunting blok"

+ 2 - 2
packages/ckeditor5-ui/lang/translations/sr-latn.po

@@ -12,7 +12,7 @@
 #
 msgid ""
 msgstr ""
-"Language-Team: Serbian (Latin) (https://www.transifex.com/ckeditor/teams/11143/sr%40latin/)\n"
+"Language-Team: Serbian (Latin) (https://www.transifex.com/ckeditor/teams/11143/sr@latin/)\n"
 "Language: sr@latin\n"
 "Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
 
@@ -26,4 +26,4 @@ msgstr "Prošireni uređivač teksta"
 
 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 ""
+msgstr "Blok uređivač"

+ 1 - 1
packages/ckeditor5-ui/lang/translations/sr.po

@@ -26,4 +26,4 @@ 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 ""
+msgstr "Блок уређивач"

+ 16 - 16
packages/ckeditor5-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,24 +9,24 @@
     "ckeditor5-lib"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.0.0",
-    "@ckeditor/ckeditor5-utils": "^12.0.0",
+    "@ckeditor/ckeditor5-core": "^12.1.0",
+    "@ckeditor/ckeditor5-utils": "^12.1.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^11.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^11.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^12.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^12.0.0",
-    "@ckeditor/ckeditor5-engine": "^13.0.0",
-    "@ckeditor/ckeditor5-enter": "^11.0.0",
-    "@ckeditor/ckeditor5-essentials": "^11.0.0",
-    "@ckeditor/ckeditor5-heading": "^11.0.0",
-    "@ckeditor/ckeditor5-image": "^13.0.0",
-    "@ckeditor/ckeditor5-link": "^11.0.0",
-    "@ckeditor/ckeditor5-list": "^12.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.0",
-    "@ckeditor/ckeditor5-typing": "^12.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^11.0.1",
+    "@ckeditor/ckeditor5-editor-balloon": "^12.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-engine": "^13.1.0",
+    "@ckeditor/ckeditor5-enter": "^11.0.1",
+    "@ckeditor/ckeditor5-essentials": "^11.0.1",
+    "@ckeditor/ckeditor5-heading": "^11.0.1",
+    "@ckeditor/ckeditor5-image": "^13.0.1",
+    "@ckeditor/ckeditor5-link": "^11.0.1",
+    "@ckeditor/ckeditor5-list": "^12.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.1",
+    "@ckeditor/ckeditor5-typing": "^12.0.1",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^1.0.11",
     "husky": "^1.3.1",

+ 1 - 1
packages/ckeditor5-ui/src/bindings/clickoutsidehandler.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/bindings/preventdefault.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/bindings/submithandler.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/button/button.jsdoc

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/button/buttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/button/switchbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 195 - 0
packages/ckeditor5-ui/src/colorgrid/colorgridview.js

@@ -0,0 +1,195 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/colorgrid/colorgrid
+ */
+
+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 '../../theme/components/colorgrid/colorgrid.css';
+
+/**
+ * A grid of {@link module:ui/colorgrid/colortile~ColorTileView color tiles}.
+ *
+ * @extends module:ui/view~View
+ */
+export default class ColorGridView extends View {
+	/**
+	 * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
+	 *
+	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
+	 * @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.
+	 */
+	constructor( locale, options ) {
+		super( locale );
+
+		const colorDefinitions = options && options.colorDefinitions || [];
+		const viewStyleAttribute = {};
+
+		if ( options && options.columns ) {
+			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr)`;
+		}
+
+		/**
+		 * The color of the currently selected color tile in {@link #items}.
+		 *
+		 * @type {String}
+		 */
+		this.set( 'selectedColor' );
+
+		/**
+		 * Collection of the child tile views.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.items = this.createCollection();
+
+		/**
+		 * Tracks information about DOM focus in the grid.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		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',
+			}
+		} );
+
+		colorDefinitions.forEach( item => {
+			const colorTile = new ColorTileView();
+
+			colorTile.set( {
+				color: item.color,
+				label: item.label,
+				tooltip: true,
+				hasBorder: item.options.hasBorder
+			} );
+
+			colorTile.on( 'execute', () => {
+				this.fire( 'execute', {
+					value: item.color,
+					hasBorder: item.options.hasBorder,
+					label: item.label
+				} );
+			} );
+
+			this.items.add( colorTile );
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+			children: this.items,
+			attributes: {
+				class: [
+					'ck',
+					'ck-color-grid'
+				],
+				style: viewStyleAttribute
+			}
+		} );
+
+		this.on( 'change:selectedColor', ( evt, name, selectedColor ) => {
+			for ( const item of this.items ) {
+				item.isOn = item.color === selectedColor;
+			}
+		} );
+	}
+
+	/**
+	 * Focuses the first focusable in {@link #items}.
+	 */
+	focus() {
+		if ( this.items.length ) {
+			this.items.first.focus();
+		}
+	}
+
+	/**
+	 * Focuses the last focusable in {@link #items}.
+	 */
+	focusLast() {
+		if ( this.items.length ) {
+			this.items.last.focus();
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Items added before rendering should be known to the #focusTracker.
+		for ( const item of this.items ) {
+			this.focusTracker.add( item.element );
+		}
+
+		this.items.on( 'add', ( evt, item ) => {
+			this.focusTracker.add( item.element );
+		} );
+
+		this.items.on( 'remove', ( evt, item ) => {
+			this.focusTracker.remove( item.element );
+		} );
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+}
+
+/**
+ * A color definition used to create a {@link module:ui/colorgrid/colortile~ColorTileView}.
+ *
+ *		{
+ *			color: hsl(0, 0%, 75%),
+ *			label: 'Light Grey',
+ *			options: {
+ *				hasBorder: true
+ *			}
+ *		}
+ *
+ * @typedef {Object} module:ui/colorgrid/colorgrid~ColorDefinition
+ * @type Object
+ *
+ * @property {String} color String representing a color.
+ * It is used as value of background-color style in {@link module:ui/colorgrid/colortile~ColorTileView}.
+ * @property {String} label String used as label for {@link module:ui/colorgrid/colortile~ColorTileView}.
+ * @property {Object} options Additional options passed to create a {@link module:ui/colorgrid/colortile~ColorTileView}.
+ * @property {Boolean} options.hasBorder A flag that indicates if special a CSS class should be added
+ * to {@link module:ui/colorgrid/colortile~ColorTileView}, which renders a border around it.
+ */

+ 63 - 0
packages/ckeditor5-ui/src/colorgrid/colortileview.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/colorgrid/colortile
+ */
+
+import ButtonView from '../button/buttonview';
+import checkIcon from '../../theme/icons/color-tile-check.svg';
+
+/**
+ * This class represents a single color tile in the {@link module:ui/colorgrid/colorgrid~ColorGridView}.
+ *
+ * @extends module:ui/button/buttonview~ButtonView
+ */
+export default class ColorTileView extends ButtonView {
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * String representing a color shown as tile's background.
+		 *
+		 * @type {String}
+		 */
+		this.set( 'color' );
+
+		/**
+		 * A flag that toggles a special CSS class responsible for displaying
+		 * a border around the button.
+		 *
+		 * @type {Boolean}
+		 */
+		this.set( 'hasBorder' );
+
+		this.icon = checkIcon;
+
+		this.extendTemplate( {
+			attributes: {
+				style: {
+					backgroundColor: bind.to( 'color' )
+				},
+				class: [
+					'ck',
+					'ck-color-grid__tile',
+					bind.if( 'hasBorder', 'ck-color-table__color-tile_bordered' )
+				]
+			}
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		this.iconView.fillColor = 'hsl(0, 0%, 100%)';
+	}
+}

+ 1 - 1
packages/ckeditor5-ui/src/componentfactory.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/button/dropdownbutton.jsdoc

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/dropdownpanelfocusable.jsdoc

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 17 - 2
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**
@@ -122,7 +122,7 @@ export default class EditableUIView extends View {
 		const editingView = this._editingView;
 
 		if ( editingView.isRenderingInProgress ) {
-			editingView.once( 'change:isRenderingInProgress', () => update( this ) );
+			updateAfterRender( this );
 		} else {
 			update( this );
 		}
@@ -135,5 +135,20 @@ export default class EditableUIView extends View {
 				writer.removeClass( view.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot );
 			} );
 		}
+
+		// In a case of a multi-root editor, a callback will be attached more than once (one callback for each root).
+		// While executing one callback the `isRenderingInProgress` observable is changing what causes executing another
+		// callback and render is called inside the already pending render.
+		// We need to be sure that callback is executed only when the value has changed from `true` to `false`.
+		// See https://github.com/ckeditor/ckeditor5/issues/1676.
+		function updateAfterRender( view ) {
+			editingView.once( 'change:isRenderingInProgress', ( evt, name, value ) => {
+				if ( !value ) {
+					update( view );
+				} else {
+					updateAfterRender( view );
+				}
+			} );
+		}
 	}
 }

+ 1 - 1
packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/focuscycler.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/icon/iconview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global DOMParser */

+ 1 - 1
packages/ckeditor5-ui/src/iframe/iframeview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/inputtext/inputtextview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/label/labelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/labeledinput/labeledinputview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/list/listitemview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/list/listseparatorview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/list/listview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/model.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/notification/notification.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/template.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/block/blockbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/toolbarseparatorview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/tooltip/tooltipview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/view.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/src/viewcollection.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /**

+ 1 - 1
packages/ckeditor5-ui/tests/_utils-tests/utils.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document */

+ 1 - 1
packages/ckeditor5-ui/tests/_utils/utils.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document */

+ 1 - 1
packages/ckeditor5-ui/tests/bindings/clickoutsidehandler.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global document, Event */

+ 1 - 1
packages/ckeditor5-ui/tests/bindings/preventdefault.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global Event */

+ 1 - 1
packages/ckeditor5-ui/tests/bindings/submithandler.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global document, Event */

+ 1 - 1
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals Event */

+ 1 - 1
packages/ckeditor5-ui/tests/button/switchbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import SwitchButtonView from '../../src/button/switchbuttonview';

+ 203 - 0
packages/ckeditor5-ui/tests/colorgrid/colorgridview.js

@@ -0,0 +1,203 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals Event */
+
+import ColorGridView from './../../src/colorgrid/colorgridview';
+import ColorTileView from '../../src/colorgrid/colortileview';
+import ViewCollection from '../../src/viewcollection';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import FocusCycler from '../../src/focuscycler';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+describe( 'ColorGridView', () => {
+	let locale, view;
+
+	const colorDefinitions = [
+		{
+			color: '#000',
+			label: 'Black',
+			options: {
+				hasBorder: false
+			}
+		},
+		{
+			color: 'rgb(255, 255, 255)',
+			label: 'White',
+			options: {
+				hasBorder: true
+			}
+		},
+		{
+			color: 'red',
+			label: 'Red',
+			options: {
+				hasBorder: false
+			}
+		}
+	];
+
+	beforeEach( () => {
+		locale = { t() {} };
+		view = new ColorGridView( locale, { colorDefinitions } );
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	testUtils.createSinonSandbox();
+
+	describe( 'constructor()', () => {
+		it( 'creates element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-color-grid' ) ).to.be.true;
+		} );
+
+		it( 'uses the options#columns to control the grid', () => {
+			const view = new ColorGridView( locale, { columns: 3 } );
+			view.render();
+
+			expect( view.element.style.gridTemplateColumns ).to.equal( '1fr 1fr 1fr' );
+
+			view.destroy();
+		} );
+
+		it( 'creates the view without provided color definitions', () => {
+			const view = new ColorGridView( locale );
+			view.render();
+
+			expect( view.items ).to.have.length( 0 );
+
+			view.destroy();
+		} );
+
+		it( 'creates view collection with children', () => {
+			expect( view.items ).to.be.instanceOf( ViewCollection );
+		} );
+
+		it( 'creates focus tracker', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+
+		it( 'creates keystroke handler', () => {
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+		} );
+
+		it( 'creates focus cycler', () => {
+			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+		} );
+
+		it( 'reacts to changes in #selectedColor by setting the item#isOn', () => {
+			expect( view.items.map( item => item ).some( item => item.isOn ) ).to.be.false;
+
+			view.selectedColor = 'red';
+
+			expect( view.items.get( 2 ).isOn ).to.be.true;
+
+			view.selectedColor = 'rgb(255, 255, 255)';
+
+			expect( view.items.get( 1 ).isOn ).to.be.true;
+			expect( view.items.get( 2 ).isOn ).to.be.false;
+		} );
+
+		describe( 'add colors from definition as child items', () => {
+			it( 'has proper number of elements', () => {
+				expect( view.items.length ).to.equal( 3 );
+			} );
+
+			colorDefinitions.forEach( ( color, index ) => {
+				describe( 'child items has proper attributes', () => {
+					it( `for (index: ${ index }, color: ${ color.color }) child`, () => {
+						const colorTile = view.items.get( index );
+
+						expect( colorTile ).to.be.instanceOf( ColorTileView );
+						expect( colorTile.color ).to.equal( color.color );
+					} );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'execute()', () => {
+		it( 'fires event for rendered tiles', () => {
+			const spy = sinon.spy();
+			const firstTile = view.items.first;
+
+			view.on( 'execute', spy );
+
+			firstTile.isEnabled = true;
+
+			firstTile.element.dispatchEvent( new Event( 'click' ) );
+			sinon.assert.callCount( spy, 1 );
+
+			firstTile.isEnabled = false;
+
+			firstTile.element.dispatchEvent( new Event( 'click' ) );
+			sinon.assert.callCount( spy, 1 );
+		} );
+	} );
+
+	describe( 'focus', () => {
+		it( 'focuses the tile in DOM', () => {
+			const spy = sinon.spy( view.items.first, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+
+			view.items.clear();
+			view.focus();
+
+			expect( view.items.length ).to.equal( 0 );
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'focuses last the tile in DOM', () => {
+			const spy = sinon.spy( view.items.last, 'focus' );
+
+			view.focusLast();
+
+			sinon.assert.calledOnce( spy );
+
+			view.items.clear();
+			view.focusLast();
+
+			expect( view.items.length ).to.equal( 0 );
+			sinon.assert.calledOnce( spy );
+		} );
+
+		describe( 'update elements in focus tracker', () => {
+			it( 'adding new element', () => {
+				const spy = sinon.spy( view.focusTracker, 'add' );
+
+				const colorTile = new ColorTileView();
+				colorTile.set( {
+					color: 'yellow',
+					label: 'Yellow',
+					tooltip: true,
+					options: {
+						hasBorder: false
+					}
+				} );
+				view.items.add( colorTile );
+
+				expect( view.items.length ).to.equal( 4 );
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'removes element', () => {
+				const spy = sinon.spy( view.focusTracker, 'remove' );
+
+				view.items.remove( view.items.length - 1 );
+
+				expect( view.items.length ).to.equal( 2 );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+	} );
+} );

+ 39 - 0
packages/ckeditor5-ui/tests/colorgrid/colortileview.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import ColorTileView from '../../src/colorgrid/colortileview';
+import ButtonView from '../../src/button/buttonview';
+import checkIcon from '../../theme/icons/color-tile-check.svg';
+
+describe( 'ColorTileView', () => {
+	it( 'inherits from ButtonView', () => {
+		expect( new ColorTileView() ).to.be.instanceOf( ButtonView );
+	} );
+
+	it( 'has proper attributes and classes', () => {
+		const colorTile = new ColorTileView();
+		colorTile.render();
+
+		expect( colorTile.color ).to.be.undefined;
+		expect( colorTile.hasBorder ).to.be.undefined;
+
+		colorTile.set( 'color', 'green' );
+		expect( colorTile.color ).to.equal( 'green' );
+		expect( colorTile.element.style.backgroundColor ).to.equal( 'green' );
+		expect( colorTile.element.classList.contains( 'ck-color-grid__tile' ) ).to.be.true;
+		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.false;
+
+		colorTile.set( 'hasBorder', true );
+		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.true;
+	} );
+
+	it( 'has a check icon', () => {
+		const colorTile = new ColorTileView();
+		colorTile.render();
+
+		expect( colorTile.icon ).to.equal( checkIcon );
+		expect( colorTile.iconView.fillColor ).to.equal( 'hsl(0, 0%, 100%)' );
+	} );
+} );

+ 1 - 1
packages/ckeditor5-ui/tests/componentfactory.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/button/dropdownbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js

@@ -1,7 +1,7 @@
 
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global Event */

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import DropdownView from '../../src/dropdown/dropdownview';

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window */

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/manual/panelposition.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import Model from '../../../src/model';

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document Event */

+ 35 - 8
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document */
@@ -80,22 +80,49 @@ describe( 'EditableUIView', () => {
 			} );
 
 			// https://github.com/ckeditor/ckeditor5/issues/1530.
+			// https://github.com/ckeditor/ckeditor5/issues/1676.
 			it( 'should work when update is handled during the rendering phase', () => {
+				const secondEditingViewRoot = new ViewRootEditableElement( 'div' );
+				const secondView = new EditableUIView( locale, editingView );
+				const secondEditableElement = document.createElement( 'div' );
+
+				document.body.appendChild( secondEditableElement );
+
+				secondEditingViewRoot.rootName = 'second';
+				secondEditingViewRoot._document = editingView.document;
+				editingView.document.roots.add( secondEditingViewRoot );
+
+				secondView.name = 'second';
+				secondView.render();
+
+				editingView.attachDomRoot( editableElement, 'main' );
+				editingView.attachDomRoot( secondEditableElement, 'second' );
+
 				view.isFocused = true;
-				editingView.isRenderingInProgress = true;
+				secondView.isFocused = false;
 
-				expect( editingViewRoot.hasClass( 'ck-focused' ) ).to.be.true;
-				expect( editingViewRoot.hasClass( 'ck-blurred' ) ).to.be.false;
+				expect( editingViewRoot.hasClass( 'ck-focused' ), 1 ).to.be.true;
+				expect( editingViewRoot.hasClass( 'ck-blurred' ), 2 ).to.be.false;
+				expect( secondEditingViewRoot.hasClass( 'ck-focused' ), 3 ).to.be.false;
+				expect( secondEditingViewRoot.hasClass( 'ck-blurred' ), 4 ).to.be.true;
 
+				editingView.isRenderingInProgress = true;
 				view.isFocused = false;
+				secondView.isFocused = true;
 
-				expect( editingViewRoot.hasClass( 'ck-focused' ) ).to.be.true;
-				expect( editingViewRoot.hasClass( 'ck-blurred' ) ).to.be.false;
+				expect( editingViewRoot.hasClass( 'ck-focused' ), 5 ).to.be.true;
+				expect( editingViewRoot.hasClass( 'ck-blurred' ), 6 ).to.be.false;
+				expect( secondEditingViewRoot.hasClass( 'ck-focused' ), 7 ).to.be.false;
+				expect( secondEditingViewRoot.hasClass( 'ck-blurred' ), 8 ).to.be.true;
 
 				editingView.isRenderingInProgress = false;
 
-				expect( editingViewRoot.hasClass( 'ck-focused' ) ).to.be.false;
-				expect( editingViewRoot.hasClass( 'ck-blurred' ) ).to.be.true;
+				expect( editingViewRoot.hasClass( 'ck-focused' ), 9 ).to.be.false;
+				expect( editingViewRoot.hasClass( 'ck-blurred' ), 10 ).to.be.true;
+				expect( secondEditingViewRoot.hasClass( 'ck-focused' ), 11 ).to.be.true;
+				expect( secondEditingViewRoot.hasClass( 'ck-blurred' ), 12 ).to.be.false;
+
+				secondEditableElement.remove();
 			} );
 		} );
 	} );

+ 1 - 1
packages/ckeditor5-ui/tests/editableui/inline/inlineeditableuiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document */

+ 1 - 1
packages/ckeditor5-ui/tests/editorui/boxed/boxededitoruiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import BoxedEditorUIView from '../../../src/editorui/boxed/boxededitoruiview';

+ 1 - 1
packages/ckeditor5-ui/tests/editorui/editoruiview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global document */

+ 1 - 1
packages/ckeditor5-ui/tests/focuscycler.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import ViewCollection from '../src/viewcollection';

+ 1 - 1
packages/ckeditor5-ui/tests/icon/iconview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import IconView from '../../src/icon/iconview';

+ 1 - 1
packages/ckeditor5-ui/tests/iframe/iframeview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document */

+ 1 - 1
packages/ckeditor5-ui/tests/inputtext/inputtextview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global Event */

+ 1 - 1
packages/ckeditor5-ui/tests/label/labelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import LabelView from '../../src/label/labelview';

+ 1 - 1
packages/ckeditor5-ui/tests/labeledinput/labeledinputview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import View from '../../src/view';

+ 1 - 1
packages/ckeditor5-ui/tests/list/listitemview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import ButtonView from '../../src/button/buttonview';

+ 1 - 1
packages/ckeditor5-ui/tests/list/listseparatorview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import ListSeparatorView from '../../src/list/listseparatorview';

+ 1 - 1
packages/ckeditor5-ui/tests/list/listview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global document */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/balloontoolbar/balloontoolbar.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window, document, console:false */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window, document, console:false, setTimeout */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/contextualballoon/contextualballoon.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window, document, console:false */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/contextualballoon/externalchanges.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals console:false, document, setTimeout */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/icon/icon.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import IconView from '../../../src/icon/iconview';

+ 1 - 1
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/panel/sticky/stickypanelview.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 import testUtils from '../../../_utils/utils';

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/126/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* global document, window */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/170/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window, document, console:false */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/198/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals console:false, document, setTimeout */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/228/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals document, console:false */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/385/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window, document, console:false */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/418/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals window, document, console:false */

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/76/1.js

@@ -1,6 +1,6 @@
 /**
  * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 /* globals console:false, document, window */

Некоторые файлы не были показаны из-за большого количества измененных файлов