Button: Place children before the icon when iconPosition is "right"

[t-hamano]

Should be able to close #44042

What?

This PR renders children in front of the icon in the Button component when iconPosition is set to right. This change will always render the icon last if both children, text are used and iconPositon is right.

Example code:

<Button
	variant="primary"
	icon={ help }
	text="TextProp"
	iconPosition="right"
>
	TextChildren
</Button>

Before

After

Why?

In #44042, when the Button component has an icon, some issues were reported regarding the spacing and ordering between the icon and text.

These issues have been fixed in stages as a result of the following PRs.

• gap is applied if the button has an icon: Update has-text has-icon button spacing #50277
• The has-text class is now applied not only when children is present, but also when the text prop is present: Components: Fix logic of has-text class addition in Button #56949

However, the only problem still unresolved is that the icon is rendered before the children, even though the iconPosition is right.

How?

Simply swapped the order in which children is rendered. This change will result in a visual change for consumers using children, text, icon, iconPosition="right". However, there are probably no users who use both children and text and expect an icon to appear between them.

Note

As discussed in #56949, it seems that deprecation of the text prop is also being considered.

Testing Instructions

• Access Storybook and open the default story for the Button component: http://localhost:50240/?path=/story/components-button--default
• Enter a string into the text prop and apply an icon via the control panel.
• Manipulate the iconPosition prop to ensure that it is always rendered to the left or right.

Screenshots or screencast

a709dc82413570b845c8dde54ed9f311.mp4

[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: t-hamano <[email protected]>
Co-authored-by: andrewhayward <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: mirka <[email protected]>

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

[andrewhayward]

Change looks good 🚀

Bit weird how TextProp and TextChildren smoosh into each other, but that's outside the scope of this PR!

[tyxla]

Looks good, thanks!

Bit weird how TextProp and TextChildren smoosh into each other, but that's outside the scope of this PR!

Yeah, but I guess this is limited to this example. I'd say that if we attempt to fix this, it might actually break, or unexpectedly alter other existing usages that use either only children or text.

[t-hamano]

Thanks for the PR!

Bit weird how TextProp and TextChildren smoosh into each other, but that's outside the scope of this PR!

Based on my experience, I expect that there are almost no cases where the text prop and children are used together 😄