Repository: mui/material-ui (TypeScript)
Date: 2018-08-17 20:44:56+00:00
Task type: Feature

Issue:
ListSubheader: disableGutters
<!--- Provide a general summary of the issue in the Title above -->
Hey Guys,

I just wanted to use a Subheader in a list with ListItems, which uses the `disableGutters` flag. But there is no `disableGutters` flag on the ListSubheader.

Is this intended behaviour or just a bug?

<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x] This is a v1.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior
<!---
    Describe what should happen.
-->

There should be a `disableGutters` flag on `ListSubheader`.

## Current Behavior
<!---
    Describe what happens instead of the expected behavior.
-->

There is no `disableGutters` flag on `ListSubheader`.

## Steps to Reproduce
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).

    This codesandbox.io template _may_ be a good starting point:
    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app


    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?

-->
Link: https://codesandbox.io/s/p0xmqjoj0

## Context
<!---
    What are you trying to accomplish? How has this issue affected you?
    Providing context helps us come up with a solution that is most useful in the real world.
-->

I want to accomplish, that the `ListSubheader` is in the same vertical row as the `ListItem`s

**If this is not intended and should be fixed, I would be very pleased to create a PR!**

## Your Environment
<!--- Include as many relevant details about the environment with which you experienced the bug. -->

| Tech         | Version |
|--------------|---------|
| Material-UI  | v1.5.0  |
| React        |  16.4.2  |
| Browser      |  Chromium Version 68  |



Issue discussion:
@johannwagner You are right for symmetry, we should have a `disableGutters` property on the `ListSubheader` component! Do you want to work on it? :)
Yep, I would give it a try. This is going to be my first contribution, so please be gentle :smile: 
@johannwagner Don't worry about that 👼 .

Solution patch:
diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js
--- a/docs/src/pages/demos/lists/NestedList.js
+++ b/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 }));
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts
--- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts
+++ b/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>;
 
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -6,7 +6,7 @@ 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',
@@ -14,7 +14,7 @@ export const styles = theme => ({
     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,
 };
diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md
--- a/pages/api/list-subheader.md
+++ b/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}`.
 


Test patch:
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.test.js b/packages/material-ui/src/ListSubheader/ListSubheader.test.js
--- a/packages/material-ui/src/ListSubheader/ListSubheader.test.js
+++ b/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);
+    });
+  });
 });