Skip to content

(Spinner) fix: keep the correct size #6277

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Aug 23, 2022
Merged

(Spinner) fix: keep the correct size #6277

merged 1 commit into from
Aug 23, 2022

Conversation

buberdds
Copy link
Contributor

@buberdds buberdds commented Aug 13, 2022 •
edited
Loading

What does this PR do?

Adds min-width css rule to Spinner to keep correct size. Usually, the issue is visible on mobile devices where content can squeeze Spinner component.

Where should the reviewer start?

Spinner.js

What testing has been done on this PR?

Manual/snapshot

How should this be manually tested?

Enable Responsive Design mode in dev tools and validate Storybook

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • userEvent is used in place of fireEvent.
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

Spinner is not keeping its original size.

What are the relevant issues?

Screenshots (if a appropriate)

Screenshot 2022-08-13 at 11 42 36

with min-width
Screenshot 2022-08-13 at 11 53 16

Do the grommet docs need to be updated?

No

Should this PR be mentioned in the release notes?

No

Is this change backwards compatible or is it a breaking change?

backwards compatible

@britt6612
Copy link
Collaborator

britt6612 commented Aug 18, 2022 •
edited
Loading

@buberdds Thank you for submitting this PR. Trying to understand the issue a little more is it the sizes of the spinner in which your adding the min-width also can you paste your code as to how you got these spinners? they look strange so want to better understand.
Screen Shot 2022-08-18 at 3 45 26 PM

@buberdds
Copy link
Contributor Author

buberdds commented Aug 19, 2022 •
edited
Loading

They way I use Spinner is similar to storybook example. Steps to repro

  • src/js/components/Spinner/stories/Size.js
  • replace L~10
 <Text size={size}>{size}</Text>

with

<Text size={size}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ante in nulla tincidunt sollicitudin.
</Text>
  • open dev tools and toggle device toolbar (mobile device preview mode)

@britt6612
Copy link
Collaborator

@buberdds thank you I see the issue sorry I didn't realize this was on a smaller screen makes sense now. The min-width I agree with. Can we just change a couple of things? We try to avoid inline styles would you mind pulling it out?

const SpinnerBox = styled(Box)`
  min-width: ${(props) => props.width};
`;

const BasicSpinner = ({ ref, size, ...rest }) => (
  <SpinnerBox height={size} width={size} ref={ref} {...rest} />
);

@buberdds buberdds force-pushed the spinner branch 3 times, most recently from d84e0dd to 942ffa4 Compare August 22, 2022 18:11
jcfilben
jcfilben approved these changes Aug 23, 2022
View reviewed changes
Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Looks good!

ericsoderberghp
ericsoderberghp reviewed Aug 23, 2022
View reviewed changes
@buberdds buberdds force-pushed the spinner branch 2 times, most recently from 3dc5e5d to 619dd84 Compare August 23, 2022 17:36
@britt6612 britt6612 self-requested a review August 23, 2022 17:37
@buberdds buberdds changed the title (Spinner) fix: add min-width to keep correct size (Spinner) fix: keep the correct size Aug 23, 2022
@ericsoderberghp ericsoderberghp merged commit b8bf742 into grommet:master Aug 23, 2022
@buberdds buberdds mentioned this pull request Aug 23, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@britt6612 britt6612 britt6612 approved these changes

@jcfilben jcfilben jcfilben approved these changes

+1 more reviewer

@ericsoderberghp ericsoderberghp ericsoderberghp approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@buberdds @britt6612 @ericsoderberghp @jcfilben