[ListSubheader] Add a disableGutters property (#12570)

* [core] Added disableGutters property to ListSubheader

* let's merge

docs/src/pages/demos/lists/NestedList.js

@@ -26,7 +26,9 @@ const styles = theme => ({
 });
 
 class NestedList extends React.Component {
-  state = { open: true };
+  state = {
+    open: true,
+  };
 
   handleClick = () => {
     this.setState(state => ({ open: !state.open }));

packages/material-ui/src/ListSubheader/ListSubheader.d.ts

@@ -3,13 +3,14 @@ import { StandardProps } from '..';
 
 export interface ListSubheaderProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListSubheaderClassKey> {
-  component?: React.ReactType<ListSubheaderProps>;
   color?: 'default' | 'primary' | 'inherit';
-  inset?: boolean;
+  component?: React.ReactType<ListSubheaderProps>;
+  disableGutters?: boolean;
   disableSticky?: boolean;
+  inset?: boolean;
 }
 
-export type ListSubheaderClassKey = 'root' | 'colorPrimary' | 'colorInherit' | 'inset' | 'sticky';
+export type ListSubheaderClassKey = 'root' | 'colorPrimary' | 'colorInherit' | 'inset' | 'sticky' | 'gutters';
 
 declare const ListSubheader: React.ComponentType<ListSubheaderProps>;
 

packages/material-ui/src/ListSubheader/ListSubheader.js

@@ -6,15 +6,15 @@ import { capitalize } from '../utils/helpers';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
-  root: theme.mixins.gutters({
+  root: {
     boxSizing: 'border-box',
     lineHeight: '48px',
     listStyle: 'none',
     color: theme.palette.text.secondary,
     fontFamily: theme.typography.fontFamily,
     fontWeight: theme.typography.fontWeightMedium,
     fontSize: theme.typography.pxToRem(14),
-  }),
+  },
   /* Styles applied to the root element if `color="primary"`. */
   colorPrimary: {
     color: theme.palette.primary.main,
@@ -23,6 +23,8 @@ export const styles = theme => ({
   colorInherit: {
     color: 'inherit',
   },
+  /* Styles applied to the inner `component` element if `disableGutters={false}`. */
+  gutters: theme.mixins.gutters(),
   /* Styles applied to the root element if `inset={true}`. */
   inset: {
     paddingLeft: 72,
@@ -37,7 +39,16 @@ export const styles = theme => ({
 });
 
 function ListSubheader(props) {
-  const { classes, className, color, component: Component, disableSticky, inset, ...other } = props;
+  const {
+    classes,
+    className,
+    color,
+    component: Component,
+    disableGutters,
+    disableSticky,
+    inset,
+    ...other
+  } = props;
 
   return (
     <Component
@@ -47,6 +58,7 @@ function ListSubheader(props) {
           [classes[`color${capitalize(color)}`]]: color !== 'default',
           [classes.inset]: inset,
           [classes.sticky]: !disableSticky,
+          [classes.gutters]: !disableGutters,
         },
         className,
       )}
@@ -78,6 +90,10 @@ ListSubheader.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the List Subheader will not have gutters.
+   */
+  disableGutters: PropTypes.bool,
   /**
    * If `true`, the List Subheader will not stick to the top during scroll.
    */
@@ -91,6 +107,7 @@ ListSubheader.propTypes = {
 ListSubheader.defaultProps = {
   color: 'default',
   component: 'li',
+  disableGutters: false,
   disableSticky: false,
   inset: false,
 };

packages/material-ui/src/ListSubheader/ListSubheader.test.js

@@ -50,4 +50,16 @@ describe('<ListSubheader />', () => {
       assert.strictEqual(wrapper.hasClass(classes.sticky), false);
     });
   });
+
+  describe('prop: disableGutters', () => {
+    it('should not display gutters class', () => {
+      const wrapper = shallow(<ListSubheader disableGutters />);
+      assert.strictEqual(wrapper.hasClass(classes.gutters), false);
+    });
+
+    it('should display gutters class', () => {
+      const wrapper = shallow(<ListSubheader />);
+      assert.strictEqual(wrapper.hasClass(classes.gutters), true);
+    });
+  });
 });

pages/api/list-subheader.md

@@ -19,6 +19,7 @@ title: ListSubheader API
 | <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">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <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">'li'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">disableGutters</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the List Subheader will not have gutters. |
 | <span class="prop-name">disableSticky</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the List Subheader will not stick to the top during scroll. |
 | <span class="prop-name">inset</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the List Subheader will be indented. |
 
@@ -35,6 +36,7 @@ This property accepts the following keys:
 | <span class="prop-name">root</span> | Styles applied to the root element.
 | <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
 | <span class="prop-name">inset</span> | Styles applied to the root element if `inset={true}`.
 | <span class="prop-name">sticky</span> | Styles applied to the root element if `disableSticky={false}`.