Skip to content

Commit 3caa41f

Browse files
interactivellamainteractivellama
committed
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.
1 parent 1913d8f commit 3caa41f

File tree

6 files changed

+82
-68
lines changed

6 files changed

+82
-68
lines changed

‎components/combobox/__examples__/base-inline-help-tooltip.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,6 @@ class Example extends React.Component {
139139
align="top left"
140140
content="Type to search Salesforce objects..."
141141
id="field-level-help-tooltip"
142-
position="overflowBoundaryElement"
143142
/>
144143
}
145144
labels={{

‎components/combobox/combobox.jsx‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,14 @@ import classNames from 'classnames';
2020

2121
import shortid from 'shortid';
2222

23-
import Button from '../button';
2423
import Dialog from '../utilities/dialog';
2524
import InnerInput from '../../components/input/private/inner-input';
2625
import InputIcon from '../icon/input-icon';
2726
import Menu from './private/menu';
2827
import Label from '../forms/private/label';
2928
import SelectedListBox from '../pill-container/private/selected-listbox';
30-
import Tooltip from '../tooltip';
3129

30+
import FieldLevelHelpTooltip from '../tooltip/private/field-level-help-tooltip';
3231
import KEYS from '../../utilities/key-code';
3332
import KeyBuffer from '../../utilities/key-buffer';
3433
import keyLetterMenuItemSelect from '../../utilities/key-letter-menu-item-select';
@@ -1379,33 +1378,6 @@ class Combobox extends React.Component {
13791378
);
13801379
};
13811380

1382-
renderFieldLevelHelpTooltip(fieldLevelHelpTooltip, labels, assistiveText) {
1383-
if (
1384-
(labels.label || (assistiveText && assistiveText.label)) &&
1385-
this.props.fieldLevelHelpTooltip
1386-
) {
1387-
const defaultTooltipProps = {
1388-
triggerClassName: 'slds-form-element__icon',
1389-
children: (
1390-
<Button
1391-
assistiveText={{ label: 'Help' }}
1392-
className="slds-m-bottom_xxx-small"
1393-
iconCategory="utility"
1394-
iconName="info"
1395-
variant="icon"
1396-
/>
1397-
),
1398-
};
1399-
const tooltipProps = {
1400-
...defaultTooltipProps,
1401-
...this.props.fieldLevelHelpTooltip.props,
1402-
};
1403-
return <Tooltip {...tooltipProps} />;
1404-
}
1405-
1406-
return null;
1407-
}
1408-
14091381
render() {
14101382
const props = this.props;
14111383
// Merge objects of strings with their default object
@@ -1415,11 +1387,7 @@ class Combobox extends React.Component {
14151387
props.assistiveText
14161388
);
14171389
const labels = assign({}, defaultProps.labels, this.props.labels);
1418-
const fieldLevelHelpTooltip = this.renderFieldLevelHelpTooltip(
1419-
this.props.fieldLevelHelpTooltip,
1420-
labels,
1421-
this.props.assistiveText
1422-
);
1390+
const hasRenderedLabel = labels.label || (assistiveText && assistiveText.label);
14231391
const subRenderParameters = { assistiveText, labels, props: this.props };
14241392
const multipleOrSingle = this.props.multiple ? 'multiple' : 'single';
14251393
const subRenders = {
@@ -1448,7 +1416,10 @@ class Combobox extends React.Component {
14481416
label={labels.label}
14491417
required={props.required}
14501418
/>
1451-
{fieldLevelHelpTooltip}
1419+
{hasRenderedLabel ? <FieldLevelHelpTooltip
1420+
fieldLevelHelpTooltip={this.props.fieldLevelHelpTooltip}
1421+
/>
1422+
: null}
14521423
{variantExists
14531424
? subRenders[this.props.variant][multipleOrSingle](
14541425
subRenderParameters

‎components/input/__examples__/field-level-help.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class Example extends React.Component {
1818
</h1>
1919
<Input
2020
id="field-level-help"
21-
assistiveText={{ fieldLevelHelpButton: 'Info' }}
21+
assistiveText={{ fieldLevelHelpButton: 'Test' }}
2222
label="My Label"
2323
fieldLevelHelpTooltip={
2424
<Tooltip

‎components/input/check-props.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ if (process.env.NODE_ENV !== 'production') {
2121
const iconDeprecatedMessage = `Please use \`iconLeft\` and \`iconRight\` to pass in a customized <Icon> component. ${createDocUrl()}`;
2222

2323
// Deprecated and changed to another property
24+
deprecatedProperty(
25+
COMPONENT,
26+
props.assistiveText.fieldLevelHelpButton,
27+
'assistiveText.fieldLevelHelpButton',
28+
undefined,
29+
`Please pass a \`Tooltip\` component into \`fieldLevelHelpTooltip\` with \`assistiveText.triggerLearnMoreIcon\`.`
30+
);
2431
deprecatedProperty(
2532
COMPONENT,
2633
props.iconCategory,

‎components/input/index.jsx‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import classNames from 'classnames';
2525
import shortid from 'shortid';
2626

2727
import Button from '../button';
28-
import Tooltip from '../tooltip';
2928

3029
// ## Children
3130
import InputIcon from '../icon/input-icon';
@@ -37,6 +36,7 @@ import checkProps from './check-props';
3736

3837
import { INPUT } from '../../utilities/constants';
3938
import componentDoc from './docs.json';
39+
import FieldLevelHelpTooltip from '../tooltip/private/field-level-help-tooltip';
4040

4141
const COUNTER = 'counter';
4242
const DECREMENT = 'Decrement';
@@ -45,7 +45,6 @@ const INCREMENT = 'Increment';
4545
const defaultProps = {
4646
assistiveText: {
4747
decrement: `${DECREMENT} ${COUNTER}`,
48-
fieldLevelHelpButton: 'Help',
4948
increment: `${INCREMENT} ${COUNTER}`,
5049
},
5150
type: 'text',
@@ -104,12 +103,10 @@ class Input extends React.Component {
104103
* **Assistive text for accessibility**
105104
* * `label`: Visually hidden label but read out loud by screen readers.
106105
* * `spinner`: Text for loading spinner icon.
107-
* * `fieldLevelHelpButton`: The field level help button, by default an 'info' icon.
108106
*/
109107
assistiveText: PropTypes.shape({
110108
label: PropTypes.string,
111109
spinner: PropTypes.string,
112-
fieldLevelHelpButton: PropTypes.string,
113110
}),
114111
/**
115112
* Elements are added after the `input`.
@@ -141,7 +138,7 @@ class Input extends React.Component {
141138
*/
142139
errorText: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
143140
/**
144-
* 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.
141+
* A [Tooltip](https://react.lightningdesignsystem.com/components/tooltips/) component that is displayed next to the label.
145142
*/
146143
fieldLevelHelpTooltip: PropTypes.node,
147144
/**
@@ -539,33 +536,11 @@ class Input extends React.Component {
539536
};
540537
const inputRef =
541538
this.props.variant === COUNTER ? this.setInputRef : this.props.inputRef;
542-
let fieldLevelHelpTooltip;
543539
let iconLeft = null;
544540
let iconRight = null;
545541

546-
if (
547-
(this.props.label ||
548-
(this.props.assistiveText && this.props.assistiveText.label)) &&
549-
this.props.fieldLevelHelpTooltip
550-
) {
551-
const defaultTooltipProps = {
552-
triggerClassName: 'slds-form-element__icon',
553-
triggerStyle: { position: 'static' },
554-
children: (
555-
<Button
556-
assistiveText={{ icon: assistiveText.fieldLevelHelpButton }}
557-
iconCategory="utility"
558-
iconName="info"
559-
variant="icon"
560-
/>
561-
),
562-
};
563-
const tooltipProps = {
564-
...defaultTooltipProps,
565-
...this.props.fieldLevelHelpTooltip.props,
566-
};
567-
fieldLevelHelpTooltip = <Tooltip {...tooltipProps} />;
568-
}
542+
const hasRenderedLabel =
543+
this.props.label || (assistiveText && assistiveText.label);
569544

570545
// Remove at next breaking change
571546
// this is a hack to make left the default prop unless overwritten by `iconPosition="right"`
@@ -608,13 +583,20 @@ class Input extends React.Component {
608583
)}
609584
>
610585
<Label
611-
assistiveText={this.props.assistiveText}
586+
assistiveText={assistiveText}
612587
htmlFor={this.props.isStatic ? undefined : this.getId()}
613588
label={this.props.label}
614589
required={this.props.required}
615590
variant={this.props.isStatic ? 'static' : 'base'}
616591
/>
617-
{fieldLevelHelpTooltip}
592+
{hasRenderedLabel ? (
593+
<FieldLevelHelpTooltip
594+
assistiveText={{
595+
triggerLearnMoreIcon: assistiveText.fieldLevelHelpButton,
596+
}}
597+
fieldLevelHelpTooltip={this.props.fieldLevelHelpTooltip}
598+
/>
599+
) : null}
618600
<InnerInput
619601
aria-activedescendant={this.props['aria-activedescendant']}
620602
aria-autocomplete={this.props['aria-autocomplete']}

‎components/tooltip/private/field-level-help-tooltip.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/*
2+
* Field Level Help Tooltip for input labels
3+
*/
4+
import React from 'react';
5+
import PropTypes from 'prop-types';
6+
7+
import Tooltip from '../index';
8+
9+
const propTypes = {
10+
/*
11+
* Assistive Text object from parent component such as Input, Combobox, etc.
12+
*/
13+
assistiveText: PropTypes.shape({
14+
triggerLearnMoreIcon: PropTypes.string,
15+
}),
16+
/*
17+
* Tooltip from external prop
18+
*/
19+
fieldLevelHelpTooltip: PropTypes.node,
20+
};
21+
22+
const defaultProps = {
23+
triggerClassName: 'slds-form-element__icon',
24+
// This allows `position: absolute` Tooltips to align properly.
25+
// If not present, tooltip will always be below the info icon // instead of above it.
26+
triggerStyle: { position: 'static' },
27+
variant: 'learnMore',
28+
};
29+
30+
const FieldLevelHelpTooltip = ({ fieldLevelHelpTooltip, assistiveText }) => {
31+
// `assistiveTextInternal` is needed, because `Input` used to
32+
// have an `assistiveText.fieldLevelHelpButton` prop and that
33+
// prop needs to override the default Tooltip "Help" string.
34+
const assistiveTextInternal = assistiveText
35+
? {
36+
...fieldLevelHelpTooltip.props.assistiveText,
37+
triggerLearnMoreIcon: assistiveText.triggerLearnMoreIcon,
38+
}
39+
: {};
40+
41+
return fieldLevelHelpTooltip ? (
42+
<Tooltip
43+
{...{
44+
...defaultProps,
45+
...fieldLevelHelpTooltip.props,
46+
assistiveText: assistiveTextInternal,
47+
}}
48+
/>
49+
) : null;
50+
};
51+
52+
FieldLevelHelpTooltip.propTypes = propTypes;
53+
FieldLevelHelpTooltip.displayName = 'FieldLevelHelpTooltip';
54+
55+
export default FieldLevelHelpTooltip;

0 commit comments

Comments
 (0)