[ListItemText] Add primaryTypographyProps and secondaryTypographyProps (

mui#11858) * feat(ListItemText) add primaryTypographyProps and secondaryTypographyProps props fix mui#11834 * ready to merge
acroyear · Jul 14, 2018 · 94d4de6 · 94d4de6
1 parent 482a22c
commit 94d4de6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
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.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
@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { StandardProps } from '..';
+import { TypographyProps } from '../Typography';
 
 export interface ListItemTextProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemTextClassKey> {
   disableTypography?: boolean;
   inset?: boolean;
   primary?: React.ReactNode;
+  primaryTypographyProps?: Partial<TypographyProps>;
   secondary?: React.ReactNode;
+  secondaryTypographyProps?: Partial<TypographyProps>;
 }
 
 export type ListItemTextClassKey =

diff --git 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}
       </Typography>
@@ -69,6 +72,7 @@ function ListItemText(props, context) {
           [classes.textDense]: dense,
         })}
         color="textSecondary"
+        {...secondaryTypographyProps}
       >
         {secondary}
       </Typography>
@@ -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
@@ -213,4 +213,27 @@ describe('<ListItemText />', () => {
     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(
+      <ListItemText
+        primary="This is the primary text"
+        primaryTypographyProps={{ color: 'inherit' }}
+      />,
+    );
+
+    assert.strictEqual(wrapper.childAt(0).props().color, 'inherit');
+  });
+
+  it('should pass secondaryTypographyProps to secondary Typography component', () => {
+    const wrapper = shallow(
+      <ListItemText
+        primary="This is the primary text"
+        secondary="This is the secondary text"
+        secondaryTypographyProps={{ color: 'inherit' }}
+      />,
+    );
+
+    assert.strictEqual(wrapper.childAt(1).props().color, 'inherit');
+  });
 });
diff --git 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
 | <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 `children` (or `primary`) text, and optional `secondary` text with the Typography component. |
 | <span class="prop-name">inset</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. |
 | <span class="prop-name">primary</span> | <span class="prop-type">node |   | The main content element. |
+| <span class="prop-name">primaryTypographyProps</span> | <span class="prop-type">object |   | These props will be forwarded to the primary typography component (as long as disableTypography is not `true`). |
 | <span class="prop-name">secondary</span> | <span class="prop-type">node |   | The secondary content element. |
+| <span class="prop-name">secondaryTypographyProps</span> | <span class="prop-type">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).