Bugfix/styled components (react-bootstrap#3715)

* fix: defaultProps "as" not compatible with styled-components
Moved all defaultProps "as" to props destructuring instead of defaultProps
Added tests for *most* instances

* Added tests

* Added comment to each default "as" to reference issue
Removed tests for defaultprops
Reverted style changes that no longer need to pass tests
Removed empty defaultprops stubs

Author: KarlGe

src/AbstractNav.js

@@ -27,10 +27,6 @@ class AbstractNav extends React.Component {
     activeKey: PropTypes.any,
   };
 
-  static defaultProps = {
-    as: 'ul',
-  };
-
   constructor(...args) {
     super(...args);
 
@@ -112,7 +108,8 @@ class AbstractNav extends React.Component {
 
   render() {
     const {
-      as: Component,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'ul',
       onSelect: _,
       parentOnSelect: _0,
       getControlledId: _1,

src/Accordion.js

@@ -22,13 +22,10 @@ const propTypes = {
   defaultActiveKey: PropTypes.string,
 };
 
-const defaultProps = {
-  as: 'div',
-};
-
 const Accordion = React.forwardRef((props, ref) => {
   let {
-    as: Component,
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    as: Component = 'div',
     activeKey,
     bsPrefix,
     children,
@@ -57,7 +54,6 @@ const Accordion = React.forwardRef((props, ref) => {
 });
 
 Accordion.propTypes = propTypes;
-Accordion.defaultProps = defaultProps;
 
 Accordion.Toggle = AccordionToggle;
 Accordion.Collapse = AccordionCollapse;

src/AccordionToggle.js

@@ -19,12 +19,18 @@ const propTypes = {
   children: PropTypes.element,
 };
 
-const defaultProps = {
-  as: 'button',
-};
-
 const AccordionToggle = React.forwardRef(
-  ({ as: Component, children, eventKey, onClick, ...props }, ref) => {
+  (
+    {
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'button',
+      children,
+      eventKey,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
     const onSelect = useContext(SelectableContext);
 
     return (
@@ -43,6 +49,5 @@ const AccordionToggle = React.forwardRef(
 );
 
 AccordionToggle.propTypes = propTypes;
-AccordionToggle.defaultProps = defaultProps;
 
 export default AccordionToggle;

src/Breadcrumb.js

@@ -26,7 +26,6 @@ const propTypes = {
 const defaultProps = {
   label: 'breadcrumb',
   listProps: {},
-  as: 'nav',
 };
 
 const Breadcrumb = React.forwardRef(
@@ -37,7 +36,8 @@ const Breadcrumb = React.forwardRef(
       listProps,
       children,
       label,
-      as: Component,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'nav',
       ...props
     },
     ref,

src/BreadcrumbItem.js

@@ -33,11 +33,11 @@ const propTypes = {
 
 const defaultProps = {
   active: false,
-  as: 'li',
 };
 
 const BreadcrumbItem = React.forwardRef(
-  ({ bsPrefix, active, className, as: Component, ...props }, ref) => {
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({ bsPrefix, active, className, as: Component = 'li', ...props }, ref) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'breadcrumb-item');
 
     const { href, title, target, ...elementProps } = props;

src/ButtonGroup.js

@@ -41,7 +41,6 @@ const defaultProps = {
   vertical: false,
   toggle: false,
   role: 'group',
-  as: 'div',
 };
 
 const ButtonGroup = React.forwardRef((props, ref) => {
@@ -51,7 +50,8 @@ const ButtonGroup = React.forwardRef((props, ref) => {
     toggle,
     vertical,
     className,
-    as: Component,
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    as: Component = 'div',
     ...rest
   } = props;
 

src/Card.js

@@ -50,7 +50,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-  as: 'div',
   body: false,
 };
 
@@ -64,7 +63,8 @@ const Card = React.forwardRef(
       border,
       body,
       children,
-      as: Component,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
       ...props
     },
     ref,

src/CardImg.js

@@ -22,12 +22,12 @@ const propTypes = {
 };
 
 const defaultProps = {
-  as: 'img',
   variant: null,
 };
 
 const CardImg = React.forwardRef(
-  ({ bsPrefix, className, variant, as: Component, ...props }, ref) => {
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({ bsPrefix, className, variant, as: Component = 'img', ...props }, ref) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'card-img');
 
     return (

src/Carousel.js

@@ -102,7 +102,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-  as: 'div',
   slide: true,
   fade: false,
   interval: 5000,
@@ -423,7 +422,8 @@ class Carousel extends React.Component {
 
   render() {
     const {
-      as: Component,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
       bsPrefix,
       slide,
       fade,

src/Col.js

@@ -70,12 +70,9 @@ const propTypes = {
   xl: column,
 };
 
-const defaultProps = {
-  as: 'div',
-};
-
 const Col = React.forwardRef(
-  ({ bsPrefix, className, as: Component, ...props }, ref) => {
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({ bsPrefix, className, as: Component = 'div', ...props }, ref) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'col');
     const spans = [];
     const classes = [];
@@ -118,6 +115,5 @@ const Col = React.forwardRef(
 
 Col.displayName = 'Col';
 Col.propTypes = propTypes;
-Col.defaultProps = defaultProps;
 
 export default Col;

src/Container.js

@@ -21,12 +21,12 @@ const propTypes = {
 };
 
 const defaultProps = {
-  as: 'div',
   fluid: false,
 };
 
 const Container = React.forwardRef(
-  ({ bsPrefix, fluid, as: Component, className, ...props }, ref) => {
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({ bsPrefix, fluid, as: Component = 'div', className, ...props }, ref) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'container');
     return (
       <Component

src/Dropdown.js

@@ -83,7 +83,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-  as: 'div',
   navbar: false,
 };
 
@@ -97,7 +96,8 @@ const Dropdown = React.forwardRef((uncontrolledProps, ref) => {
     onSelect,
     onToggle,
     focusFirstItemOnShow,
-    as: Component,
+    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+    as: Component = 'div',
     navbar: _4,
     ...props
   } = useUncontrolled(uncontrolledProps, { show: 'onToggle' });

src/DropdownMenu.js

@@ -57,7 +57,6 @@ const propTypes = {
 
 const defaultProps = {
   alignRight: false,
-  as: 'div',
   flip: true,
 };
 
@@ -71,7 +70,8 @@ const DropdownMenu = React.forwardRef(
       flip,
       popperConfig,
       show: showProps,
-      as: Component,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
       ...props
     },
     ref,

src/Feedback.js

@@ -14,11 +14,11 @@ const propTypes = {
 
 const defaultProps = {
   type: 'valid',
-  as: 'div',
 };
 
 const Feedback = React.forwardRef(
-  ({ as: Component, className, type, ...props }, ref) => (
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({ as: Component = 'div', className, type, ...props }, ref) => (
     <Component
       {...props}
       ref={ref}

src/Form.js

@@ -42,12 +42,19 @@ const propTypes = {
 
 const defaultProps = {
   inline: false,
-  as: 'form',
 };
 
 const Form = React.forwardRef(
   (
-    { bsPrefix, inline, className, validated, as: Component, ...props },
+    {
+      bsPrefix,
+      inline,
+      className,
+      validated,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'form',
+      ...props
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'form');

src/FormControl.js

@@ -75,10 +75,6 @@ const propTypes = {
   isInvalid: PropTypes.bool,
 };
 
-const defaultProps = {
-  as: 'input',
-};
-
 const FormControl = React.forwardRef(
   (
     {
@@ -91,7 +87,8 @@ const FormControl = React.forwardRef(
       isInvalid,
       plaintext,
       readOnly,
-      as: Component,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'input',
       ...props
     },
     ref,
@@ -136,7 +133,6 @@ const FormControl = React.forwardRef(
 
 FormControl.displayName = 'FormControl';
 FormControl.propTypes = propTypes;
-FormControl.defaultProps = defaultProps;
 
 FormControl.Feedback = Feedback;
 

src/FormGroup.js

@@ -29,13 +29,17 @@ const propTypes = {
   _ref: PropTypes.any,
 };
 
-const defaultProps = {
-  as: 'div',
-};
-
 const FormGroup = React.forwardRef(
   (
-    { bsPrefix, className, children, controlId, as: Component, ...props },
+    {
+      bsPrefix,
+      className,
+      children,
+      controlId,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      ...props
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'form-group');
@@ -57,6 +61,5 @@ const FormGroup = React.forwardRef(
 
 FormGroup.displayName = 'FormGroup';
 FormGroup.propTypes = propTypes;
-FormGroup.defaultProps = defaultProps;
 
 export default FormGroup;

src/FormText.js

@@ -27,12 +27,9 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  as: 'small',
-};
-
 const FormText = React.forwardRef(
-  ({ bsPrefix, className, as: Component, ...props }, ref) => {
+  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+  ({ bsPrefix, className, as: Component = 'small', ...props }, ref) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'form-text');
     return (
       <Component
@@ -46,6 +43,5 @@ const FormText = React.forwardRef(
 
 FormText.displayName = 'FormText';
 FormText.propTypes = propTypes;
-FormText.defaultProps = defaultProps;
 
 export default FormText;

src/InputGroup.js

@@ -29,12 +29,15 @@ class InputGroup extends React.Component {
     as: PropTypes.elementType,
   };
 
-  static defaultProps = {
-    as: 'div',
-  };
-
   render() {
-    const { bsPrefix, size, className, as: Component, ...props } = this.props;
+    const {
+      bsPrefix,
+      size,
+      className,
+      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+      as: Component = 'div',
+      ...props
+    } = this.props;
 
     return (
       <Component