Adds alignment, distribution, and position icons

[ryankeairns]

Fixes #2067

Summary

• Adds the following glpyhs to EuiIcon
• Adds new 'Editor controls' section to the Icons docs
• Picks up a missed change on my previous PR for the popout glyph

Note: Used a naming patter of editorItemAlign* since 1) there are already editorAlign* icons and 2) to avoid the order from getting all jumbled.

Preview

Sketch pixel grid

• 1px padding around each; the center and middle have 2px pad along one side to make the one-pixel bar intersect precisely at center of the rounded rectangle (which is 1px shorter in these two cases).

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[cchaos]

This is great! What are your thoughts on making a few of these icon names a little more succinct.

Examples:

• editorItemAlignBottom Item --> editorAlignBottom
• editorPositionBottomLeft Position --> editorBottomLeft
• editorDistributeHorizontal ✅

Since you're already appending editor I think it already lends itself to indicating that this will be for "visual" styling. Which is sort of what item and position indicate.

[ryankeairns]

Somewhat unfortunately, we already have editorAlignLeft|Center|Right (the text align icons) so I'm needing to add an extra word. Given that, I ultimately chose to put Item in front of Align so that they would remain in order in a list (e.g. in the code and docs). I figured if I had to add the extra word, then I might as well make it more useful :)

We could remove the word Position, but I like that it keeps the pattern (and the order) similar to the others (Align, Distribute).

I agree they are a little long, but there is some necessity along with organizational and consistency benefits.

[ryankeairns]

Would it help to shorten Distribute and Position to Dist and Pos?

[cchaos]

Ahh yeah, I didn't realize we were already using the aligns for text alignment. We really kind of pigeon holed ourselves on that one. Then I think the names you have are good and will be easier to expand up on in the future.