From cd4847c9b5290f72b6f1e8d17663c06e2f0bb010 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 10 Jun 2018 21:43:10 +0200 Subject: [PATCH] [Grid] Add support a auto value (#11804) --- packages/material-ui/src/Grid/Grid.js | 59 ++++++++++++---------- packages/material-ui/src/Grid/Grid.test.js | 7 ++- pages/api/grid.md | 13 ++--- 3 files changed, 45 insertions(+), 34 deletions(-) diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js index 09e6dc5f7725c2..7d8c8713c2fb22 100644 --- a/packages/material-ui/src/Grid/Grid.js +++ b/packages/material-ui/src/Grid/Grid.js @@ -17,21 +17,30 @@ import { keys as breakpointKeys } from '../styles/createBreakpoints'; import requirePropFactory from '../utils/requirePropFactory'; const GUTTERS = [0, 8, 16, 24, 32, 40]; -const GRID_SIZES = [true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; +const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; function generateGrid(globalStyles, theme, breakpoint) { - // For the auto layouting - const styles = { - [`grid-${breakpoint}`]: { - flexBasis: 0, - flexGrow: 1, - maxWidth: '100%', - }, - }; + const styles = {}; GRID_SIZES.forEach(size => { - if (typeof size === 'boolean') { - // Skip the first one as handle above. + const key = `grid-${breakpoint}-${size}`; + + if (size === true) { + // For the auto layouting + styles[key] = { + flexBasis: 0, + flexGrow: 1, + maxWidth: '100%', + }; + return; + } + + if (size === 'auto') { + styles[key] = { + flexBasis: 'auto', + flexGrow: 0, + maxWidth: 'none', + }; return; } @@ -42,8 +51,9 @@ function generateGrid(globalStyles, theme, breakpoint) { // Close to the bootstrap implementation: // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41 /* eslint-enable max-len */ - styles[`grid-${breakpoint}-${size}`] = { + styles[key] = { flexBasis: width, + flexGrow: 0, maxWidth: width, }; }); @@ -194,16 +204,11 @@ function Grid(props) { [classes[`align-content-xs-${String(alignContent)}`]]: alignContent !== Grid.defaultProps.alignContent, [classes[`justify-xs-${String(justify)}`]]: justify !== Grid.defaultProps.justify, - [classes['grid-xs']]: xs === true, - [classes[`grid-xs-${String(xs)}`]]: xs && xs !== true, - [classes['grid-sm']]: sm === true, - [classes[`grid-sm-${String(sm)}`]]: sm && sm !== true, - [classes['grid-md']]: md === true, - [classes[`grid-md-${String(md)}`]]: md && md !== true, - [classes['grid-lg']]: lg === true, - [classes[`grid-lg-${String(lg)}`]]: lg && lg !== true, - [classes['grid-xl']]: xl === true, - [classes[`grid-xl-${String(xl)}`]]: xl && xl !== true, + [classes[`grid-xs-${String(xs)}`]]: xs !== false, + [classes[`grid-sm-${String(sm)}`]]: sm !== false, + [classes[`grid-md-${String(md)}`]]: md !== false, + [classes[`grid-lg-${String(lg)}`]]: lg !== false, + [classes[`grid-xl-${String(xl)}`]]: xl !== false, }, classNameProp, ); @@ -271,17 +276,17 @@ Grid.propTypes = { * Defines the number of grids the component is going to use. * It's applied for the `lg` breakpoint and wider screens if not overridden. */ - lg: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), + lg: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), /** * Defines the number of grids the component is going to use. * It's applied for the `md` breakpoint and wider screens if not overridden. */ - md: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), + md: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), /** * Defines the number of grids the component is going to use. * It's applied for the `sm` breakpoint and wider screens if not overridden. */ - sm: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), + sm: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), /** * Defines the space between the type `item` component. * It can only be used on a type `container` component. @@ -296,12 +301,12 @@ Grid.propTypes = { * Defines the number of grids the component is going to use. * It's applied for the `xl` breakpoint and wider screens. */ - xl: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), + xl: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), /** * Defines the number of grids the component is going to use. * It's applied for all the screen sizes with the lowest priority. */ - xs: PropTypes.oneOf([false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), + xs: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), /** * If `true`, it sets `min-width: 0` on the item. * Refer to the limitations section of the documentation to better understand the use case. diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js index f6419474cd2985..bf520755ef8f1d 100644 --- a/packages/material-ui/src/Grid/Grid.test.js +++ b/packages/material-ui/src/Grid/Grid.test.js @@ -42,13 +42,18 @@ describe('', () => { describe('prop: xs', () => { it('should apply the flex-grow class', () => { const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes['grid-xs']), true); + assert.strictEqual(wrapper.hasClass(classes['grid-xs-true']), true); }); it('should apply the flex size class', () => { const wrapper = shallow(); assert.strictEqual(wrapper.hasClass(classes['grid-xs-3']), true); }); + + it('should apply the flex auto class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes['grid-xs-auto']), true); + }); }); describe('prop: spacing', () => { diff --git a/pages/api/grid.md b/pages/api/grid.md index 4c95f461156288..a9b4bfdf54b2f1 100644 --- a/pages/api/grid.md +++ b/pages/api/grid.md @@ -21,13 +21,13 @@ filename: /packages/material-ui/src/Grid/Grid.js | direction | enum: 'row' |
 'row-reverse' |
 'column' |
 'column-reverse'
| 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. | | item | bool | false | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. | | justify | enum: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'
| 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. | -| lg | enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. | -| md | enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. | -| sm | enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. | +| lg | enum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. | +| md | enum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. | +| sm | enum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. | | spacing | enum: 0, 8, 16, 24, 32, 40
| 0 | Defines the space between the type `item` component. It can only be used on a type `container` component. | | wrap | enum: 'nowrap' |
 'wrap' |
 'wrap-reverse'
| 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. | -| xl | enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. | -| xs | enum: false, true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. | +| xl | enum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. | +| xs | enum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
| false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. | | zeroMinWidth | bool | false | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. | Any other properties supplied will be spread to the root element (native element). @@ -62,7 +62,8 @@ This property accepts the following keys: - `spacing-xs-24` - `spacing-xs-32` - `spacing-xs-40` -- `grid-xs` +- `grid-xs-auto` +- `grid-xs-true` - `grid-xs-1` - `grid-xs-2` - `grid-xs-3`