diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js index 2321f470dc5bb4..1fa7227c94f5cc 100644 --- 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 index 5b9d110d69c996..04a47eade36ed9 100644 --- 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, ListSubheaderClassKey> { - component?: React.ReactType; color?: 'default' | 'primary' | 'inherit'; - inset?: boolean; + component?: React.ReactType; + 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; diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js index 4ecc8fe8fea2d9..872796fa191ee0 100644 --- 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 ( ', () => { assert.strictEqual(wrapper.hasClass(classes.sticky), false); }); }); + + describe('prop: disableGutters', () => { + it('should not display gutters class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.gutters), false); + }); + + it('should display gutters class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.gutters), true); + }); + }); }); diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md index 5783f38df45d05..51fdbc2e5302bd 100644 --- a/pages/api/list-subheader.md +++ b/pages/api/list-subheader.md @@ -19,6 +19,7 @@ title: ListSubheader API | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'default' |
 'primary' |
 'inherit'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |
 func |
 object
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | +| disableGutters | bool | false | If `true`, the List Subheader will not have gutters. | | disableSticky | bool | false | If `true`, the List Subheader will not stick to the top during scroll. | | inset | bool | false | If `true`, the List Subheader will be indented. | @@ -35,6 +36,7 @@ This property accepts the following keys: | root | Styles applied to the root element. | colorPrimary | Styles applied to the root element if `color="primary"`. | colorInherit | Styles applied to the root element if `color="inherit"`. +| gutters | Styles applied to the inner `component` element if `disableGutters={false}`. | inset | Styles applied to the root element if `inset={true}`. | sticky | Styles applied to the root element if `disableSticky={false}`.