Added button busy animation #6656
Conversation
| <Button | ||
| primary | ||
| busy={{ | ||
| state: busy, |
There was a problem hiding this comment.
Would it make more sense for busy to be a boolean. Then the "success" state would automatically rendered for "X" amount of time when busy changes from true to false?
There was a problem hiding this comment.
Pausing now to think about what happens if a button is busy, then the process fails..
so maybe scratch that.
There was a problem hiding this comment.
Based on our discussion yesterday evening I changed busy to be a boolean. I changed messages to no longer be nested within busy and instead just a prop on Button. I also added a success prop that is a boolean.
| 100% { transform: scale(1); } | ||
| `; | ||
|
|
||
| export const GrowCheckmark = styled(FormCheckmark)` |
There was a problem hiding this comment.
We've been talking about leaning away from use of "Form" icons --> wondering if we should use the normal "Checkmark" here. @ericsoderberghp
There was a problem hiding this comment.
I tried using the regular 'Checkmark' icon but the sizing looks off. Here is the default size:
And here is the small size:
This is what is looks like with FormCheckmark:
There was a problem hiding this comment.
I think we should ensure it looks reasonable with the grommet theme as well.
For the HPE theme, this will be resolved with the icon sizing work Taylor is doing.
There was a problem hiding this comment.
Here are the different options in the grommet theme:
Checkmark medium size:
Checkmark small size:
FormCheckmark:
There was a problem hiding this comment.
I tested with the grommet-theme-hpe next-stable and grommet-icons stable. Here is the Checkmark icon with the default size:
This feels reasonable to me
What does this PR do?
Adds a
busyprop to button to support an animation while button is loading or waiting for something. The animation also indicates when the button action succeeds.Where should the reviewer start?
What testing has been done on this PR?
Added a story
How should this be manually tested?
Do Jest tests follow these best practices?
Planning to go back in and add a jest test
screenis used for querying.userEventis used in place offireEvent.asFragment()is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
grommet/hpe-design-system#3090
closes grommet/hpe-design-system#3174
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Yes
Should this PR be mentioned in the release notes?
Yes
Is this change backwards compatible or is it a breaking change?
backwards compatible