Clickable input icons now use SLDSButton

Author: iowillhoit

components/forms/input/index.jsx

@@ -28,6 +28,11 @@ import InputIcon from '../../icon/input-icon';
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
+// ### isFunction
+import isFunction from 'lodash.isfunction';
+
+import Button from '../../button';
+
 // Remove the need for `React.PropTypes`
 const { PropTypes } = React;
 
@@ -161,6 +166,24 @@ const Input = React.createClass({
 		};
 	},
 
+	getIconRender (position) {
+		if (position !== this.props.iconPosition) return '';
+
+		return isFunction(this.props.onIconClick)
+		? (<Button
+			iconVariant="small"
+			variant="base"
+			className="slds-input__icon slds-button--icon"
+			iconName={this.props.iconName}
+			iconCategory={this.props.iconCategory}
+			onClick={this.props.onIconClick}
+		/>)
+		: (<InputIcon
+			name={this.props.iconName}
+			category={this.props.iconCategory}
+		/>);
+	},
+
 	// ### Render
 	render () {
 		const {
@@ -176,7 +199,6 @@ const Input = React.createClass({
 			id,
 			label,
 			onChange,
-			onIconClick,
 			placeholder,
 			readOnly,
 			required,
@@ -222,11 +244,8 @@ const Input = React.createClass({
 						'slds-has-divider--bottom': readOnly
 					})}
 				>
-					{hasIcon && iconPosition === 'left' && <InputIcon
-						name={iconName}
-						category={iconCategory}
-						onClick={onIconClick}
-					/>}
+					{hasIcon && this.getIconRender('left')}
+
 					{!readOnly && <input
 						{...props}
 						aria-controls={ariaControls}
@@ -240,11 +259,9 @@ const Input = React.createClass({
 						type={type}
 						value={value}
 					/>}
-					{hasIcon && iconPosition === 'right' && <InputIcon
-						name={iconName}
-						category={iconCategory}
-						onClick={onIconClick}
-					/>}
+
+					{hasIcon && this.getIconRender('right')}
+
 					{readOnly && <span className="slds-form-element__static">
 						{value}
 					</span>}

tests/input/input.test.jsx

@@ -6,7 +6,7 @@ import TestUtils from 'react-addons-test-utils';
 
 import { SLDSInput } from '../../components';
 const {
-	// Simulate,
+	Simulate,
 	findRenderedDOMComponentWithTag,
 	scryRenderedDOMComponentsWithTag,
 	findRenderedDOMComponentWithClass
@@ -146,27 +146,87 @@ describe('SLDS INPUT **************************************************', () =>
 		});
 	});
 
+	describe('Input with Left Clickable Icon', () => {
+		let component;
+		let elementControl;
+		let leftButton;
+
+		const clickCallback = sinon.spy();
+
+		beforeEach(() => {
+			component = getInput({ iconName: 'search', iconCategory: 'utility', iconPosition: 'left', onIconClick: clickCallback });
+			leftButton = findRenderedDOMComponentWithTag(component, 'button');
+			elementControl = findRenderedDOMComponentWithClass(component, 'slds-form-element__control');
+		});
+
+		afterEach(() => {
+			removeInput();
+		});
+
+		it('element control has class "slds-input-has-icon"', () => {
+			expect(elementControl.className).to.include('slds-input-has-icon');
+		});
+
+		it('icon renders button BEFORE input in DOM', () => {
+			const render = elementControl.innerHTML;
+			expect(render.indexOf('<button')).to.be.below(render.indexOf('<input'));
+		});
+
+		it('icon can be clicked', () => {
+			TestUtils.Simulate.click(leftButton);
+
+			expect(clickCallback.calledOnce).to.be.true;
+		});
+	});
+
+	describe('Input with Right Clickable Icon', () => {
+		let component;
+		let elementControl;
+		let leftButton;
+
+		const clickCallback = sinon.spy();
+
+		beforeEach(() => {
+			component = getInput({ iconName: 'search', iconCategory: 'utility', iconPosition: 'right', onIconClick: clickCallback });
+			leftButton = findRenderedDOMComponentWithTag(component, 'button');
+			elementControl = findRenderedDOMComponentWithClass(component, 'slds-form-element__control');
+		});
 
-	// describe('Input with Clickable Icon', () => {
-	// 	let component;
-	// 	let input;
-	// 	let label;
-	// 	let icon;
-
-	// 	beforeEach(() => {
-	// 		component = getInput({ label: 'Input Label' });
-	// 		input = findRenderedDOMComponentWithTag(component, 'input');
-	// 		inputWrapper = findRenderedDOMComponentWithClass(component, 'slds-form-element__control');
-	// 		label = findRenderedDOMComponentWithClass(component, 'slds-form-element__label');
-	// 		icon = findRenderedDOMComponentWithTag(component, 'svg');
-	// 	});
-
-	// 	afterEach(() => {
-	// 		removeInput();
-	// 	});
-
-	// 	// input wrapper has class "slds-input-has-icon"
-	// 	// icon has class "slds-input__icon"
-	// 	// icon can be clicked (Simulate)
-	// });
+		afterEach(() => {
+			removeInput();
+		});
+
+		it('element control has class "slds-input-has-icon"', () => {
+			expect(elementControl.className).to.include('slds-input-has-icon');
+		});
+
+		it('icon renders button AFTER input in DOM', () => {
+			const render = elementControl.innerHTML;
+			expect(render.indexOf('<button')).to.be.above(render.indexOf('<input'));
+		});
+
+		it('icon can be clicked', () => {
+			TestUtils.Simulate.click(leftButton);
+
+			expect(clickCallback.calledOnce).to.be.true;
+		});
+	});
+
+	describe('Input with Non-Clickable Icon', () => {
+		let component;
+		let elementControl;
+
+		beforeEach(() => {
+			component = getInput({ iconName: 'search', iconCategory: 'utility', iconPosition: 'right' });
+			elementControl = findRenderedDOMComponentWithClass(component, 'slds-form-element__control');
+		});
+
+		afterEach(() => {
+			removeInput();
+		});
+
+		it('button tag does not exist', () => {
+			expect(elementControl.getElementsByTagName('button')[0]).to.not.be.ok;
+		});
+	});
 });