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 969c17947b3d8f..d7b5be86d4dca4 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.js +++ b/packages/material-ui/src/CardHeader/CardHeader.js @@ -35,51 +35,49 @@ function CardHeader(props) { classes, className: classNameProp, component: Component, - subheader, - title, disableTypography, + subheader: subheaderProp, + subheaderTypographyProps, + title: titleProp, titleTypographyProps, - subHeaderTypographyProps, ...other } = props; - let titleComponent = title; - if (!disableTypography && !!title) { - titleComponent = ( - {title} - ); + let title = titleProp; + if (title != null && title.type !== Typography && !disableTypography) { + title = ( + + {title} + + ); } - let subHeaderComponent = subheader; - if (!disableTypography && !!subheader) { - subHeaderComponent = ( + let subheader = subheaderProp; + if (subheader != null && subheader.type !== Typography && !disableTypography) { + subheader = ( {subheader} - ) + ); } return ( {avatar &&
{avatar}
}
- {title && - {titleComponent} - } - {subheader && - {subHeaderComponent} - } + {title} + {subheader}
{action &&
{action}
}
@@ -109,36 +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, /** - * The content of the Card Title. + * These props will be forwarded to the subheader + * (as long as disableTypography is not `true`). */ - title: PropTypes.node, + subheaderTypographyProps: 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 `children` (or `title`) text, and optional `subheader` text - * with the Typography component. + * The content of the Card Title. */ - disableTypography: PropTypes.bool, + title: PropTypes.node, /** * These props will be forwarded to the title * (as long as disableTypography is not `true`). */ titleTypographyProps: PropTypes.object, - /** - * These props will be forwarded to the subHeader - * (as long as disableTypography is not `true`). - */ - subHeaderTypographyProps: PropTypes.object, }; CardHeader.defaultProps = { - disableTypography: false, 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).