Merge pull request #2731 from epam/2708-presetspanel-issues-with-long…

…-names-and-n-more-dropdown

[PresetsPanel]: Fixed icons being cut off and dropdown not scrolling

changelog.md

@@ -2,11 +2,15 @@
 **What's New**
 * [MainMenuAvatar]: added `RawProps` prop
 * [MainMenuButton]: removed unnecessary `role` and `aria-haspopup` attributes ([#2733](https://github.com/epam/UUI/pull/2733))
+* [MainMenuButton]: Add `aria-current` attribute with value `page` for active links ([#2734](https://github.com/epam/UUI/pull/2734))
 * [CountIndicator]: text size increased for prop 'size' 12px from 8px to 10px
-* [MainMenuButton] Add `aria-current` attribute with value `page` for active links ([#2734](https://github.com/epam/UUI/pull/2734))
+* [DropdownMenuBody]: added `maxHeight` prop
+
 
 **What's Fixed**
 * [useForm]: reset serverValidationState by valid form save action
+* [DropdownMenuButton]: fixed cropping of icons located to the right of the text
+* [PresetsPanel]: added scroll to `More` dropdown
 
 
 # 5.12.1 - 17.12.2024

uui/components/filters/PresetPanel/PresetsPanel.tsx

@@ -3,10 +3,10 @@ import { i18n } from '../../../i18n';
 import {
     DataTableState, IHasRawProps, IPresetsApi, ITablePreset, orderBy,
 } from '@epam/uui-core';
-import { AdaptiveItemProps, AdaptivePanel, ScrollBars } from '@epam/uui-components';
+import { AdaptiveItemProps, AdaptivePanel } from '@epam/uui-components';
 import css from './PresetsPanel.module.scss';
 import { Button } from '../../buttons';
-import { FlexCell, FlexRow } from '../../layout';
+import { FlexCell, FlexRow, ScrollBars } from '../../layout';
 import { Dropdown, DropdownMenuBody, DropdownMenuButton } from '../../overlays';
 import { Preset } from './Preset';
 import { PresetInput } from './PresetInput';
@@ -65,7 +65,7 @@ export function PresetsPanel(props: PresetsPanelProps) {
                     </FlexRow>
                 ) }
                 renderBody={ (propsBody) => (
-                    <DropdownMenuBody minWidth={ 230 } { ...propsBody }>
+                    <DropdownMenuBody minWidth={ 230 } maxHeight={ 300 } { ...propsBody }>
                         <ScrollBars>
                             {hiddenItems.map((hiddenItem) => (
                                 <DropdownMenuButton

uui/components/overlays/DropdownMenu.module.scss

@@ -111,6 +111,7 @@
 
     .icon {
         justify-content: flex-start;
+        flex-shrink: 0;
         @include withActive;
 
         svg {

uui/components/overlays/DropdownMenu.tsx

@@ -17,7 +17,7 @@ export interface IDropdownMenuItemProps extends IDropdownTogglerProps, IHasCapti
     indent?: boolean;
 }
 
-export interface DropdownMenuContainerProps extends VPanelProps, IHasChildren, DropdownBodyProps, Pick<DropdownContainerProps, 'focusLock'> {
+export interface DropdownMenuContainerProps extends VPanelProps, IHasChildren, DropdownBodyProps, Pick<DropdownContainerProps, 'focusLock' | 'maxHeight'> {
     closeOnKey?: React.KeyboardEvent<HTMLElement>['key'];
     minWidth?: number;
 }