diff --git a/.size-limit.js b/.size-limit.js index e51de40215ce93..16f326bac02be1 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -27,7 +27,7 @@ module.exports = [ name: 'The size of all the modules of material-ui.', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '94.6 KB', + limit: '94.7 KB', }, { name: 'The main bundle of the docs', diff --git a/packages/material-ui/src/CardHeader/CardHeader.d.ts b/packages/material-ui/src/CardHeader/CardHeader.d.ts index 0a824fdfc06139..c82fe768cd9c9b 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.d.ts +++ b/packages/material-ui/src/CardHeader/CardHeader.d.ts @@ -1,14 +1,17 @@ import * as React from 'react'; import { StandardProps } from '..'; -import { CardContentProps } from '../CardContent'; +import { TypographyProps } from '../Typography'; export interface CardHeaderProps extends StandardProps, CardHeaderClassKey, 'title'> { action?: React.ReactNode; avatar?: React.ReactNode; component?: React.ReactType; + disableTypography?: boolean; subheader?: React.ReactNode; + subheaderTypographyProps?: Partial; title?: React.ReactNode; + titleTypographyProps?: Partial; } export type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader'; diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js index 124ba013ac0077..d7b5be86d4dca4 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.js +++ b/packages/material-ui/src/CardHeader/CardHeader.js @@ -35,32 +35,49 @@ function CardHeader(props) { classes, className: classNameProp, component: Component, - subheader, - title, + disableTypography, + subheader: subheaderProp, + subheaderTypographyProps, + title: titleProp, + titleTypographyProps, ...other } = props; + let title = titleProp; + if (title != null && title.type !== Typography && !disableTypography) { + title = ( + + {title} + + ); + } + + let subheader = subheaderProp; + if (subheader != null && subheader.type !== Typography && !disableTypography) { + subheader = ( + + {subheader} + + ); + } + return ( {avatar &&
{avatar}
}
- - {title} - - {subheader && ( - - {subheader} - - )} + {title} + {subheader}
{action &&
{action}
}
@@ -90,18 +107,36 @@ CardHeader.propTypes = { * Either a string to use a DOM element or a component. */ component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]), + /** + * If `true`, the children won't be wrapped by a Typography component. + * This can be useful to render an alternative Typography variant by wrapping + * the `title` text, and optional `subheader` text + * with the Typography component. + */ + disableTypography: PropTypes.bool, /** * The content of the component. */ subheader: PropTypes.node, + /** + * These props will be forwarded to the subheader + * (as long as disableTypography is not `true`). + */ + subheaderTypographyProps: PropTypes.object, /** * The content of the Card Title. */ title: PropTypes.node, + /** + * These props will be forwarded to the title + * (as long as disableTypography is not `true`). + */ + titleTypographyProps: PropTypes.object, }; CardHeader.defaultProps = { component: 'div', + disableTypography: false, }; export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader); diff --git a/pages/api/card-header.md b/pages/api/card-header.md index d609a7471e5995..a47d671b012c53 100644 --- a/pages/api/card-header.md +++ b/pages/api/card-header.md @@ -19,8 +19,11 @@ title: CardHeader API | avatar | node |   | The Avatar for the Card Header. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func |
 object
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| disableTypography | bool | false | If `true`, the children won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `title` text, and optional `subheader` text with the Typography component. | | subheader | node |   | The content of the component. | +| subheaderTypographyProps | object |   | These props will be forwarded to the subheader (as long as disableTypography is not `true`). | | title | node |   | The content of the Card Title. | +| titleTypographyProps | object |   | These props will be forwarded to the title (as long as disableTypography is not `true`). | Any other properties supplied will be spread to the root element (native element).