Browse Source

Automatic toolbar grouping dropdown should not be auto-positioned.

Aleksander Nowodzinski 6 years ago
parent
commit
664a2fcef4

+ 5 - 0
packages/ckeditor5-ui/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( {

+ 1 - 0
packages/ckeditor5-ui/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.
 

+ 22 - 0
packages/ckeditor5-ui/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', () => {