fix: add disable edge detection to popover

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}>
                 <div className='fd-multi-input-field'>
                     <Popover
+                        {...popoverProps}
                         body={
                             <nav className='fd-menu'>
                                 <ul {...listProps} className='fd-menu__list'>{this.createTagList(data)}</ul>
@@ -201,6 +203,7 @@ MultiInput.propTypes = {
         imageLabel: PropTypes.string
     }),
     placeHolder: PropTypes.string,
+    popoverProps: PropTypes.object,
     tagProps: PropTypes.object,
     onTagsUpdate: PropTypes.func
 };

src/MultiInput/MultiInput.test.js

@@ -241,5 +241,13 @@ describe('<MultiInput />', () => {
                 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(<MultiInput data={data} popoverProps={{ 'data-sample': 'Sample' }} />);
+
+            expect(
+                element.find('div.fd-popover').getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
     });
 });

src/Popover/Popover.Component.js

@@ -163,6 +163,24 @@ export class PopoverComponent extends React.Component {
                     </div>
                 </Example>
 
+                <Example
+                    centered
+                    title='Disable Edge Detection'>
+                    <div className='fd-doc__margin--popover'>
+                        <Popover
+                            body={bodyContent}
+                            control={<Button glyph='navigation-up-arrow' option='light' />}
+                            disableEdgeDetection
+                            placement='top' />
+
+                        <Popover
+                            body={bodyContent}
+                            control={<Button glyph='navigation-down-arrow' option='light' />}
+                            disableEdgeDetection
+                            placement='bottom' />
+                    </div>
+                </Example>
+
                 <Example
                     centered
                     description={`When an overlay (\`body\`) is visible, the reference (\`control\`)

src/Popover/Popover.js

@@ -32,6 +32,7 @@ class Popover extends Component {
 
     render() {
         const {
+            disableEdgeDetection,
             onClickOutside,
             onEscapeKey,
             disabled,
@@ -59,6 +60,7 @@ class Popover extends Component {
             <div {...rest} className={popoverClasses}>
                 <Popper
                     cssBlock='fd-popover'
+                    disableEdgeDetection={disableEdgeDetection}
                     noArrow={noArrow}
                     onClickOutside={chain(this.handleOutsideClick, onClickOutside)}
                     onEscapeKey={chain(this.handleOutsideClick, onEscapeKey)}
@@ -82,6 +84,7 @@ Popover.propTypes = {
     control: PropTypes.node.isRequired,
     className: PropTypes.string,
     disabled: PropTypes.bool,
+    disableEdgeDetection: PropTypes.bool,
     noArrow: PropTypes.bool,
     placement: PropTypes.oneOf(POPPER_PLACEMENTS),
     popperProps: PropTypes.object,
@@ -97,9 +100,10 @@ Popover.defaultProps = {
 Popover.propDescriptions = {
     body: 'Node(s) to render in the overlay.',
     control: 'Node to render as the reference element (that the `body` will be placed in relation to).',
+    disableEdgeDetection: 'Set to **true** to render popover without edge detection so popover will not flip from top to bottom with scroll.',
     noArrow: 'Set to **true** to render a popover without an arrow.',
     placement: 'Initial position of the `body` (overlay) related to the `control`.',
-    popperProps: 'Additional props to be spread to the overlay element.',
+    popperProps: 'Additional props to be spread to the overlay element, supported by <a href="https://popper.js.org" target="_blank">popper.js</a>.',
     onClickOutside: 'Callback for consumer clicking outside of popover body.',
     onEscapeKey: 'Callback when escape key is pressed when popover body is visible.'
 };

src/Popover/Popover.test.js

@@ -70,6 +70,22 @@ describe('<Popover />', () => {
             noArrow />
     );
 
+    const popOverDisableEdgeDetection = (
+        <Popover
+            body={
+                <Menu>
+                    <Menu.List>
+                        <Menu.Item url='/'>Option 1</Menu.Item>
+                        <Menu.Item url='/'>Option 2</Menu.Item>
+                        <Menu.Item url='/'>Option 3</Menu.Item>
+                        <Menu.Item url='/'>Option 4</Menu.Item>
+                    </Menu.List>
+                </Menu>
+            }
+            control={<Icon glyph='cart' size='xl' />}
+            disableEdgeDetection />
+    );
+
     test('create Popover', () => {
         // popover
         let component = renderer.create(popOver);
@@ -92,6 +108,16 @@ describe('<Popover />', () => {
         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);
 

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}>
                 <div className='fd-popover fd-popover--no-arrow'>
                     <Popover
+                        {...popoverProps}
                         body={
                             <Time
                                 {...timeProps}
@@ -167,6 +169,7 @@ TimePicker.propTypes = {
         meridiemAM: PropTypes.string,
         meridiemPM: PropTypes.string
     }),
+    popoverProps: PropTypes.object,
     timeProps: PropTypes.object,
     value: PropTypes.string
 };

src/TimePicker/TimePicker.test.js

@@ -283,5 +283,13 @@ describe('<TimePicker />', () => {
                 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(<TimePicker id='testId' popoverProps={{ 'data-sample': 'Sample' }} />);
+
+            expect(
+                element.find('div.fd-popover').at(1).getDOMNode().attributes['data-sample'].value
+            ).toBe('Sample');
+        });
     });
 });

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 }) => (
     <React.Fragment>
         <div>
-            <ReactMarkdown source={description} />
+            <ReactMarkdown escapeHtml={false} source={description} />
         </div>
     </React.Fragment>
 );

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.',