Skip to content

[EuiButtonIcon] Add isLoading prop#5668

Merged
elizabetdev merged 8 commits intoelastic:mainfrom
elizabetdev:EuiButtonIcon-isLoading
Mar 2, 2022
Merged

[EuiButtonIcon] Add isLoading prop#5668
elizabetdev merged 8 commits intoelastic:mainfrom
elizabetdev:EuiButtonIcon-isLoading

Conversation

@elizabetdev
Copy link
Copy Markdown
Contributor

@elizabetdev elizabetdev commented Mar 1, 2022

Summary

This PR adds an isLoading prop to EuiButtonIcon and closes #5649. It follows the other buttons' patterns, when the isLoading is true the button gets disabled, and the icon is replaced with a EuiLoadingSpinner.

isLoading@2x

The EuiButtonIcon can have different icon sizes. So the icon size also dictates the size of the EuiLoadingSpinner. For this reason and to match all the EuiButtonIcon sizes a new size was introduced to the EuiLoadingSpinner: "XXL".

size@2x

There is one exception. If consumers pass "original" to iconSize the EuiLoadingSpinner will get its default size "m".

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • [ ] Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • [ ] Added documentation
  • [ ] Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_5668/

1 similar comment
@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_5668/

@elizabetdev elizabetdev marked this pull request as ready for review March 1, 2022 14:31
@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_5668/

Copy link
Copy Markdown
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great to me - I have one very minor Typescript suggestion, but that's it. I QA'd in the playground and it looked like it was working perfectly 👍


// `original` size doesn't exist in `EuiLoadingSpinner`
// when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
// so it gets the default size
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super appreciate this comment for context!

@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_5668/

@elizabetdev
Copy link
Copy Markdown
Contributor Author

Thanks @constancecchen 🎉

undefined should be a valid type for size - you should be able to remove the ! without issue

I fixed it. 👍🏽

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[EuiButtonIcon] Add isLoading prop to match EuiButton

3 participants