From da5dcd85803f64d2697c54ba54bbecb258b1013f Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 17 Oct 2019 10:54:29 +0200
Subject: [PATCH 1/2] Automatic toolbar grouping dropdown should not be
 auto-positioned.

---
 src/toolbar/toolbarview.js       |  5 +++++
 tests/manual/toolbar/grouping.md |  1 +
 tests/toolbar/toolbarview.js     | 22 ++++++++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/src/toolbar/toolbarview.js b/src/toolbar/toolbarview.js
index 5266d75c..1b39be7c 100644
--- a/src/toolbar/toolbarview.js
+++ b/src/toolbar/toolbarview.js
@@ -735,6 +735,11 @@ class DynamicGrouping {
 		const dropdown = createDropdown( locale );
 
 		dropdown.class = 'ck-toolbar__grouped-dropdown';
+
+		// Make sure the dropdown never sticks out to the left/right. It should be under the main toolbar.
+		// (https://github.com/ckeditor/ckeditor5/issues/5608)
+		dropdown.panelPosition = locale.uiLanguageDirection === 'ltr' ? 'sw' : 'se';
+
 		addToolbarToDropdown( dropdown, [] );
 
 		dropdown.buttonView.set( {
diff --git a/tests/manual/toolbar/grouping.md b/tests/manual/toolbar/grouping.md
index 1f89658c..b9ae64e5 100644
--- a/tests/manual/toolbar/grouping.md
+++ b/tests/manual/toolbar/grouping.md
@@ -6,6 +6,7 @@
 2. Refresh the test.
 3. The toolbar should looks the same. Make sure none of toolbar items wrapped or overflow.
 4. The dropdown button should be displayed at the end of the toolbar, allowing to access grouped features.
+	* The drop–down should be displayed **under** the main toolbar.
 5. Grouped items toolbar should never start or end with a separator, even if one was in the main toolbar space.
 6. Other separators (between items) should be preserved.
 
diff --git a/tests/toolbar/toolbarview.js b/tests/toolbar/toolbarview.js
index 52725e23..da736da3 100644
--- a/tests/toolbar/toolbarview.js
+++ b/tests/toolbar/toolbarview.js
@@ -778,6 +778,28 @@ describe( 'ToolbarView', () => {
 				expect( groupedItemsDropdown.toolbarView.items.map( i => i ) )
 					.to.have.ordered.members( groupedItems.map( i => i ) );
 			} );
+
+			// https://github.com/ckeditor/ckeditor5/issues/5608
+			it( 'has the proper position depending on the UI language direction (LTR UI)', () => {
+				const locale = new Locale( { uiLanguage: 'en' } );
+				const view = new ToolbarView( locale, { shouldGroupWhenFull: true } );
+				view.render();
+
+				expect( view._behavior.groupedItemsDropdown.panelPosition ).to.equal( 'sw' );
+
+				view.destroy();
+			} );
+
+			// https://github.com/ckeditor/ckeditor5/issues/5608
+			it( 'has the proper position depending on the UI language direction (RTL UI)', () => {
+				const locale = new Locale( { uiLanguage: 'ar' } );
+				const view = new ToolbarView( locale, { shouldGroupWhenFull: true } );
+				view.render();
+
+				expect( view._behavior.groupedItemsDropdown.panelPosition ).to.equal( 'se' );
+
+				view.destroy();
+			} );
 		} );
 
 		describe( 'item overflow checking logic', () => {

From 16d20a9c1dd4426479adaa4f9ba69b574742924a Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 17 Oct 2019 10:59:11 +0200
Subject: [PATCH 2/2] Tests: Added some spacing to the toolbar grouping manual
 test to make dropdown position testing way easier.

---
 tests/manual/toolbar/grouping.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tests/manual/toolbar/grouping.html b/tests/manual/toolbar/grouping.html
index 4cac73cf..bb92f882 100644
--- a/tests/manual/toolbar/grouping.html
+++ b/tests/manual/toolbar/grouping.html
@@ -9,3 +9,10 @@ <h2>Editor with RTL UI</h2>
 <div id="editor-rtl">
 	<p>Editor content</p>
 </div>
+
+<style>
+	.ck.ck-editor {
+		margin-left: 200px;
+		margin-right: 200px;
+	}
+</style>