Deprecate Input assistiveText.fieldLevelHelpButton

* Deprecate Input’s `assistiveText.fieldLevelHelpButton` prop and add a checkProp warning to use fieldLevelHelpTooltip. * Centralizes the default Tooltip props into it’s own module, so that code can be re-used across Combobox and Input. * Combobox/Tooltip: Use learnMore variant and remove custom Button/children props * Documents triggerStyle: { position: 'static' } usage and removes overflowBoundaryElement from example * Remove default for Input’s assistiveText.fieldLevelHelpButton so that Tooltip has the default “Help” text and not the Input component. Having defaults in two locations causing problems when merging objects.
salesforce · Jan 4, 2019 · 3caa41f · 3caa41f
1 parent 1913d8f
commit 3caa41f
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 68 deletions.
diff --git a/components/combobox/__examples__/base-inline-help-tooltip.jsx b/components/combobox/__examples__/base-inline-help-tooltip.jsx
@@ -139,7 +139,6 @@ class Example extends React.Component {
 							align="top left"
 							content="Type to search Salesforce objects..."
 							id="field-level-help-tooltip"
-							position="overflowBoundaryElement"
 						/>
 					}
 					labels={{

diff --git a/components/combobox/combobox.jsx b/components/combobox/combobox.jsx
@@ -20,15 +20,14 @@ import classNames from 'classnames';
 
 import shortid from 'shortid';
 
-import Button from '../button';
 import Dialog from '../utilities/dialog';
 import InnerInput from '../../components/input/private/inner-input';
 import InputIcon from '../icon/input-icon';
 import Menu from './private/menu';
 import Label from '../forms/private/label';
 import SelectedListBox from '../pill-container/private/selected-listbox';
-import Tooltip from '../tooltip';
 
+import FieldLevelHelpTooltip from '../tooltip/private/field-level-help-tooltip';
 import KEYS from '../../utilities/key-code';
 import KeyBuffer from '../../utilities/key-buffer';
 import keyLetterMenuItemSelect from '../../utilities/key-letter-menu-item-select';
@@ -1379,33 +1378,6 @@ class Combobox extends React.Component {
 		);
 	};
 
-	renderFieldLevelHelpTooltip(fieldLevelHelpTooltip, labels, assistiveText) {
-		if (
-			(labels.label || (assistiveText && assistiveText.label)) &&
-			this.props.fieldLevelHelpTooltip
-		) {
-			const defaultTooltipProps = {
-				triggerClassName: 'slds-form-element__icon',
-				children: (
-					<Button
-						assistiveText={{ label: 'Help' }}
-						className="slds-m-bottom_xxx-small"
-						iconCategory="utility"
-						iconName="info"
-						variant="icon"
-					/>
-				),
-			};
-			const tooltipProps = {
-				...defaultTooltipProps,
-				...this.props.fieldLevelHelpTooltip.props,
-			};
-			return <Tooltip {...tooltipProps} />;
-		}
-
-		return null;
-	}
-
 	render() {
 		const props = this.props;
 		// Merge objects of strings with their default object
@@ -1415,11 +1387,7 @@ class Combobox extends React.Component {
 			props.assistiveText
 		);
 		const labels = assign({}, defaultProps.labels, this.props.labels);
-		const fieldLevelHelpTooltip = this.renderFieldLevelHelpTooltip(
-			this.props.fieldLevelHelpTooltip,
-			labels,
-			this.props.assistiveText
-		);
+		const hasRenderedLabel = labels.label || (assistiveText && assistiveText.label);
 		const subRenderParameters = { assistiveText, labels, props: this.props };
 		const multipleOrSingle = this.props.multiple ? 'multiple' : 'single';
 		const subRenders = {
@@ -1448,7 +1416,10 @@ class Combobox extends React.Component {
 					label={labels.label}
 					required={props.required}
 				/>
-				{fieldLevelHelpTooltip}
+				{hasRenderedLabel ? <FieldLevelHelpTooltip
+					fieldLevelHelpTooltip={this.props.fieldLevelHelpTooltip}
+				/>
+				: null}
 				{variantExists
 					? subRenders[this.props.variant][multipleOrSingle](
 							subRenderParameters

diff --git a/components/input/__examples__/field-level-help.jsx b/components/input/__examples__/field-level-help.jsx
@@ -18,7 +18,7 @@ class Example extends React.Component {
 					</h1>
 					<Input
 						id="field-level-help"
-						assistiveText={{ fieldLevelHelpButton: 'Info' }}
+						assistiveText={{ fieldLevelHelpButton: 'Test' }}
 						label="My Label"
 						fieldLevelHelpTooltip={
 							<Tooltip

diff --git a/components/input/check-props.js b/components/input/check-props.js
@@ -21,6 +21,13 @@ if (process.env.NODE_ENV !== 'production') {
 			const iconDeprecatedMessage = `Please use \`iconLeft\` and \`iconRight\` to pass in a customized <Icon> component. ${createDocUrl()}`;
 
 			// Deprecated and changed to another property
+			deprecatedProperty(
+				COMPONENT,
+				props.assistiveText.fieldLevelHelpButton,
+				'assistiveText.fieldLevelHelpButton',
+				undefined,
+				`Please pass a \`Tooltip\` component into \`fieldLevelHelpTooltip\` with \`assistiveText.triggerLearnMoreIcon\`.`
+			);
 			deprecatedProperty(
 				COMPONENT,
 				props.iconCategory,

diff --git a/components/input/index.jsx b/components/input/index.jsx
@@ -25,7 +25,6 @@ import classNames from 'classnames';
 import shortid from 'shortid';
 
 import Button from '../button';
-import Tooltip from '../tooltip';
 
 // ## Children
 import InputIcon from '../icon/input-icon';
@@ -37,6 +36,7 @@ import checkProps from './check-props';
 
 import { INPUT } from '../../utilities/constants';
 import componentDoc from './docs.json';
+import FieldLevelHelpTooltip from '../tooltip/private/field-level-help-tooltip';
 
 const COUNTER = 'counter';
 const DECREMENT = 'Decrement';
@@ -45,7 +45,6 @@ const INCREMENT = 'Increment';
 const defaultProps = {
 	assistiveText: {
 		decrement: `${DECREMENT} ${COUNTER}`,
-		fieldLevelHelpButton: 'Help',
 		increment: `${INCREMENT} ${COUNTER}`,
 	},
 	type: 'text',
@@ -104,12 +103,10 @@ class Input extends React.Component {
 		 * **Assistive text for accessibility**
 		 * * `label`: Visually hidden label but read out loud by screen readers.
 		 * * `spinner`: Text for loading spinner icon.
-		 * * `fieldLevelHelpButton`: The field level help button, by default an 'info' icon.
 		 */
 		assistiveText: PropTypes.shape({
 			label: PropTypes.string,
 			spinner: PropTypes.string,
-			fieldLevelHelpButton: PropTypes.string,
 		}),
 		/**
 		 * Elements are added after the `input`.
@@ -141,7 +138,7 @@ class Input extends React.Component {
 		 */
 		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.
+		 * A [Tooltip](https://react.lightningdesignsystem.com/components/tooltips/) component that is displayed next to the label.
 		 */
 		fieldLevelHelpTooltip: PropTypes.node,
 		/**
@@ -539,33 +536,11 @@ class Input extends React.Component {
 		};
 		const inputRef =
 			this.props.variant === COUNTER ? this.setInputRef : this.props.inputRef;
-		let fieldLevelHelpTooltip;
 		let iconLeft = null;
 		let iconRight = null;
 
-		if (
-			(this.props.label ||
-				(this.props.assistiveText && this.props.assistiveText.label)) &&
-			this.props.fieldLevelHelpTooltip
-		) {
-			const defaultTooltipProps = {
-				triggerClassName: 'slds-form-element__icon',
-				triggerStyle: { position: 'static' },
-				children: (
-					<Button
-						assistiveText={{ icon: assistiveText.fieldLevelHelpButton }}
-						iconCategory="utility"
-						iconName="info"
-						variant="icon"
-					/>
-				),
-			};
-			const tooltipProps = {
-				...defaultTooltipProps,
-				...this.props.fieldLevelHelpTooltip.props,
-			};
-			fieldLevelHelpTooltip = <Tooltip {...tooltipProps} />;
-		}
+		const hasRenderedLabel =
+			this.props.label || (assistiveText && assistiveText.label);
 
 		// Remove at next breaking change
 		// this is a hack to make left the default prop unless overwritten by `iconPosition="right"`
@@ -608,13 +583,20 @@ class Input extends React.Component {
 				)}
 			>
 				<Label
-					assistiveText={this.props.assistiveText}
+					assistiveText={assistiveText}
 					htmlFor={this.props.isStatic ? undefined : this.getId()}
 					label={this.props.label}
 					required={this.props.required}
 					variant={this.props.isStatic ? 'static' : 'base'}
 				/>
-				{fieldLevelHelpTooltip}
+				{hasRenderedLabel ? (
+					<FieldLevelHelpTooltip
+						assistiveText={{
+							triggerLearnMoreIcon: assistiveText.fieldLevelHelpButton,
+						}}
+						fieldLevelHelpTooltip={this.props.fieldLevelHelpTooltip}
+					/>
+				) : null}
 				<InnerInput
 					aria-activedescendant={this.props['aria-activedescendant']}
 					aria-autocomplete={this.props['aria-autocomplete']}

diff --git a/components/tooltip/private/field-level-help-tooltip.jsx b/components/tooltip/private/field-level-help-tooltip.jsx
@@ -0,0 +1,55 @@
+/*
+ * Field Level Help Tooltip for input labels
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../index';
+
+const propTypes = {
+	/*
+	 * Assistive Text object from parent component such as Input, Combobox, etc.
+	 */
+	assistiveText: PropTypes.shape({
+		triggerLearnMoreIcon: PropTypes.string,
+	}),
+	/*
+	 * Tooltip from external prop
+	 */
+	fieldLevelHelpTooltip: PropTypes.node,
+};
+
+const defaultProps = {
+	triggerClassName: 'slds-form-element__icon',
+	// This allows `position: absolute` Tooltips to align properly.
+	// If not present, tooltip will always be below the info icon // instead of above it.
+	triggerStyle: { position: 'static' },
+	variant: 'learnMore',
+};
+
+const FieldLevelHelpTooltip = ({ fieldLevelHelpTooltip, assistiveText }) => {
+	// `assistiveTextInternal` is needed, because `Input` used to
+	// have an `assistiveText.fieldLevelHelpButton` prop and that
+	// prop needs to override the default Tooltip "Help" string.
+	const assistiveTextInternal = assistiveText
+		? {
+				...fieldLevelHelpTooltip.props.assistiveText,
+				triggerLearnMoreIcon: assistiveText.triggerLearnMoreIcon,
+			}
+		: {};
+
+	return fieldLevelHelpTooltip ? (
+		<Tooltip
+			{...{
+				...defaultProps,
+				...fieldLevelHelpTooltip.props,
+				assistiveText: assistiveTextInternal,
+			}}
+		/>
+	) : null;
+};
+
+FieldLevelHelpTooltip.propTypes = propTypes;
+FieldLevelHelpTooltip.displayName = 'FieldLevelHelpTooltip';
+
+export default FieldLevelHelpTooltip;