Skip to content

Deprecate system props #10680

New issue

Have a question about this project? Sign up for a free account to open an issue and contact its maintainers and the community.

Sign up for

By clicking “Sign up for ”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on ? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Deprecate system props #10680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9cbdca4
deprecate system props to prepare mui v7
Apr 17, 2025
b06dca2
fix color for label
Apr 17, 2025
931f74e
modify only demo files
Apr 17, 2025
69afa55
revert stories change
Apr 17, 2025
5a066a3
revert stories changes
Apr 17, 2025
5a27f09
fix typing issue
Apr 17, 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
13 changes: 11 additions & 2 deletions examples/demo/src/dasard/CardWithIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -52,10 +52,19 @@ const CardWithIcon = ({ icon, title, subtitle, to, children }: Props) => (
},
}}
>
<Box width="3em" className="icon">
<Box
className="icon"
sx={{
width: '3em',
}}
>
{createElement(icon, { fontSize: 'large' })}
</Box>
<Box textAlign="right">
<Box
sx={{
textAlign: 'right',
}}
>
<Typography color="textSecondary">{title}</Typography>
<Typography variant="h5" component="h2">
{subtitle || ' '}
Expand Down
15 changes: 13 additions & 2 deletions examples/demo/src/dasard/NewCustomers.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -51,15 +51,26 @@ const NewCustomers = () => {
/>
)}
/>
<Box flexGrow={1}>&nbsp;</Box>
<Box
sx={{
flexGrow: 1,
}}
>
&nbsp;
</Box>
<Button
sx={{ borderRadius: 0 }}
component={Link}
to="/customers"
size="small"
color="primary"
>
<Box p={1} sx={{ color: 'primary.main' }}>
<Box
sx={{
p: 1,
color: 'primary.main',
}}
>
{translate('pos.dasard.all_customers')}
</Box>
</Button>
Expand Down
15 changes: 13 additions & 2 deletions examples/demo/src/dasard/PendingReviews.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -105,15 +105,26 @@ const PendingReviews = () => {
</ListItem>
))}
</List>
<Box flexGrow={1}>&nbsp;</Box>
<Box
sx={{
flexGrow: 1,
}}
>
&nbsp;
</Box>
<Button
sx={{ borderRadius: 0 }}
component={Link}
to="/reviews"
size="small"
color="primary"
>
<Box p={1} sx={{ color: 'primary.main' }}>
<Box
sx={{
p: 1,
color: 'primary.main',
}}
>
{translate('pos.dasard.all_reviews')}
</Box>
</Button>
Expand Down
26 changes: 19 additions & 7 deletions examples/demo/src/dasard/Welcome.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,12 +19,24 @@ const Welcome = () => {
marginBottom: '1em',
}}
>
<Box display="flex">
<Box flex="1">
<Box
sx={{
display: 'flex',
}}
>
<Box
sx={{
flex: '1',
}}
>
<Typography variant="h5" component="h2" gutterBottom>
{translate('pos.dasard.welcome.title')}
</Typography>
<Box maxWidth="40em">
<Box
sx={{
maxWidth: '40em',
}}
>
<Typography variant="body1" component="p" gutterBottom>
{translate('pos.dasard.welcome.subtitle')}
</Typography>
Expand DownExpand Up@@ -57,14 +69,14 @@ const Welcome = () => {
</CardActions>
</Box>
<Box
display={{ xs: 'none', sm: 'none', md: 'block' }}
sx={{
display: { xs: 'none', sm: 'none', md: 'block' },
width: '16em',
height: '9em',
overflow: 'hidden',
background: `url(${publishArticleImage}) top right / cover`,
marginLeft: 'auto',
}}
width="16em"
height="9em"
overflow="hidden"
/>
</Box>
</Card>
Expand Down
21 changes: 18 additions & 3 deletions examples/demo/src/invoices/InvoiceShow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,7 +24,12 @@ const InvoiceShow = () => {
</Grid>
</Grid>
<Grid container spacing={2}>
<Grid size={{ xs: 12 }} alignContent="flex-end">
<Grid
size={{ xs: 12 }}
sx={{
alignContent: 'flex-end',
}}
>
<ReferenceField
reference="customers"
source="customer_id"
Expand All@@ -34,7 +39,13 @@ const InvoiceShow = () => {
</ReferenceField>
</Grid>
</Grid>
<Box height={20}>&nbsp;</Box>
<Box
sx={{
height: 20,
}}
>
&nbsp;
</Box>
<Grid container spacing={2}>
<Grid size={{ xs: 6 }}>
<Typography variant="h6" gutterBottom align="center">
Expand DownExpand Up@@ -63,7 +74,11 @@ const InvoiceShow = () => {
</ReferenceField>
</Grid>
</Grid>
<Box margin="10px 0">
<Box
sx={{
margin: '10px 0',
}}
>
<ReferenceField
reference="orders"
source="order_id"
Expand Down
7 changes: 6 additions & 1 deletion examples/demo/src/layout/Login.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,12 @@ import { Login as RaLogin, LoginForm } from 'react-admin';

const Login = () => (
<RaLogin sx={{ background: 'none' }}>
<Typography color="text.disabled" textAlign="center">
<Typography
sx={{
color: 'text.disabled',
textAlign: 'center',
}}
>
Hint: demo / demo
</Typography>
<LoginForm />
Expand Down
6 changes: 5 additions & 1 deletion examples/demo/src/orders/MobileGrid.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,7 +22,11 @@ const MobileGrid = () => {
return null;
}
return (
<Box margin="0.5em">
<Box
sx={{
margin: '0.5em',
}}
>
{data.map(record => (
<RecordContextProvider key={record.id} value={record}>
<Card sx={{ margin: '0.5rem 0' }}>
Expand Down
22 changes: 19 additions & 3 deletions examples/demo/src/orders/OrderEdit.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -67,13 +67,25 @@ const CustomerAddress = () => {
);
};

const Spacer = () => <Box mb={1}>&nbsp;</Box>;
const Spacer = () => (
<Box
sx={{
mb: 1,
}}
>
&nbsp;
</Box>
);

const OrderForm = () => {
const translate = useTranslate();
return (
<Form>
<Box maxWidth="50em">
<Box
sx={{
maxWidth: '50em',
}}
>
<PrevNextButtons
filterDefaultValues={{ status: 'ordered' }}
sort={{ field: 'date', order: 'DESC' }}
Expand DownExpand Up@@ -126,7 +138,11 @@ const OrderForm = () => {
/>
</Grid>
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
<Box mt={2}>
<Box
sx={{
mt: 2,
}}
>
<BooleanInput
row={true}
source="returned"
Expand Down
7 changes: 6 additions & 1 deletion examples/demo/src/products/GridList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,12 @@ const LoadingGridList = () => {
<ImageList rowHeight={180} cols={cols} sx={{ m: 0 }}>
{times(perPage, key => (
<ImageListItem key={key}>
<Box bgcolor="grey.300" height="100%" />
<Box
sx={{
bgcolor: 'grey.300',
height: '100%',
}}
/>
</ImageListItem>
))}
</ImageList>
Expand Down
18 changes: 15 additions & 3 deletions examples/demo/src/products/ProductList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,14 +32,26 @@ const ProductList = () => {
<FilterContext.Provider value={productFilters}>
<ListActions isSmall={isSmall} />
{isSmall && (
<Box m={1}>
<Box
sx={{
m: 1,
}}
>
<FilterForm />
</Box>
)}
</FilterContext.Provider>
<Box display="flex">
<Box
sx={{
display: 'flex',
}}
>
<Aside />
<Box width={isSmall ? 'auto' : 'calc(100% - 16em)'}>
<Box
sx={{
width: isSmall ? 'auto' : 'calc(100% - 16em)',
}}
>
<ImageList />
<Pagination rowsPerPageOptions={[12, 24, 48, 72]} />
</Box>
Expand Down
31 changes: 26 additions & 5 deletions examples/demo/src/reviews/ReviewEdit.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -34,10 +34,25 @@ const ReviewEdit = ({ id, onCancel }: ReviewEditProps) => {
return (
<EditBase id={id}>
<ReviewTitle />

<Box pt={5} width={{ xs: '100vW', sm: 400 }} mt={{ xs: 2, sm: 1 }}>
<Stack direction="row" p={2}>
<Typography variant="h6" flex="1">
<Box
sx={{
pt: 5,
width: { xs: '100vW', sm: 400 },
mt: { xs: 2, sm: 1 },
}}
>
<Stack
direction="row"
sx={{
p: 2,
}}
>
<Typography
variant="h6"
sx={{
flex: '1',
}}
>
{translate('resources.reviews.detail')}
</Typography>
<IconButton onClick={onCancel} size="small">
Expand All@@ -48,7 +63,13 @@ const ReviewEdit = ({ id, onCancel }: ReviewEditProps) => {
sx={{ pt: 0, pb: 0 }}
toolbar={<ReviewEditToolbar />}
>
<Grid container rowSpacing={1} mb={1}>
<Grid
container
rowSpacing={1}
sx={{
mb: 1,
}}
>
<Grid size={{ xs: 6 }}>
<Labeled source="customer_id">
<CustomerReferenceField source="customer_id" />
Expand Down
6 changes: 5 additions & 1 deletion examples/demo/src/reviews/ReviewList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -52,7 +52,11 @@ const ReviewList = () => {
const match = matchPath('/reviews/:id', location.pathname);

return (
<Box display="flex">
<Box
sx={{
display: 'flex',
}}
>
<List
sx={{
flexGrow: 1,
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/src/reviews/StarRatingField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,8 +17,8 @@ const StarRatingField = (props: OwnProps) => {
return (
<Box
component="span"
display="flex"
sx={{
display: 'flex',
opacity: 0.87,
whiteSpace: 'nowrap',
}}
Expand Down
8 changes: 7 additions & 1 deletion examples/demo/src/reviews/StarRatingInput.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,13 @@ const StarRatingInput = (props: InputProps) => {
const translate = useTranslate();

return (
<Box display="flex" flexDirection="column" marginBottom="1rem">
<Box
sx={{
display: 'flex',
flexDirection: 'column',
marginBottom: '1rem',
}}
>
<Typography>{translate(name)}</Typography>
<StyledRating
{...field}
Expand Down
14 changes: 8 additions & 6 deletions examples/demo/src/reviews/reviewFilters.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,13 +31,15 @@ const reviewFilters = [
optionText={choice => (
<>
<Box
bgcolor={colorMap[choice.id]}
width={8}
height={8}
borderRadius={4}
component="span"
mr={1}
display="inline-block"
sx={{
bgcolor: colorMap[choice.id],
width: 8,
height: 8,
borderRadius: 4,
mr: 1,
display: 'inline-block',
}}
/>
{choice.name}
</>
Expand Down
Loading
Loading