Replace default props with default parameter in functional components

components/breadcrumb/index.jsx

@@ -74,27 +74,37 @@ const getBreadcrumbDropdown = (overflowDropdownMenu, props) => {
 /**
  * Use breadcrumbs to note the path of a record and help the user to navigate back to the parent.Breadcrumb based on SLDS 2.1.0-dev
  */
-const Breadcrumb = (props) => {
-	checkProps(BREADCRUMB, props, componentDoc);
+const Breadcrumb = ({
+	assistiveText = defaultProps.assistiveText,
+	id,
+	overflowDropdownMenu,
+	styleContainer,
+	trail,
+	...rest
+}) => {
+	checkProps(
+		BREADCRUMB,
+		{ assistiveText, id, overflowDropdownMenu, styleContainer, trail, ...rest },
+		componentDoc
+	);
 
-	const { overflowDropdownMenu, trail } = props;
-	const assistiveText =
-		typeof props.assistiveText === 'string'
-			? props.assistiveText
+	const assistiveTextLabel =
+		typeof assistiveText === 'string'
+			? assistiveText
 			: {
 					...defaultProps.assistiveText,
-					...props.assistiveText,
+					...assistiveText,
 			  }.label;
 
 	return (
 		<nav
 			role="navigation"
-			aria-label={assistiveText}
-			style={props.styleContainer}
+			aria-label={assistiveTextLabel}
+			style={styleContainer}
 		>
 			<ol className="slds-breadcrumb slds-list_horizontal">
 				{overflowDropdownMenu &&
-					getBreadcrumbDropdown(overflowDropdownMenu, props)}
+					getBreadcrumbDropdown(overflowDropdownMenu, { id })}
 				{trail.map((crumb, index) => (
 					/* eslint-disable react/no-array-index-key */
 					<li
@@ -111,6 +121,4 @@ const Breadcrumb = (props) => {
 
 Breadcrumb.displayName = BREADCRUMB;
 Breadcrumb.propTypes = propTypes;
-Breadcrumb.defaultProps = defaultProps;
-
 export default Breadcrumb;

components/builder-header/index.jsx

@@ -119,18 +119,29 @@ const defaultProps = {
 /**
  * Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name.
  */
-const BuilderHeader = (props) => {
-	const assistiveText = {
+const BuilderHeader = ({
+	assistiveText = defaultProps.assistiveText,
+	children,
+	className,
+	events = {},
+	iconCategory = defaultProps.iconCategory,
+	iconClassName,
+	iconName = defaultProps.iconName,
+	iconPath,
+	labels = defaultProps.labels,
+	style,
+}) => {
+	const mergedAssistiveText = {
 		...defaultProps.assistiveText,
-		...props.assistiveText,
+		...assistiveText,
 	};
-	const events = {
+	const mergedEvents = {
 		...{},
-		...props.events,
+		...events,
 	};
-	const labels = {
+	const mergedLabels = {
 		...defaultProps.labels,
-		...props.labels,
+		...labels,
 	};
 
 	let nav;
@@ -139,23 +150,23 @@ const BuilderHeader = (props) => {
 	let utilities = (
 		<BuilderHeaderUtilities>
 			<BuilderHeaderNavLink
-				assistiveText={{ icon: assistiveText.backIcon }}
+				assistiveText={{ icon: mergedAssistiveText.backIcon }}
 				iconCategory="utility"
 				iconName="back"
-				label={labels.back}
-				onClick={EventUtil.trappedHandler(events.onClickBack)}
+				label={mergedLabels.back}
+				onClick={EventUtil.trappedHandler(mergedEvents.onClickBack)}
 			/>
 			<BuilderHeaderNavLink
-				assistiveText={{ icon: assistiveText.helpIcon }}
+				assistiveText={{ icon: mergedAssistiveText.helpIcon }}
 				iconCategory="utility"
 				iconName="help"
-				label={labels.help}
-				onClick={EventUtil.trappedHandler(events.onClickHelp)}
+				label={mergedLabels.help}
+				onClick={EventUtil.trappedHandler(mergedEvents.onClickHelp)}
 			/>
 		</BuilderHeaderUtilities>
 	);
 	const misc = [];
-	React.Children.forEach(props.children, (child) => {
+	React.Children.forEach(children, (child) => {
 		if (child) {
 			switch (child.type.displayName) {
 				case BUILDER_HEADER_NAV:
@@ -176,40 +187,41 @@ const BuilderHeader = (props) => {
 		}
 	});
 
-	let iconCategory;
-	let iconName;
-	let iconPath;
-	if (props.iconPath) {
-		({ iconPath } = props);
+	let resolvedIconCategory;
+	let resolvedIconName;
+	let resolvedIconPath;
+	if (iconPath) {
+		resolvedIconPath = iconPath;
 	} else {
-		({ iconCategory, iconName } = props);
+		resolvedIconCategory = iconCategory;
+		resolvedIconName = iconName;
 	}
 
 	return (
 		<div style={{ position: 'relative', height: '100px' }}>
 			<div
-				className={classNames('slds-builder-header_container', props.className)}
-				style={props.style}
+				className={classNames('slds-builder-header_container', className)}
+				style={style}
 			>
 				<header className="slds-builder-header">
 					<div className="slds-builder-header__item">
 						<div className="slds-builder-header__item-label slds-media slds-media_center">
 							<div className="slds-media__figure">
 								<Icon
-									assistiveText={{ label: assistiveText.icon }}
-									category={iconCategory}
+									assistiveText={{ label: mergedAssistiveText.icon }}
+									category={resolvedIconCategory}
 									containerClassName={classNames(
 										'slds-icon_container',
 										'slds-icon-utility-builder',
 										'slds-current-color',
-										props.iconClassName
+										iconClassName
 									)}
-									name={iconName}
-									path={iconPath}
+									name={resolvedIconName}
+									path={resolvedIconPath}
 									size="x-small"
 								/>
 							</div>
-							<div className="slds-media__body">{labels.title}</div>
+							<div className="slds-media__body">{mergedLabels.title}</div>
 						</div>
 					</div>
 					{nav}
@@ -219,8 +231,8 @@ const BuilderHeader = (props) => {
 					) : (
 						<div className="slds-builder-header__item slds-has-flexi-truncate">
 							<h1 className="slds-builder-header__item-label">
-								<span className="slds-truncate" title={labels.pageType}>
-									{labels.pageType}
+								<span className="slds-truncate" title={mergedLabels.pageType}>
+									{mergedLabels.pageType}
 								</span>
 							</h1>
 						</div>
@@ -236,5 +248,4 @@ const BuilderHeader = (props) => {
 
 BuilderHeader.displayName = BUILDER_HEADER;
 BuilderHeader.propTypes = propTypes;
-BuilderHeader.defaultProps = defaultProps;
 export default BuilderHeader;

components/builder-header/toolbar.jsx

@@ -43,14 +43,18 @@ const defaultProps = {
 /**
  * The toolbar section of the header.
  */
-const BuilderHeaderToolbar = (props) => {
-	const assistiveText = {
+const BuilderHeaderToolbar = ({
+	assistiveText = defaultProps.assistiveText,
+	children,
+	onRenderActions,
+}) => {
+	const mergedAssistiveText = {
 		...defaultProps.assistiveText,
-		...props.assistiveText,
+		...assistiveText,
 	};
 	return (
 		<div className="slds-builder-toolbar" role="toolbar">
-			{React.Children.map(props.children, (child) => {
+			{React.Children.map(children, (child) => {
 				if (child.type.displayName === BUTTON_GROUP) {
 					return (
 						<div
@@ -65,15 +69,14 @@ const BuilderHeaderToolbar = (props) => {
 			})}
 			<div
 				className="slds-builder-toolbar__actions"
-				aria-label={assistiveText.actions}
+				aria-label={mergedAssistiveText.actions}
 			>
-				{props.onRenderActions && props.onRenderActions()}
+				{onRenderActions && onRenderActions()}
 			</div>
 		</div>
 	);
 };
 
 BuilderHeaderToolbar.displayName = BUILDER_HEADER_TOOLBAR;
 BuilderHeaderToolbar.propTypes = propTypes;
-BuilderHeaderToolbar.defaultProps = defaultProps;
 export default BuilderHeaderToolbar;

components/button-stateful/__examples__/icon.jsx

@@ -23,7 +23,7 @@ class Example extends React.Component {
 				<ButtonStateful
 					assistiveText={{ icon: this.state.isActive ? 'liked' : 'not liked' }}
 					aria-pressed={this.state.isActive}
-					icon={<ButtonIcon name="like" />}
+					icon={<ButtonIcon name="like" size="medium" />}
 					onClick={this.handleOnClick}
 					variant="icon-filled"
 				/>

components/card/empty.jsx

@@ -11,13 +11,13 @@ import { CARD_EMPTY } from '../../utilities/constants';
 /**
  * A default empty state for Cards.
  */
-const CardEmpty = (props) => (
+const CardEmpty = ({ heading = 'No Related Items', children }) => (
 	<div className="slds-p-horizontal_small">
 		<div className="slds-text-align_center slds-m-bottom_x-large">
 			<h3 className="slds-text-heading_small slds-p-top_large slds-p-bottom_large">
-				{props.heading}
+				{heading}
 			</h3>
-			{props.children}
+			{children}
 		</div>
 	</div>
 );
@@ -38,8 +38,4 @@ CardEmpty.propTypes = {
 	heading: PropTypes.string,
 };
 
-CardEmpty.defaultProps = {
-	heading: 'No Related Items',
-};
-
 export default CardEmpty;

components/card/filter.jsx

@@ -13,9 +13,7 @@ import { CARD_FILTER } from '../../utilities/constants';
 /**
  * A default filter or search input for Cards that contain items.
  */
-const Filter = (props) => {
-	const { id, placeholder, onChange, ...rest } = props;
-
+const Filter = ({ id, placeholder = 'Find in List', onChange, ...rest }) => {
 	return (
 		<Input
 			{...rest}
@@ -45,11 +43,7 @@ Filter.propTypes = {
 	/**
 	 * Text present in input until the user enters text. This text will also be used for a visually hidden label on the filter `input` element for accessibility.
 	 */
-	placeholder: PropTypes.string.isRequired,
-};
-
-Filter.defaultProps = {
-	placeholder: 'Find in List',
+	placeholder: PropTypes.string,
 };
 
 export default Filter;