Allow space-evenly value for justify prop of Grid component

mui · Jul 20, 2018 · 8c06850 · 8c06850
1 parent 4bf97b5
commit 8c06850
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 = () => {};