feat(v5): Add row-cols-auto support (#5366)

src/Row.tsx

@@ -22,7 +22,8 @@ type RowColWidth =
   | '9'
   | '10'
   | '11'
-  | '12';
+  | '12'
+  | 'auto';
 type RowColumns = RowColWidth | { cols?: RowColWidth };
 
 export interface RowProps extends BsPrefixPropsWithChildren {
@@ -57,37 +58,42 @@ const propTypes = {
   as: PropTypes.elementType,
 
   /**
-   * The number of columns that will fit next to each other on extra small devices (<576px)
+   * The number of columns that will fit next to each other on extra small devices (<576px).
+   * Use `auto` to give columns their natural widths.
    *
-   * @type {(number|{ cols: number })}
+   * @type {(number|'auto'|{ cols: number|'auto' })}
    */
   xs: rowColumns,
 
   /**
-   * The number of columns that will fit next to each other on small devices (≥576px)
+   * The number of columns that will fit next to each other on small devices (≥576px).
+   * Use `auto` to give columns their natural widths.
    *
-   * @type {(number|{ cols: number })}
+   * @type {(number|'auto'|{ cols: number|'auto' })}
    */
   sm: rowColumns,
 
   /**
-   * The number of columns that will fit next to each other on medium devices (≥768px)
+   * The number of columns that will fit next to each other on medium devices (≥768px).
+   * Use `auto` to give columns their natural widths.
    *
-   * @type {(number|{ cols: number })}
+   * @type {(number|'auto'|{ cols: number|'auto' })}
    */
   md: rowColumns,
 
   /**
-   * The number of columns that will fit next to each other on large devices (≥992px)
+   * The number of columns that will fit next to each other on large devices (≥992px).
+   * Use `auto` to give columns their natural widths.
    *
-   * @type {(number|{ cols: number })}
+   * @type {(number|'auto'|{ cols: number|'auto' })}
    */
   lg: rowColumns,
 
   /**
-   * The number of columns that will fit next to each other on extra large devices (≥1200px)
+   * The number of columns that will fit next to each other on extra large devices (≥1200px).
+   * Use `auto` to give columns their natural widths.
    *
-   * @type {(number|{ cols: number })}
+   * @type {(number|'auto'|{ cols: number|'auto' })}
    */
   xl: rowColumns,
 };

test/RowSpec.js

@@ -18,6 +18,18 @@ describe('Row', () => {
     );
   });
 
+  it('Should allow auto as size', () => {
+    mount(<Row xs="auto" md="auto" />).assertSingle(
+      '.row-cols-md-auto.row-cols-auto',
+    );
+  });
+
+  it('Should allow auto as size in object form', () => {
+    mount(<Row xs={{ cols: 'auto' }} md={{ cols: 'auto' }} />).assertSingle(
+      '.row-cols-md-auto.row-cols-auto',
+    );
+  });
+
   it('uses "div" by default', () => {
     mount(
       <Row className="custom-class">

tests/simple-types-test.tsx

@@ -239,6 +239,8 @@ const MegaComponent = () => (
       </Carousel.Item>
     </Carousel>
     <Container as="div" fluid bsPrefix="container" style={style}>
+      <Row xs="auto" />
+      <Row xs={{ cols: 'auto' }} />
       <Row
         as="div"
         xs={1}

www/src/examples/Grid/RowColLayout.js

@@ -8,4 +8,9 @@
     <Col>2 of 3</Col>
     <Col>3 of 3</Col>
   </Row>
+  <Row xs="auto">
+    <Col>1 of 3</Col>
+    <Col>2 of 3</Col>
+    <Col>3 of 3</Col>
+  </Row>
 </Container>;

www/src/pages/layout/grid.js

@@ -159,7 +159,8 @@ export default withLayout(function GridSection({ data }) {
       <p>
         The <code>Row</code> lets you specify column widths across 5 breakpoint
         sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify
-        the amount of columns that will fit next to each other.
+        the amount of columns that will fit next to each other. You can also
+        specify <code>auto</code> to set the columns to their natural widths.
       </p>
       <ReactPlayground
         codeText={GridRowColLayout}