[RFC] Switch design system in X-components

[siriwatknp]

I want to kickstart the discussion around "how to use x-components with Joy design system?" so that we keep this in mind when start implementing Joy components.

Goal

explore possible solution that will be used in the future for x-components (not only data-grid but other upcoming x-...)

also try to answer these question for each solution to pick the best

• how hard to use from developer's perspective? one time setup, or need to keep upgrading?
• maintenance afford
• how to make sure that the change in each design system does not break x-component.

These are just questions from my thought, others are very welcome.

What we know

Joy will be the next design system that provide similar components as material design (@mui/material). However, some API might be different (mostly specific to material design) such as disableRipple in Button might not exist in Joy.

In the future, both Joy and MD (material design) components will consume unstyled components (@mui/core) and provide styles based on the design system.

Currently, x-components (data-grid) use @mui/material as a peer dependency via import and provide components api for overriding some part of the data-grid.

MD components that are used in DataGrid

• Button
• Typography
• Paper
• Popper
• LinearProgress
• CircularProgress
• IconButton
• InputBase
• InputAdornment
• TextField
• SvgIcon
• Badge
• Tooltip
• Chip
• Checkbox
• Switch
• Select
• Slider
• MenuItem
• MenuList

Possible options

1. Resolution

similar to styled-engine and styled-engine-sc

2. use @mui/core inside x-components

x-components have @mui/core as a peer dependency but how to get the styles from a design system? 🤷‍♂️

3. Factory API

x-components have to provide a creator function and let the developer pass in components.

const DataGrid = createDataGrid({
  components: {
    Paper: ...,
    ...
  },
})

[oliviertassinari]

The data grid is an interesting case to consider, its structure feels really close to the date pickers.

4. Same as in the core

Handles the X components almost the same way as the Core components. We could:

• Provide an unstyled version: components and hooks
• Exposed the styled version by importing the components from a subfolder, internally the styled version would either use the headless API or ex

import { DataGrid, GridToolbar } from '@mui/x-data-grid/material';
import { DataGrid, GridToolbar } from '@mui/x-data-grid/joy';
import { DataGridBase, GridToolbarBase } from '@mui/x-data-grid/base';