Style engine: refine Box type

[ciampo]

Description

Follow-up to this conversation, this PR proposes a more advanced type for Box which is closer to the actual values that Box is going to assume.

Testing Instructions

Screenshots

Types of changes

Enhancement

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
• I've updated related schemas if appropriate.

[andrewserong]

Oh, this is clever, thanks for the follow-up @ciampo! The other use case that we will have for the Box type that isn't covered yet is when we add in position support, where the lower case top, right, bottom, and left will be used directly. Is there a way to have those words be lowercase if BoxVariants is an empty string?

(For reference, here's an early WIP PR looking at adding in position support — it'll likely change a lot, but just for context as to why it was on my mind 😀)

[ciampo]

You raise a good point!

I went ahead and allowed BoxVariant to be undefined — in that case, the CSS props used as types are going to be the lowercase variants.

I quickly tested it in my IDE and it seems to work as expected (note that top has a different computed type depending on the parent object being margin, padding or box):

box-variants-ts.mp4

[andrewserong]

Nice one, thanks @ciampo — that's looking good to me now, and confirmed that it's working the same in my IDE as it is in your screengrab 👍

Looks like there's a failing e2e unrelated to this PR, so it might need either a rebase or to kick off the tests again before you merge it in.

Thanks again for the follow-up!