feat(Col): add flex-support to Col component (#169) (#175)

ronnyhaase · eddywashere · commit ebdecb8a53ea · 2016-10-17T20:05:17.000-07:00
* feat(Col): add flex-support for Col component (#169) * feat(Col): Removed "flex" as valid option for col size, and bool for object (#169) * feat(Col): add documentation for flexbox support (#169)
diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js
@@ -41,6 +41,7 @@ export default class LayoutsPage extends React.Component {
 const columnProps = PropTypes.oneOfType([
   PropTypes.string,
   PropTypes.number,
+  PropTypes.bool,
   PropTypes.shape({
     size: stringOrNumberProp,
     push: stringOrNumberProp,
diff --git a/docs/lib/examples/Layout.js b/docs/lib/examples/Layout.js
@@ -12,6 +12,10 @@ export default class Example extends React.Component {
           <Col xs="6">col-xs-6</Col>
           <Col xs="6">col-xs-6</Col>
         </Row>
+        <Row>
+          <Col xs>.col-xs (flexbox)</Col>
+          <Col xs>.col-xs (flexbox)</Col>
+        </Row>
         <Row>
           <Col xs="6" sm="4">col-xs-6 col-sm-4</Col>
           <Col xs="6" sm="4">col-xs-6 col-sm-4</Col>
@@ -23,6 +27,10 @@ export default class Example extends React.Component {
         <Row>
           <Col sm="12" md={{ size: 8, offset: 2 }}>.col-xs-12 .col-sm-12 .col-md-6 .col-md-offset-3</Col>
         </Row>
+        <Row>
+          <Col sm={{ size: 'auto', offset: 1 }}>.col-sm .col-sm-offset-1</Col>
+          <Col sm={{ size: 'auto', offset: 1 }}>.col-sm .col-sm-offset-1</Col>
+        </Row>
       </Container>
     );
   }
diff --git a/src/Col.js b/src/Col.js
@@ -5,8 +5,9 @@ const colSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
 
 const columnProps = PropTypes.oneOfType([
-  PropTypes.string,
+  PropTypes.bool,
   PropTypes.number,
+  PropTypes.string,
   PropTypes.shape({
     size: stringOrNumberProp,
     push: stringOrNumberProp,
@@ -38,18 +39,31 @@ const Col = (props) => {
   colSizes.forEach(colSize => {
     const columnProp = props[colSize];
     delete attributes[colSize];
+    let colClass;
 
     if (!columnProp) {
       return;
     } else if (columnProp.size) {
+      if (columnProp.size === 'auto') {
+        colClass = `col-${colSize}`;
+      } else {
+        colClass = `col-${colSize}-${columnProp.size}`;
+      }
+
       colClasses.push(classNames({
-        [`col-${colSize}-${columnProp.size}`]: columnProp.size,
+        [colClass]: columnProp.size,
         [`push-${colSize}-${columnProp.push}`]: columnProp.push,
         [`pull-${colSize}-${columnProp.pull}`]: columnProp.pull,
         [`offset-${colSize}-${columnProp.offset}`]: columnProp.offset
       }));
     } else {
-      colClasses.push(`col-${colSize}-${columnProp}`);
+      if (columnProp === 'auto' || columnProp === true) {
+        colClass = `col-${colSize}`;
+      } else {
+        colClass = `col-${colSize}-${columnProp}`;
+      }
+
+      colClasses.push(colClass);
     }
   });
 
diff --git a/src/__tests__/Col.spec.js b/src/__tests__/Col.spec.js
@@ -36,6 +36,13 @@ describe('Col', () => {
     expect(wrapper.hasClass('col-xs-12')).toBe(true);
   });
 
+  it('should pass col size as flex with values "auto" or without value', () => {
+    const wrapper = shallow(<Col xs="auto" sm />);
+
+    expect(wrapper.hasClass('col-xs')).toBe(true);
+    expect(wrapper.hasClass('col-sm')).toBe(true);
+  });
+
   it('should pass col size specific classes via Objects', () => {
     const wrapper = shallow(<Col sm={{ size: 6, push: 2, pull: 2, offset: 2 }} />);
 
@@ -45,4 +52,12 @@ describe('Col', () => {
     expect(wrapper.hasClass('pull-sm-2')).toBe(true);
     expect(wrapper.hasClass('offset-sm-2')).toBe(true);
   });
+
+  it('should pass col size as flex when passing via object with size "auto"', () => {
+    const wrapper = shallow(<Col
+      sm={{ size: 'auto', push: 2, pull: 2, offset: 2 }}
+    />);
+
+    expect(wrapper.hasClass('col-sm')).toBe(true);
+  });
 });
