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

fix(app): Fix spinner sizing on ODD and desktop #15862

Merged
merged 5 commits into from
Aug 1, 2024

Conversation

sfoster1
Copy link
Member

@sfoster1 sfoster1 commented Jul 31, 2024

There's a lot of places in the ODD that return either an InProgressModal
or a SimpleWizardBody. This used to be fine because the InProgressMOdal
had sizing, but now it doesn't so that it can be used inside other
components, so those places all have an in-progress modal collapsed on
top of the spinner icon.

To fix this, let's make a component that is explicitly "InProgressModal
designed to work alongside SimpleWizardBody", defined in
SimpleWizardBody. We can make sure it's the same by splittin SWB into a
container component and a contents component, and reusing the container.
The container is also where styleprops go.

Finally, take all the component that return (cond ? :
...</SimpleWizardBody) and make them use a
SimpleWizardInProgressBody instead of an InProgressModal. Since the
SimpleWizardInProgressBody uses the same sizing as the SWB, the result
will always be the correct size.

Testing

  • On the ODD, change pipette and pipette calibration have the right size spinners
  • On the ODD, change gripper and gripper calibration have the right size spinners

There's a lot of places in the ODD that return either an InProgressModal
or a SimpleWizardBody. This used to be fine because the InProgressMOdal
had sizing, but now it doesn't so that it can be used inside other
components, so those places all have an in-progress modal collapsed on
top of the spinner icon.

To fix this, let's make a component that is explicitly "InProgressModal
designed to work alongside SimpleWizardBody", defined in
SimpleWizardBody. We can make sure it's the same by splittin SWB into a
container component and a contents component, and reusing the container.
The container is also where styleprops go.
Take all the component that return (cond ? <InProgressModal /> :
<SimpleWizardBody>...</SimpleWizardBody) and make them use a
SimpleWizardInProgressBody instead of an InProgressModal. Since the
SimpleWizardInProgressBody uses the same sizing as the SWB, the result
will always be the correct size.

Closes RQA-2883
@sfoster1 sfoster1 requested a review from a team as a code owner July 31, 2024 21:11
@sfoster1 sfoster1 requested review from mjhuff and removed request for a team July 31, 2024 21:11
Copy link
Contributor

@mjhuff mjhuff left a comment

Choose a reason for hiding this comment

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

After convo, should be good with the following changes to InProgressModal. We should probably ask design to formalize this as a component at some point, too.

  • grey60 for both Desktop/ODD.
  • Size on ODD is 100px, size on desktop is 82px.
  • Opacity is 100% on both.
  • Grid gap probably needs to be formalized by design?

@sfoster1 sfoster1 changed the title fix(app): Fix spinner sizing on ODD fix(app): Fix spinner sizing on ODD and desktop Aug 1, 2024
@sfoster1 sfoster1 merged commit b574712 into edge Aug 1, 2024
30 checks passed
@sfoster1 sfoster1 deleted the RQA-2883-fix-spinners-in-simplewizards branch August 1, 2024 14:26
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.

2 participants