Skip to content

Add support for MUI v6 #10439

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.

Sign up for GitHub

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

Merged
slax57 merged 13 commits into from
Jan 13, 2025
Merged

Add support for MUI v6 #10439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e61b09f
Add support for MUI v6
djhi Jan 8, 2025
d2ca8b4
Fix yarn.lock
djhi Jan 8, 2025
41aa489
Fix CRM demo
djhi Jan 8, 2025
de6f1cb
Fix useTheme tests
djhi Jan 9, 2025
33818f1
Revert devDependencies to v5
djhi Jan 9, 2025
92e0bc7
Fix remaining color props in demo
djhi Jan 9, 2025
64a7ba3
Fix LocalesMenuButton
djhi Jan 9, 2025
f9fddb1
Fix yarn.lock
djhi Jan 9, 2025
d759c9f
Fix yarn.lock
djhi Jan 10, 2025
6841225
Fix TagList
djhi Jan 10, 2025
0a65b45
Fix ApplicationsDashboard
djhi Jan 10, 2025
a4703fd
Fix Labeled issue with color
djhi Jan 10, 2025
19be517
Fix Labeled doc
djhi Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions docs/Labeled.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,16 @@ const BookShow = () => (

## Props

| Prop | Required | Type | Default | Description |
|:-------------|:---------|:-----------------|:----------|:------------|
| `children` | Required | Element | | The wrapped component |
| `className` | Optional | string | | The class name |
| `color` | Optional | string | `text.secondary` | The color of the label |
| `fullWidth` | Optional | boolean | `false` | Whether to stretch the label to the full width of the container |
| `isRequired` | Optional | boolean | `false` | Whether to display an asterisk. |
| `label` | Optional | string | | The label. If not set, the label is inferred from the child component |
| `sx` | Optional | [SxProps](https://mui.com/system/the-sx-prop/) | | Custom styles |
| Prop | Required | Type | Default | Description |
|:----------------- |:-------- |:---------------- |:----------|:------------|
| `children` | Required | Element | | The wrapped component |
| `className` | Optional | string | | The class name |
| `color` | Optional | string | `text.secondary` | The color of the label |
| `fullWidth` | Optional | boolean | `false` | Whether to stretch the label to the full width of the container |
| `isRequired` | Optional | boolean | `false` | Whether to display an asterisk. |
| `label` | Optional | string | | The label. If not set, the label is inferred from the child component |
| `sx` | Optional | [SxProps](https://mui.com/system/the-sx-prop/) | | Custom styles |
| `TypographyProps` | Optional | [TypographyProps](https://mui.com/material-ui/api/typography/) | | Custom props |

Additional props are passed to the underlying [Material UI `<Stack>` element](https://mui.com/material-ui/react-stack/).

Expand Down Expand Up @@ -167,3 +168,16 @@ The `<Labeled>` component accepts the usual `className` prop. You can also overr


To override the style of all instances of `<Labeled>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaLabeled` key.

## `TypographyProps`

The `<Labeled>` component accept a `TypographyProps` prop that allows you to pass any prop supported by [`<Typography>`](https://mui.com/material-ui/api/typography/).

{% raw %}
```tsx
<Labeled TypographyProps={{ noWrap: true }}>
<TextField source="title" />
</Labeled>
```
{% endraw %}

2 changes: 1 addition & 1 deletion examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Typography from '@mui/material/Typography';
import { Typography } from '@mui/material';
import { ReferenceField } from 'react-admin';

import { CompanyAvatar } from '../companies/CompanyAvatar';
Expand Down
144 changes: 75 additions & 69 deletions examples/crm/src/companies/CompanyShow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
List,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
Stack,
Expand Down Expand Up @@ -142,43 +143,46 @@ const ContactsIterator = () => {
<List dense sx={{ pt: 0 }}>
{contacts.map(contact => (
<RecordContextProvider key={contact.id} value={contact}>
<ListItem
button
component={RouterLink}
to={`/contacts/${contact.id}/show`}
state={{ from: location.pathname }}
>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name}`}
secondary={
<>
{contact.title}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1 ? 's' : ''
}`
: ''}
&nbsp; &nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction>
<Typography
variant="body2"
color="textSecondary"
component="span"
>
last activity{' '}
{formatDistance(contact.last_seen, now)} ago{' '}
<Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
<ListItem disablePadding>
<ListItemButton
Comment on lines +146 to +147

@slax57 slax57 Jan 10, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any changes in the CRM should be backported to https://github.com/marmelab/atomic-crm.

Besides, why do you need those changes? To my understanding, the MUI version used by the CRM demo shouldn't have changed, right?

UPDATE: I take it you kept those changes to prepare the compatibility with MUI v6, so I'm OK to keep them. But still, you'll need to open a PR to backport them to marmelab/atomic-crm.

@djhi djhi Jan 10, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those changes work in v5 too. We were using deprecated features that have been removed in v6. I'd rather address them now than forget them

component={RouterLink}
to={`/contacts/${contact.id}/show`}
state={{ from: location.pathname }}
>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name}`}
secondary={
<>
{contact.title}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1
? 's'
: ''
}`
: ''}
&nbsp; &nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction>
<Typography
variant="body2"
color="textSecondary"
component="span"
>
last activity{' '}
{formatDistance(contact.last_seen, now)}{' '}
ago <Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
</ListItemButton>
</ListItem>
</RecordContextProvider>
))}
Expand Down Expand Up @@ -212,38 +216,40 @@ const DealsIterator = () => {
<Box>
<List dense>
{deals.map(deal => (
<ListItem
button
key={deal.id}
component={RouterLink}
to={`/deals/${deal.id}/show`}
>
<ListItemText
primary={deal.name}
secondary={
<>
{findDealLabel(dealStages, deal.stage)},{' '}
{deal.amount.toLocaleString('en-US', {
notation: 'compact',
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol',
minimumSignificantDigits: 3,
})}
{deal.category ? `, ${deal.category}` : ''}
</>
}
/>
<ListItemSecondaryAction>
<Typography
variant="body2"
color="textSecondary"
component="span"
>
last activity{' '}
{formatDistance(deal.updated_at, now)} ago{' '}
</Typography>
</ListItemSecondaryAction>
<ListItem key={deal.id} disablePadding>
<ListItemButton
component={RouterLink}
to={`/deals/${deal.id}/show`}
>
<ListItemText
primary={deal.name}
secondary={
<>
{findDealLabel(dealStages, deal.stage)},{' '}
{deal.amount.toLocaleString('en-US', {
notation: 'compact',
style: 'currency',
currency: 'USD',
currencyDisplay: 'narrowSymbol',
minimumSignificantDigits: 3,
})}
{deal.category
? `, ${deal.category}`
: ''}
</>
}
/>
<ListItemSecondaryAction>
<Typography
variant="body2"
color="textSecondary"
component="span"
>
last activity{' '}
{formatDistance(deal.updated_at, now)} ago{' '}
</Typography>
</ListItemSecondaryAction>
</ListItemButton>
</ListItem>
))}
</List>
Expand Down
140 changes: 72 additions & 68 deletions examples/crm/src/contacts/ContactListContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
Checkbox,
List,
ListItem,
ListItemButton,
ListItemAvatar,
ListItemIcon,
ListItemSecondaryAction,
Expand Down Expand Up @@ -50,76 +51,79 @@ export const ContactListContent = () => {
<List dense>
{contacts.map(contact => (
<RecordContextProvider key={contact.id} value={contact}>
<ListItem
button
component={Link}
to={`/contacts/${contact.id}/show`}
>
<ListItemIcon sx={{ minWidth: '2.5em' }}>
<Checkbox
edge="start"
checked={selectedIds.includes(contact.id)}
tabIndex={-1}
disableRipple
onClick={e => {
e.stopPropagation();
onToggleItem(contact.id);
}}
/>
</ListItemIcon>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name ?? ''}`}
secondary={
<>
{contact.title}
{contact.title &&
contact.company_id != null &&
' at '}
{contact.company_id != null && (
<ReferenceField
source="company_id"
reference="companies"
link={false}
>
<TextField source="name" />
</ReferenceField>
<ListItem disablePadding>
<ListItemButton
component={Link}
to={`/contacts/${contact.id}/show`}
>
<ListItemIcon sx={{ minWidth: '2.5em' }}>
<Checkbox
edge="start"
checked={selectedIds.includes(
contact.id
)}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1
? 's'
: ''
}`
: ''}
&nbsp;&nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction
sx={{
top: '10px',
transform: 'none',
}}
>
<Typography
variant="body2"
color="textSecondary"
title={contact.last_seen}
tabIndex={-1}
disableRipple
onClick={e => {
e.stopPropagation();
onToggleItem(contact.id);
}}
/>
</ListItemIcon>
<ListItemAvatar>
<Avatar />
</ListItemAvatar>
<ListItemText
primary={`${contact.first_name} ${contact.last_name ?? ''}`}
secondary={
<>
{contact.title}
{contact.title &&
contact.company_id != null &&
' at '}
{contact.company_id != null && (
<ReferenceField
source="company_id"
reference="companies"
link={false}
>
<TextField source="name" />
</ReferenceField>
)}
{contact.nb_tasks
? ` - ${contact.nb_tasks} task${
contact.nb_tasks > 1
? 's'
: ''
}`
: ''}
&nbsp;&nbsp;
<TagsList />
</>
}
/>
{contact.last_seen && (
<ListItemSecondaryAction
sx={{
top: '10px',
transform: 'none',
}}
>
{!isSmall && 'last activity '}
{formatRelative(
contact.last_seen,
now
)}{' '}
<Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
<Typography
variant="body2"
color="textSecondary"
title={contact.last_seen}
>
{!isSmall && 'last activity '}
{formatRelative(
contact.last_seen,
now
)}{' '}
<Status status={contact.status} />
</Typography>
</ListItemSecondaryAction>
)}
</ListItemButton>
</ListItem>
</RecordContextProvider>
))}
Expand Down
9 changes: 5 additions & 4 deletions examples/crm/src/dashboard/DashboardActivityLog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';
import { Box, Card, Typography } from '@mui/material';
import { ActivityLog } from '../activity/ActivityLog';
import { Stack } from '@mui/material';

Expand All @@ -12,7 +10,10 @@ export function DashboardActivityLog() {
<Box mr={1} display="flex">
<AccessTimeIcon color="disabled" fontSize="medium" />
</Box>
<Typography variant="h5" color="textSecondary">
<Typography
variant="h5"
sx={{ color: theme => theme.palette.text.secondary }}
>
Latest Activity
</Typography>
</Box>
Expand Down
Loading