diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js index 98b7607f8..6b4dd4c85 100644 --- a/src/MultiInput/MultiInput.js +++ b/src/MultiInput/MultiInput.js @@ -108,6 +108,7 @@ class MultiInput extends Component { render() { const { + popoverProps, buttonProps, compact, className, @@ -147,6 +148,7 @@ class MultiInput extends Component { className={multiInputClasses}>
@@ -201,6 +203,7 @@ MultiInput.propTypes = { imageLabel: PropTypes.string }), placeHolder: PropTypes.string, + popoverProps: PropTypes.object, tagProps: PropTypes.object, onTagsUpdate: PropTypes.func }; diff --git a/src/MultiInput/MultiInput.test.js b/src/MultiInput/MultiInput.test.js index b37a99402..ac2bdbc5e 100644 --- a/src/MultiInput/MultiInput.test.js +++ b/src/MultiInput/MultiInput.test.js @@ -241,5 +241,13 @@ describe('', () => { element.find('.fd-multi-input-tags').getDOMNode().attributes['data-sample'].value ).toBe('Sample'); }); + + test('should allow props to be spread to the MultiInput component\'s Popover component', () => { + const element = mount(); + + expect( + element.find('div.fd-popover').getDOMNode().attributes['data-sample'].value + ).toBe('Sample'); + }); }); }); diff --git a/src/Popover/Popover.Component.js b/src/Popover/Popover.Component.js index 5af24c196..c0f48afca 100644 --- a/src/Popover/Popover.Component.js +++ b/src/Popover/Popover.Component.js @@ -163,6 +163,24 @@ export class PopoverComponent extends React.Component {
+ +
+ } + disableEdgeDetection + placement='top' /> + + } + disableEdgeDetection + placement='bottom' /> +
+
+ popper.js.', onClickOutside: 'Callback for consumer clicking outside of popover body.', onEscapeKey: 'Callback when escape key is pressed when popover body is visible.' }; diff --git a/src/Popover/Popover.test.js b/src/Popover/Popover.test.js index 6fc457587..80b813b29 100644 --- a/src/Popover/Popover.test.js +++ b/src/Popover/Popover.test.js @@ -70,6 +70,22 @@ describe('', () => { noArrow /> ); + const popOverDisableEdgeDetection = ( + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + control={} + disableEdgeDetection /> + ); + test('create Popover', () => { // popover let component = renderer.create(popOver); @@ -92,6 +108,16 @@ describe('', () => { expect(tree).toMatchSnapshot(); }); + test('popper is receiving disableEdgeDetection from popover', () => { + // disableEdgeDetection is defaulted to false + const popoverWithDetection = mount(popOver); + expect(popoverWithDetection.props().disableEdgeDetection).toBeFalsy(); + + // prop is correctly changed when set to true + const popoverWithoutDetection = mount(popOverDisableEdgeDetection); + expect(popoverWithoutDetection.props().disableEdgeDetection).toBeTruthy(); + }); + test('handle document click to close popover', () => { const wrapper = mount(popOver); diff --git a/src/TimePicker/TimePicker.js b/src/TimePicker/TimePicker.js index ee81f4225..e8dd80056 100644 --- a/src/TimePicker/TimePicker.js +++ b/src/TimePicker/TimePicker.js @@ -91,6 +91,7 @@ class TimePicker extends Component { // }; render() { const { + popoverProps, id, inputProps, localizedText, @@ -114,6 +115,7 @@ class TimePicker extends Component { id={id}>
', () => { element.find('div.fd-popover__popper div.fd-time').getDOMNode().attributes['data-sample'].value ).toBe('Sample'); }); + + test('should allow props to be spread to the TimePicker component\'s Popover component', () => { + const element = mount(); + + expect( + element.find('div.fd-popover').at(1).getDOMNode().attributes['data-sample'].value + ).toBe('Sample'); + }); }); }); diff --git a/src/_playground/documentation/Properties/_PropertyDescription.js b/src/_playground/documentation/Properties/_PropertyDescription.js index b25b5f3d2..85bd92e52 100644 --- a/src/_playground/documentation/Properties/_PropertyDescription.js +++ b/src/_playground/documentation/Properties/_PropertyDescription.js @@ -1,11 +1,11 @@ import PropTypes from 'prop-types'; import React from 'react'; -import ReactMarkdown from 'react-markdown'; +import ReactMarkdown from 'react-markdown/with-html'; const PropertyDescription = ({ description }) => (
- +
); diff --git a/src/_playground/documentation/Properties/defaults.js b/src/_playground/documentation/Properties/defaults.js index d0685d5cd..d28474a8b 100644 --- a/src/_playground/documentation/Properties/defaults.js +++ b/src/_playground/documentation/Properties/defaults.js @@ -15,7 +15,7 @@ export const defaultPropDescriptions = { onChange: 'Callback function when the change event fires on the component.', onClick: 'Callback function when user clicks on the component.', placeholder: 'Localized placeholder text of the input.', - popoverProps: 'Additional props to be spread to the `Popover` component.', + popoverProps: 'Additional props to be spread to the [Popover](/popover) component.', readOnly: 'Set to **true** to mark component as readonly.', size: 'Size of the component.', title: 'Localized text for the heading.',