vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 763 forks source link

topic/loading button min width #6573

Closed steve-haar closed 2 years ago

steve-haar commented 2 years ago

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Initializing a button to loading will cause it to have the width of the button as if it only contained the loading spinner. Subsequently (or just not initially) setting the button to loading, the button will have the width of the button in its default state.

Issue Number: https://github.com/vmware/clarity/issues/5967

What is the new behavior?

Loading buttons will always have a minimum width so that the spinner will fully show.

Does this PR introduce a breaking change?

Other information

vmwclabot commented 2 years ago

@steve-haar, you must sign every commit in this pull request acknowledging our Developer Certificate of Origin before your changes are merged. This can be done by adding Signed-off-by: John Doe <john.doe@email.org> to the last line of each Git commit message. The e-mail address used to sign must match the e-mail address of the Git author. Click here to view the Developer Certificate of Origin agreement.

netlify[bot] commented 2 years ago

✔️ Deploy Preview for zzz-angular-clarity-design-old ready!

🔨 Explore the source changes: 36f95d3c353604b8ad43ce3520d7788357ce8ad4

🔍 Inspect the deploy log: https://app.netlify.com/sites/zzz-angular-clarity-design-old/deploys/61f025e6f29d260007886199

😎 Browse the preview: https://deploy-preview-6573--zzz-angular-clarity-design-old.netlify.app

Shijir commented 2 years ago

@steve-haar could you post the before/after screenshots of this fix?

steve-haar commented 2 years ago

@Shijir

Old:

https://user-images.githubusercontent.com/2460465/150169198-4c0ce9f5-52ad-467b-9db6-de6efe2113e4.mov

New:

https://user-images.githubusercontent.com/2460465/150169209-225f95dd-7e02-4c6c-83b4-32ad0b68eb77.mov