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 |