From 90226be972af7fdb318d6b6030508f820b257592 Mon Sep 17 00:00:00 2001 From: Johann Wagner Date: Fri, 17 Aug 2018 22:40:22 +0200 Subject: [PATCH 1/2] [core] Added disableGutters property to ListSubheader --- packages/material-ui/.size-snapshot.json | 6 ++--- .../src/ListSubheader/ListSubheader.d.ts | 3 ++- .../src/ListSubheader/ListSubheader.js | 22 ++++++++++++++++++- .../src/ListSubheader/ListSubheader.test.js | 12 ++++++++++ pages/api/list-subheader.md | 2 ++ 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/.size-snapshot.json b/packages/material-ui/.size-snapshot.json index 7f0c43268482de..5611c697da2203 100644 --- a/packages/material-ui/.size-snapshot.json +++ b/packages/material-ui/.size-snapshot.json @@ -1,7 +1,7 @@ { "build/umd/material-ui.production.min.js": { - "bundled": 815209, - "minified": 304447, - "gzipped": 80249 + "bundled": 815343, + "minified": 304485, + "gzipped": 80259 } } diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts index 5b9d110d69c996..1ec0cb569b92eb 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts +++ b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts @@ -7,9 +7,10 @@ export interface ListSubheaderProps color?: 'default' | 'primary' | 'inherit'; inset?: boolean; disableSticky?: boolean; + disableGutters?: boolean; } -export type ListSubheaderClassKey = 'root' | 'colorPrimary' | 'colorInherit' | 'inset' | 'sticky'; +export type ListSubheaderClassKey = 'root' | 'colorPrimary' | 'colorInherit' | 'inset' | 'sticky' | 'nogutters'; 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..5c63021d2ef25d 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.js +++ b/packages/material-ui/src/ListSubheader/ListSubheader.js @@ -34,10 +34,24 @@ export const styles = theme => ({ zIndex: 1, backgroundColor: 'inherit', }, + /* Styles appiled to the root element if `disableGutters={trze}`. */ + nogutters: { + paddingLeft: 0, + paddingRight: 0, + }, }); function ListSubheader(props) { - const { classes, className, color, component: Component, disableSticky, inset, ...other } = props; + const { + classes, + className, + color, + component: Component, + disableSticky, + disableGutters, + inset, + ...other + } = props; return ( ', () => { assert.strictEqual(wrapper.hasClass(classes.sticky), false); }); }); + + describe('prop: disableGutters', () => { + it('should display nogutters class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.nogutters), true); + }); + + it('should not display nogutters class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.nogutters), false); + }); + }); }); diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md index 5783f38df45d05..b9342bd43aefce 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. | @@ -37,6 +38,7 @@ This property accepts the following keys: | colorInherit | Styles applied to the root element if `color="inherit"`. | inset | Styles applied to the root element if `inset={true}`. | sticky | Styles applied to the root element if `disableSticky={false}`. +| nogutters | Styles appiled to the root element if `disableGutters={trze}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListSubheader/ListSubheader.js) From 2bad3165a85a05f09a5a2583d16f11bff50d05d2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 17 Aug 2018 23:56:51 +0200 Subject: [PATCH 2/2] let's merge --- docs/src/pages/demos/lists/NestedList.js | 4 +++- packages/material-ui/.size-snapshot.json | 6 +++--- .../src/ListSubheader/ListSubheader.d.ts | 8 ++++---- .../src/ListSubheader/ListSubheader.js | 17 +++++++---------- .../src/ListSubheader/ListSubheader.test.js | 8 ++++---- pages/api/list-subheader.md | 2 +- 6 files changed, 22 insertions(+), 23 deletions(-) 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/.size-snapshot.json b/packages/material-ui/.size-snapshot.json index 5611c697da2203..7f0c43268482de 100644 --- a/packages/material-ui/.size-snapshot.json +++ b/packages/material-ui/.size-snapshot.json @@ -1,7 +1,7 @@ { "build/umd/material-ui.production.min.js": { - "bundled": 815343, - "minified": 304485, - "gzipped": 80259 + "bundled": 815209, + "minified": 304447, + "gzipped": 80249 } } diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts index 1ec0cb569b92eb..04a47eade36ed9 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts +++ b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts @@ -3,14 +3,14 @@ import { StandardProps } from '..'; export interface ListSubheaderProps extends StandardProps, ListSubheaderClassKey> { - component?: React.ReactType; color?: 'default' | 'primary' | 'inherit'; - inset?: boolean; - disableSticky?: boolean; + component?: React.ReactType; disableGutters?: boolean; + disableSticky?: boolean; + inset?: boolean; } -export type ListSubheaderClassKey = 'root' | 'colorPrimary' | 'colorInherit' | 'inset' | 'sticky' | 'nogutters'; +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 5c63021d2ef25d..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, @@ -34,11 +36,6 @@ export const styles = theme => ({ zIndex: 1, backgroundColor: 'inherit', }, - /* Styles appiled to the root element if `disableGutters={trze}`. */ - nogutters: { - paddingLeft: 0, - paddingRight: 0, - }, }); function ListSubheader(props) { @@ -47,8 +44,8 @@ function ListSubheader(props) { className, color, component: Component, - disableSticky, disableGutters, + disableSticky, inset, ...other } = props; @@ -61,7 +58,7 @@ function ListSubheader(props) { [classes[`color${capitalize(color)}`]]: color !== 'default', [classes.inset]: inset, [classes.sticky]: !disableSticky, - [classes.nogutters]: disableGutters, + [classes.gutters]: !disableGutters, }, className, )} @@ -110,8 +107,8 @@ ListSubheader.propTypes = { ListSubheader.defaultProps = { color: 'default', component: 'li', - disableSticky: false, disableGutters: false, + disableSticky: false, inset: false, }; diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.test.js b/packages/material-ui/src/ListSubheader/ListSubheader.test.js index 2c23c67be32e36..c32103580daf26 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.test.js +++ b/packages/material-ui/src/ListSubheader/ListSubheader.test.js @@ -52,14 +52,14 @@ describe('', () => { }); describe('prop: disableGutters', () => { - it('should display nogutters class', () => { + it('should not display gutters class', () => { const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes.nogutters), true); + assert.strictEqual(wrapper.hasClass(classes.gutters), false); }); - it('should not display nogutters class', () => { + it('should display gutters class', () => { const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes.nogutters), false); + assert.strictEqual(wrapper.hasClass(classes.gutters), true); }); }); }); diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md index b9342bd43aefce..51fdbc2e5302bd 100644 --- a/pages/api/list-subheader.md +++ b/pages/api/list-subheader.md @@ -36,9 +36,9 @@ 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}`. -| nogutters | Styles appiled to the root element if `disableGutters={trze}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListSubheader/ListSubheader.js)