-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Convert Material UI components to slots #8059
base: master
Are you sure you want to change the base?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
I've extracted MenuItems that were used as Select options to the BaseSelectOption
slot in #8072
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
…extract-material-ui-components
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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'; |
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
No description provided.