`TextField`: `loading` and `clearButton` prop cause `TextField` width to grow/shrink when toggled

[LA1CH3]

Summary

1. When TextField loading prop is toggled, the input width grows/shrinks as the spinner icon appears.
2. When TextField has a clearButton prop and the input is focused, the input width grows to accommodate the clear button.

Expected behavior

The loading spinner and clearButton should appear in the current width of the input without causing reflow.

Actual behavior

Example video

https://github.com/Shopify/polaris/assets/11605788/32820f8b-b70a-4a62-b725-c0e16733eaaa

Steps to reproduce

• Toggle loading prop on a TextField
• Use clearButton prop on TextField

Are you using React components?

Yes

Polaris version number

12.15.0

Browser

Chrome

Device

MacBook Pro

[github-actions[bot]]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.