Add FieldLevelHelp component
#179
There are no files selected for viewing
This file contains hidden or 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,42 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Icon } from '../Icon'; | ||
| import { Button } from '../Button'; | ||
| import { Popover } from '../Popover'; | ||
| import { OverlayTrigger } from '../OverlayTrigger'; | ||
|
|
||
| /** | ||
| * FieldLevelHelp Component for Patternfly React | ||
| */ | ||
| const FieldLevelHelp = ({ children, content, close, ...props }) => { | ||
| const trigger = 'click'; | ||
| const overlay = <Popover id="popover">{content}</Popover>; | ||
| const rootClose = close === 'true'; | ||
|
|
||
| return ( | ||
| <OverlayTrigger | ||
| overlay={overlay} | ||
| placement={'top'} | ||
| trigger={trigger.split(' ')} | ||
| rootClose={rootClose} | ||
| > | ||
| <Button bsStyle="link"> | ||
| <Icon type="pf" name={'info'} /> | ||
| </Button> | ||
| </OverlayTrigger> | ||
| ); | ||
| }; | ||
|
|
||
| FieldLevelHelp.propTypes = { | ||
| /** additional fieldlevelhelp classes */ | ||
| content: PropTypes.node, | ||
| /** leave popover/tooltip open */ | ||
| close: PropTypes.string, | ||
| /** children nodes */ | ||
| children: PropTypes.node | ||
| }; | ||
| FieldLevelHelp.defaultProps = { | ||
| close: 'true' | ||
| }; | ||
|
|
||
| export default FieldLevelHelp; |
This file contains hidden or 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,40 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, text, select } from '@storybook/addon-knobs'; | ||
| import { defaultTemplate } from '../../../storybook/decorators/storyTemplates'; | ||
| import { DOCUMENTATION_URL } from '../../../storybook/constants'; | ||
| import { FieldLevelHelp } from './index'; | ||
|
|
||
| const stories = storiesOf('FieldLevelHelp', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.addDecorator( | ||
| defaultTemplate({ | ||
| title: 'FieldLevelHelp', | ||
| documentationLink: | ||
| DOCUMENTATION_URL.PATTERNFLY_ORG_COMMUNICATION + 'inline-notifications/' | ||
| }) | ||
| ); | ||
|
|
||
| stories.addWithInfo('FieldLevelHelp', 'FieldLevelHelp', () => { | ||
| const close = select('Close Popover', ['true', 'false']); | ||
| const content = text( | ||
| 'content', | ||
| 'Enter the hostname in a valid format <br> <a target="_blank" href="http://www.test.example.com">Click here for examples of valid hostnames</a>' | ||
| ); | ||
| const fieldLabel = text('Field Label', 'Hostname'); | ||
|
|
||
| const htmlContent = ( | ||
| <div | ||
| dangerouslySetInnerHTML={{ | ||
| __html: content | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| <div style={{ textAlign: 'center' }}> | ||
| {fieldLabel} | ||
| <FieldLevelHelp content={htmlContent} close={close} /> | ||
| </div> | ||
| ); | ||
| }); | ||
This file contains hidden or 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,32 @@ | ||
| /* eslint-env jest */ | ||
|
|
||
| import React from 'react'; | ||
| import renderer from 'react-test-renderer'; | ||
|
|
||
| import FieldLevelHelp from './FieldLevelHelp'; | ||
|
|
||
| test('FieldLevelHelp renders properly', () => { | ||
| const component = renderer.create( | ||
| <FieldLevelHelp id="fieldlevelname1">Port Number</FieldLevelHelp> | ||
| ); | ||
|
|
||
| let tree = component.toJSON(); | ||
|
Member
There was a problem hiding this comment. I assume you can use const here? |
||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('FieldLevelHelp allows to specify mode content and close', () => { | ||
| const component = renderer.create( | ||
| <div> | ||
| <label>Port Number</label> | ||
| <FieldLevelHelp | ||
| id="fieldlevelname1" | ||
| mode="popover" | ||
| content="Enter Port number between the 4000-5000 range" | ||
| close="true" | ||
| /> | ||
| </div> | ||
| ); | ||
|
|
||
| const tree = component.toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
This file contains hidden or 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,34 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`FieldLevelHelp allows to specify mode content and close 1`] = ` | ||
| <div> | ||
| <label> | ||
| Port Number | ||
| </label> | ||
| <button | ||
| className="btn btn-link" | ||
| disabled={false} | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| className="pficon pficon-info" | ||
| /> | ||
| </button> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`FieldLevelHelp renders properly 1`] = ` | ||
| <button | ||
| className="btn btn-link" | ||
| disabled={false} | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| className="pficon pficon-info" | ||
| /> | ||
| </button> | ||
| `; |
This file contains hidden or 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 @@ | ||
| export { default as FieldLevelHelp } from './FieldLevelHelp'; |
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe we should add it under the forms stories? it makes sense to me to see a complete form with field level help instead of a standalone?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In 6c9f1d2, I have added the story under Forms.
It was a good call to add the FieldLevelHelp use case in the Form, since it looks like I may have stumbled upon a bug in the Popover (or OverlayTrigger) component.
When the Popover component is used in conjunction with the
FormGroupcomponent, the Formgroup component steals the focus from Popover, causing the popover to close immediately. This happens in a fraction of a second, giving a visual impression that the popover never opened.Please see a demo of the above issue here -
under the Forms->Horizontal Form->Phone field
For this particular use case, a workaround would be to keep the Popover open - (An option that you requested here - #179 (comment)). That way, we would at least see the popover contents.
The 'Close Popover' knob demonstrates the above (set the value to false)
The other workaround is to use Tooltips - but since we are not considering tooltips for the FieldLevelHelp component, that is probably not an option.
The 'Popover/Tooltip' knob demonstrates the above (set the value to 'tooltip')