FormTokenField: Added Padding to resolve close button overlap issue

[akasunil]

What?

Fixed issue of close button overlap while isBorderless prop is true in FormTokenField component.

Why?

FIx #41447

Testing Instructions

Please include step by step instructions on how to test this PR.

1. Open a Post or Page edit.
2. Go to tags input.
3. Add tags and check design.

Screenshots or screencast

[mirka]

Thanks for the patch!

I can see the CSS structure is not in an optimal place to begin with. For example, the button outline is already too close to the text in the default variant, and starts to overlap text in the borderless variant. And the default/borderless switching really shouldn't be this hacky.

CleanShot.2022-06-06.at.20.56.08.mp4

But I understand that a proper fix requires a bit more in-depth reworking of the elements. So I'm fine with merging the bandaid fix in this PR for now, as it is at least incrementally better and doesn't add any complexity that would be hard to remove when refactoring.

I'd just like to rope in @jameskoster for a quick design check on the spacings. (Bonus: James, it would be cool if you could give us some updated mockups of this component so the button isn't jammed and has the newer look & feel 🙂 Not necessary for this PR though.)

[jameskoster]

Here's what I see:

To my eye the X looks a little too close to the text. I think we can increase that to 24px ($grid-unit-30), which also helps (a little) with the outline issue:

---

Agree this component could use some design love. I'm not sure about the history, but I don't know that we really need the 'borderless' variant, there's probably more value in a consistent appearance? It's especially strange since neither variant has a border :)

[mirka]

@sunil25393 Thanks for updating! If you could add a brief changelog entry, this PR is ready to merge 👍

[mirka]

Thanks! 🚀