@syncfusion/ej2-ribbon 21.2.3 → 22.1.39

package/src/ribbon/base/utils.d.ts

@@ -14,11 +14,11 @@ export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index:
 /**
  * Gets template content based on the template property value.
  *
- * @param {string | HTMLElement} template - Template property value.
+ * @param {string | HTMLElement| Function} template - Template property value.
  * @returns {Function} - Return template function.
  * @hidden
  */
-export declare function getTemplateFunction(template: string | HTMLElement): Function;
+export declare function getTemplateFunction(template: string | HTMLElement | Function): Function;
 /**
  * Gets the ribbon item
  *

package/src/ribbon/base/utils.js

@@ -22,7 +22,7 @@ export function getIndex(arr, condition) {
 /**
  * Gets template content based on the template property value.
  *
- * @param {string | HTMLElement} template - Template property value.
+ * @param {string | HTMLElement| Function} template - Template property value.
  * @returns {Function} - Return template function.
  * @hidden
  */
@@ -183,16 +183,21 @@ export function getItemElement(parent, id, itemProp) {
         return null;
     }
     if (parent.activeLayout === RibbonLayout.Classic) {
-        contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
-            : contentEle;
-        return contentEle.querySelector('#' + id);
+        if (itemProp.item.displayOptions & DisplayMode.Classic) {
+            contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
+                : contentEle;
+            return contentEle.querySelector('#' + id);
+        }
+        else {
+            return null;
+        }
     }
     else {
-        //Checks for Simplified and Auto options (Auto = simplified + popup)
+        //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
         var ele = (itemProp.item.displayOptions & DisplayMode.Simplified) ?
             contentEle.querySelector('#' + itemProp.item.id) : null;
         // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-        if (!ele && (DisplayMode.Simplified !== DisplayMode.None)) {
+        if (!ele) {
             var dropdown = itemProp.group.enableGroupOverflow ?
                 getComponent(contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID), DropDownButton)
                 : parent.overflowDDB;
@@ -239,7 +244,7 @@ export function setToolTipContent(args, tooltip, tooltipData) {
     content.appendChild(textContainer);
     if (data.iconCss) {
         var customCss = tooltip.createElement('div', {
-            className: data.cssClass ? data.cssClass + ' ' + data.iconCss + ' ' + constants.RIBBON_TOOLTIP_ICON : data.iconCss + ' ' + constants.RIBBON_TOOLTIP_ICON
+            className: data.iconCss + ' ' + constants.RIBBON_TOOLTIP_ICON
         });
         textContainer.appendChild(customCss);
     }
@@ -251,7 +256,8 @@ export function setToolTipContent(args, tooltip, tooltipData) {
         textContainer.appendChild(tooltipContent);
     }
     tooltip.setProperties({
-        content: content
+        content: content,
+        cssClass: data.cssClass ? data.cssClass + ' ' + constants.RIBBON_TOOLTIP : constants.RIBBON_TOOLTIP
     });
 }
 /**
@@ -264,9 +270,9 @@ export function setToolTipContent(args, tooltip, tooltipData) {
  */
 export function createTooltip(element, ribbon) {
     var ribbonTooltip = new Tooltip({
-        cssClass: (constants.RIBBON_TOOLTIP + ' ' + ribbon.cssClass).trim(),
         target: '.' + constants.RIBBON_TOOLTIP_TARGET,
-        beforeRender: beforeTooltipRender.bind(this)
+        beforeRender: beforeTooltipRender.bind(this),
+        windowCollision: true
     });
     ribbonTooltip.appendTo(element);
     /**

package/src/ribbon/items/ribbon-button.js

@@ -62,6 +62,7 @@ var RibbonButton = /** @class */ (function () {
     RibbonButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var buttonEle = itemEle.querySelector('#' + item.id);
+        buttonEle.setAttribute('data-control', item.type.toString());
         var buttonObj = getComponent(buttonEle, Button);
         buttonObj.setProperties({ cssClass: buttonObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         buttonEle.onclick = function (e) {

package/src/ribbon/items/ribbon-checkbox.js

@@ -58,6 +58,7 @@ var RibbonCheckBox = /** @class */ (function () {
     RibbonCheckBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         var checkBoxObj = getComponent(inputEle, CheckBox);
         checkBoxObj.cssClass = checkBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         checkBoxObj.dataBind();

package/src/ribbon/items/ribbon-colorpicker.js

@@ -86,6 +86,7 @@ var RibbonColorPicker = /** @class */ (function () {
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
+        colorPickerEle.setAttribute('data-control', item.type.toString());
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         colorPickerObj.setProperties({ cssClass: colorPickerObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.

package/src/ribbon/items/ribbon-combobox.js

@@ -83,6 +83,7 @@ var RibbonComboBox = /** @class */ (function () {
     RibbonComboBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         var comboBoxObj = getComponent(inputEle, ComboBox);
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = function (e) {

package/src/ribbon/items/ribbon-dropdown.d.ts

@@ -9,6 +9,8 @@ export declare class RibbonDropDown {
     constructor(parent: Ribbon);
     protected getModuleName(): string;
     protected destroy(): void;
+    private itemIndex;
+    private enableRtl;
     /**
      * Creates DropDown.
      *
@@ -48,7 +50,11 @@ export declare class RibbonDropDown {
      * @returns {void}
      * @hidden
      */
-    createOverFlowDropDown(id: string, name: string, iconCss: string, groupEle: HTMLElement, overflowEle: HTMLElement): DropDownButton;
+    createOverFlowDropDown(id: string, name: string, iconCss: string, groupEle: HTMLElement, overflowEle: HTMLElement, enableRtl?: boolean): DropDownButton;
+    private keyActionHandler;
+    private handleNavigation;
+    private focusLauncherIcon;
+    private updateItemIndex;
     /**
      * Removes Overflow DropDown.
      *

package/src/ribbon/items/ribbon-dropdown.js

@@ -74,6 +74,7 @@ var RibbonDropDown = /** @class */ (function () {
     RibbonDropDown.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var dropdownElement = itemEle.querySelector('#' + item.id);
+        dropdownElement.setAttribute('data-control', item.type.toString());
         var dropdown = getComponent(dropdownElement, DropDownButton);
         dropdown.cssClass = dropdown.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         dropdown.dataBind();
@@ -131,10 +132,13 @@ var RibbonDropDown = /** @class */ (function () {
      * @returns {void}
      * @hidden
      */
-    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle) {
+    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle, enableRtl) {
+        var _this = this;
+        this.enableRtl = enableRtl;
         var buttonEle = this.parent.createElement('button', {
             id: id + OVERFLOW_ID + DROPDOWN_ID
         });
+        groupEle.setAttribute('tabindex', '0');
         overflowEle.appendChild(buttonEle);
         var dropdown = new DropDownButton({
             iconCss: iconCss,
@@ -150,8 +154,155 @@ var RibbonDropDown = /** @class */ (function () {
             }
         }, buttonEle);
         createTooltip(groupEle, this.parent);
+        buttonEle.onclick = buttonEle.onkeydown = function () { _this.itemIndex = 0; };
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        groupEle.onkeydown = function (e) { _this.keyActionHandler(e, groupEle), _this; };
         return dropdown;
     };
+    RibbonDropDown.prototype.keyActionHandler = function (e, target) {
+        var items = target.querySelectorAll('.e-control');
+        var comboBoxElements = target.querySelectorAll('.e-combobox');
+        var comboBoxEle;
+        if (comboBoxElements) {
+            for (var i = 0; i < comboBoxElements.length; i++) {
+                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+                }
+            }
+        }
+        if (comboBoxEle) {
+            for (var i = 0; i < items.length; i++) {
+                if (items[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
+                    if (items[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                        this.itemIndex = i;
+                    }
+                }
+            }
+        }
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+            e.target.classList.contains('e-ribbon-last-item') || e.target.classList.contains('e-ribbon-first-item')) {
+            if (e.key === 'ArrowRight' || (!e.shiftKey && e.key === 'Tab')) {
+                this.handleNavigation(e, !this.enableRtl, items);
+            }
+            if (e.key === 'ArrowLeft' || (e.shiftKey && e.key === 'Tab')) {
+                this.handleNavigation(e, this.enableRtl, items);
+            }
+        }
+    };
+    RibbonDropDown.prototype.handleNavigation = function (e, enableRtl, items) {
+        if (!(items[0].classList.contains('e-ribbon-first-item'))) {
+            items[0].classList.add('e-ribbon-first-item');
+        }
+        if (!(items[items.length - 1].classList.contains('e-ribbon-last-item'))) {
+            items[items.length - 1].classList.add('e-ribbon-last-item');
+        }
+        if (enableRtl) {
+            if (this.itemIndex === 0 && items[parseInt(this.itemIndex.toString(), 10)].classList.contains('e-ribbon-first-item')) {
+                this.updateItemIndex(e, items, true);
+            }
+            if (!e.target.classList.contains('e-combobox') && !e.target.classList.contains('e-ribbon-last-item') &&
+                !e.target.classList.contains('e-ribbon-group-container') && (e.target.classList.contains('e-ribbon-first-item')
+                || this.itemIndex !== 0) && e.target.classList.contains('e-control')) {
+                this.itemIndex++;
+                this.updateItemIndex(e, items, true);
+            }
+            if (e.target.classList.contains('e-ribbon-last-item')) {
+                var launcherIcon = false;
+                launcherIcon = this.focusLauncherIcon(e, items);
+                if (!launcherIcon) {
+                    this.itemIndex = 0;
+                    this.updateItemIndex(e, items, true);
+                }
+            }
+            if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+                this.itemIndex = 0;
+                this.updateItemIndex(e, items, true);
+            }
+        }
+        else {
+            if (!e.target.classList.contains('e-combobox') && this.itemIndex !== 0) {
+                this.itemIndex--;
+                this.updateItemIndex(e, items, false);
+            }
+            if (e.target.classList.contains('e-ribbon-first-item')) {
+                var launcherIcon = false;
+                launcherIcon = this.focusLauncherIcon(e, items);
+                if (!launcherIcon) {
+                    this.itemIndex = items.length - 1;
+                    this.updateItemIndex(e, items, false);
+                }
+            }
+            if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+                this.itemIndex = items.length - 1;
+                this.updateItemIndex(e, items, false);
+            }
+        }
+        if (e.target.classList.contains('e-combobox') && (e.key === 'Tab')) {
+            if (enableRtl) {
+                if (this.itemIndex < items.length - 1) {
+                    this.itemIndex++;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+            }
+        }
+    };
+    RibbonDropDown.prototype.focusLauncherIcon = function (e, items) {
+        var groupContainer = items[parseInt(this.itemIndex.toString(), 10)].closest('.e-ribbon-group-container');
+        var launcherIconEle;
+        if (groupContainer) {
+            launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+        }
+        if (launcherIconEle) {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+            }
+            groupContainer.querySelector('.e-ribbon-launcher-icon').focus();
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    RibbonDropDown.prototype.updateItemIndex = function (e, items, enableRtl) {
+        var ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+            if (enableRtl) {
+                if (this.itemIndex < items.length - 1) {
+                    this.itemIndex++;
+                }
+                else {
+                    var launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = 0;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+                else {
+                    var launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = items.length - 1;
+                }
+            }
+            ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        }
+        if (e.key === 'Tab') {
+            e.preventDefault();
+        }
+        items[parseInt(this.itemIndex.toString(), 10)].focus();
+    };
     /**
      * Removes Overflow DropDown.
      *

package/src/ribbon/items/ribbon-splitbutton.js

@@ -70,6 +70,13 @@ var RibbonSplitButton = /** @class */ (function () {
                 }
             }
         }, buttonEle);
+        var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
+        dropdownEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
         this.setContent(item, splitbutton);
         var wrapper = splitbutton['wrapper'];
         EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
@@ -87,9 +94,26 @@ var RibbonSplitButton = /** @class */ (function () {
     RibbonSplitButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var splitButtonEle = itemEle.querySelector('#' + item.id);
+        splitButtonEle.setAttribute('data-control', item.type.toString());
         var splitbutton = getComponent(splitButtonEle, SplitButton);
         splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         splitbutton.dataBind();
+        var dropdownEle = splitButtonEle.parentElement.querySelector('.e-dropdown-btn');
+        var ddbId = dropdownEle.getAttribute('id');
+        var popupEle = document.querySelector('#' + ddbId + '-popup');
+        dropdownEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
+        popupEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                splitbutton['wrapper'].classList.remove('e-ribbon-open');
+                popupEle.querySelector('.e-focused').click();
+            }
+        };
         var target;
         splitbutton.beforeClose = function (e) {
             if (item.splitButtonSettings.beforeClose) {

package/src/ribbon/models/ribbon-combobox-settings-model.d.ts

@@ -82,22 +82,25 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for the footer container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    footerTemplate?: string;
+    footerTemplate?: string | Function;
 
     /**
      * Specifies the template content for the group headers present in the popup list.
      *
      * @default null
+     * @aspType string
      */
-    groupTemplate?: string;
+    groupTemplate?: string | Function;
 
     /**
      * Specifies the template content for the header container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate?: string;
+    headerTemplate?: string | Function;
 
     /**
      * Specifies the index of the selected item in the combobox.
@@ -110,15 +113,17 @@ export interface RibbonComboBoxSettingsModel {
      * Specifies the template content for each list item present in the popup.
      *
      * @default null
+     * @aspType string
      */
-    itemTemplate?: string;
+    itemTemplate?: string | Function;
 
     /**
      * Specifies the template content for the popup list of combobox when no data is available.
      *
      * @default 'No records found'
+     * @aspType string
      */
-    noRecordsTemplate?: string;
+    noRecordsTemplate?: string | Function;
 
     /**
      * Specifies a short hint that describes the expected value of the combobox.

package/src/ribbon/models/ribbon-combobox-settings.d.ts

@@ -78,20 +78,23 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for the footer container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    footerTemplate: string;
+    footerTemplate: string | Function;
     /**
      * Specifies the template content for the group headers present in the popup list.
      *
      * @default null
+     * @aspType string
      */
-    groupTemplate: string;
+    groupTemplate: string | Function;
     /**
      * Specifies the template content for the header container of the popup list.
      *
      * @default null
+     * @aspType string
      */
-    headerTemplate: string;
+    headerTemplate: string | Function;
     /**
      * Specifies the index of the selected item in the combobox.
      *
@@ -102,14 +105,16 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * Specifies the template content for each list item present in the popup.
      *
      * @default null
+     * @aspType string
      */
-    itemTemplate: string;
+    itemTemplate: string | Function;
     /**
      * Specifies the template content for the popup list of combobox when no data is available.
      *
      * @default 'No records found'
+     * @aspType string
      */
-    noRecordsTemplate: string;
+    noRecordsTemplate: string | Function;
     /**
      * Specifies a short hint that describes the expected value of the combobox.
      *

package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts

@@ -46,13 +46,15 @@ export interface FileMenuSettingsModel {
      * Specifies the template for file menu item.
      *
      * @default ''
+     * @aspType string
      */
-    itemTemplate?: string;
+    itemTemplate?: string | Function;
 
     /**
      * Specifies the custom content for the file menu popup.
      *
      * @default ''
+     * @aspType string
      */
     popupTemplate?: string | HTMLElement;
 

package/src/ribbon/models/ribbon-file-menu-settings.d.ts

@@ -40,12 +40,14 @@ export declare class FileMenuSettings extends ChildProperty<FileMenuSettings> {
      * Specifies the template for file menu item.
      *
      * @default ''
+     * @aspType string
      */
-    itemTemplate: string;
+    itemTemplate: string | Function;
     /**
      * Specifies the custom content for the file menu popup.
      *
      * @default ''
+     * @aspType string
      */
     popupTemplate: string | HTMLElement;
     /**

package/src/ribbon/models/ribbon-item-model.d.ts

@@ -49,7 +49,7 @@ export interface RibbonItemModel {
      * @default ''
      * @aspType string
      */
-    itemTemplate?: string | HTMLElement;
+    itemTemplate?: string | HTMLElement | Function;
 
     /**
      * Defines the type of control to be added as the Ribbon Item.

package/src/ribbon/models/ribbon-item.d.ts

@@ -50,7 +50,7 @@ export declare class RibbonItem extends ChildProperty<RibbonItem> {
      * @default ''
      * @aspType string
      */
-    itemTemplate: string | HTMLElement;
+    itemTemplate: string | HTMLElement | Function;
     /**
      * Defines the type of control to be added as the Ribbon Item.
      *

package/styles/bootstrap-dark.css

@@ -138,6 +138,7 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -275,6 +276,7 @@
   border: none;
   height: 32px;
   margin: auto;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -414,6 +416,8 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
+  min-height: auto;
+  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -497,6 +501,7 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -605,6 +610,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 2px;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -729,6 +735,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
   line-height: 22px;
+  overflow: hidden;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
   width: inherit;
@@ -776,6 +783,17 @@
   padding-left: 37px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 26px;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 16px;
+}
+
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -1152,6 +1170,15 @@
   padding: 10px;
 }
 
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 32px;
+}
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 20px;
+  line-height: 20px;
+}
+
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,

package/styles/bootstrap.css

@@ -143,6 +143,7 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -280,6 +281,7 @@
   border: none;
   height: 32px;
   margin: auto;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -419,6 +421,8 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
+  min-height: auto;
+  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -502,6 +506,7 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -610,6 +615,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 4px;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -734,6 +740,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
   line-height: 22px;
+  overflow: hidden;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
   width: inherit;
@@ -781,6 +788,17 @@
   padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 26px;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 16px;
+}
+
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -1157,6 +1175,15 @@
   padding: 10px;
 }
 
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 32px;
+}
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 20px;
+  line-height: 20px;
+}
+
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon,