fix: menu style

Orfium · Jul 16, 2024 · 034c836 · 034c836
1 parent 5a01d67
commit 034c836
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 4 deletions.
diff --git a/src/__storyshots__/Updated Components/List/List-GroupList.snap b/src/__storyshots__/Updated Components/List/List-GroupList.snap
@@ -12,6 +12,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/List-ListStory.snap b/src/__storyshots__/Updated Components/List/List-ListStory.snap
@@ -12,6 +12,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/List-VirtualizedList.snap b/src/__storyshots__/Updated Components/List/List-VirtualizedList.snap
@@ -12,6 +12,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: 28.125rem;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap b/src/__storyshots__/Updated Components/List/ListItem-DisabledListItem.snap
@@ -16,6 +16,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap b/src/__storyshots__/Updated Components/List/ListItem-ListItemCompilations.snap
@@ -16,6 +16,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextNormal.snap b/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextNormal.snap
@@ -26,6 +26,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextWithSecondaryText.snap b/src/__storyshots__/Updated Components/List/ListItemText-ListItemTextWithSecondaryText.snap
@@ -26,6 +26,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/ListSection-CompactListSection.snap b/src/__storyshots__/Updated Components/List/ListSection-CompactListSection.snap
@@ -26,6 +26,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/__storyshots__/Updated Components/List/ListSection-NormalListSection.snap b/src/__storyshots__/Updated Components/List/ListSection-NormalListSection.snap
@@ -26,6 +26,7 @@
   border-radius: 0.25rem;
   width: 100%;
   height: auto;
+  max-height: auto;
   overflow: auto;
   overflow-x: hidden;
   background: #ffffff;

diff --git a/src/components/List/List.style.ts b/src/components/List/List.style.ts
@@ -19,7 +19,17 @@ export const wrapperStyle =
   };
 
 export const listStyle =
-  ({ width, height, isSearchable }: { width?: number; height?: number; isSearchable?: boolean }) =>
+  ({
+    width,
+    height,
+    maxHeight,
+    isSearchable,
+  }: {
+    width?: number;
+    height?: number;
+    maxHeight?: number;
+    isSearchable?: boolean;
+  }) =>
   (theme: Theme): SerializedStyles => {
     return css`
       padding-left: 0;
@@ -28,6 +38,7 @@ export const listStyle =
       border-radius: ${isSearchable ? 'initial' : theme.dimension.borderRadius.get('md')};
       width: ${width ? rem(width) : '100%'};
       height: ${height ? rem(height) : 'auto'};
+      max-height: ${maxHeight ? rem(maxHeight) : 'auto'};
       overflow: auto;
       overflow-x: hidden;
       background: ${theme.tokens.colors.get('backgroundColor.default')};

diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -694,7 +694,7 @@ export const MenuWithCustomListWidthAndHeight = {
           selectedKeys={btn1.selectedKeys}
           rowSize={'compact'}
           onSelectionChange={btn1.setSelectedKeys}
-          sx={{ listProps: { height: 285, width: 190 } }}
+          sx={{ listProps: { maxHeight: 285, width: 190 } }}
         >
           {LIST_ITEMS.map((item) => (
             <ListItem key={item} textValue={item} parentType={'Menu'}>

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -5,7 +5,7 @@ import type { TestProps } from 'utils/types';
 import { MenuWrapper, MenuItemWrapper, popoverStyle } from './Menu.style';
 import MenuItemDivider from './MenuItemDivider';
 import { listStyle } from '../List/List.style';
-import type { ListProps, ListRowSize } from 'components/List';
+import type { ListRowSize } from 'components/List';
 
 export type MenuProps = {
   children?: React.ReactElement[] | React.ReactElement;
@@ -27,7 +27,7 @@ export type MenuProps = {
   onAction?: (item: string) => any;
   /** The selection mode of the menu */
   selectionMode?: 'single' | 'multiple';
-  sx?: { listProps?: Pick<ListProps, 'height' | 'width'> };
+  sx?: { listProps?: { maxHeight?: number; width?: number } };
 } & TestProps;
 
 const Menu: React.FC<MenuProps> = ({