diff --git a/components/combobox/__examples__/base-inline-help-tooltip.jsx b/components/combobox/__examples__/base-inline-help-tooltip.jsx
index 8ec0bfae0f..44cd8febdc 100644
--- 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
index 04abdd467b..9a5dac2a87 100644
--- 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: (
-
- ),
- };
- const tooltipProps = {
- ...defaultTooltipProps,
- ...this.props.fieldLevelHelpTooltip.props,
- };
- return ;
- }
-
- 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 ? (
+
+ ) : 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
index 262b7b0ef8..bb09cd9336 100644
--- 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 {
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
index 300a377639..21ae3e86ab 100644
--- 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: (
-
- ),
- };
- const tooltipProps = {
- ...defaultTooltipProps,
- ...this.props.fieldLevelHelpTooltip.props,
- };
- fieldLevelHelpTooltip = ;
- }
+ 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 {
)}
>
- {fieldLevelHelpTooltip}
+ {this.props.fieldLevelHelpTooltip && hasRenderedLabel ? (
+
+ ) : null}
-
- ,
+ ,
];
} 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
new file mode 100644
index 0000000000..e910750223
--- /dev/null
+++ 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 ? (
+
+ ) : null;
+};
+
+FieldLevelHelpTooltip.propTypes = propTypes;
+FieldLevelHelpTooltip.displayName = 'FieldLevelHelpTooltip';
+
+export default FieldLevelHelpTooltip;
diff --git a/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png b/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png
index 290d94781f..cba08df615 100644
Binary files a/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png and b/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png differ
diff --git a/tests/__snapshots__/story-based-tests.snapshot-test.js.snap b/tests/__snapshots__/story-based-tests.snapshot-test.js.snap
index 105b478e18..99505255e5 100644
--- 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",
}
}
>
+
+ Help
+
@@ -19974,6 +19981,7 @@ exports[`DOM snapshots SLDSInput Field Level Help 1`] = `
>
-
- Info
-
@@ -20044,6 +20047,7 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = `
>
-
- Info
-