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

chore(tooltip): cleanup arrow

Browse source
This commit is contained in:
Joren Broekema 2019-12-16 11:02:46 +01:00
parent e51bf720e5
commit 9982c0698e
5 changed files with 52 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/overlays/src/OverlayController.js
View file

@ -46,7 +46,7 @@ export class OverlayController {
preventOverflow: { preventOverflow: {
enabled: true, enabled: true,
boundariesElement: 'viewport', boundariesElement: 'viewport',
padding: 16, // viewport-margin for shifting/sliding padding: 8, // viewport-margin for shifting/sliding
}, },
flip: { flip: {
boundariesElement: 'viewport', boundariesElement: 'viewport',

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

@ -1,12 +1,11 @@
import { html, LitElement } from '@lion/core'; import { html, LitElement } from '@lion/core';
import { OverlayMixin } from '@lion/overlays'; import { OverlayMixin } from '@lion/overlays';
import '../lion-tooltip-arrow.js';
export class LionTooltip extends OverlayMixin(LitElement) { export class LionTooltip extends OverlayMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.__mouseActive = false; this._mouseActive = false;
this.__keyActive = false; this._keyActive = false;
this.__setupRepositionCompletePromise(); this.__setupRepositionCompletePromise();
} }
@ -31,7 +30,7 @@ export class LionTooltip extends OverlayMixin(LitElement) {
} }
__setupArrowElement() { __setupArrowElement() {
this.__arrowElement = this.querySelector('[slot=arrow'); this.__arrowElement = this.querySelector('[slot=arrow]');
if (!this.__arrowElement) { if (!this.__arrowElement) {
return; return;
} }
@ -87,52 +86,52 @@ export class LionTooltip extends OverlayMixin(LitElement) {
this.__resetActive = this.__resetActive.bind(this); this.__resetActive = this.__resetActive.bind(this);
this._overlayCtrl.addEventListener('hide', this.__resetActive); this._overlayCtrl.addEventListener('hide', this.__resetActive);
this.addEventListener('mouseenter', this.__showMouse); this.addEventListener('mouseenter', this._showMouse);
this.addEventListener('mouseleave', this.__hideMouse); this.addEventListener('mouseleave', this._hideMouse);
this.__showKey = this.__showKey.bind(this); this._showKey = this._showKey.bind(this);
this._overlayInvokerNode.addEventListener('focusin', this.__showKey); this._overlayInvokerNode.addEventListener('focusin', this._showKey);
this.__hideKey = this.__hideKey.bind(this); this._hideKey = this._hideKey.bind(this);
this._overlayInvokerNode.addEventListener('focusout', this.__hideKey); this._overlayInvokerNode.addEventListener('focusout', this._hideKey);
} }
_teardownOpenCloseListeners() { _teardownOpenCloseListeners() {
super._teardownOpenCloseListeners(); super._teardownOpenCloseListeners();
this._overlayCtrl.removeEventListener('hide', this.__resetActive); this._overlayCtrl.removeEventListener('hide', this.__resetActive);
this.removeEventListener('mouseenter', this.__showMouse); this.removeEventListener('mouseenter', this._showMouse);
this.removeEventListener('mouseleave', this._hideMouse); this.removeEventListener('mouseleave', this._hideMouse);
this._overlayInvokerNode.removeEventListener('focusin', this._showKey); this._overlayInvokerNode.removeEventListener('focusin', this._showKey);
this._overlayInvokerNode.removeEventListener('focusout', this._hideKey); this._overlayInvokerNode.removeEventListener('focusout', this._hideKey);
} }
__resetActive() { __resetActive() {
this.__mouseActive = false; this._mouseActive = false;
this.__keyActive = false; this._keyActive = false;
} }
__showMouse() { _showMouse() {
if (!this.__keyActive) { if (!this._keyActive) {
this.__mouseActive = true; this._mouseActive = true;
this.opened = true; this.opened = true;
} }
} }
__hideMouse() { _hideMouse() {
if (!this.__keyActive) { if (!this._keyActive) {
this.opened = false; this.opened = false;
} }
} }
__showKey() { _showKey() {
if (!this.__mouseActive) { if (!this._mouseActive) {
this.__keyActive = true; this._keyActive = true;
this.opened = true; this.opened = true;
} }
} }
__hideKey() { _hideKey() {
if (!this.__mouseActive) { if (!this._mouseActive) {
this.opened = false; this.opened = false;
} }
} }

27
packages/tooltip/src/LionTooltipArrow.js
View file

@ -1,4 +1,4 @@
import { LitElement, html, css } from '@lion/core'; import { css, html, LitElement } from '@lion/core';
export class LionTooltipArrow extends LitElement { export class LionTooltipArrow extends LitElement {
static get properties() { static get properties() {
@ -11,15 +11,14 @@ export class LionTooltipArrow extends LitElement {
return css` return css`
:host { :host {
position: absolute; position: absolute;
--tooltip-arrow-width: 8px; --tooltip-arrow-width: 12px;
--tooltip-arrow-height: 6px; --tooltip-arrow-height: 8px;
width: var(--tooltip-arrow-width); width: var(--tooltip-arrow-width);
height: var(--tooltip-arrow-height); height: var(--tooltip-arrow-height);
background: black;
} }
:host([placement^='top']) { :host svg {
bottom: calc(-1 * var(--tooltip-arrow-height)); display: block;
} }
:host([placement^='bottom']) { :host([placement^='bottom']) {
@ -28,12 +27,18 @@ export class LionTooltipArrow extends LitElement {
} }
:host([placement^='left']) { :host([placement^='left']) {
right: calc(-1 * var(--tooltip-arrow-height)); right: calc(
-1 * (var(--tooltip-arrow-height) +
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
);
transform: rotate(270deg); transform: rotate(270deg);
} }
:host([placement^='right']) { :host([placement^='right']) {
left: calc(-1 * var(--tooltip-arrow-height)); left: calc(
-1 * (var(--tooltip-arrow-height) +
(var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
);
transform: rotate(90deg); transform: rotate(90deg);
} }
`; `;
@ -41,6 +46,10 @@ export class LionTooltipArrow extends LitElement {
/* IE11 will not render the arrow without this method. */ /* IE11 will not render the arrow without this method. */
render() { render() {
return html``; return html`
<svg viewBox="0 0 12 8">
<path d="M 0,0 h 12 L 6,8 z"></path>
</svg>
`;
} }
} }

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

@ -1,7 +1,7 @@
import { css } from '@lion/core'; import { css } from '@lion/core';
import { html, object, storiesOf, text, withKnobs } from '@open-wc/demoing-storybook'; import { html, object, storiesOf, text, withKnobs } from '@open-wc/demoing-storybook';
import '../lion-tooltip.js';
import '../lion-tooltip-arrow.js'; import '../lion-tooltip-arrow.js';
import '../lion-tooltip.js';
const tooltipDemoStyle = css` const tooltipDemoStyle = css`
.demo-box { .demo-box {
@ -15,13 +15,14 @@ const tooltipDemoStyle = css`
.demo-box_placements { .demo-box_placements {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 173px; width: max-content;
margin: 0 auto; margin: 0 auto;
margin-top: 68px; margin-top: 68px;
} }
lion-tooltip { lion-tooltip {
padding: 10px; width: auto;
margin: 10px;
} }
.demo-box__column { .demo-box__column {

11
packages/tooltip/test/lion-tooltip-arrow.test.js
View file

@ -65,15 +65,18 @@ describe('lion-tooltip-arrow', () => {
await el.repositionComplete; await el.repositionComplete;
expect(getComputedStyle(arrowElement).getPropertyValue('top')).to.equal( expect(getComputedStyle(arrowElement).getPropertyValue('top')).to.equal(
'12px', '11px',
'30px (content height) - 6px (arrow width) = 24px, divided by 2 = 12px offset --> arrow is in the middle', '30px (content height) - 8px = 22px, divided by 2 = 11px offset --> arrow is in the middle',
); );
expect( expect(
getComputedStyle(el.querySelector('lion-tooltip-arrow')).getPropertyValue('left'), getComputedStyle(el.querySelector('lion-tooltip-arrow')).getPropertyValue('left'),
).to.equal( ).to.equal(
'-6px', '-10px',
'arrow width is 6px so this offset should be taken into account to align the arrow properly', `
arrow height is 8px so this offset should be taken into account to align the arrow properly,
as well as half the difference between width and height ((12 - 8) / 2 = 2)
`,
); );
}); });
}); });