Fix XY Grid flexbox issues (#80)

Author: crisu83

src/components/xy-grid.js

@@ -1,7 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { GutterTypes, ExtendedBreakpoints } from '../enums';
-import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys, isDefined, objectValues, addBreakpoint, setDirection } from '../utils';
+import {
+  GeneralPropTypes,
+  FlexboxPropTypes,
+  createClassName,
+  generalClassNames,
+  flexboxClassNames,
+  removeProps,
+  objectKeys,
+  isDefined,
+  objectValues,
+  addBreakpoint,
+  setDirection
+ } from '../utils';
 
 /**
  * Grid container component.
@@ -17,7 +29,8 @@ export const GridContainer = (props) => {
       'fluid': props.fluid,
       'full': props.full
     },
-    generalClassNames(props)
+    generalClassNames(props),
+    flexboxClassNames(props)
   );
 
   const passProps = removeProps(props, objectKeys(GridContainer.propTypes));
@@ -50,7 +63,8 @@ export const Grid = (props) => {
     isDefined(props.collapseOnMedium) ? `medium-${props.collapseOnMedium}-collapse` : null,
     isDefined(props.collapseOnLarge) ? `large-${props.collapseOnLarge}-collapse` : null,
     isDefined(props.gridFrame) ? addBreakpoint('grid-frame', props.gridFrame) : null,
-    generalClassNames(props)
+    generalClassNames(props),
+    flexboxClassNames(props)
   );
 
   const passProps = removeProps(props, objectKeys(Grid.propTypes));
@@ -90,7 +104,8 @@ export const Cell = (props) => {
     isDefined(props.offsetOnSmall) ? `small-offset-${props.offsetOnSmall}` : null,
     isDefined(props.offsetOnMedium) ? `medium-offset-${props.offsetOnMedium}` : null,
     isDefined(props.offsetOnLarge) ? `large-offset-${props.offsetOnLarge}` : null,
-    generalClassNames(props)
+    generalClassNames(props),
+    flexboxClassNames(props)
   );
 
   const passProps = removeProps(props, objectKeys(Cell.propTypes));

src/utils.js

@@ -181,22 +181,19 @@ export const FlexboxPropTypes = {
  * @returns {Object}
  */
 export function flexboxClassNames(props) {
-  const flexClassNames = {
+  return {
     'flex-container': props.flexContainer,
     'align-center-middle': props.centerAlign,
+    [`align-${props.alignX}`]: props.alignX,
+    [`align-${props.alignY}`]: props.alignY,
+    [addBreakpoint('flex-dir-row', props.flexDirRow)]: props.flexDirRow,
+    [addBreakpoint('flex-dir-row-reverse', props.flexDirRowRev)]: props.flexDirRowRev,
+    [addBreakpoint('flex-dir-column', props.flexDirCol)]: props.flexDirCol,
+    [addBreakpoint('flex-dir-column-reverse', props.flexDirColRev)]: props.flexDirColRev,
+    [`flex-child-${props.flexChild}`]: props.flexChild,
+    [`order-${props.flexOrder}`]: props.flexOrder,
+    [`small-order-${props.flexOrder}`]: props.flexOrderSmall,
+    [`medium-order-${props.flexOrder}`]: props.flexOrderMedium,
+    [`large-order-${props.flexOrder}`]: props.flexOrderLarge
   };
-
-  if (isDefined(props.alignX)) flexClassNames[`align-${props.alignX}`] = true;
-  if (isDefined(props.alignY)) flexClassNames[`align-${props.alignY}`] = true;
-  if (isDefined(props.flexDirRow)) flexClassNames[addBreakpoint('flex-dir-row', props.flexDirRow)] = true;
-  if (isDefined(props.flexDirRowRev)) flexClassNames[addBreakpoint('flex-dir-row-reverse', props.flexDirRowRev)] = true;
-  if (isDefined(props.flexDirCol)) flexClassNames[addBreakpoint('flex-dir-column', props.flexDirCol)] = true;
-  if (isDefined(props.flexDirColRev)) flexClassNames[addBreakpoint('flex-dir-column-reverse', props.flexDirColRev)] = true;
-  if (isDefined(props.flexChild)) flexClassNames[`flex-child-${props.flexChild}`] = true;
-  if (isDefined(props.flexOrder)) flexClassNames[`order-${props.flexOrder}`] = true;
-  if (isDefined(props.flexOrderSmall)) flexClassNames[`small-order-${props.flexOrder}`] = true;
-  if (isDefined(props.flexOrderMedium)) flexClassNames[`medium-order-${props.flexOrder}`] = true;
-  if (isDefined(props.flexOrderLarge)) flexClassNames[`large-order-${props.flexOrder}`] = true;
-
-  return flexClassNames;
 }

test/components/xy-grid-spec.js

@@ -37,6 +37,12 @@ describe('GridContainer component', () => {
     expect(component).to.have.className('full');
     expect(component).to.not.have.prop('full');
   });
+
+  it('sets flexbox class name', () => {
+    const component = shallow(<GridContainer alignX="center"/>);
+    expect(component).to.have.className('align-center');
+    expect(component).to.not.have.prop('alignX');
+  });
 });
 
 describe('Grid component', () => {
@@ -131,6 +137,12 @@ describe('Grid component', () => {
     const component = render(<Grid gridFrame={ExtendedBreakpoints.LARGE}/>);
     expect(component).to.have.className('large-grid-frame');
   });
+
+  it('sets flexbox class name', () => {
+    const component = shallow(<Grid alignX="center"/>);
+    expect(component).to.have.className('align-center');
+    expect(component).to.not.have.prop('alignX');
+  });
 });
 
 describe('Cell component', () => {
@@ -230,4 +242,10 @@ describe('Cell component', () => {
     const component = render(<Cell shrink={ExtendedBreakpoints.LARGE}/>);
     expect(component).to.have.className('large-shrink');
   });
+  
+  it('sets flexbox class name', () => {
+    const component = shallow(<Cell alignX="center"/>);
+    expect(component).to.have.className('align-center');
+    expect(component).to.not.have.prop('alignX');
+  });
 });

test/utils-spec.js

@@ -39,7 +39,7 @@ describe('Utilities', () => {
 
   describe('flexboxClassNames', () => {
     const props = {flexDirRow: ExtendedBreakpoints.MEDIUM, flexOrderSmall: 4, flexChild: SpaceControls.GROW};
-    const classNames = generalClassNames(props);
+    const classNames = flexboxClassNames(props);
     expect(classNames['medium-flex-dir-row']).to.equal.true;
     expect(classNames['small-order-4']).to.equal.true;
     expect(classNames['flex-child-grow']).to.equal.true;