Input icon wrapped in button when callback defined

Author: iowillhoit

components/forms/input/index.jsx

@@ -222,7 +222,7 @@ const Input = React.createClass({
 						'slds-has-divider--bottom': readOnly
 					})}
 				>
-					{hasIcon && <InputIcon
+					{hasIcon && iconPosition === 'left' && <InputIcon
 						name={iconName}
 						category={iconCategory}
 						onClick={onIconClick}
@@ -240,6 +240,11 @@ const Input = React.createClass({
 						type={type}
 						value={value}
 					/>}
+					{hasIcon && iconPosition === 'right' && <InputIcon
+						name={iconName}
+						category={iconCategory}
+						onClick={onIconClick}
+					/>}
 					{readOnly && <span className="slds-form-element__static">
 						{value}
 					</span>}

components/icon/input-icon/index.jsx

@@ -10,41 +10,66 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS' AND
 */
 
 import React from 'react';
+
 import SLDSUtilityIcon from '../../utilities/utility-icon';
 
-const displayName = 'InputIcon';
-
-const propTypes = {
-  category: React.PropTypes.string,
-  name: React.PropTypes.string,
-  onClick: React.PropTypes.func,
-};
-const defaultProps = {
-  category: 'utility',
-};
-
-class InputIcon extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    const className = 'slds-input__icon slds-icon-text-default';
-    return <SLDSUtilityIcon
-              style={this.props.style}
-              aria-hidden='true'
-              category={this.props.category}
-              className={className}
-              name={this.props.name}
-              onClick={this.props.onClick}
-              />;
-  }
-}
-
-InputIcon.displayName = displayName;
-InputIcon.propTypes = propTypes;
-InputIcon.defaultProps = defaultProps;
+import { ICON_INPUT } from '../../../utilities/constants';
+
+// Remove the need for `React.PropTypes`
+const { PropTypes } = React;
+
+// ### isFunction
+import isFunction from 'lodash.isfunction';
+
+const InputIcon = React.createClass({
+
+	displayName: ICON_INPUT,
+
+	propTypes: {
+		category: PropTypes.string,
+		name: PropTypes.string,
+		style: PropTypes.string,
+		/**
+		 * This event fires when the icon is clicked.
+		 */
+		onClick: PropTypes.func
+	},
+
+	getDefaultProps () {
+		return {
+			category: 'utility'
+		};
+	},
+
+	render () {
+		const onClickIsFunction = isFunction(this.props.onClick);
+
+		return (
+			<div>
+				{onClickIsFunction ?
+					<button
+						className="slds-input__icon slds-button slds-button--icon"
+						onClick={this.props.onClick}
+					>
+						<SLDSUtilityIcon
+							style={this.props.style}
+							aria-hidden
+							category={this.props.category}
+							className="slds-button__icon slds-icon-text-default"
+							name={this.props.name}
+						/>
+					</button>
+					: <SLDSUtilityIcon
+						style={this.props.style}
+						aria-hidden
+						category={this.props.category}
+						className="slds-input__icon slds-icon-text-default"
+						name={this.props.name}
+					/>
+				}
+			</div>
+		);
+	}
+});
 
 module.exports = InputIcon;

stories/input/index.jsx

@@ -22,7 +22,18 @@ storiesOf(FORMS_INPUT, module)
 			placeholder="Placeholder Text"
 		/>
 	))
-	.add('Input with Clickable Icon', () => (
+	.add('Input with Left Clickable Icon', () => (
+		<Input
+			id="unique-id-123"
+			label="Input Label"
+			iconName="search"
+			iconCategory="utility"
+			iconPosition="left"
+			onIconClick={iconClicked('Search icon clicked')}
+			placeholder="Placeholder Text"
+		/>
+	))
+	.add('Input with Right Clickable Icon', () => (
 		<Input
 			id="unique-id-2"
 			label="Input Label"