fix: change propTypes from element to node on most components

Author: assisrafael

src/dialog/AlertDialog.jsx

@@ -26,9 +26,9 @@ AlertDialog.defaultProps = {
 };
 
 AlertDialog.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  children: PropTypes.node,
+  message: PropTypes.node,
   onClose: PropTypes.func,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  title: PropTypes.node,
+  closeLabel: PropTypes.node,
 };

src/dialog/ConfirmationDialog.jsx

@@ -47,12 +47,12 @@ ConfirmationDialog.defaultProps = {
 };
 
 ConfirmationDialog.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  children: PropTypes.node,
+  message: PropTypes.node,
   onCancel: PropTypes.func,
   onProceed: PropTypes.func,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  cancelLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  proceedLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  title: PropTypes.node,
+  cancelLabel: PropTypes.node,
+  proceedLabel: PropTypes.node,
   proceedType: PropTypes.oneOf(['primary', 'danger', 'success']),
 };

src/list-group/ListGroup.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import { formatClasses } from '../utils/attributes';
 import { ListGroupItem } from './ListGroupItem';
 
 export function ListGroup({ items, active, linked, bordered, horizontal, template, isDisabled, onSelect }) {
+  const classes = formatClasses(['list-group', !bordered && 'list-group-flush', horizontal && 'list-group-horizontal']);
+
   const content = items.map((item, index) => (
     <ListGroupItem
       key={index}
@@ -17,10 +21,6 @@ export function ListGroup({ items, active, linked, bordered, horizontal, templat
     </ListGroupItem>
   ));
 
-  const classes = ['list-group', !bordered && 'list-group-flush', horizontal && 'list-group-horizontal']
-    .filter((v) => v)
-    .join(' ');
-
   if (linked) {
     return <div className={classes}>{content}</div>;
   }

src/list-group/ListGroupItem.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { safeClick } from '../utils/event-handlers';
+import { formatClasses } from '../utils/attributes';
 
 export function ListGroupItem({ index, isActive, isDisabled, item, linked, onSelect, children }) {
-  const classes = [
+  const classes = formatClasses([
     'list-group-item',
     isActive && 'active',
     isDisabled && 'disabled',
     linked && 'list-group-item-action',
-  ]
-    .filter((v) => v)
-    .join(' ');
+  ]);
 
   const onClick = safeClick(onSelect, index, item);
 
@@ -34,7 +34,7 @@ ListGroupItem.defaultProps = {
 };
 
 ListGroupItem.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.node.isRequired,
   index: PropTypes.number.isRequired,
   isActive: PropTypes.bool,
   isDisabled: PropTypes.bool,

src/mixed/Dropdown.jsx

@@ -49,7 +49,7 @@ Dropdown.defaultProps = {
 };
 
 Dropdown.propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.node,
   isOpen: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.object),
   onMouseEnter: PropTypes.func,

src/table/Table.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { TableHead } from './TableHead';
 import { TableBody } from './TableBody';
 import { normalizeColumns } from './table-helpers';
+import { formatClasses } from '../utils/attributes';
 
 export function Table({
   docs,
@@ -21,14 +22,14 @@ export function Table({
 }) {
   const normalizedColumns = normalizeColumns(columns);
 
-  const tableClasses = [
+  const tableClasses = formatClasses([
     'table',
     striped && 'table-striped',
     bordered && 'table-bordered',
     hover && 'table-hover',
     small && 'table-sm',
     dark && 'table-dark',
-  ].join(' ');
+  ]);
 
   return (
     <div className="table-responsive">
@@ -57,7 +58,7 @@ Table.propTypes = {
   actionLabel: PropTypes.string,
   actions: PropTypes.oneOfType([PropTypes.func, PropTypes.arrayOf(PropTypes.object)]),
   bordered: PropTypes.bool,
-  caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  caption: PropTypes.node,
   columnHeaderFormat: PropTypes.func,
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   dark: PropTypes.bool,

src/tabs/TabContent.jsx

@@ -16,5 +16,5 @@ export function TabContent({ isActive, content }) {
 
 TabContent.propTypes = {
   isActive: PropTypes.bool,
-  content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  content: PropTypes.node,
 };

src/tabs/TabHeader.jsx

@@ -25,6 +25,6 @@ export function TabHeader({ index, isActive, title, onSelect }) {
 TabHeader.propTypes = {
   index: PropTypes.number,
   isActive: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  title: PropTypes.node,
   onSelect: PropTypes.func,
 };