From cae138d7d490702af0185328141da353fda1d390 Mon Sep 17 00:00:00 2001 From: Iain Billett Date: Fri, 20 Jul 2018 17:15:11 +0100 Subject: [PATCH] Allow space-evenly value for justify prop of Grid component --- packages/material-ui/src/Grid/Grid.d.ts | 3 ++- packages/material-ui/src/Grid/Grid.js | 21 ++++++++++++++++----- packages/material-ui/src/Grid/Grid.test.js | 7 +++++++ pages/api/grid.md | 3 ++- 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts index 24f5b8bd2de4b5..1fca82a53d3f1f 100644 --- a/packages/material-ui/src/Grid/Grid.d.ts +++ b/packages/material-ui/src/Grid/Grid.d.ts @@ -21,7 +21,8 @@ export type GridJustification = | 'center' | 'flex-end' | 'space-between' - | 'space-around'; + | 'space-around' + | 'space-evenly'; export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js index 7b7b55962b6dbc..e3b05a2c5d3859 100644 --- a/packages/material-ui/src/Grid/Grid.js +++ b/packages/material-ui/src/Grid/Grid.js @@ -164,22 +164,26 @@ export const styles = theme => ({ 'align-content-xs-space-around': { alignContent: 'space-around', }, - /* Styles applied to the root element if `justifyContent="center"`. */ + /* Styles applied to the root element if `justify="center"`. */ 'justify-xs-center': { justifyContent: 'center', }, - /* Styles applied to the root element if `justifyContent="flex-end"`. */ + /* Styles applied to the root element if `justify="flex-end"`. */ 'justify-xs-flex-end': { justifyContent: 'flex-end', }, - /* Styles applied to the root element if `justifyContent="space-between"`. */ + /* Styles applied to the root element if `justify="space-between"`. */ 'justify-xs-space-between': { justifyContent: 'space-between', }, - /* Styles applied to the root element if `justifyContent="space-around"`. */ + /* Styles applied to the root element if `justify="space-around"`. */ 'justify-xs-space-around': { justifyContent: 'space-around', }, + /* Styles applied to the root element if `justify="space-evenly"`. */ + 'justify-xs-space-evenly': { + justifyContent: 'space-evenly', + }, ...generateGutter(theme, 'xs'), ...breakpointKeys.reduce((accumulator, key) => { // Use side effect over immutability for better performance. @@ -290,7 +294,14 @@ Grid.propTypes = { * Defines the `justify-content` style property. * It is applied for all screen sizes. */ - justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']), + justify: PropTypes.oneOf([ + 'flex-start', + 'center', + 'flex-end', + 'space-between', + 'space-around', + 'space-evenly', + ]), /** * Defines the number of grids the component is going to use. * It's applied for the `lg` breakpoint and wider screens if not overridden. diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js index bf520755ef8f1d..a9c10886d0d55e 100644 --- a/packages/material-ui/src/Grid/Grid.test.js +++ b/packages/material-ui/src/Grid/Grid.test.js @@ -77,6 +77,13 @@ describe('', () => { }); }); + describe('prop: justify', () => { + it('should apply the justify class', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes['justify-xs-space-evenly']), true); + }); + }); + describe('prop: other', () => { it('should spread the other properties to the root element', () => { const handleClick = () => {}; diff --git a/pages/api/grid.md b/pages/api/grid.md index 83a2632ade1f2d..5592b6c6fbb693 100644 --- a/pages/api/grid.md +++ b/pages/api/grid.md @@ -23,7 +23,7 @@ title: Grid API | container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | | 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. | +| justify | enum: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'
| 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. | | 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. | @@ -64,6 +64,7 @@ This property accepts the following keys: | justify-xs-flex-end | | justify-xs-space-between | | justify-xs-space-around | +| justify-xs-space-evenly | | spacing-xs-8 | | spacing-xs-16 | | spacing-xs-24 |