feat(Modal): remove component (#780)

Author: tenphi

.changeset/late-horses-play.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add side border radius to the header and the footer of the menus.

.changeset/quick-cougars-hammer.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Remove legacy Modal component.

src/components/actions/Menu/Menu.stories.tsx

@@ -1799,6 +1799,43 @@ export const SubMenuCustomization = () => {
   );
 };
 
+export const WithHeaderAndFooter = (props) => {
+  return (
+    <div style={{ padding: '20px', width: '340px' }}>
+      <Menu
+        id="menu-header-footer"
+        {...props}
+        header="Menu Header"
+        footer="Menu Footer"
+        headerStyles={{ fill: '#light' }}
+        footerStyles={{ fill: '#light' }}
+      >
+        <Menu.Item key="item1" icon={<IconReload />}>
+          First Item
+        </Menu.Item>
+        <Menu.Item key="item2" icon={<IconBook />}>
+          Second Item
+        </Menu.Item>
+        <Menu.Item key="item3" icon={<IconPlus />}>
+          Third Item
+        </Menu.Item>
+        <Menu.Item key="item4" icon={<IconBulb />}>
+          Fourth Item
+        </Menu.Item>
+      </Menu>
+    </div>
+  );
+};
+
+WithHeaderAndFooter.parameters = {
+  docs: {
+    description: {
+      story:
+        'Menu with both header and footer sections, both styled with light fill background.',
+    },
+  },
+};
+
 export const ComprehensivePopoverSynchronization = () => {
   const MyMenuComponent = ({ onAction }) => (
     <Menu width="200px" onAction={onAction}>

src/components/actions/Menu/Menu.tsx

@@ -14,12 +14,7 @@ import {
   Styles,
 } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
-import { CubeBlockProps } from '../../Block';
 import { Item } from '../../Item';
-import {
-  CubeTooltipProviderProps,
-  TooltipProvider,
-} from '../../overlays/Tooltip/TooltipProvider';
 
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';

src/components/actions/Menu/styled.tsx

@@ -79,6 +79,7 @@ export const StyledHeader = tasty(Space, {
     height: 'min $size',
     boxSizing: 'border-box',
     border: 'bottom',
+    radius: '1cr top',
 
     $size: {
       '': '$size-md',
@@ -110,6 +111,7 @@ export const StyledFooter = tasty(Space, {
     },
     boxSizing: 'border-box',
     border: 'top',
+    radius: '1cr bottom',
   },
 });
 

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -1007,7 +1007,14 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       >
         {renderTrigger}
         {(close) => (
-          <Dialog display="grid" styles={{ gridRows: '1sf', ...popoverStyles }}>
+          <Dialog
+            display="grid"
+            styles={{
+              gridRows: '1sf',
+              width: '30x max-content 50vw',
+              ...popoverStyles,
+            }}
+          >
             <FocusScope restoreFocus>
               <FilterListBox
                 autoFocus