Skip to content

Commit

Permalink
fix: No Popover Arrow (#790)
Browse files Browse the repository at this point in the history 
* chore: add popover placement storybook entries

* fix: attribute mismatch with fd-styles

* additional refactoring

* chore: remove extra property

* chore: more popover placement storybook entries

* chore: refactor popover placement stories to table
  • Loading branch information
@prsdthkr
prsdthkr committed Nov 18, 2019
1 parent 3656188 commit 9b79b81
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 5 deletions.
143 changes: 143 additions & 0 deletions src/Popover/__stories__/Popover.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,156 @@ 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', () => (
<>
<style dangerouslySetInnerHTML={{ __html: `
td {
min-width: 3em;
min-height: 3em;
}
` }} />
<table>
{/* start top padding for popover */}
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
{/* end top padding for popover */}
<tr>
<td />
<td />
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-up-arrow' option='light' >Pop to Top-Start</Button>}
placement='top-start' />
</td>
<td>
<Popover
body={someText}
control={<Button glyph='navigation-up-arrow' option='light' >Pop to Top</Button>}
placement='top' />
</td>
<td>
<Popover
body={someText}
control={<Button glyph='navigation-up-arrow' option='light' >Pop to Top-End</Button>}
placement='top-end' />
</td>
<td />
</tr>
<tr>
<td />
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-left-arrow' option='light' >Pop to Left-Start</Button>}
placement='left-start' />
</td>
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-right-arrow' option='light' >Pop to Right-Top</Button>}
placement='right-start' />
</td>
</tr>
<tr>
<td />
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-left-arrow' option='light' >Pop to Left</Button>}
placement='left' />
</td>
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-right-arrow' option='light' >Pop to Right</Button>}
placement='right' />
</td>
</tr>
<tr>
<td />
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-left-arrow' option='light' >Pop to Left-End</Button>}
placement='left-end' />
</td>
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-right-arrow' option='light' >Pop to Right-End</Button>}
placement='right-end' />
</td>
</tr>
<tr>
<td />
<td />
<td />
<td />
<td />
<td>
<Popover
body={someText}
control={<Button glyph='navigation-down-arrow' option='light' >Pop to Bottom-Start</Button>}
placement='bottom-start' />
</td>
<td>
<Popover
body={someText}
control={<Button glyph='navigation-down-arrow' option='light' >Pop to Bottom</Button>}
placement='bottom' />
</td>
<td>
<Popover
body={someText}
control={<Button glyph='navigation-down-arrow' option='light' >Pop to Bottom-End</Button>}
placement='bottom-end' />
</td>
<td />
</tr>
{/* start bottom padding for popover */}
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
<tr ><td>&nbsp;</td></tr>
{/* end bottom padding for popover */}
</table>
</>
))
.add('disable styles', () => (
<Popover
body={bodyContent}
Expand Down
11 changes: 6 additions & 5 deletions src/utils/_Popper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`}
Expand Down Expand Up @@ -175,8 +176,8 @@ Popper.defaultProps = {
}
},
popperPlacement: 'bottom-start',
onClickOutside: () => {},
onKeyDown: () => {}
onClickOutside: () => { },
onKeyDown: () => { }
};

export default Popper;

0 comments on commit 9b79b81

Please sign in to comment.