Merge pull request #525 from ckeditor/i/5608

Internal: Automatic toolbar grouping dropdown should not be auto-positioned. Closes ckeditor/ckeditor5#5608.

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( {

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>

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.
 

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', () => {