refactor(CardColumns)!: remove component (#6030)

BREAKING CHANGE: Removed CardColumns because it was dropped in Bootstrap 5
react-bootstrap · Sep 13, 2021 · d36718f · d36718f
1 parent ca97dc8
commit d36718f
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 141 deletions.
diff --git a/src/CardColumns.tsx b/src/CardColumns.tsx
diff --git a/src/index.tsx b/src/index.tsx
@@ -38,8 +38,6 @@ export type { ButtonToolbarProps } from './ButtonToolbar';
 export { default as Card } from './Card';
 export type { CardProps } from './Card';
 
-export { default as CardColumns } from './CardColumns';
-
 export { default as CardImg } from './CardImg';
 export type { CardImgProps } from './CardImg';
 

diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -12,7 +12,6 @@ import {
   ButtonGroup,
   ButtonToolbar,
   Card,
-  CardColumns,
   CardGroup,
   Carousel,
   Container,
@@ -184,40 +183,38 @@ const MegaComponent = () => (
         <Button href="wooot" />
       </ButtonGroup>
     </ButtonToolbar>
-    <CardColumns style={style} bsPrefix="card-col">
-      <Card
-        as="div"
-        bg="primary"
-        body
-        border="primary"
-        text="primary"
-        bsPrefix="card"
-        style={{ width: '18rem' }}
-      >
-        <Card.Img
-          as="img"
-          variant="top"
-          src="holder.js/100px180"
-          bsPrefix="cardimg"
-          style={style}
-        />
-        <Card.ImgOverlay
-          as="img"
-          src="holder.js/100px180"
-          bsPrefix="cardimg"
-          style={style}
-        />
-        <Card.Body as="div" bsPrefix="cardbody" style={style}>
-          <Card.Title style={style}>Card Title</Card.Title>
-          <Card.Text style={style}>
-            Some quick example text to build on the card title and make up the
-            bulk of the card content.
-          </Card.Text>
-          <Button variant="primary">Go somewhere</Button>
-        </Card.Body>
-      </Card>
-      <CardGroup as="div" bsPrefix="cardgroup" style={style} />
-    </CardColumns>
+    <Card
+      as="div"
+      bg="primary"
+      body
+      border="primary"
+      text="primary"
+      bsPrefix="card"
+      style={{ width: '18rem' }}
+    >
+      <Card.Img
+        as="img"
+        variant="top"
+        src="holder.js/100px180"
+        bsPrefix="cardimg"
+        style={style}
+      />
+      <Card.ImgOverlay
+        as="img"
+        src="holder.js/100px180"
+        bsPrefix="cardimg"
+        style={style}
+      />
+      <Card.Body as="div" bsPrefix="cardbody" style={style}>
+        <Card.Title style={style}>Card Title</Card.Title>
+        <Card.Text style={style}>
+          Some quick example text to build on the card title and make up the
+          bulk of the card content.
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+    <CardGroup as="div" bsPrefix="cardgroup" style={style} />
     <Carousel
       activeIndex={1}
       as="div"

diff --git a/www/src/examples/Card/Columns.js b/www/src/examples/Card/Columns.js
diff --git a/www/src/pages/components/cards.mdx b/www/src/pages/components/cards.mdx
@@ -8,7 +8,6 @@ import CardBgColor from '../../examples/Card/BgColor';
 import CardBodyOnly from '../../examples/Card/BodyOnly';
 import CardBodyShorthand from '../../examples/Card/BodyShorthand';
 import CardBorder from '../../examples/Card/Border';
-import CardColumns from '../../examples/Card/Columns';
 import CardGrid from '../../examples/Card/Grid';
 import CardGroup from '../../examples/Card/Group';
 import CardHeaderAndFooter from '../../examples/Card/HeaderAndFooter';
@@ -136,10 +135,6 @@ Use `Row`'s [grid column](/layout/grid/#row-layout-col-sizing) props to control
 
 <ReactPlayground codeText={CardGrid} />
 
-### Card Columns
-
-<ReactPlayground codeText={CardColumns} />
-
 ## API
 
 <ComponentApi metadata={props.data.Card} />
@@ -154,7 +149,6 @@ Use `Row`'s [grid column](/layout/grid/#row-layout-col-sizing) props to control
 <ComponentApi metadata={props.data.CardTitle} exportedBy={props.data.Card} />
 
 <ComponentApi metadata={props.data.CardGroup} />
-<ComponentApi metadata={props.data.CardColumns} />
 
 
 export const query = graphql`
@@ -192,8 +186,5 @@ export const query = graphql`
     CardGroup: componentMetadata(displayName: { eq: "CardGroup" }) {
       ...ComponentApi_metadata
     }
-    CardColumns: componentMetadata(displayName: { eq: "CardColumns" }) {
-      ...ComponentApi_metadata
-    }
   }
 `;
diff --git a/www/src/pages/migrating.mdx b/www/src/pages/migrating.mdx
@@ -46,6 +46,10 @@ Below is a _rough_ account of the breaking API changes as well as the minimal ch
 
 - removed `toggle`.
 
+### CardColumns
+
+- dropped `CardColumns`.
+
 ### CloseButton
 
 - Removed `label` prop in favor of `aria-label`.