Remove {...props} from button DOM node in Button and Stateful Button

Author: donnieberg

.gitignore

@@ -1,4 +1,4 @@
-# filesystem
+
 .DS_Store
 
 # dependencies
@@ -24,3 +24,5 @@ server/public/assets/bundle
 scripts/pre-commit.sh
 coverage/
 storybook/
+
+.jscsrc

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,18 @@ 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,
+	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 +77,10 @@ const propTypes = {
 	 *	Deselect label and icon (optional) of button.
 	 */
 	stateThree: PropTypes.object,
+	/**
+	 * Write <code>'-1'</code> 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 +118,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,17 +135,23 @@ 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') {
 			return (
 				<button
-					onMouseLeave={blurElement}
+					aria-live="polite"
 					className={this.getClassName(active)}
+					disabled={this.props.disabled}
+					onBlur={this.handleBlur.bind(this)}
 					onClick={this.handleClick.bind(this)}
-					{...props}
-					aria-live="polite"
+					onFocus={this.props.onFocus}
+					onKeyDown={this.props.onKeyDown}
+					onKeyPress={this.props.onKeyPress}
+					onKeyUp={this.props.onKeyUp}
+					onMouseEnter={this.props.onMouseEnter}
+					onMouseLeave={this.handleBlur.bind(this)}
+					tabIndex={this.props.tabIndex}
 				>
 					<ButtonIcon
 						assistiveText={active ?	`${this.props.assistiveText} selected` : this.props.assistiveText}
@@ -147,14 +164,21 @@ class ButtonStateful extends TooltipTrigger {
 				</button>
 			);
 		}
-		
+
 		return (
 			<button
-				onMouseLeave={blurElement}
-				className={this.getClassName(active)}
 				aria-live="assertive"
+				className={this.getClassName(active)}
+				disabled={this.props.disabled}
+				onBlur={this.handleBlur.bind(this)}
 				onClick={this.handleClick.bind(this)}
-				{...props}
+				onFocus={this.props.onFocus}
+				onKeyDown={this.props.onKeyDown}
+				onKeyPress={this.props.onKeyPress}
+				onKeyUp={this.props.onKeyUp}
+				onMouseEnter={this.props.onMouseEnter}
+				onMouseLeave={this.handleBlur.bind(this)}
+				tabIndex={this.props.tabIndex}
 			>
 				<span className="slds-text-not-selected">
 					<ButtonIcon

components/button/index.jsx

@@ -68,10 +68,17 @@ 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,
+	onMouseEnter: PropTypes.func,
+	onMouseLeave: PropTypes.func,
 	/**
 	 * If true, button scales to 100% width on small form factors.
 	 */
@@ -185,28 +192,19 @@ class Button extends TooltipTrigger {
 	}
 
 	render () {
-		const props = omit(this.props, [
-			'assistiveText',
-			'className',
-			'hint',
-			'iconCategory',
-			'iconName',
-			'iconPosition',
-			'iconSize',
-			'iconVariant',
-			'inverse',
-			'label',
-			'onClick',
-			'responsive',
-			'tooltip',
-			'variant'
-		]);
-
 		return (
 			<button
 				className={this.getClassName()}
-				{...props}
+				disabled={this.props.disabled}
+				onBlur={this.props.onBlur}
 				onClick={this.handleClick}
+				onFocus={this.props.onFocus}
+				onKeyDown={this.props.onKeyDown}
+				onKeyPress={this.props.onKeyPress}
+				onKeyUp={this.props.onKeyUp}
+				onMouseEnter={this.props.onMouseEnter}
+				onMouseLeave={this.props.onBlur}
+				tabIndex={this.props.tabIndex}
 			>
 				{this.props.iconPosition === 'right' ? this.renderLabel() : null}
 

stories/button-stateful/index.jsx

@@ -20,5 +20,7 @@ storiesOf(BUTTON_STATEFUL, module)
 	.add('Icon', () => getButtonStateful({
 		variant: 'icon',
 		label: 'Neutral Icon',
-		iconName: 'check'
+		iconName: 'check',
+		onFocus: action('hover'),
+		onMouseEnter: (e) => { console.log('target is ', e.target) }
 	}));

stories/button/index.jsx

@@ -23,7 +23,9 @@ storiesOf(BUTTON, module)
 	.add('Neutral Icon', () => getButton({
 		label: 'Neutral Icon',
 		iconName: 'download',
-		iconPosition: 'left'
+		iconPosition: 'left',
+		onFocus: action('focus'),
+		onKeyDown: action('keyDown')
 	}))
 	.add('Disabled', () => getButton({ label: 'Disabled', disabled: true }))
 	.add('Icon large', () => getIconButton({