Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiButtonIcon] Add isLoading prop #5668

Merged
merged 8 commits into from
Mar 2, 2022

Conversation

elizabetdev
Copy link
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

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

1 similar comment
@kibanamachine
Copy link

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

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

Copy link
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 👍

src/components/button/button_icon/button_icon.tsx Outdated Show resolved Hide resolved
@@ -173,6 +180,15 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
);
}

// `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
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

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

@elizabetdev
Copy link
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