Fix Help Menu (#10257)

* Fix Help Menu

* PR Feedback

* linting
This commit is contained in:
Gerard Burns 2023-04-18 10:37:11 +01:00 committed by GitHub
parent a8f8840854
commit 7e5b99aa84
3 changed files with 14 additions and 9 deletions

View File

@ -10,7 +10,14 @@ export default function positionDropdown(element, opts) {
// Updates the position of the dropdown // Updates the position of the dropdown
const updatePosition = opts => { const updatePosition = opts => {
const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts const {
anchor,
align,
maxHeight,
maxWidth,
useAnchorWidth,
offset = 5,
} = opts
if (!anchor) { if (!anchor) {
return return
} }
@ -31,10 +38,11 @@ export default function positionDropdown(element, opts) {
styles.top = anchorBounds.top styles.top = anchorBounds.top
} else if (window.innerHeight - anchorBounds.bottom < 100) { } else if (window.innerHeight - anchorBounds.bottom < 100) {
styles.top = anchorBounds.top - elementBounds.height - offset styles.top = anchorBounds.top - elementBounds.height - offset
styles.maxHeight = 240 styles.maxHeight = maxHeight || 240
} else { } else {
styles.top = anchorBounds.bottom + offset styles.top = anchorBounds.bottom + offset
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20 styles.maxHeight =
maxHeight || window.innerHeight - anchorBounds.bottom - 20
} }
// Determine horizontal styles // Determine horizontal styles

View File

@ -14,6 +14,7 @@
export let align = "right" export let align = "right"
export let portalTarget export let portalTarget
export let maxWidth export let maxWidth
export let maxHeight
export let open = false export let open = false
export let useAnchorWidth = false export let useAnchorWidth = false
export let dismissible = true export let dismissible = true
@ -64,6 +65,7 @@
use:positionDropdown={{ use:positionDropdown={{
anchor, anchor,
align, align,
maxHeight,
maxWidth, maxWidth,
useAnchorWidth, useAnchorWidth,
offset, offset,

View File

@ -13,12 +13,7 @@
<div bind:this={popoverAnchor} class="help"> <div bind:this={popoverAnchor} class="help">
<button class="openMenu" on:click={show}>Help</button> <button class="openMenu" on:click={show}>Help</button>
<Popover <Popover maxHeight={1000} bind:show bind:hide anchor={popoverAnchor}>
class="helpMenuPopoverOverride"
bind:show
bind:hide
anchor={popoverAnchor}
>
<nav class="helpMenu"> <nav class="helpMenu">
<div class="header"> <div class="header">
<Heading size="XS">Help resources</Heading> <Heading size="XS">Help resources</Heading>