Button: Place children before the icon when iconPosition
is "right"
#59489
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Should be able to close #44042
What?
This PR renders children in front of the icon in the
Button
component wheniconPosition
is set toright
. This change will always render the icon last if bothchildren
,text
are used andiconPositon
isright
.Example code:
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 #50277has-text
class is now applied not only whenchildren
is present, but also when thetext
prop is present: Components: Fix logic ofhas-text
class addition in Button #56949However, the only problem still unresolved is that the icon is rendered before the
children
, even though theiconPosition
isright
.How?
Simply swapped the order in which
children
is rendered. This change will result in a visual change for consumers usingchildren
,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
text
prop and apply an icon via the control panel.iconPosition
prop to ensure that it is always rendered to the left or right.Screenshots or screencast
a709dc82413570b845c8dde54ed9f311.mp4