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

[jbalsas]

From deprecate/metal-position#4 by @kienD

It would be useful to be able to specify the size of the space you would like between the element and alignElement for the Align.getAlignRegion method.

I think this could be done by adding a parameter that accepts a number value to the Align.getAlignRegion method for the spacing size and then add or subtract the value of the spacing parameter to the values in each of the switch statements.

The parameter will probably need to be added to other methods that use Align.getAlignRegion like Align.align as well.

[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,