fix(reactstrap#2662): remove many instances of default props (reactst…

…rap#2752)

* fix(reactstrap#2662): remove many instances of default props

* chore: Add guidance on linting for future contributers

CONTRIBUTING.md

@@ -3,6 +3,7 @@
 If you have found an issue or would like to request a new feature, simply create a new issue detailing the request. We also welcome pull requests. See below for information on getting started with development and submitting pull requests.
 
 ## Found an Issue?
+
 If you find a bug in the source code or a mistake in the documentation, you can help us by
 submitting an issue to our [GitHub Repository](https://github.com/reactstrap/reactstrap/issues/new). Even better you can submit a Pull Request
 with a fix.
@@ -14,10 +15,10 @@ with a fix.
 You can request a new feature by submitting an issue to our [GitHub Repository](https://github.com/reactstrap/reactstrap/issues/new). If you
 would like to implement a new feature then consider what kind of change it is:
 
-* **Major Changes** that you wish to contribute to the project should be discussed first in a [GitHub Issue](https://github.com/reactstrap/reactstrap/issues/new) or [Slack](https://reactstrap.slack.com) so that we can better coordinate our efforts, prevent
-duplication of work, and help you to craft the change so that it is successfully accepted into the
-project. Slack invites can be obtained [here](https://reactstrap.herokuapp.com/).
-* **Small Changes** can be crafted and submitted to the [GitHub Repository](https://github.com/reactstrap/reactstrap) as a Pull Request.
+- **Major Changes** that you wish to contribute to the project should be discussed first in a [GitHub Issue](https://github.com/reactstrap/reactstrap/issues/new) or [Slack](https://reactstrap.slack.com) so that we can better coordinate our efforts, prevent
+  duplication of work, and help you to craft the change so that it is successfully accepted into the
+  project. Slack invites can be obtained [here](https://reactstrap.herokuapp.com/).
+- **Small Changes** can be crafted and submitted to the [GitHub Repository](https://github.com/reactstrap/reactstrap) as a Pull Request.
 
 ### Submitting a Pull Request
 
@@ -31,6 +32,7 @@ If you wish to submit a pull request for a new feature or issue, you should star
 - All changes must have unit tests.
 - All changes must have Typescript types in the [`types`](./types) directory.
 - All components must have a demo implementation in the `docs/lib/examples` directory.
+- Make sure to run `yarn lint` and `yarn prettier` on your work before submitting the PR
 
 ## Resources
 

src/Accordion.js

@@ -25,18 +25,14 @@ const propTypes = {
   toggle: PropTypes.func.isRequired,
 };
 
-const defaultProps = {
-  tag: 'div',
-};
-
 function Accordion(props) {
   const {
     flush,
     open,
     toggle,
     className,
     cssModule,
-    tag: Tag,
+    tag: Tag = 'div',
     innerRef,
     ...attributes
   } = props;
@@ -60,6 +56,5 @@ function Accordion(props) {
 }
 
 Accordion.propTypes = propTypes;
-Accordion.defaultProps = defaultProps;
 
 export default Accordion;

src/AccordionBody.js

@@ -23,15 +23,11 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  tag: 'div',
-};
-
 function AccordionBody(props) {
   const {
     className,
     cssModule,
-    tag: Tag,
+    tag: Tag = 'div',
     innerRef,
     children,
     accordionId,
@@ -60,6 +56,5 @@ function AccordionBody(props) {
 }
 
 AccordionBody.propTypes = propTypes;
-AccordionBody.defaultProps = defaultProps;
 
 export default AccordionBody;

src/AccordionHeader.js

@@ -21,15 +21,11 @@ const propTypes = {
   targetId: PropTypes.string.isRequired,
 };
 
-const defaultProps = {
-  tag: 'h2',
-};
-
 function AccordionHeader(props) {
   const {
     className,
     cssModule,
-    tag: Tag,
+    tag: Tag = 'h2',
     innerRef,
     children,
     targetId,
@@ -65,6 +61,5 @@ function AccordionHeader(props) {
 }
 
 AccordionHeader.propTypes = propTypes;
-AccordionHeader.defaultProps = defaultProps;
 
 export default AccordionHeader;

src/AccordionItem.js

@@ -18,12 +18,14 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  tag: 'div',
-};
-
 function AccordionItem(props) {
-  const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+  const {
+    className,
+    cssModule,
+    tag: Tag = 'div',
+    innerRef,
+    ...attributes
+  } = props;
   const classes = mapToCssModules(
     classNames(className, 'accordion-item'),
     cssModule,
@@ -33,6 +35,5 @@ function AccordionItem(props) {
 }
 
 AccordionItem.propTypes = propTypes;
-AccordionItem.defaultProps = defaultProps;
 
 export default AccordionItem;

src/Alert.js

@@ -34,31 +34,22 @@ const propTypes = {
   transition: PropTypes.shape(Fade.propTypes),
 };
 
-const defaultProps = {
-  color: 'success',
-  isOpen: true,
-  tag: 'div',
-  closeAriaLabel: 'Close',
-  fade: true,
-  transition: {
-    ...Fade.defaultProps,
-    unmountOnExit: true,
-  },
-};
-
 function Alert(props) {
   const {
     className,
     closeClassName,
-    closeAriaLabel,
+    closeAriaLabel = 'Close',
     cssModule,
-    tag: Tag,
-    color,
-    isOpen,
+    tag: Tag = 'div',
+    color = 'success',
+    isOpen = true,
     toggle,
     children,
-    transition,
-    fade,
+    transition = {
+      ...Fade.defaultProps,
+      unmountOnExit: true,
+    },
+    fade = true,
     innerRef,
     ...attributes
   } = props;
@@ -106,6 +97,5 @@ function Alert(props) {
 }
 
 Alert.propTypes = propTypes;
-Alert.defaultProps = defaultProps;
 
 export default Alert;

src/Badge.js

@@ -23,20 +23,14 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  color: 'secondary',
-  pill: false,
-  tag: 'span',
-};
-
 function Badge(props) {
   let {
     className,
     cssModule,
-    color,
+    color = 'secondary',
     innerRef,
-    pill,
-    tag: Tag,
+    pill = false,
+    tag: Tag = 'span',
     ...attributes
   } = props;
 
@@ -58,6 +52,5 @@ function Badge(props) {
 }
 
 Badge.propTypes = propTypes;
-Badge.defaultProps = defaultProps;
 
 export default Badge;

src/Breadcrumb.js

@@ -20,21 +20,15 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  tag: 'nav',
-  listTag: 'ol',
-  'aria-label': 'breadcrumb',
-};
-
 function Breadcrumb(props) {
   const {
     className,
     listClassName,
     cssModule,
     children,
-    tag: Tag,
-    listTag: ListTag,
-    'aria-label': label,
+    tag: Tag = 'nav',
+    listTag: ListTag = 'ol',
+    'aria-label': label = 'breadcrumb',
     ...attributes
   } = props;
 
@@ -53,6 +47,5 @@ function Breadcrumb(props) {
 }
 
 Breadcrumb.propTypes = propTypes;
-Breadcrumb.defaultProps = defaultProps;
 
 export default Breadcrumb;

src/BreadcrumbItem.js

@@ -14,12 +14,14 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  tag: 'li',
-};
-
 function BreadcrumbItem(props) {
-  const { className, cssModule, active, tag: Tag, ...attributes } = props;
+  const {
+    className,
+    cssModule,
+    active,
+    tag: Tag = 'li',
+    ...attributes
+  } = props;
   const classes = mapToCssModules(
     classNames(className, active ? 'active' : false, 'breadcrumb-item'),
     cssModule,
@@ -35,6 +37,5 @@ function BreadcrumbItem(props) {
 }
 
 BreadcrumbItem.propTypes = propTypes;
-BreadcrumbItem.defaultProps = defaultProps;
 
 export default BreadcrumbItem;

src/Button.js

@@ -37,11 +37,6 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  color: 'secondary',
-  tag: 'button',
-};
-
 function Button(props) {
   const onClick = useCallback(
     (e) => {
@@ -64,10 +59,10 @@ function Button(props) {
     className,
     close,
     cssModule,
-    color,
+    color = 'secondary',
     outline,
     size,
-    tag: Tag,
+    tag: Tag = 'button',
     innerRef,
     ...attributes
   } = props;
@@ -107,6 +102,5 @@ function Button(props) {
 }
 
 Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 
 export default Button;

src/ButtonGroup.js

@@ -20,18 +20,13 @@ const propTypes = {
   vertical: PropTypes.bool,
 };
 
-const defaultProps = {
-  tag: 'div',
-  role: 'group',
-};
-
 function ButtonGroup(props) {
   const {
     className,
     cssModule,
     size,
     vertical,
-    tag: Tag,
+    tag: Tag = 'div',
     ...attributes
   } = props;
 
@@ -44,10 +39,9 @@ function ButtonGroup(props) {
     cssModule,
   );
 
-  return <Tag {...attributes} className={classes} />;
+  return <Tag {...{ role: 'group', ...attributes }} className={classes} />;
 }
 
 ButtonGroup.propTypes = propTypes;
-ButtonGroup.defaultProps = defaultProps;
 
 export default ButtonGroup;

src/ButtonToggle.js

@@ -13,12 +13,8 @@ const propTypes = {
   cssModule: PropTypes.object,
 };
 
-const defaultProps = {
-  defaultValue: false,
-};
-
 function ButtonToggle(props) {
-  const [toggled, setToggled] = useState(props.defaultValue);
+  const [toggled, setToggled] = useState(props.defaultValue ?? false);
   const [focus, setFocus] = useState(false);
 
   const onBlur = useCallback(
@@ -73,6 +69,5 @@ function ButtonToggle(props) {
 }
 
 ButtonToggle.propTypes = propTypes;
-ButtonToggle.defaultProps = defaultProps;
 
 export default ButtonToggle;

src/ButtonToolbar.js

@@ -16,23 +16,17 @@ const propTypes = {
   tag: tagPropType,
 };
 
-const defaultProps = {
-  tag: 'div',
-  role: 'toolbar',
-};
-
 function ButtonToolbar(props) {
-  const { className, cssModule, tag: Tag, ...attributes } = props;
+  const { className, cssModule, tag: Tag = 'div', ...attributes } = props;
 
   const classes = mapToCssModules(
     classNames(className, 'btn-toolbar'),
     cssModule,
   );
 
-  return <Tag {...attributes} className={classes} />;
+  return <Tag {...{ role: 'toolbar', ...attributes }} className={classes} />;
 }
 
 ButtonToolbar.propTypes = propTypes;
-ButtonToolbar.defaultProps = defaultProps;
 
 export default ButtonToolbar;