Remove default props from functional components

RELEASE.md

@@ -16,6 +16,7 @@ Please follow the established format:
 - Enhance kedro-viz doc integration. (#1874)
 - Fix Kedro-Viz waiting for valid Kedro project. (#1871)
 - Enhance Kedro-Viz documentation by using Kedro-sphinx-theme. (#1898)
+- Remove default props from functional components. (#1906)
 
 # Release 9.0.0
 

src/components/ui/button/button.js

@@ -6,7 +6,14 @@ import './button.scss';
 /**
  * Generic Kedro Button
  */
-const Button = ({ children, dataTest, disabled, onClick, size, mode }) => (
+const Button = ({
+  children,
+  dataTest = 'TestDefaultDataValue',
+  disabled = false,
+  onClick,
+  size = 'regular',
+  mode = 'primary',
+}) => (
   <span className="kedro button">
     <button
       className={classnames(
@@ -23,14 +30,6 @@ const Button = ({ children, dataTest, disabled, onClick, size, mode }) => (
   </span>
 );
 
-Button.defaultProps = {
-  dataTest: 'TestDefaultDataValue',
-  disabled: false,
-  mode: 'primary',
-  onClick: null,
-  size: 'regular',
-};
-
 Button.propTypes = {
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,

src/components/ui/dropdown/dropdown-renderer.js

@@ -11,7 +11,7 @@ import Button from '../button';
  */
 const DropdownRenderer = ({
   children,
-  defaultText,
+  defaultText = 'Please select...',
   disabled,
   focusedOption,
   handleRef,
@@ -25,7 +25,7 @@ const DropdownRenderer = ({
   selectedOption,
   showCancelApplyBtns,
   title,
-  width,
+  width = 160,
   placeholderText,
 }) => {
   const wrapperClasses = classnames('kedro', 'dropdown', {
@@ -169,23 +169,6 @@ const DropdownRenderer = ({
   );
 };
 
-DropdownRenderer.defaultProps = {
-  children: null,
-  defaultText: 'Please select...',
-  disabled: false,
-  focusedOption: null,
-  handleRef: null,
-  haveSelectedValues: false,
-  onLabelClicked: null,
-  onOptionSelected: null,
-  onSelectChanged: null,
-  open: false,
-  selectedOption: null,
-  title: null,
-  width: 160,
-  placeholderText: null,
-};
-
 DropdownRenderer.propTypes = {
   /**
    * Child items. The nodes which React will pass down, defined inside the DropdownRenderer tag.

src/components/ui/dropdown/dropdown.js

@@ -11,7 +11,7 @@ import './dropdown.scss';
 const Dropdown = (props) => {
   const {
     children,
-    defaultText,
+    defaultText = 'Please select...',
     disabled,
     haveSelectedValues,
     onApplyAndClose,
@@ -20,7 +20,7 @@ const Dropdown = (props) => {
     onClosed,
     onOpened,
     showCancelApplyBtns,
-    width,
+    width = 160,
     placeholderText,
   } = props;
 
@@ -333,18 +333,6 @@ const Dropdown = (props) => {
   );
 };
 
-Dropdown.defaultProps = {
-  children: null,
-  defaultText: 'Please select...',
-  disabled: false,
-  haveSelectedValues: false,
-  onChanged: null,
-  onClosed: null,
-  onOpened: null,
-  width: 160,
-  placeholderText: null,
-};
-
 Dropdown.propTypes = {
   /**
    * Child items. The nodes which React will pass down, defined inside the DropdownRenderer tag

src/components/ui/icon-button/icon-button.js

@@ -9,20 +9,20 @@ const labelPositionTypes = ['right', 'left', 'bottom', 'top'];
  * Icon button component
  */
 const IconButton = ({
-  active,
+  active = false,
   ariaLabel,
   ariaLive,
   children,
   className,
   container = 'li',
-  dataTest,
+  dataTest = 'TestDefaultDataValue',
   dataHeapEvent,
-  disabled,
+  disabled = false,
   icon,
   labelText,
   labelTextPosition = 'right',
   onClick,
-  visible,
+  visible = true,
   ...rest
 }) => {
   const Icon = icon;
@@ -109,18 +109,4 @@ IconButton.propTypes = {
   visible: PropTypes.bool,
 };
 
-IconButton.defaultProps = {
-  active: false,
-  ariaLabel: null,
-  ariaLive: null,
-  children: null,
-  dataTest: 'TestDefaultDataValue',
-  dataHeapEvent: null,
-  disabled: false,
-  icon: null,
-  labelText: null,
-  onClick: null,
-  visible: true,
-};
-
 export default IconButton;

src/components/ui/menu-option/menu-option.js

@@ -9,11 +9,11 @@ import './menu-option.scss';
  */
 const MenuOption = ({
   className,
-  focused,
+  focused = false,
   id,
   onSelected,
   primaryText,
-  selected,
+  selected = false,
   value,
 }) => {
   const wrapperClasses = classnames('kedro', 'menu-option', className, {
@@ -61,15 +61,6 @@ const MenuOption = ({
   );
 };
 
-MenuOption.defaultProps = {
-  className: null,
-  focused: false,
-  id: null,
-  onSelected: null,
-  selected: false,
-  value: null,
-};
-
 MenuOption.propTypes = {
   /**
    * Container class

src/components/ui/search-bar/search-bar-renderer.js

@@ -67,11 +67,6 @@ const SearchBarRenderer = (props) => {
   );
 };
 
-SearchBarRenderer.defaultProps = {
-  children: null,
-  onSubmit: null,
-};
-
 SearchBarRenderer.propTypes = {
   /**
    * Child component, usually search-bar-results

src/components/ui/search-bar/search-bar.js

@@ -11,8 +11,8 @@ const SearchBar = ({
   onClear,
   onFocus,
   onSubmit,
-  placeholder,
-  theme,
+  placeholder = 'Search Here...',
+  theme = 'dark',
   value: inputValue,
 }) => {
   const [value, setValue] = useState(inputValue);
@@ -115,18 +115,6 @@ const SearchBar = ({
   );
 };
 
-SearchBar.defaultProps = {
-  children: null,
-  placeholder: 'Search Here...',
-  onBlur: null,
-  onChange: null,
-  onClear: null,
-  onFocus: null,
-  onSubmit: null,
-  theme: 'dark',
-  value: '',
-};
-
 SearchBar.propTypes = {
   /**
    * Child component, usually search-bar-results

src/components/ui/search-bar/search-input/search-input.js

@@ -6,13 +6,13 @@ import 'what-input';
 import './search-input.scss';
 
 const SearchInput = ({
-  disabled,
+  disabled = false,
   label,
   onBlur,
   onChange,
   onFocus,
   placeholder,
-  theme,
+  theme = 'light',
   value: inputValue,
 }) => {
   const [focused, setFocused] = useState(false);
@@ -92,17 +92,6 @@ const SearchInput = ({
   );
 };
 
-SearchInput.defaultProps = {
-  disabled: false,
-  label: null,
-  onBlur: null,
-  onChange: null,
-  onFocus: null,
-  placeholder: null,
-  theme: 'light',
-  value: null,
-};
-
 SearchInput.propTypes = {
   /**
    * Whether the input should be editable or not.

src/components/ui/tooltip/tooltip.js

@@ -24,14 +24,14 @@ export const insertZeroWidthSpace = (text) =>
  * @param {Boolean} visible Whether to show the tooltip
  */
 const Tooltip = ({
-  arrowSize,
-  centerArrow,
-  chartSize,
-  noDelay,
-  style,
-  targetRect,
-  text,
-  visible,
+  arrowSize = 'regular',
+  centerArrow = false,
+  chartSize = {},
+  noDelay = false,
+  style = {},
+  targetRect = {},
+  text = '',
+  visible = false,
 }) => {
   let isTop = false,
     isRight = false;
@@ -73,15 +73,4 @@ const Tooltip = ({
   );
 };
 
-Tooltip.defaultProps = {
-  arrowSize: 'regular',
-  centerArrow: false,
-  chartSize: {},
-  noDelay: false,
-  style: {},
-  targetRect: {},
-  text: '',
-  visible: false,
-};
-
 export default Tooltip;