Add Field Level Help and Inline Help to Input

Author: garygong

components/component-docs.json

@@ -4507,6 +4507,13 @@
                 "required": false,
                 "description": "Message to display when the input is in an error state. When this is present, also visually highlights the component as in error."
             },
+            "fieldLevelHelpTooltip": {
+                "type": {
+                    "name": "node"
+                },
+                "required": false,
+                "description": "A [Tooltip](https://react.lightningdesignsystem.com/components/tooltips/) component that is displayed next to the label. The props from the component will be merged and override any default props."
+            },
             "fixedTextLeft": {
                 "type": {
                     "name": "union",
@@ -4565,6 +4572,13 @@
                 "required": false,
                 "description": "Every input must have a unique ID in order to support keyboard navigation and ARIA support."
             },
+            "inlineHelpText": {
+                "type": {
+                    "name": "string"
+                },
+                "required": false,
+                "description": "Displays help text under the input."
+            },
             "inputRef": {
                 "type": {
                     "name": "func"

components/input/__docs__/storybook-stories.jsx

@@ -5,6 +5,7 @@ import IconSettings from '../../icon-settings';
 import { FORMS_INPUT } from '../../../utilities/constants';
 import Button from '../../button';
 import Input from '../';
+import Tooltip from '../../tooltip';
 import InputIcon from '../../icon/input-icon';
 
 const iconClicked = action;
@@ -231,4 +232,29 @@ storiesOf(FORMS_INPUT, module)
 				placeholder="My placeholder"
 			/>
 		</section>
+	))
+	.add('Inline Help', () => (
+		<section>
+			<h1 className="slds-text-title_caps slds-p-vertical--medium">
+				Inline Help
+			</h1>
+			<Input label="My Label" inlineHelpText="ex: (415) 111-2222" />
+		</section>
+	))
+	.add('Field Level Help', () => (
+		<section>
+			<h1 className="slds-text-title_caps slds-p-vertical--medium">
+				Field Level Help
+			</h1>
+			<Input
+				label="My Label"
+				fieldLevelHelpTooltip={
+					<Tooltip
+						align="top left"
+						content="Some helpful information"
+						position="overflowBoundaryElement"
+					/>
+				}
+			/>
+		</section>
 	));

components/input/__tests__/input.browser-test.jsx

@@ -5,8 +5,10 @@ import { expect } from 'chai';
 import assign from 'lodash.assign';
 import TestUtils from 'react-addons-test-utils';
 
+import Button from '../../button';
 import Input from '../../input';
 import Icon from '../../icon';
+import Tooltip from '../../tooltip';
 import InputIcon from '../../icon/input-icon';
 import IconSettings from '../../icon-settings';
 
@@ -501,4 +503,62 @@ describe('SLDSInput', () => {
 			expect(fixedTextLeft.textContent).to.equal('$');
 		});
 	});
+
+	describe('Inline Help', () => {
+		let component;
+		let inlineHelpText;
+
+		beforeEach(() => {
+			component = getInput({
+				label: 'Input Label',
+				inlineHelpText: 'ex: (415) 111-2222',
+			});
+			inlineHelpText = findRenderedDOMComponentWithClass(
+				component,
+				'slds-form-element__help'
+			);
+		});
+
+		afterEach(() => {
+			removeInput();
+		});
+
+		it('renders the inline help text', () => {
+			expect(inlineHelpText).to.be.ok;
+		});
+
+		it('renders the inline help text content', () => {
+			expect(inlineHelpText.textContent).to.equal('ex: (415) 111-2222');
+		});
+	});
+
+	describe('Field Level Help', () => {
+		let component;
+		let fieldLevelHelpTooltip;
+
+		beforeEach(() => {
+			component = getInput({
+				label: 'Input Label',
+				fieldLevelHelpTooltip: (
+					<Tooltip
+						align="top left"
+						content="Some helpful information"
+						position="overflowBoundaryElement"
+					/>
+				),
+			});
+			fieldLevelHelpTooltip = findRenderedDOMComponentWithClass(
+				component,
+				'slds-form-element__icon'
+			);
+		});
+
+		afterEach(() => {
+			removeInput();
+		});
+
+		it('renders the tooltip trigger', () => {
+			expect(fieldLevelHelpTooltip).to.be.ok;
+		});
+	});
 });

components/input/index.jsx

@@ -23,6 +23,9 @@ import classNames from 'classnames';
 // shortid is a short, non-sequential, url-friendly, unique id generator
 import shortid from 'shortid';
 
+import Button from '../button';
+import Tooltip from '../tooltip';
+
 // ## Children
 import InputIcon from '../icon/input-icon';
 import InnerInput from './private/inner-input';
@@ -120,6 +123,10 @@ const Input = createReactClass({
 		 * Message to display when the input is in an error state. When this is present, also visually highlights the component as in error.
 		 */
 		errorText: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+		/**
+		 * A [Tooltip](https://react.lightningdesignsystem.com/components/tooltips/) component that is displayed next to the label. The props from the component will be merged and override any default props.
+		 */
+		fieldLevelHelpTooltip: PropTypes.node,
 		/**
 		 * Displays text or node to the left of the input. This follows the fixed text input UX pattern.
 		 */
@@ -144,6 +151,10 @@ const Input = createReactClass({
 		 * Every input must have a unique ID in order to support keyboard navigation and ARIA support.
 		 */
 		id: PropTypes.string,
+		/**
+		 * Displays help text under the input.
+		 */
+		inlineHelpText: PropTypes.string,
 		/**
 		 * This callback exposes the input reference / DOM node to parent components. `<Parent inputRef={(inputComponent) => this.input = inputComponent} />
 		 */
@@ -331,6 +342,29 @@ const Input = createReactClass({
 		const hasRightIcon =
 			!!this.props.iconRight ||
 			(this.props.iconPosition === 'right' && !!this.props.iconName);
+		let fieldLevelHelpTooltip;
+		if (
+			(this.props.label ||
+				(this.props.assistiveText && this.props.assistiveText.label)) &&
+			this.props.fieldLevelHelpTooltip
+		) {
+			const defaultProps = {
+				triggerClassName: 'slds-form-element__icon',
+				children: (
+					<Button
+						assistiveText={{ label: 'Help' }}
+						iconCategory="utility"
+						iconName="info"
+						variant="icon"
+					/>
+				),
+			};
+			const tooltipProps = {
+				...defaultProps,
+				...this.props.fieldLevelHelpTooltip.props,
+			};
+			fieldLevelHelpTooltip = <Tooltip {...tooltipProps} />;
+		}
 
 		return (
 			<div
@@ -349,6 +383,7 @@ const Input = createReactClass({
 					required={this.props.required}
 					variant={this.props.isStatic ? 'static' : 'base'}
 				/>
+				{fieldLevelHelpTooltip}
 				<InnerInput
 					aria-activedescendant={this.props['aria-activedescendant']}
 					aria-autocomplete={this.props['aria-autocomplete']}
@@ -372,6 +407,7 @@ const Input = createReactClass({
 						hasRightIcon ? this.getIconRender('right', 'iconRight') : null
 					}
 					inlineEditTrigger={this.props.inlineEditTrigger}
+					inlineHelpText={this.props.inlineHelpText}
 					isStatic={this.props.isStatic}
 					minLength={this.props.minLength}
 					maxLength={this.props.maxLength}

components/input/private/inner-input.jsx

@@ -92,6 +92,10 @@ const propTypes = {
 	 * Every input must have a unique ID in order to support keyboard navigation and ARIA support.
 	 */
 	id: PropTypes.string.isRequired,
+	/**
+	 * Displays help text under the input.
+	 */
+	inlineHelpText: PropTypes.string,
 	/**
 	 * This callback exposes the input reference / DOM node to parent components. `<Parent inputRef={(inputComponent) => this.input = inputComponent} />
 	 */
@@ -300,6 +304,10 @@ const InnerInput = (props) => {
 				</span>
 			)}
 			{/* eslint-enable jsx-a11y/no-static-element-interactions */}
+
+			{props.inlineHelpText && (
+				<div className="slds-form-element__help">{props.inlineHelpText}</div>
+			)}
 		</div>
 	);
 };