Components with flex items should be aligned on cross axis.

[alphashr]

📖 Description

Many components use inline-flex for their layout. Couple of these components such as button use start, content and end slot in their template. These slots need to be aligned on the cross axis.

The issue gets more obvious when a control with default look sits next to a same control with an icon or svg within control's start slot or end slot.

🎫 Issues

#5414

👩‍💻 Reviewer Notes

This PR is created to discuss alternative solutions as well. So feel free to comment if you have any objection on the approach.

📑 Test Plan

I am not sure if it breaks any prior usage by users. Maybe they faced this issue and fixed it manually like what has mentioned here? Even in that case this change wouldn't break their custom styling.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

⏭ Next Steps

None.

[scomea]

Perhaps we can bundle this change with the visual refresh that @khamudom is working on to reduce random style changes if we're worried it might interfere with existing implementations?

[alphashr]

Perhaps we can bundle this change with the visual refresh that @khamudom is working on to reduce random style changes if we're worried it might interfere with existing implementations?

Sure, are @khamudom changes going to merge together? and should I take any action?

[chrisdholt]

Thanks @alphashr!

[chrisdholt]

Perhaps we can bundle this change with the visual refresh that @khamudom is working on to reduce random style changes if we're worried it might interfere with existing implementations?

Sure, are @khamudom changes going to merge together? and should I take any action?

The visual changes are going to be a major version which means that this fix would only be available once updating - I think it's worthwhile to not wait for that.

[chrisdholt]

@EisenbergEffect I'm going to merge this later, ideally it fixes a number of problems for folks - it could bit a few that solved this locally, but LGTM for the most part. Let me know if you have hesitations with merging this.

[chrisdholt]

@alphashr thanks for your patience on this - getting this merged once the build passes :)

[chrisdholt]

Thank you @alphashr!