fix busy button dots to be smaller when button is small #7235
Conversation
| const Dot = styled(Box)` | ||
| background-color: currentColor; | ||
| width: 8px; | ||
| height: 8px; | ||
| width: ${(props) => (props.size.size === 'small' ? '4px' : '8px')}; |
There was a problem hiding this comment.
It's not necessarily that the button has prop size="small" but rather that if the label is really short, the width of the button is more narrow, causing the "dots" to squish.
I'm wondering if instead these "Dot"s should just have a flex={false}?
There was a problem hiding this comment.
If the dots have flex={false} and the label is really short would the Button size grow horizontally when it enters the busy state?
There was a problem hiding this comment.
aw I didnt check the label so even on a medium size button with a small label this is happening
There was a problem hiding this comment.
☝️
so yes when we have flex={false} then the dots are not in the correct space. We may need to check the size of the button if it is under 100px seems to be where it is happening then change the values.
Screen.Recording.2024-05-20.at.5.03.07.PM.mov
|
Converting to draft for now.. |
What does this PR do?
This PR changes the size of the dots in the busy animation button
Where should the reviewer start?
busyAnimation.js
What testing has been done on this PR?
storybook
How should this be manually tested?
storybook
Do Jest tests follow these best practices?
screenis used for querying.asFragment()is used for snapshot testing.Any background context you want to provide?
#7225
What are the relevant issues?
closes #7225
Screenshots (if appropriate)
Do the grommet docs need to be updated?
no
Should this PR be mentioned in the release notes?
maybe
Is this change backwards compatible or is it a breaking change?
backwards compatible