my turn

mui · Jul 16, 2018 · 66f835c · 66f835c
1 parent 0e485ae
commit 66f835c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 41 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,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 = (<Typography
-      variant={avatar ? 'body2' : 'headline'}
-      component="span"
-      className={classes.title}
-      {...titleTypographyProps}
-    >
-      {title}
-    </Typography>);
+  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 subHeaderComponent = subheader;
-  if (!disableTypography && !!subheader) {
-    subHeaderComponent = (
+  let subheader = subheaderProp;
+  if (subheader != null && subheader.type !== Typography && !disableTypography) {
+    subheader = (
       <Typography
         variant={avatar ? 'body2' : 'body1'}
-        component="span"
-        color="textSecondary"
         className={classes.subheader}
-        {...subHeaderTypographyProps}
+        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}>
-        {title &&
-          {titleComponent}
-        }
-        {subheader &&
-          {subHeaderComponent}
-        }
+        {title}
+        {subheader}
       </div>
       {action && <div className={classes.action}>{action}</div>}
     </Component>
@@ -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
@@ -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).