diff --git a/.size-limit.js b/.size-limit.js index b738dddee71de2..a45beca09985dc 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.9 KB', + limit: '95.0 KB', }, { name: 'The main bundle of the docs', diff --git a/packages/material-ui/src/ListItemText/ListItemText.d.ts b/packages/material-ui/src/ListItemText/ListItemText.d.ts index c52c1d3f6604d6..fdf47942beea92 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.d.ts +++ b/packages/material-ui/src/ListItemText/ListItemText.d.ts @@ -1,12 +1,15 @@ import * as React from 'react'; import { StandardProps } from '..'; +import { TypographyProps } from '../Typography'; export interface ListItemTextProps extends StandardProps, ListItemTextClassKey> { disableTypography?: boolean; inset?: boolean; primary?: React.ReactNode; + primaryTypographyProps?: Partial; secondary?: React.ReactNode; + secondaryTypographyProps?: Partial; } export type ListItemTextClassKey = diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js index a6a02f34dfa4b5..ecdba460a5f191 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.js +++ b/packages/material-ui/src/ListItemText/ListItemText.js @@ -42,7 +42,9 @@ function ListItemText(props, context) { disableTypography, inset, primary: primaryProp, + primaryTypographyProps, secondary: secondaryProp, + secondaryTypographyProps, ...other } = props; const { dense } = context; @@ -54,6 +56,7 @@ function ListItemText(props, context) { variant="subheading" className={classNames(classes.primary, { [classes.textDense]: dense })} component="span" + {...primaryTypographyProps} > {primary} @@ -69,6 +72,7 @@ function ListItemText(props, context) { [classes.textDense]: dense, })} color="textSecondary" + {...secondaryTypographyProps} > {secondary} @@ -123,10 +127,20 @@ ListItemText.propTypes = { * The main content element. */ primary: PropTypes.node, + /** + * These props will be forwarded to the primary typography component + * (as long as disableTypography is not `true`). + */ + primaryTypographyProps: PropTypes.object, /** * The secondary content element. */ secondary: PropTypes.node, + /** + * These props will be forwarded to the secondary typography component + * (as long as disableTypography is not `true`). + */ + secondaryTypographyProps: PropTypes.object, }; ListItemText.defaultProps = { diff --git a/packages/material-ui/src/ListItemText/ListItemText.test.js b/packages/material-ui/src/ListItemText/ListItemText.test.js index 2d18ecfd749033..93b68485bc6601 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.test.js +++ b/packages/material-ui/src/ListItemText/ListItemText.test.js @@ -213,4 +213,27 @@ describe('', () => { assert.strictEqual(wrapper.childAt(0).props().children, primary.props.children); assert.strictEqual(wrapper.childAt(1).props().children, secondary.props.children); }); + + it('should pass primaryTypographyProps to primary Typography component', () => { + const wrapper = shallow( + , + ); + + assert.strictEqual(wrapper.childAt(0).props().color, 'inherit'); + }); + + it('should pass secondaryTypographyProps to secondary Typography component', () => { + const wrapper = shallow( + , + ); + + assert.strictEqual(wrapper.childAt(1).props().color, 'inherit'); + }); }); diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md index 23d8c99e0d25da..ce0850d80e46e2 100644 --- a/pages/api/list-item-text.md +++ b/pages/api/list-item-text.md @@ -17,7 +17,9 @@ filename: /packages/material-ui/src/ListItemText/ListItemText.js | 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 `children` (or `primary`) text, and optional `secondary` text with the Typography component. | | inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. | | primary | node |   | The main content element. | +| primaryTypographyProps | object |   | These props will be forwarded to the primary typography component (as long as disableTypography is not `true`). | | secondary | node |   | The secondary content element. | +| secondaryTypographyProps | object |   | These props will be forwarded to the secondary typography component (as long as disableTypography is not `true`). | Any other properties supplied will be spread to the root element (native element).