HStack, VStack: Stop passing invalid props

[mirka]

Fixes a bug surfaced in #59193

What?

Stops the HStack and VStack components from passing through invalid props when a component is passed to the as prop.

Why?

The useHStack/useVStack hooks internally used the useFlex hook to generate props, which included the isColumn prop. This prop is actually used in the Flex component logic and not passed through to the underlying element, but was neither used nor omitted in the HStack/VStack components and thus passed through.

This is fine if an intrinsic element (such as "span") is used for the as prop, since the underlying View component (i.e. an Emotion-styled component) will correctly ignore non-intrinsic props. It can become a problem when a non-Emotion custom component is used for the as prop, because React will throw an error about the invalid prop.

How?

Omit the isColumn prop from the return props of the useHStack hook, which will also remove it from the useVStack hook.

Testing Instructions

1. Check out 65b9624, which adds the unit tests for this bug. Tests should fail.
2. After the commit with the fix, the tests should pass.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: tyxla <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mirka]

This return type was wrong because it wasn't omitting the deprecated isReversed prop, which is specifically being omitted in this hook. It wasn't causing a TS error per se, but it was making it look like useFlex could return another invalid prop (isReversed) in addition to isColumn.

[aaronrobertshaw]

Thanks for the fix and unit tests @mirka 👍

LGTM

Before	After

[t-hamano]

Thank you for the quick fix 🙏

I just want to ask you one thing: After this PR is merged, it's safe to use the implementation below, right?

<HStack as={ motion.div }></HStack>
<VStack as={ motion.div }></VStack>

[tyxla]

Nice and straightforward, thanks! 🚀

[mirka]

After this PR is merged, it's safe to use the implementation below, right?

<HStack as={ motion.div }></HStack>
<VStack as={ motion.div }></VStack>

@t-hamano That's correct 👍