[CardHeader] Remove CardContent inheritance (#9764)

mui · Jan 6, 2018 · b22e212 · b22e212
1 parent f510ba3
commit b22e212
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 21 deletions.
diff --git a/pages/api/card-header.md b/pages/api/card-header.md
@@ -15,7 +15,7 @@ filename: /src/Card/CardHeader.js
 | action | node |  | The action to display in the card header. |
 | avatar | node |  | The Avatar for the Card Header. |
 | classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | CardContent | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | subheader | node |  | The content of the component. |
 | title | node |  | The content of the Card Title. |
 
@@ -40,10 +40,6 @@ If using the `overrides` key of the theme as documented
 [here](/customization/themes#customizing-all-instances-of-a-component-type),
 you need to use the following style sheet name: `MuiCardHeader`.
 
-## Inheritance
-
-The properties of the [&lt;CardContent /&gt;](/api/card-content) component are also available.
-
 ## Demos
 
 - [Cards](/demos/cards)

diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md
@@ -27,8 +27,8 @@ This property accepts the following keys:
 - `root`
 - `inset`
 - `dense`
-- `textPrimary`
-- `textSecondary`
+- `primary`
+- `secondary`
 - `textDense`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section

diff --git a/src/Card/CardHeader.d.ts b/src/Card/CardHeader.d.ts
@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { StandardProps } from '..';
-import { CardContentProps, CardContentClassKey } from './CardContent';
+import { CardContentProps } from './CardContent';
 
 export interface CardHeaderProps
-  extends StandardProps<CardContentProps, CardHeaderClassKey, 'title'> {
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey, 'title'> {
   action?: React.ReactNode;
   avatar?: React.ReactNode;
   component?: React.ReactType<CardHeaderProps>;
   subheader?: React.ReactNode;
   title?: React.ReactNode;
 }
 
-export type CardHeaderClassKey = CardContentClassKey | 'avatar' | 'content' | 'title' | 'subheader';
+export type CardHeaderClassKey = 'root' | 'avatar' | 'content' | 'title' | 'subheader';
 
 declare const CardHeader: React.ComponentType<CardHeaderProps>;
 

diff --git a/src/Card/CardHeader.js b/src/Card/CardHeader.js
@@ -1,16 +1,14 @@
-// @inheritedComponent CardContent
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
-import CardContent from './CardContent';
 
 export const styles = theme => ({
   root: {
     display: 'flex',
     alignItems: 'center',
+    padding: theme.spacing.unit * 2,
   },
   avatar: {
     flex: '0 0 auto',
@@ -97,7 +95,7 @@ CardHeader.propTypes = {
 };
 
 CardHeader.defaultProps = {
-  component: CardContent,
+  component: 'div',
 };
 
 export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader);
diff --git a/src/List/ListItemText.js b/src/List/ListItemText.js
@@ -21,12 +21,12 @@ export const styles = theme => ({
   dense: {
     fontSize: theme.typography.pxToRem(13),
   },
-  textPrimary: {
+  primary: {
     '&$textDense': {
       fontSize: 'inherit',
     },
   },
-  textSecondary: {
+  secondary: {
     '&$textDense': {
       fontSize: 'inherit',
     },
@@ -62,7 +62,7 @@ function ListItemText(props, context) {
         ) : (
           <Typography
             type="subheading"
-            className={classNames(classes.textPrimary, { [classes.textDense]: dense })}
+            className={classNames(classes.primary, { [classes.textDense]: dense })}
           >
             {primary}
           </Typography>
@@ -73,7 +73,7 @@ function ListItemText(props, context) {
         ) : (
           <Typography
             type="body1"
-            className={classNames(classes.textSecondary, {
+            className={classNames(classes.secondary, {
               [classes.textDense]: dense,
             })}
             color="secondary"

diff --git a/src/List/ListItemText.spec.js b/src/List/ListItemText.spec.js
@@ -161,8 +161,8 @@ describe('<ListItemText />', () => {
 
   it('should render primary and secondary text with customisable classes', () => {
     const textClasses = {
-      textPrimary: 'GeneralText',
-      textSecondary: 'SecondaryText',
+      primary: 'GeneralText',
+      secondary: 'SecondaryText',
     };
     const wrapper = shallow(
       <ListItemText

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -105,7 +105,14 @@ export { default as Reboot } from './Reboot';
 export { default as Select } from './Select';
 export { default as Snackbar, SnackbarContent } from './Snackbar';
 export { default as Stepper, Step, StepButton, StepContent, StepLabel } from './Stepper';
-export { MuiThemeProvider, withStyles, WithStyles, withTheme, createMuiTheme, jssPreset } from './styles';
+export {
+  MuiThemeProvider,
+  withStyles,
+  WithStyles,
+  withTheme,
+  createMuiTheme,
+  jssPreset,
+} from './styles';
 
 import * as colors from './colors';