-
Notifications
You must be signed in to change notification settings - Fork 418
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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. * Adds removeUndefined helper function
- Loading branch information
1 parent
1913d8f
commit 06880c2
Showing
10 changed files
with
123 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/* | ||
* Field Level Help Tooltip for input labels | ||
*/ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import Tooltip from '../index'; | ||
import objectHelpers from '../../../utilities/object'; | ||
|
||
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 = {} }) => | ||
fieldLevelHelpTooltip ? ( | ||
<Tooltip | ||
{...{ | ||
// internal default props | ||
...defaultProps, | ||
// props from external developer | ||
...fieldLevelHelpTooltip.props, | ||
// allow backwards compatibility with Input's | ||
// assistiveText.fieldLevelHelpButton | ||
// `Input` used to have an `assistiveText.fieldLevelHelpButton` | ||
// prop and that prop needs to override the default Tooltip | ||
// "Help" string. | ||
assistiveText: { | ||
...fieldLevelHelpTooltip.props.assistiveText, | ||
...objectHelpers.removeUndefined(assistiveText), | ||
}, | ||
}} | ||
/> | ||
) : null; | ||
|
||
FieldLevelHelpTooltip.propTypes = propTypes; | ||
FieldLevelHelpTooltip.displayName = 'FieldLevelHelpTooltip'; | ||
|
||
export default FieldLevelHelpTooltip; |
Binary file modified
BIN
-31 Bytes
(100%)
...t-js-image-snapshots-image-storyshots-slds-combobox-base-inline-help-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/* | ||
* Remove keys with undefined values. This is useful | ||
* for merging object props like `assistiveText` and `labels` | ||
* and keeping default prop values. | ||
*/ | ||
|
||
const removeUndefined = (obj) => { | ||
const newObj = {}; | ||
Object.keys(obj).forEach((prop) => { | ||
if (typeof obj[prop] !== 'undefined') { | ||
newObj[prop] = obj[prop]; | ||
} | ||
}); | ||
return newObj; | ||
}; | ||
|
||
const helpers = { removeUndefined }; | ||
|
||
export default helpers; |