feat(Col): Allow false to be used for Col span (react-bootstrap#5232)

* fix(Layout): Allow null for Col span in TS defs and fix docs

* Allow span to be false

src/Col.js

@@ -37,35 +37,35 @@ const propTypes = {
   /**
    * The number of columns to span on extra small devices (<576px)
    *
-   * @type {(true|"auto"|number|{ span: true|"auto"|number, offset: number, order: "first"|"last"|number })}
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
    */
   xs: column,
 
   /**
    * The number of columns to span on small devices (≥576px)
    *
-   * @type {(true|"auto"|number|{ span: true|"auto"|number, offset: number, order: "first"|"last"|number })}
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
    */
   sm: column,
 
   /**
    * The number of columns to span on medium devices (≥768px)
    *
-   * @type {(true|"auto"|number|{ span: true|"auto"|number, offset: number, order: "first"|"last"|number })}
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
    */
   md: column,
 
   /**
    * The number of columns to span on large devices (≥992px)
    *
-   * @type {(true|"auto"|number|{ span: true|"auto"|number, offset: number, order: "first"|"last"|number })}
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
    */
   lg: column,
 
   /**
    * The number of columns to span on extra large devices (≥1200px)
    *
-   * @type {(true|"auto"|number|{ span: true|"auto"|number, offset: number, order: "first"|"last"|number })}
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
    */
   xl: column,
 };
@@ -90,7 +90,7 @@ const Col = React.forwardRef(
 
       let infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
 
-      if (span != null)
+      if (span)
         spans.push(
           span === true ? `${prefix}${infix}` : `${prefix}${infix}-${span}`,
         );

test/ColSpec.js

@@ -14,7 +14,9 @@ describe('Col', () => {
   });
 
   it('Should include sizes', () => {
-    mount(<Col xs={4} md={8} />).assertSingle('.col-md-8.col-4');
+    mount(<Col xs={4} md={8} lg={{ span: 12 }} />).assertSingle(
+      '.col-md-8.col-4.col-lg-12',
+    );
   });
 
   it('Should include offsets', () => {
@@ -27,6 +29,24 @@ describe('Col', () => {
     ).assertSingle('.col-md-8.order-md-1.col-4.offset-1.order-lg-last');
   });
 
+  it('Should allow span to be null', () => {
+    const wrapper = mount(<Col xs="6" md={{ span: null, order: 1 }} />);
+    wrapper.assertSingle('.col-6.order-md-1');
+    wrapper.find('div').hasClass('col-md').should.equal(false);
+  });
+
+  it('Should allow span to be false', () => {
+    const wrapper = mount(<Col xs="6" md={{ span: false, order: 1 }} />);
+    wrapper.assertSingle('.col-6.order-md-1');
+    wrapper.find('div').hasClass('col-md').should.equal(false);
+  });
+
+  it('Should allow span to be auto', () => {
+    mount(<Col md="auto" lg={{ span: 'auto' }} />).assertSingle(
+      '.col-md-auto.col-lg-auto',
+    );
+  });
+
   it('Should have div as default component', () => {
     mount(<Col />).assertSingle('div');
   });

types/components/Col.d.ts

@@ -17,7 +17,7 @@ type NumberAttr =
   | '11'
   | '12';
 type ColOrder = 'first' | 'last' | NumberAttr;
-type ColSize = true | 'auto' | NumberAttr;
+type ColSize = boolean | 'auto' | NumberAttr;
 type ColSpec =
   | ColSize
   | { span?: ColSize; offset?: NumberAttr; order?: ColOrder };

types/simple.test.tsx

@@ -146,6 +146,9 @@ import {
     <Col xs md={{ span: 4, offset: 4 }}>
       3 of 3
     </Col>
+    <Col xs="2" md={{ span: false, offset: 1 }}>
+      .col-2 .offset-md-1
+    </Col>
   </Row>
 </Container>;
 

www/src/pages/layout/grid.js

@@ -111,7 +111,7 @@ export default withLayout(function GridSection({ data }) {
       </LinkedHeading>
       <p>
         The <code>Col</code> lets you specify column widths across 5 breakpoint
-        sizes (xs, sm, md, large, and xl). For every breakpoint, you can specify
+        sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify
         the amount of columns to span, or set the prop to{' '}
         <code>{'<Col lg={true} />'}</code> for auto layout widths.
       </p>
@@ -128,26 +128,27 @@ export default withLayout(function GridSection({ data }) {
         The <code>Col</code> breakpoint props also have a more complicated{' '}
         <code>object</code> prop form:{' '}
         <code>{`{span: number, order: number, offset: number}`}</code> for
-        specifying offsets and ordering affects.
+        specifying offsets and ordering effects.
       </p>
 
       <p>
-        You can use the `order` property to control the{' '}
+        You can use the <code>order</code> property to control the{' '}
         <strong>visual order</strong> of your content.
       </p>
       <ReactPlayground codeText={GridOrdering} exampleClassName="show-grid" />
 
       <p>
-        The `order` property also supports `first` (<code>order: -1</code>) and
-        `last` (<code>order: $columns+1</code>).
+        The <code>order</code> property also supports <code>first</code> (
+        <code>order: -1</code>) and <code>last</code> (
+        <code>order: $columns+1</code>).
       </p>
       <ReactPlayground
         codeText={GridOrderingFirstLast}
         exampleClassName="show-grid"
       />
       <p>
-        For offsetting grid columns you can set an `offset` value, or, for more
-        general layout, use the margin class utilities.
+        For offsetting grid columns you can set an <code>offset</code> value or
+        for a more general layout, use the margin class utilities.
       </p>
       <ReactPlayground codeText={GridOffsetting} exampleClassName="show-grid" />
 
@@ -157,7 +158,7 @@ export default withLayout(function GridSection({ data }) {
 
       <p>
         The <code>Row</code> lets you specify column widths across 5 breakpoint
-        sizes (xs, sm, md, large, and xl). For every breakpoint, you can specify
+        sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify
         the amount of columns that will fit next to each other.
       </p>
       <ReactPlayground