ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(tooltip): change API to popper based

Browse source
This commit is contained in:
Joren Broekema 2019-06-27 14:10:45 +02:00
parent 1e6d60dfdb
commit c01cfe9ebb
4 changed files with 64 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/tooltip/package.json
View file

@ -33,6 +33,7 @@
],
"dependencies": {
"@lion/core": "^0.1.9",
"@lion/popup": "^0.1.23",
"@lion/overlays": "^0.2.7"
},
"devDependencies": {

24
packages/tooltip/src/LionTooltip.js
View file

@ -1,31 +1,23 @@
import { UpdatingElement } from '@lion/core';
import { LionPopup } from '@lion/popup';
import { overlays, LocalOverlayController } from '@lion/overlays';
export class LionTooltip extends UpdatingElement {
static get properties() {
return {
position: {
type: String,
},
};
}
export class LionTooltip extends LionPopup {
connectedCallback() {
super.connectedCallback();
this.contenNode = this.querySelector('[slot="content"]');
this.contentNode = this.querySelector('[slot="content"]');
this.invokerNode = this.querySelector('[slot="invoker"]');
this._tooltip = overlays.add(
this._controller = overlays.add(
new LocalOverlayController({
hidesOnEsc: true,
hidesOnOutsideClick: true,
placement: this.position,
contentNode: this.contenNode,
placementConfig: this.placementConfig,
contentNode: this.contentNode,
invokerNode: this.invokerNode,
}),
);
this._show = () => this._tooltip.show();
this._hide = () => this._tooltip.hide();
this._show = () => this._controller.show();
this._hide = () => this._controller.hide();
this.invokerNode.addEventListener('mouseenter', this._show);
this.invokerNode.addEventListener('mouseleave', this._hide);

68
packages/tooltip/stories/index.stories.js
View file

@ -1,4 +1,4 @@
import { storiesOf, html } from '@open-wc/demoing-storybook';
import { storiesOf, html, withKnobs, object, text } from '@open-wc/demoing-storybook';
import { css } from '@lion/core';
import '@lion/icon/lion-icon.js';
@ -15,7 +15,7 @@ const tooltipDemoStyle = css`
padding: 8px;
}
.demo-box_positions {
.demo-box_placements {
display: flex;
flex-direction: column;
width: 173px;
@ -40,6 +40,8 @@ const tooltipDemoStyle = css`
background-color: black;
border-radius: 4px;
padding: 8px;
/* To display on top of elements with no z-index that are appear later in the DOM */
z-index: 1;
}
@media (max-width: 480px) {
@ -50,6 +52,7 @@ const tooltipDemoStyle = css`
`;
storiesOf('Local Overlay System|Tooltip', module)
.addDecorator(withKnobs)
.add(
'Button tooltip',
() => html`
@ -57,36 +60,73 @@ storiesOf('Local Overlay System|Tooltip', module)
${tooltipDemoStyle}
</style>
<div class="demo-box">
<lion-tooltip position="right">
<div slot="content" class="tooltip">hey there</div>
<lion-tooltip .placementConfig=${{ placement: 'right' }}>
<div slot="content" class="tooltip">Hello there!</div>
<lion-button slot="invoker">Tooltip</lion-button>
</lion-tooltip>
</div>
`,
)
.add(
'positions',
'placements',
() => html`
<style>
${tooltipDemoStyle}
</style>
<div class="demo-box_positions">
<lion-tooltip position="top">
<div slot="content" class="tooltip">Its top position</div>
<div class="demo-box_placements">
<lion-tooltip .placementConfig=${{ placement: 'top' }}>
<div slot="content" class="tooltip">Its top placement</div>
<lion-button slot="invoker">Top</lion-button>
</lion-tooltip>
<lion-tooltip position="right">
<div slot="content" class="tooltip">Its right position</div>
<lion-tooltip .placementConfig=${{ placement: 'right' }}>
<div slot="content" class="tooltip">Its right placement</div>
<lion-button slot="invoker">Right</lion-button>
</lion-tooltip>
<lion-tooltip position="bottom">
<div slot="content" class="tooltip">Its bottom position</div>
<lion-tooltip .placementConfig=${{ placement: 'bottom' }}>
<div slot="content" class="tooltip">Its bottom placement</div>
<lion-button slot="invoker">Bottom</lion-button>
</lion-tooltip>
<lion-tooltip position="left">
<div slot="content" class="tooltip">Its left position</div>
<lion-tooltip .placementConfig=${{ placement: 'left' }}>
<div slot="content" class="tooltip">Its left placement</div>
<lion-button slot="invoker">Left</lion-button>
</lion-tooltip>
</div>
`,
)
.add(
'Override placement configuration',
() => html`
<style>
${tooltipDemoStyle}
</style>
<p>Use the Storybook Knobs to dynamically change the placement configuration!</p>
<div class="demo-box_placements">
<lion-tooltip
.placementConfig="${object('Placement Configuration', {
placement: 'bottom-start',
positionFixed: true,
modifiers: {
keepTogether: {
enabled: true /* Prevents detachment of content element from reference element */,
},
preventOverflow: {
enabled: false /* disables shifting/sliding behavior on secondary axis */,
padding: 16 /* when enabled, this is the viewport-margin for shifting/sliding */,
},
flip: {
boundariesElement: 'viewport',
padding: 4 /* viewport-margin for flipping on primary axis */,
},
offset: {
enabled: true,
offset: `0, 4px` /* horizontal and vertical margin (distance between popper and referenceElement) */,
},
},
})}"
>
<div slot="content" class="tooltip">${text('Content text', 'Hello, World!')}</div>
<lion-button slot="invoker">${text('Invoker text', 'Click me!')}</lion-button>
</lion-tooltip>
</div>
`,
);

1
packages/tooltip/test/lion-tooltip.test.js
View file

@ -25,6 +25,7 @@ describe('lion-tooltip', () => {
const eventMouseEnter = new Event('mouseenter');
invoker.dispatchEvent(eventMouseEnter);
await el.updateComplete;
await aTimeout();
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
const eventMouseLeave = new Event('mouseleave');
invoker.dispatchEvent(eventMouseLeave);