Merge pull request #8672 from ckeditor/i/8655-grouped-toolbar-tooltip

Fix (ui): The "Show more items" toolbar button tooltip should not overflow the editor. Closes #8655.
ckeditor · Dec 22, 2020 · 6175a20 · 6175a20
2 parents 2d9954c + fc30fe6
commit 6175a20
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/packages/ckeditor5-ui/src/toolbar/toolbarview.js b/packages/ckeditor5-ui/src/toolbar/toolbarview.js
@@ -863,6 +863,7 @@ class DynamicGrouping {
 		dropdown.buttonView.set( {
 			label: t( 'Show more items' ),
 			tooltip: true,
+			tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
 			icon: verticalDotsIcon
 		} );
 

diff --git a/packages/ckeditor5-ui/tests/toolbar/toolbarview.js b/packages/ckeditor5-ui/tests/toolbar/toolbarview.js
@@ -997,6 +997,26 @@ describe( 'ToolbarView', () => {
 				expect( groupedItemsDropdown.buttonView.label ).to.equal( 'Show more items' );
 			} );
 
+			it( 'tooltip 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.buttonView.tooltipPosition ).to.equal( 'sw' );
+
+				view.destroy();
+			} );
+
+			it( 'tooltip 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.buttonView.tooltipPosition ).to.equal( 'se' );
+
+				view.destroy();
+			} );
+
 			it( 'shares its toolbarView#items with grouped items', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );