Grid] Add "space-evenly" value for justify prop (#12213)

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';
 

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.

packages/material-ui/src/Grid/Grid.test.js

@@ -77,6 +77,13 @@ describe('<Grid />', () => {
     });
   });
 
+  describe('prop: justify', () => {
+    it('should apply the justify class', () => {
+      const wrapper = shallow(<Grid justify="space-evenly" container />);
+      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 = () => {};

pages/api/grid.md

@@ -23,7 +23,7 @@ title: Grid API
 | <span class="prop-name">container</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
 | <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'row'&nbsp;&#124;<br>&nbsp;'row-reverse'&nbsp;&#124;<br>&nbsp;'column'&nbsp;&#124;<br>&nbsp;'column-reverse'<br> | <span class="prop-default">'row'</span> | Defines the `flex-direction` style property. It is applied for all screen sizes. |
 | <span class="prop-name">item</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
-| <span class="prop-name">justify</span> | <span class="prop-type">enum:&nbsp;'flex-start', 'center', 'flex-end', 'space-between', 'space-around'<br> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
+| <span class="prop-name">justify</span> | <span class="prop-type">enum:&nbsp;'flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'<br> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
 | <span class="prop-name">lg</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">md</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">sm</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> | <span class="prop-default">false</span> | 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:
 | <span class="prop-name">justify-xs-flex-end</span> | 
 | <span class="prop-name">justify-xs-space-between</span> | 
 | <span class="prop-name">justify-xs-space-around</span> | 
+| <span class="prop-name">justify-xs-space-evenly</span> | 
 | <span class="prop-name">spacing-xs-8</span> | 
 | <span class="prop-name">spacing-xs-16</span> | 
 | <span class="prop-name">spacing-xs-24</span> |