From f008cbafd5e052b82776f8f2f7b36fa260c23563 Mon Sep 17 00:00:00 2001 From: chenop Date: Sat, 14 Jul 2018 20:57:07 +0300 Subject: [PATCH 1/3] addded primaryTypographyProps & secondaryTypographyProps --- packages/material-ui/src/CardHeader/CardHeader.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js index 124ba013ac0077..5b5f5539b7a8ae 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.js +++ b/packages/material-ui/src/CardHeader/CardHeader.js @@ -37,6 +37,8 @@ function CardHeader(props) { component: Component, subheader, title, + primaryTypographyProps, + secondaryTypographyProps, ...other } = props; @@ -48,6 +50,7 @@ function CardHeader(props) { variant={avatar ? 'body2' : 'headline'} component="span" className={classes.title} + {...primaryTypographyProps} > {title} @@ -57,6 +60,7 @@ function CardHeader(props) { component="span" color="textSecondary" className={classes.subheader} + {...secondaryTypographyProps} > {subheader} @@ -98,6 +102,16 @@ CardHeader.propTypes = { * The content of the Card Title. */ title: PropTypes.node, + /** + * These props will be forwarded to the title + * (as long as disableTypography is not `true`). + */ + primaryTypographyProps: PropTypes.object, + /** + * These props will be forwarded to the subheader + * (as long as disableTypography is not `true`). + */ + secondaryTypographyProps: PropTypes.object, }; CardHeader.defaultProps = { From 0e485aea2cb6566a73b48e92fdf6b70015746c62 Mon Sep 17 00:00:00 2001 From: chenop Date: Mon, 16 Jul 2018 21:41:19 +0300 Subject: [PATCH 2/3] Added support for titleTypographyProps && subHeaderTypographyProps --- .../material-ui/src/CardHeader/CardHeader.js | 71 ++++++++++++------- 1 file changed, 47 insertions(+), 24 deletions(-) diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js index 5b5f5539b7a8ae..969c17947b3d8f 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.js +++ b/packages/material-ui/src/CardHeader/CardHeader.js @@ -37,34 +37,49 @@ function CardHeader(props) { component: Component, subheader, title, - primaryTypographyProps, - secondaryTypographyProps, + disableTypography, + titleTypographyProps, + subHeaderTypographyProps, ...other } = props; + let titleComponent = title; + if (!disableTypography && !!title) { + titleComponent = ( + {title} + ); + } + + let subHeaderComponent = subheader; + if (!disableTypography && !!subheader) { + subHeaderComponent = ( + + {subheader} + + ) + } + return ( {avatar &&
{avatar}
}
- - {title} - - {subheader && ( - - {subheader} - - )} + {title && + {titleComponent} + } + {subheader && + {subHeaderComponent} + }
{action &&
{action}
} @@ -102,19 +117,27 @@ CardHeader.propTypes = { * The content of the Card Title. */ title: PropTypes.node, + /** + * 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. + */ + disableTypography: PropTypes.bool, /** * These props will be forwarded to the title * (as long as disableTypography is not `true`). */ - primaryTypographyProps: PropTypes.object, + titleTypographyProps: PropTypes.object, /** - * These props will be forwarded to the subheader + * These props will be forwarded to the subHeader * (as long as disableTypography is not `true`). */ - secondaryTypographyProps: PropTypes.object, + subHeaderTypographyProps: PropTypes.object, }; CardHeader.defaultProps = { + disableTypography: false, component: 'div', }; From 66f835c33fd2e1e3eb75bc472665729253c6cc09 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 16 Jul 2018 23:32:02 +0200 Subject: [PATCH 3/3] my turn --- .size-limit.js | 2 +- .../src/CardHeader/CardHeader.d.ts | 5 +- .../material-ui/src/CardHeader/CardHeader.js | 76 +++++++++---------- pages/api/card-header.md | 3 + 4 files changed, 45 insertions(+), 41 deletions(-) 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 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).