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

fix(overlays): position arrow correctly for placement top

Browse source
This commit is contained in:
qa46hx 2020-12-16 16:24:55 +01:00
parent 94d6955390
commit 80031f66c7
3 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fair-meals-sell.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/overlays': patch
---
Fix arrow placement top

34
packages/overlays/docs/20-index.md
View file

@ -609,7 +609,7 @@ export const LocalWithArrow = () => {
...super._defineOverlayConfig(), ...super._defineOverlayConfig(),
popperConfig: { popperConfig: {
...super._defineOverlayConfig().popperConfig, ...super._defineOverlayConfig().popperConfig,
placement: 'bottom', placement: 'top',
}, },
}; };
} }
@ -641,10 +641,34 @@ export const LocalWithArrow = () => {
customElements.define('arrow-example', ArrowExample); customElements.define('arrow-example', ArrowExample);
} }
return html` return html`
<arrow-example> <style>
<button slot="invoker">Click me to open the overlay!</button> .demo-box-placements {
<div slot="content">This is a tooltip with an arrow<div> display: flex;
</arrow-example> flex-direction: column;
margin: 40px 0 0 200px;
}
.demo-box-placements arrow-example {
margin: 20px;
}
</style>
<div class="demo-box-placements">
<arrow-example>
<button slot="invoker">Top</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
<arrow-example .config=${{ popperConfig: { placement: 'right' } }}>
<button slot="invoker">Right</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
<arrow-example .config=${{ popperConfig: { placement: 'bottom' } }}>
<button slot="invoker">Bottom</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
<arrow-example .config=${{ popperConfig: { placement: 'left' } }}>
<button slot="invoker">Left</button>
<div slot="content">This is a tooltip with an arrow</div>
</arrow-example>
</div>
`; `;
}; };
``` ```

4
packages/overlays/src/ArrowMixin.js
View file

@ -49,6 +49,10 @@ export const ArrowMixinImplementation = superclass =>
display: block; display: block;
} }
[x-placement^='top'] .arrow {
bottom: calc(-1 * var(--tooltip-arrow-height));
}
[x-placement^='bottom'] .arrow { [x-placement^='bottom'] .arrow {
top: calc(-1 * var(--tooltip-arrow-height)); top: calc(-1 * var(--tooltip-arrow-height));
transform: rotate(180deg); transform: rotate(180deg);