Proposal: add icon-anchor property

[lbud]

This PR adds icon-anchor, which behaves exactly like text-anchor. There is no existing ticket on adding icon-anchor 🙊 but I think it's useful in doing things like aligning SDF pins/markers to point to their source Point rather than always being centered/requiring extra space. Incidentally, this was also discussed recently in #5129 (comment). The implementation is very straightforward as it just reuses text-anchor code.

If everyone is 👍 on this I'll work on a native PR as well.

Launch Checklist

• briefly describe the changes in this PR
• write tests for all new functionality
• document any changes to public APIs
• manually test the debug page
• mapbox-gl-native PR Add icon-anchor property mapbox-gl-native#9849
• update SDK support tables

[ChrisLoer]

Looks great!

When I was trying to make sure I understood how the changes worked, I modified some of the tests to use text-anchor and icon-anchor simultaneously with different values. As far as I can tell, the two work totally independently without any problem. Is there any case where we'd want something like an "auto" value for icon-anchor that followed the value of text-anchor? I'm thinking of a situation where you're using icon-text-fit to use an icon as background for a label.

Just curious, why is the branch called iconOffset? You were starting to work on #5129?

[jfirebaugh]

👍 Kind of surprising we didn't implement this until now.

[lbud]

Just curious, why is the branch called iconOffset

🤦‍♀️ just a typo 😬 @ChrisLoer — this was totally unrelated to #5129, have not touched that.

Is there any case where we'd want something like an "auto" value for icon-anchor that followed the value of text-anchor? I'm thinking of a situation where you're using icon-text-fit to use an icon as background for a label.

Good question — @nickidlugash? I'd be inclined to say no as it seems a bit prescriptive about combining text and icons — when using an icon as a background for a label you'd want both to use the same anchor, but for e.g. placing a label underneath an icon (in the y direction rather than z) you could use icon-anchor: bottom and text-anchor: top (this could potentially be an improvement on the way I assume designers currently do it, using -offset properties).

[nickidlugash]

Awesome! 🎉

Is there any case where we'd want something like an "auto" value for icon-anchor that followed the value of text-anchor? I'm thinking of a situation where you're using icon-text-fit to use an icon as background for a label.

Good question — @nickidlugash? I'd be inclined to say no as it seems a bit prescriptive about combining text and icons

I think I would agree with @lbud here –  icon+text position relationships are varied enough across use cases that I think it's better to stay agnostic. I think an auto value is most useful in the spec when there is a clear case for it to be the default value, which I don't think there is here.