refactor: fix alignment of menu dropdown components

[dated]

Summary

The position of the MenuDropdown components is currently changed by translating the element relative to its own position. This is error prone and exact alignment of multiple components becomes problematic, as can be see on the profile edition page:

With this PR the components are positioned relative to their parents and the prop type has been changed to be an object with the following base values. x or y can be ommitted when passing the prop.

position = {
  x: '0',
  y: '120%'
}

Checklist

• Documentation (if necessary)
• Tests (if necessary)
• Ready to be merged

[ghost]

Thanks for submitting this pull request! A maintainer will review this in the next few days and explicitly select labels so you know what's going on.

If no reviewer appears after a week, a reminder will be sent out.

[brenopolanski]

@dated I like your changes. But I was thinking, perhaps a better solution would be to close the dropdown menu if there is a click outside the element. Like normal behavior of a native <select />. Make sense?

See how it looks opening all the dropdown menus:

[dated]

Yea, I'll fix that as well (it's like this on develop also)

[alexbarnsley]

Would you mind adding a test for the adjustedPosition computed property please

[dated]

Would you mind adding a test for the adjustedPosition computed property please

done, cd5e3fb

[brenopolanski]

@dated have you done this: "close any sibling when opening a menu" ?

[dated]

Not yet, I'll remove the [WIP] as soon as I'm done.

[alexbarnsley]

Do the "close any sibling when opening a menu" in another PR. It's an existing issue not related to this

[dated]

Thanks @alexbarnsley, I'll open up an issue for it and finish my other stuff first before coming back to it.

[ghost]

A member has approved this PR. A maintainer will merge this PR shortly. If it shouldn't be merged yet, please leave a comment saying so and we'll wait.

Thank you for your contribution!

[ghost]

Your pull request has been merged and marked as tier 4. It will earn you $20 USD.