Add Field Level Help and Inline Help variants to Input #1491
Conversation
| <Tooltip | ||
| align="top left" | ||
| content="Some helpful information" | ||
| position="overflowBoundaryElement" |
There was a problem hiding this comment.
I have it so that a default trigger is used if none is specified here because it's usually going to be the "i" info icon. What do you think?
Also, I saw that slds-form-element__icon adds position: relative to the trigger, which made the popover width much smaller. Using overflowBoundaryElement sizes the width to the tooltip contents.
There was a problem hiding this comment.
I've responded to this inline below. I'd like to use inline styles and use the default non-portal positioning.
garygong
changed the title
components/input/index.jsx
Outdated
| this.props.fieldLevelHelpTooltip | ||
| ) { | ||
| const defaultProps = { | ||
| triggerClassName: 'slds-form-element__icon', |
There was a problem hiding this comment.
Let's do triggerStyle: { position: 'static' } instead of position="overflowBoundaryElement" in the examples in order to reset the CSS and folks can override in the tooltip.
This is most likely a side effect however Platform implements tooltips, it isn't inline, so it doesn't show up on the SLDS radar.
| <Tooltip | ||
| align="top left" | ||
| content="Some helpful information" | ||
| position="overflowBoundaryElement" |
There was a problem hiding this comment.
I've responded to this inline below. I'd like to use inline styles and use the default non-portal positioning.
| @@ -231,4 +232,29 @@ storiesOf(FORMS_INPUT, module) | |||
| placeholder="My placeholder" | |||
| /> | |||
| </section> | |||
| )) | |||
| .add('Inline Help', () => ( | |||
| <section> | |||
There was a problem hiding this comment.
Please move the two new examples to external files and add them to components/site-stories.js
| @@ -501,4 +503,62 @@ describe('SLDSInput', () => { | |||
| expect(fixedTextLeft.textContent).to.equal('$'); | |||
| }); | |||
| }); | |||
|
|
|||
| describe('Inline Help', () => { | |||
There was a problem hiding this comment.
Could move these markup tests to jest/storybook examples?
- Uncomment https://github.com/salesforce/design-system-react/blob/master/components/story-based-tests.js and that should give you snapshot PNGs and DOM/markup output of all the input examples. You will want to add an additional example with the Tooltip
isOpen=true, so you can capture the markup of the tooltip.
I will try to get the comment header on Mocha test files added in the next week, so it's more obvious for everyone.
components/input/index.jsx
Outdated
| /** | ||
| * Displays help text under the input. | ||
| */ | ||
| inlineHelpText: PropTypes.string, |
There was a problem hiding this comment.
This should string or node, so you can do span, etc.
components/input/index.jsx
Outdated
| triggerClassName: 'slds-form-element__icon', | ||
| children: ( | ||
| <Button | ||
| assistiveText={{ label: 'Help' }} |
There was a problem hiding this comment.
This needs to be able to be internationalized and added to assistiveText object. fieldLevelHelpButton, maybe?
|
@interactivellama check out the changes based on your comments here: 18df0be thanks! |
|
Looks good! Thanks @garygong
|
This implements the "Field level help" and "Inline help" variants for
Input.@interactivellama can you take a look? Thanks!
Fixes #1474
Additional description
CONTRIBUTOR checklist (do not remove)
Please complete for every pull request
npm run lint:fixhas been run and linting passes.components/component-docs.jsonCI tests pass (npm test).REVIEWER checklist (do not remove)
components/component-docs.jsontests.last-slds-markup-reviewinpackage.jsonand push.last-accessibility-review, topackage.jsonand push.npm run local-updatewithin locally cloned site repo to confirm the site will function correctly at the next release.