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 5, 2019 · f2a8964 · f2a8964
1 parent 1913d8f
commit f2a8964
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 89 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,8 @@ 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 +1417,11 @@ class Combobox extends React.Component {
 					label={labels.label}
 					required={props.required}
 				/>
-				{fieldLevelHelpTooltip}
+				{this.props.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,6 @@ class Example extends React.Component {
 					</h1>
 					<Input
 						id="field-level-help"
-						assistiveText={{ fieldLevelHelpButton: 'Info' }}
 						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}
+				{this.props.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/index.jsx b/components/tooltip/index.jsx
@@ -182,16 +182,15 @@ class Tooltip extends React.Component {
 			];
 		} else if (noChildrenProvided) {
 			children = [
-				<Button variant="icon" aria-disabled>
-					<Icon
-						category="utility"
-						name="info"
-						assistiveText={{
-							label: this.props.assistiveText.triggerLearnMoreIcon,
-						}}
-						size="x-small"
-					/>
-				</Button>,
+				<Button
+					aria-disabled
+					assistiveText={{
+						icon: this.props.assistiveText.triggerLearnMoreIcon,
+					}}
+					iconCategory="utility"
+					iconName="info"
+					variant="icon"
+				/>,
 			];
 		} else {
 			children = this.props.children;

diff --git a/components/tooltip/private/field-level-help-tooltip.jsx b/components/tooltip/private/field-level-help-tooltip.jsx
@@ -0,0 +1,62 @@
+/*
+ * Field Level Help Tooltip for input labels
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import assign from 'lodash.assign';
+
+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.isRequired,
+};
+
+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 = assign(
+		{},
+		fieldLevelHelpTooltip.props.assistiveText,
+		assistiveText
+	);
+
+	return fieldLevelHelpTooltip ? (
+		<Tooltip
+			{...{
+				// internal default props
+				...defaultProps,
+				// props from external developer
+				...fieldLevelHelpTooltip.props,
+				// allow backwards compatibility with Input's
+				// assistiveText.fieldLevelHelpButton
+				assistiveText: assistiveTextInternal,
+			}}
+		/>
+	) : null;
+};
+
+FieldLevelHelpTooltip.propTypes = propTypes;
+FieldLevelHelpTooltip.displayName = 'FieldLevelHelpTooltip';
+
+export default FieldLevelHelpTooltip;
diff --git a/...t-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png b/...t-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png
diff --git a/tests/__snapshots__/story-based-tests.snapshot-test.js.snap b/tests/__snapshots__/story-based-tests.snapshot-test.js.snap
@@ -6112,12 +6112,14 @@ exports[`DOM snapshots SLDSCombobox Base Inline Help 1`] = `
         style={
           Object {
             "display": "inline-block",
+            "position": "static",
           }
         }
       >
         <button
           aria-describedby="field-level-help-tooltip"
-          className="slds-button slds-button_icon slds-m-bottom_xxx-small"
+          aria-disabled={true}
+          className="slds-button slds-button_icon"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -6134,6 +6136,11 @@ exports[`DOM snapshots SLDSCombobox Base Inline Help 1`] = `
               xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#info"
             />
           </svg>
+          <span
+            className="slds-assistive-text"
+          >
+            Help
+          </span>
         </button>
         <span />
       </div>
@@ -19974,6 +19981,7 @@ exports[`DOM snapshots SLDSInput Field Level Help 1`] = `
       >
         <button
           aria-describedby="field-level-help-tooltip"
+          aria-disabled={true}
           className="slds-button slds-button_icon"
           disabled={false}
           onBlur={[Function]}
@@ -19991,11 +19999,6 @@ exports[`DOM snapshots SLDSInput Field Level Help 1`] = `
               xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#info"
             />
           </svg>
-          <span
-            className="slds-assistive-text"
-          >
-            Info
-          </span>
         </button>
         <span />
       </div>
@@ -20044,6 +20047,7 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = `
       >
         <button
           aria-describedby="field-level-help-tooltip"
+          aria-disabled={true}
           className="slds-button slds-button_icon"
           disabled={false}
           onBlur={[Function]}
@@ -20061,11 +20065,6 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = `
               xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#info"
             />
           </svg>
-          <span
-            className="slds-assistive-text"
-          >
-            Info
-          </span>
         </button>
         <div
           className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip"