Convert Material UI components to slots #8059
Conversation
Netlify deploy previewNetlify deploy preview: https://deploy-preview-8059--material-ui-x.netlify.app/ Updated pagesNo updates. These are the results for the performance tests:
|
| * The custom MenuItem component used in the grid. | ||
| * @default MenuItem | ||
| */ | ||
| BaseMenuItem: React.JSXElementConstructor<any>; |
There was a problem hiding this comment.
Nice!
I've extracted MenuItems that were used as Select options to the BaseSelectOption slot in #8072
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
…extract-material-ui-components
github-actions
bot
removed
the
PR: out-of-date
siriwatknp
force-pushed
the
extract-material-ui-components
branch
from
ed76384
to
8a7bda8
Compare
| import { IconButtonProps } from '@mui/material/IconButton'; | ||
| import MenuItem, { MenuItemProps } from '@mui/material/MenuItem'; | ||
| import ListItemIcon from '@mui/material/ListItemIcon'; |
There was a problem hiding this comment.
@cherniavskii For the type's usage from Material UI, what do you think about this approach?
Create a generic type, so that this component is design-agnostic. And at the index.ts, fill the generic with the types from Material or Joy UI.
Developer that import { GridActionsCellItem } from '@mui-x/data-grid' will still get the same types from Material UI.
Developer that import { GridActionsCellItem } from '@mui-x/data-grid/joy' will get types from Joy UI.
| import { IconButtonProps } from '@mui/material/IconButton'; | ||
| import { MenuItemProps } from '@mui/material/MenuItem'; | ||
|
|
||
| import { | ||
| GridActionsCellItem as InternalGridActionsCellItem, | ||
| GridActionsCellItemProps as InternalActionsCellItemProps, | ||
| } from './GridActionsCellItem'; | ||
|
|
||
| export type GridActionsCellItemProps = InternalActionsCellItemProps<IconButtonProps, MenuItemProps>; | ||
| export const GridActionsCellItem = InternalGridActionsCellItem as React.ForwardRefExoticComponent< | ||
| React.PropsWithoutRef<GridActionsCellItemProps> & React.RefAttributes<HTMLButtonElement> | ||
| >; | ||
|
|
There was a problem hiding this comment.
Here, the types of GridActionsCellItem is inserted by Material UI component props.
| import { IconButtonProps } from '@mui/joy/IconButton'; | ||
| import { MenuItemProps } from '@mui/joy/MenuItem'; |
There was a problem hiding this comment.
| import { IconButtonProps } from '@mui/joy/IconButton'; | |
| import { MenuItemProps } from '@mui/joy/MenuItem'; | |
| import type { IconButtonProps } from '@mui/joy/IconButton'; | |
| import type { MenuItemProps } from '@mui/joy/MenuItem'; |
| import { | ||
| GridActionsCellItem as InternalGridActionsCellItem, | ||
| GridActionsCellItemProps as InternalActionsCellItemProps, | ||
| } from '../../../components/cell/GridActionsCellItem'; |
There was a problem hiding this comment.
| import { | |
| GridActionsCellItem as InternalGridActionsCellItem, | |
| GridActionsCellItemProps as InternalActionsCellItemProps, | |
| } from '../../../components/cell/GridActionsCellItem'; | |
| import { GridActionsCellItem as InternalGridActionsCellItem } from '../../../components/cell/GridActionsCellItem'; | |
| import type { GridActionsCellItemProps as InternalActionsCellItemProps } from from '../../../components/cell/GridActionsCellItem'; |
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
No description provided.