Bug/make chec-options-menu popout

[john-raymon]

• temporarily solves Table overflow prevents popovers showing over them #81
• replaces relative with static position on root ChecOptionsMenu element to allow popping out of BasePopover, removes need of left position, makes it default positioning without needing to specify left. (not sure if should also remove the require method, using the include, now it only accepts one value)

https://deploy-preview-83--angry-joliot-6c09db.netlify.com/?path=/story/components-options-menu--default-story

[john-raymon]

oops let me fix the commits

edit: fixed

[ScopeyNZ]

I don't know if this is an existing bug, but if the menu is on the right side of the page, it overflows to the right. If that's an existing bug I'm okay merging this.

I really think the "real" solution here is to use something like popper, which takes care of all of these annoying edge cases for us.

[john-raymon]

I don't know if this is an existing bug, but if the menu is on the right side of the page, it overflows to the right. If that's an existing bug I'm okay merging this.

I really think the "real" solution here is to use something like popper, which takes care of all of these annoying edge cases for us.

Oooh right I didn't think of that. Let me look into it now and implement it within this
PR.

[john-raymon]

@robbieaverill @ScopeyNZ setting up vue-popperjs, despite it using deprecated slot= syntax, see RobinCK/vue-popper#88. Maybe we use a fork of ours with that issue resolved, seems easy.

Either way, works with the deprecated slot syntax name

[john-raymon]

implemented vue-popperjs, using forked version accepting showPopperDefault prop initialize showPopper state of vue-popperjs . (https://github.com/john-raymon/vue-popper/blob/76cc42c971f799cbd5c717b5bb33ae90a9ab61ea/src/component/popper.js.vue#L266)

[john-raymon]

added shadow-md to BasePopover to match Figma designs.

[robbieaverill]

The menus don't have alignment any more - for example, there's a "right aligned" story for the options menu, but all of the menus show up below the toggle, evenly spaced either side of it.

Otherwise, I would suggest being careful using libraries with low popularity - they're likely to not be well maintained (for example, this library hasn't had any commits this year, and the issue you linked hasn't has a maintainer respond to it).

Was using popper.js directly not an option?

[john-raymon]

The menus don't have alignment any more - for example, there's a "right aligned" story for the options menu, but all of the menus show up below the toggle, evenly spaced either side of it.

Otherwise, I would suggest being careful using libraries with low popularity - they're likely to not be well maintained (for example, this library hasn't had any commits this year, and the issue you linked hasn't has a maintainer respond to it).

Was using popper.js directly not an option?

Temporarily not center aligning below the button, but it's working with popper.js now respecting overflow and flipping too if necessary.