diff --git a/docs/Labeled.md b/docs/Labeled.md index f6d379a7f70..8291e7842e0 100644 --- 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 `` element](https://mui.com/material-ui/react-stack/). @@ -167,3 +168,13 @@ The `` component accepts the usual `className` prop. You can also overr To override the style of all instances of `` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaLabeled` key. + +## `TypographyProps` + +The `` component accept a `TypographyProps` prop that allows you to pass any prop supported by [``](https://mui.com/material-ui/api/typography/). + +```tsx + + + +``` diff --git a/examples/demo/src/dashboard/CardWithIcon.tsx b/examples/demo/src/dashboard/CardWithIcon.tsx index bb0c4446865..3878b17eeeb 100644 --- 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' })} - theme.palette.text.secondary }} - > - {title} - + {title} {subtitle || ' '} diff --git a/examples/demo/src/layout/SubMenu.tsx b/examples/demo/src/layout/SubMenu.tsx index 72dd73a69d5..86442c66dbc 100644 --- a/examples/demo/src/layout/SubMenu.tsx +++ b/examples/demo/src/layout/SubMenu.tsx @@ -31,10 +31,7 @@ const SubMenu = (props: Props) => { {isOpen ? : icon} - theme.palette.text.secondary }} - > + {translate(name)} diff --git a/examples/demo/src/visitors/Aside.tsx b/examples/demo/src/visitors/Aside.tsx index 30290c934fa..161549772d1 100644 --- 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 ( <> - theme.palette.text.secondary }} - gutterBottom - > + {new Date(record.date).toLocaleString(locale, { year: 'numeric', month: 'short', @@ -271,18 +267,11 @@ const Order = () => { minute: 'numeric', })} - theme.palette.text.secondary }} - gutterBottom - > + Reference  #{record.reference} -  - theme.palette.text.secondary }} - > + { if (!record) return null; return ( <> - theme.palette.text.secondary }} - gutterBottom - > + {new Date(record.date).toLocaleString(locale, { year: 'numeric', month: 'short', @@ -341,10 +326,7 @@ const Review = () => { > {record.comment} - theme.palette.text.secondary }} - > + diff --git a/packages/ra-ui-materialui/src/Labeled.stories.tsx b/packages/ra-ui-materialui/src/Labeled.stories.tsx index acecef575d7..bb2d542b628 100644 --- 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 = () => ( + + + @@ -77,6 +80,22 @@ export const Color = () => ( ); +export const TypographyProps = () => ( + + + + theme.palette.secondary.main }, + }} + > + + + + + +); + export const IsRequired = () => ( diff --git a/packages/ra-ui-materialui/src/Labeled.tsx b/packages/ra-ui-materialui/src/Labeled.tsx index 39fbb3a2928..9009c504487 100644 --- 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) => ( - get(theme.palette, color.toString(), color).toString(), - }} + sx={ + color + ? undefined + : { + color: theme => theme.palette.text.secondary, + } + } + color={color} className={LabeledClasses.label} + {...TypographyProps} >