Merge pull request #773 from salesforce-ux/removePassingPropsToDOM

Remove passing "all other" props to DOM nodes

Author: interactivellama

RELEASENOTES.md

@@ -14,6 +14,10 @@ These are changes that have backwards-compatible solutions present and that comp
 
 ---
 
+## Release 0.4.9
+- Removed {...props} from DOM nodes in components to prevent non-valid ones from being passed on (ie. `<input myFunkyprop .. />`)
+- If users need specific props passed onto DOM nodes, please submit a github issue.
+
 ## Release 0.4.7
 
 **MINOR FEATURES**

components/button-stateful/index.jsx

@@ -32,7 +32,6 @@ import TooltipTrigger from '../popover-tooltip/trigger';
 
 import { BUTTON_STATEFUL } from '../../utilities/constants';
 
-const blurElement = e => e.currentTarget.blur();
 
 const propTypes = {
 	/**
@@ -54,15 +53,19 @@ const propTypes = {
 	 * If true, button/icon is white. Meant for buttons or utility icons on dark backgrounds.
 	 */
 	inverse: PropTypes.bool,
+	onBlur: PropTypes.func,
 	onClick: PropTypes.func,
+	onFocus: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	onKeyPress: PropTypes.func,
+	onKeyUp: PropTypes.func,
+	onMouseDown: PropTypes.func,
+	onMouseEnter: PropTypes.func,
+	onMouseLeave: PropTypes.func,
 	/**
 	 * If true, button scales to 100% width on small form factors.
 	 */
 	responsive: PropTypes.bool,
-	/**
-	 * Write <code>'-1'</code> if you don't want the user to tab to the button.
-	 */
-	tabIndex: PropTypes.string,
 	/**
 	 * Initial label and icon (optional) of button.
 	 */
@@ -75,6 +78,10 @@ const propTypes = {
 	 *	Deselect label and icon (optional) of button.
 	 */
 	stateThree: PropTypes.object,
+	/**
+	 * Write "-1" if you don't want the user to tab to the button.
+	 */
+	tabIndex: PropTypes.string,
 	tooltip: PropTypes.node,
 	variant: PropTypes.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon'])
 };
@@ -112,6 +119,11 @@ class ButtonStateful extends TooltipTrigger {
 		if (!isBoolean(this.props.active)) this.setState({ active: !this.state.active });
 	}
 
+	handleBlur(e) {
+		if(this.props.onBlur) this.props.onBlur(e);
+		e.currentTarget.blur();
+	}
+
 	getClassName (active) {
 		return classNames(this.props.className, 'slds-button', {
 			'slds-button--neutral': this.props.variant !== 'icon',
@@ -124,67 +136,104 @@ class ButtonStateful extends TooltipTrigger {
 	}
 
 	render () {
-		const props = omit(this.props, ['className', 'label', 'onClick', 'type', 'active']);
-		const active = isBoolean(this.props.active) ? this.props.active : this.state.active;
-
-		if (this.props.variant === 'icon') {
+		const {
+			active,
+			assistiveText,
+			disabled,
+			iconName,
+			iconSize,
+			id,
+			onFocus,
+			onKeyDown,
+			onKeyPress,
+			onKeyUp,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			stateOne,
+			stateTwo,
+			stateThree,
+			tabIndex,
+			variant
+		} = this.props;
+
+		const isActive = isBoolean(active) ? active : this.state.active;
+
+		if (variant === 'icon') {
 			return (
 				<button
-					onMouseLeave={blurElement}
-					className={this.getClassName(active)}
-					onClick={this.handleClick.bind(this)}
-					{...props}
 					aria-live="polite"
+					className={this.getClassName(isActive)}
+					disabled={disabled}
+					id={id}
+					onBlur={this.handleBlur.bind(this)}
+					onClick={this.handleClick.bind(this)}
+					onFocus={onFocus}
+					onKeyDown={onKeyDown}
+					onKeyPress={onKeyPress}
+					onKeyUp={onKeyUp}
+					onMouseDown={onMouseDown}
+					onMouseEnter={onMouseEnter}
+					onMouseLeave={this.handleBlur.bind(this)}
+					tabIndex={tabIndex}
 				>
 					<ButtonIcon
-						assistiveText={active ?	`${this.props.assistiveText} selected` : this.props.assistiveText}
-						disabled={this.props.disabled}
-						name={this.props.iconName}
-						size={this.props.iconSize}
+						assistiveText={isActive ? `${assistiveText} selected` : assistiveText}
+						disabled={disabled}
+						name={iconName}
+						size={iconSize}
 						className="slds-button__icon--stateful"
 					/>
 					{this.getTooltip()}
 				</button>
 			);
 		}
-		
+
 		return (
 			<button
-				onMouseLeave={blurElement}
-				className={this.getClassName(active)}
 				aria-live="assertive"
+				className={this.getClassName(isActive)}
+				disabled={disabled}
+				id={id}
+				onBlur={this.handleBlur.bind(this)}
 				onClick={this.handleClick.bind(this)}
-				{...props}
+				onFocus={onFocus}
+				onKeyDown={onKeyDown}
+				onKeyPress={onKeyPress}
+				onKeyUp={onKeyUp}
+				onMouseEnter={onMouseEnter}
+				onMouseLeave={this.handleBlur.bind(this)}
+				tabIndex={tabIndex}
 			>
 				<span className="slds-text-not-selected">
 					<ButtonIcon
-						disabled={this.props.disabled}
-						name={this.props.stateOne.iconName}
+						disabled={disabled}
+						name={stateOne.iconName}
 						size="small"
 						position="left"
 						className="slds-button__icon--stateful"
 					/>
-					{this.props.stateOne.label}
+					{stateOne.label}
 				</span>
 				<span className="slds-text-selected">
 					<ButtonIcon
-						disabled={this.props.disabled}
-						name={this.props.stateTwo.iconName}
+						disabled={disabled}
+						name={stateTwo.iconName}
 						size="small"
 						position="left"
 						className="slds-button__icon--stateful"
 					/>
-					{this.props.stateTwo.label}
+					{stateTwo.label}
 				</span>
 				<span className="slds-text-selected-focus">
 					<ButtonIcon
-						disabled={this.props.disabled}
-						name={this.props.stateThree.iconName}
+						disabled={disabled}
+						name={stateThree.iconName}
 						size="small"
 						position="left"
 						className="slds-button__icon--stateful"
 					/>
-					{this.props.stateThree.label}
+					{stateThree.label}
 				</span>
 				{this.getTooltip()}
 			</button>

components/button/index.jsx

@@ -19,6 +19,14 @@ import { BUTTON } from '../../utilities/constants';
 
 const displayName = BUTTON;
 const propTypes = {
+	/**
+	 * Used if the Button triggers a menu or popup. Bool indicates if the menu or popup is open or closed.
+	 */
+	ariaExpanded: PropTypes.bool,
+	/**
+	 * True if Button triggers a menu or popup to open/close.
+	 */
+	ariaHaspopup: PropTypes.bool,
 	/**
 	 * Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means.
 	 * If the button has an icon and a visible label, you can omit the <code>assistiveText</code> prop and use the <code>label</code> prop.
@@ -57,7 +65,7 @@ const propTypes = {
 	 */
 	iconVariant: PropTypes.oneOf(['bare', 'container', 'border', 'border-filled', 'more', 'global-header']),
 	/**
-	 * For icon variants, please reference <a href="http://www.lightningdesignsystem.com/components/buttons/#icon">Lightning Design System Icons</a>.
+	 * Id string applied to button node.
 	 */
 	id: PropTypes.string,
 	/**
@@ -68,10 +76,18 @@ const propTypes = {
 	 * Visible label on the button. If the button is an icon button with no label, you must use the <code>assistiveText</code> prop.
 	 */
 	label: PropTypes.string,
+	onBlur: PropTypes.func,
 	/**
 	 * Triggered when the button is clicked.
 	 */
 	onClick: PropTypes.func,
+	onFocus: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	onKeyPress: PropTypes.func,
+	onKeyUp: PropTypes.func,
+	onMouseDown: PropTypes.func,
+	onMouseEnter: PropTypes.func,
+	onMouseLeave: PropTypes.func,
 	/**
 	 * If true, button scales to 100% width on small form factors.
 	 */
@@ -185,38 +201,53 @@ class Button extends TooltipTrigger {
 	}
 
 	render () {
-		const props = omit(this.props, [
-			'assistiveText',
-			'className',
-			'hint',
-			'iconCategory',
-			'iconName',
-			'iconPosition',
-			'iconSize',
-			'iconVariant',
-			'inverse',
-			'label',
-			'onClick',
-			'responsive',
-			'tooltip',
-			'variant'
-		]);
+		const {
+			ariaExpanded,
+			ariaHaspopup,
+			children,
+			disabled,
+			iconName,
+			iconPosition,
+			iconVariant,
+			id,
+			onBlur,
+			onFocus,
+			onKeyDown,
+			onKeyPress,
+			onKeyUp,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			tabIndex
+		} = this.props;
 
 		return (
 			<button
+				aria-expanded={ariaExpanded}
+				aria-haspopup={ariaHaspopup}
 				className={this.getClassName()}
-				{...props}
+				disabled={disabled}
+				id={id}
+				onBlur={onBlur}
 				onClick={this.handleClick}
+				onFocus={onFocus}
+				onKeyDown={onKeyDown}
+				onKeyPress={onKeyPress}
+				onKeyUp={onKeyUp}
+				onMouseDown={onMouseDown}
+				onMouseEnter={onMouseEnter}
+				onMouseLeave={onMouseLeave}
+				tabIndex={tabIndex}
 			>
-				{this.props.iconPosition === 'right' ? this.renderLabel() : null}
+				{iconPosition === 'right' ? this.renderLabel() : null}
 
-				{this.props.iconName ? this.renderIcon(this.props.iconName) : null}
-				{this.props.iconVariant === 'more'
+				{iconName ? this.renderIcon(this.props.iconName) : null}
+				{iconVariant === 'more'
 				? <ButtonIcon	category="utility" name="down" size="x-small" />
 				: null}
 
-				{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.renderLabel() : null}
-				{this.props.children}
+				{(iconPosition === 'left' || !iconPosition) ? this.renderLabel() : null}
+				{children}
 				{this.getTooltip()}
 			</button>
 		);

components/card/filter/index.jsx

@@ -14,6 +14,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 import React from 'react';
 
 import Input from '../../forms/input';
+import InputIcon from '../../icon/input-icon';
 
 // Removes the need for `PropTypes`.
 const { PropTypes } = React;
@@ -35,8 +36,7 @@ const Filter = (props) => {
 		<Input
 			{...rest}
 			assistiveText={placeholder}
-			iconCategory="utility"
-			iconName="search"
+			iconLeft={<InputIcon name="search" category="utility" />}
 			id={id}
 			onChange={onChange}
 			placeholder={placeholder}