[metal-position] Add ability to specify the size of the space between the element and alignElement about metal-plugins

[jbalsas]

@Robert-Frampton

Hey @kienD,

Makes sense to me. Out of curiosity, what's the workaround you guys are currently using?

Also, it seems like it would be easy to add something just to the align method, rather than messing with getAlignRegion.

For example, a param called offset which would look like {top: 2, bottom: -4}, and you could just modify bestRegion with those values here.

[jbalsas]

@kienD

@Robert-Frampton,

We would add an offset to the side of the element that Align.align would return by adding either of the following styles to the element:

`margin-X: ${offset}px`

or

`{transform: translateX(${offset})px}`

One of the issues with this was that it possible to run into the following infinite loop:
1. The element will render near the window edge.
2. The element will try to render at a different position because it's overflowing the window.
3. The element will try to render near the edge again because it was the preferred location.

I'll look into what you mentioned and will send a PR in.

Thanks!

[jbalsas]

@jwu910

Once this gets added in, Loop will be able to fix the issue with the indecisive hover modal! Looks cool!

[jbalsas]

@kienD

@jwu910,

I don't think this will fix your issue with the indecisive hover modals.

@Robert-Frampton,

After reading @jwu910's comment, I realized that the implementation suggested above would probably introduce a bug where the element can render off screen if the offset is large enough and if autoBestAlign = true.

I will try to look into a way we can add and account for the offset in the suggestAlignBestRegion calculation as well.

Thanks,