Merge b9c6008 into 3656188

SAP · Nov 14, 2019 · 7d39c5f · 7d39c5f
2 parents 3656188 + b9c6008
commit 7d39c5f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/src/Popover/__stories__/Popover.stories.js b/src/Popover/__stories__/Popover.stories.js
@@ -18,13 +18,79 @@ const bodyContent = (
     </Menu>
 );
 
+const someText = <p style={{ padding: '0.5em' }}>This is a simple popover.</p>;
+
 storiesOf('Components|Popover', module)
     .addDecorator(withKnobs)
     .add('Default', () => (
         <Popover
             body={bodyContent}
             control={<Button glyph='navigation-up-arrow' option='light' />} />
     ))
+    .add('Placement', () => (
+        <>
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-up-arrow' option='light' >Pop to Top-Start</Button>}
+                placement='top-start'
+                style={{ position: 'fixed', top: '10em', left: '35em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-up-arrow' option='light' >Pop to Top</Button>}
+                placement='top'
+                style={{ position: 'fixed', top: '10em', left: '50em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-up-arrow' option='light' >Pop to Top-End</Button>}
+                placement='top-end'
+                style={{ position: 'fixed', top: '10em', left: '65em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-right-arrow' option='light' >Pop to Right-Top</Button>}
+                placement='right-start'
+                style={{ position: 'fixed', top: '15em', left: '65em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-right-arrow' option='light' >Pop to Right</Button>}
+                placement='right'
+                style={{ position: 'fixed', top: '20em', left: '65em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-right-arrow' option='light' >Pop to Right-End</Button>}
+                placement='right-end'
+                style={{ position: 'fixed', top: '25em', left: '65em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-down-arrow' option='light' >Pop to Bottom-End</Button>}
+                placement='bottom-end'
+                style={{ position: 'fixed', top: '30em', left: '65em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-down-arrow' option='light' >Pop to Bottom</Button>}
+                placement='bottom'
+                style={{ position: 'fixed', top: '30em', left: '50em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-down-arrow' option='light' >Pop to Bottom-Start</Button>}
+                placement='bottom-start'
+                style={{ position: 'fixed', top: '30em', left: '35em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-left-arrow' option='light' >Pop to Left-End</Button>}
+                placement='left-end'
+                style={{ position: 'fixed', top: '25em', left: '35em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-left-arrow' option='light' >Pop to Left</Button>}
+                placement='left'
+                style={{ position: 'fixed', top: '20em', left: '35em' }} />
+            <Popover
+                body={someText}
+                control={<Button glyph='navigation-left-arrow' option='light' >Pop to Left-Start</Button>}
+                placement='left-start'
+                style={{ position: 'fixed', top: '15em', left: '35em' }} />
+        </>
+    ))
     .add('disable styles', () => (
         <Popover
             body={bodyContent}

diff --git a/src/utils/_Popper.js b/src/utils/_Popper.js
@@ -99,10 +99,11 @@ class Popper extends React.Component {
                         <div
                             {...popperProps}
                             className={popperClasses}
-                            data-placement={placement}
-                            data-x-out-of-boundaries={!!outOfBoundaries || undefined} // eslint-disable-line
                             ref={ref}
-                            style={style}>
+                            style={style}
+                            // eslint-disable-next-line no-undefined
+                            x-out-of-boundaries={!!outOfBoundaries || undefined}
+                            x-placement={placement}>
                             {children}
                             <span
                                 className={`${cssBlock}__arrow`}
@@ -175,8 +176,8 @@ Popper.defaultProps = {
         }
     },
     popperPlacement: 'bottom-start',
-    onClickOutside: () => {},
-    onKeyDown: () => {}
+    onClickOutside: () => { },
+    onKeyDown: () => { }
 };
 
 export default Popper;