Fix Labeled issue with color

marmelab · Jan 10, 2025 · a4703fd · a4703fd
1 parent 0a65b45
commit a4703fd
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 48 deletions.
diff --git a/docs/Labeled.md b/docs/Labeled.md
@@ -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/).
 
@@ -167,3 +168,13 @@ 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/).
+
+```tsx
+<Labeled TypographyProps={{ noWrap: true }}>
+   <TextField source="title" />
+</Labeled>
+```
diff --git a/examples/demo/src/dashboard/CardWithIcon.tsx b/examples/demo/src/dashboard/CardWithIcon.tsx
@@ -56,11 +56,7 @@ const CardWithIcon = ({ icon, title, subtitle, to, children }: Props) => (
                     {createElement(icon, { fontSize: 'large' })}
                 </Box>
                 <Box textAlign="right">
-                    <Typography
-                        sx={{ color: theme => theme.palette.text.secondary }}
-                    >
-                        {title}
-                    </Typography>
+                    <Typography color="textSecondary">{title}</Typography>
                     <Typography variant="h5" component="h2">
                         {subtitle || ' '}
                     </Typography>

diff --git a/examples/demo/src/layout/SubMenu.tsx b/examples/demo/src/layout/SubMenu.tsx
@@ -31,10 +31,7 @@ const SubMenu = (props: Props) => {
             <ListItemIcon sx={{ minWidth: 5 }}>
                 {isOpen ? <ExpandMore /> : icon}
             </ListItemIcon>
-            <Typography
-                variant="inherit"
-                sx={{ color: theme => theme.palette.text.secondary }}
-            >
+            <Typography variant="inherit" color="textSecondary">
                 {translate(name)}
             </Typography>
         </MenuItem>

diff --git a/examples/demo/src/visitors/Aside.tsx b/examples/demo/src/visitors/Aside.tsx
@@ -258,11 +258,7 @@ const Order = () => {
     if (!record) return null;
     return (
         <>
-            <Typography
-                variant="body2"
-                sx={{ color: theme => theme.palette.text.secondary }}
-                gutterBottom
-            >
+            <Typography variant="body2" color="textSecondary" gutterBottom>
                 {new Date(record.date).toLocaleString(locale, {
                     year: 'numeric',
                     month: 'short',
@@ -271,18 +267,11 @@ const Order = () => {
                     minute: 'numeric',
                 })}
             </Typography>
-            <Typography
-                variant="body2"
-                sx={{ color: theme => theme.palette.text.secondary }}
-                gutterBottom
-            >
+            <Typography variant="body2" color="textSecondary" gutterBottom>
                 Reference &nbsp;#{record.reference}&nbsp;-&nbsp;
                 <TextField source="status" />
             </Typography>
-            <Typography
-                variant="body2"
-                sx={{ color: theme => theme.palette.text.secondary }}
-            >
+            <Typography variant="body2" color="textSecondary">
                 <NumberField
                     source="total"
                     options={{ style: 'currency', currency: 'USD' }}
@@ -315,11 +304,7 @@ const Review = () => {
     if (!record) return null;
     return (
         <>
-            <Typography
-                variant="body2"
-                sx={{ color: theme => theme.palette.text.secondary }}
-                gutterBottom
-            >
+            <Typography variant="body2" color="textSecondary" gutterBottom>
                 {new Date(record.date).toLocaleString(locale, {
                     year: 'numeric',
                     month: 'short',
@@ -341,10 +326,7 @@ const Review = () => {
             >
                 {record.comment}
             </Typography>
-            <Typography
-                variant="body2"
-                sx={{ color: theme => theme.palette.text.secondary }}
-            >
+            <Typography variant="body2" color="textSecondary">
                 <StarRatingField source="rating" />
             </Typography>
         </>

diff --git a/packages/ra-ui-materialui/src/Labeled.stories.tsx b/packages/ra-ui-materialui/src/Labeled.stories.tsx
@@ -66,6 +66,9 @@ export const Color = () => (
                 <Labeled>
                     <TextField source="title" />
                 </Labeled>
+                <Labeled color="secondary">
+                    <TextField source="title" />
+                </Labeled>
                 <Labeled color="success.main">
                     <TextField source="title" />
                 </Labeled>
@@ -77,6 +80,22 @@ export const Color = () => (
     </ResourceContext.Provider>
 );
 
+export const TypographyProps = () => (
+    <ResourceContext.Provider value="books">
+        <RecordContextProvider value={record}>
+            <Stack gap={1} sx={{ m: 1 }}>
+                <Labeled
+                    TypographyProps={{
+                        sx: { color: theme => theme.palette.secondary.main },
+                    }}
+                >
+                    <TextField source="title" />
+                </Labeled>
+            </Stack>
+        </RecordContextProvider>
+    </ResourceContext.Provider>
+);
+
 export const IsRequired = () => (
     <ResourceContext.Provider value="books">
         <RecordContextProvider value={record}>

diff --git a/packages/ra-ui-materialui/src/Labeled.tsx b/packages/ra-ui-materialui/src/Labeled.tsx
@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { ElementType, ReactElement } from 'react';
-import { Stack, StackProps, Theme, Typography } from '@mui/material';
+import {
+    Stack,
+    StackProps,
+    Theme,
+    Typography,
+    TypographyProps,
+} from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Property } from 'csstype';
 import clsx from 'clsx';
-import get from 'lodash/get';
 
 import { FieldTitle } from 'ra-core';
 import { ResponsiveStyleValue } from '@mui/system';
@@ -24,13 +29,14 @@ import { ResponsiveStyleValue } from '@mui/system';
 export const Labeled = ({
     children,
     className = '',
-    color = 'text.secondary',
+    color,
     component = 'span',
     fullWidth,
     isRequired,
     label,
     resource,
     source,
+    TypographyProps,
     ...rest
 }: LabeledProps) => (
     <Root
@@ -49,11 +55,16 @@ export const Labeled = ({
         // @ts-ignore
         children.type?.displayName !== 'Labeled' ? (
             <Typography
-                sx={{
-                    color: theme =>
-                        get(theme.palette, color.toString(), color).toString(),
-                }}
+                sx={
+                    color
+                        ? undefined
+                        : {
+                              color: theme => theme.palette.text.secondary,
+                          }
+                }
+                color={color}
                 className={LabeledClasses.label}
+                {...TypographyProps}
             >
                 <FieldTitle
                     label={label || children.props.label}
@@ -84,6 +95,7 @@ export interface LabeledProps extends StackProps {
     label?: string | ReactElement | boolean;
     resource?: string;
     source?: string;
+    TypographyProps?: TypographyProps;
 }
 
 const PREFIX = 'RaLabeled';