[CardHeader] Add typography/props controls like in ListItemText (#12166)

* addded primaryTypographyProps & secondaryTypographyProps * Added support for titleTypographyProps && subHeaderTypographyProps * my turn
mui · Jul 16, 2018 · 18c87b0 · 18c87b0
1 parent c4dfc4a
commit 18c87b0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 21 deletions.
diff --git 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
@@ -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<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey, 'title'> {
   action?: React.ReactNode;
   avatar?: React.ReactNode;
   component?: React.ReactType<CardHeaderProps>;
+  disableTypography?: boolean;
   subheader?: React.ReactNode;
+  subheaderTypographyProps?: Partial<TypographyProps>;
   title?: React.ReactNode;
+  titleTypographyProps?: Partial<TypographyProps>;
 }
 
 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
@@ -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 = (
+      <Typography
+        variant={avatar ? 'body2' : 'headline'}
+        className={classes.title}
+        component="span"
+        {...titleTypographyProps}
+      >
+        {title}
+      </Typography>
+    );
+  }
+
+  let subheader = subheaderProp;
+  if (subheader != null && subheader.type !== Typography && !disableTypography) {
+    subheader = (
+      <Typography
+        variant={avatar ? 'body2' : 'body1'}
+        className={classes.subheader}
+        color="textSecondary"
+        component="span"
+        {...subheaderTypographyProps}
+      >
+        {subheader}
+      </Typography>
+    );
+  }
+
   return (
     <Component className={classNames(classes.root, classNameProp)} {...other}>
       {avatar && <div className={classes.avatar}>{avatar}</div>}
       <div className={classes.content}>
-        <Typography
-          variant={avatar ? 'body2' : 'headline'}
-          component="span"
-          className={classes.title}
-        >
-          {title}
-        </Typography>
-        {subheader && (
-          <Typography
-            variant={avatar ? 'body2' : 'body1'}
-            component="span"
-            color="textSecondary"
-            className={classes.subheader}
-          >
-            {subheader}
-          </Typography>
-        )}
+        {title}
+        {subheader}
       </div>
       {action && <div className={classes.action}>{action}</div>}
     </Component>
@@ -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
@@ -19,8 +19,11 @@ title: CardHeader API
 | <span class="prop-name">avatar</span> | <span class="prop-type">node |   | The Avatar for the Card Header. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disableTypography</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | 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. |
 | <span class="prop-name">subheader</span> | <span class="prop-type">node |   | The content of the component. |
+| <span class="prop-name">subheaderTypographyProps</span> | <span class="prop-type">object |   | These props will be forwarded to the subheader (as long as disableTypography is not `true`). |
 | <span class="prop-name">title</span> | <span class="prop-type">node |   | The content of the Card Title. |
+| <span class="prop-name">titleTypographyProps</span> | <span class="prop-type">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).