[UI Components]: Fix View position property documentation

[ncardeli]

Background

The position property documentation is difficult to read.

Solution

Fix View component's position property documentation.

🎩

Docs: https://shopify-dev.checkout-web-api-docs-q8qm.nicolas-cardelino.us.spin.dev/docs/api/checkout-ui-extensions/unstable/components/structure/view#viewprops-propertydetail-position

Checklist

• [x] I have :tophat:'d these changes
• [x] I have updated relevant documentation

[oliverigor]

I believe that theres no better way to show the docs due to the way they are extracted from the types.

I agree with Dori, that in a next step we should leverage the examples section and give examples to make it clear to developers when/how to use it.

[ncardeli]

From an external docs perspective, I'm still finding the docs pretty hard to follow and parse into something actionable for coding. I don't know if we even have control over this with the way the docs are generated, but for example, why does it give me all options for PositionBlockEndInlineEnd but shows undefined for the not-allowed ones? How would I know that means not allowed?

Agree here, not sure if we can get something better than this.

Changes how the View is positioned. When setting position, use properties that affect each axis only once.

<View position={blockStart, inlineEnd} /> // Allowed; affects the `block` and `inline` axes once each
<View position={inlineStart, blockEnd} /> // Allowed; affects the `inline` and `block` axes once each
<View position={blockStart, blockEnd} /> // Not allowed; affects the `block` axis twice
<View position={inlineStart, inlineEnd} /> // Not allowed; affects the `inline` axis twice

Nice suggestion, thank you.

Or if this is too much for the prop section, we could consider adding a dedicated example with description in the unused Best Practices or Examples sections. It could show allowed position settings/combinations with a visual example for clarity. What do you think? 🤔

Makes sense, for now we need to improve these reference docs, but 100% agree that we need more examples.