Skip to content

[ProgressBar] Add animated prop #4251

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
Jun 7, 2021
Merged

[ProgressBar] Add animated prop #4251

merged 1 commit into from
Jun 7, 2021

Conversation

@alololox
Copy link
Contributor

@alololox alololox commented Jun 4, 2021

WHY are these changes introduced?

We have a use case in the admin app to render a ProgressBar without the load-in animation: https://github.com/Shopify/taxes/issues/2184

WHAT is this pull request doing?

Sets the animated prop to default to true, which conditionally includes the .Animated class.

How to 🎩

Copy-paste this code in playground/Playground.tsx: 
import React from 'react';

import {Page, ProgressBar} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <ProgressBar progress={50} animated={false} />
    </Page>
  );
}

🎩 checklist

  • Tested on mobile
  • Tested on multiple browsers
  • Tested for accessibility
  • Updated the component's README.md with documentation changes
  • Tophatted documentation changes in the style guide
  • For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

@alololox alololox force-pushed the progressbar/animated branch from a523294 to 1ef800e Compare June 4, 2021 18:20
@github-actions
Copy link
Contributor

github-actions bot commented Jun 4, 2021 •
edited
Loading

size-limit report

Path Size
cjs 141.91 KB (+0.02% 🔺)
esm 95.52 KB (+0.03% 🔺)
esnext 138.71 KB (+0.04% 🔺)
css 33.73 KB (+0.03% 🔺)

@alololox alololox self-assigned this Jun 4, 2021
@alololox alololox marked this pull request as ready for review June 4, 2021 18:26
alololox
alololox commented Jun 4, 2021
View reviewed changes
src/components/ProgressBar/tests/ProgressBar.test.tsx
it('sets the progress element to 80 when the progress is 80', () => {
const progress = mountWithAppProvider(<ProgressBar progress={80} />);
expect(progress.find('progress').prop('value')).toBe(80);
const progress = mountWithApp(<ProgressBar progress={80} />);
Copy link
Contributor Author

@alololox alololox Jun 4, 2021

Choose a reason for hiding this comment

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

Just updating to not use the legacy test suite

Copy link

@benkovy benkovy Jun 4, 2021

Choose a reason for hiding this comment

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

You're a gentleman and a scholar!

@alololox alololox force-pushed the progressbar/animated branch from 1ef800e to 462eada Compare June 4, 2021 19:19
pedrodurek
pedrodurek approved these changes Jun 4, 2021
View reviewed changes
Copy link
Member

@pedrodurek pedrodurek left a comment

Choose a reason for hiding this comment

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

LGTM 🎉

benkovy
benkovy approved these changes Jun 7, 2021
View reviewed changes
src/components/ProgressBar/tests/ProgressBar.test.tsx
it('sets the progress element to 80 when the progress is 80', () => {
const progress = mountWithAppProvider(<ProgressBar progress={80} />);
expect(progress.find('progress').prop('value')).toBe(80);
const progress = mountWithApp(<ProgressBar progress={80} />);
Copy link

@benkovy benkovy Jun 4, 2021

Choose a reason for hiding this comment

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

You're a gentleman and a scholar!

@alololox alololox merged commit f4907ab into main Jun 7, 2021
@alololox alololox deleted the progressbar/animated branch June 7, 2021 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pedrodurek pedrodurek pedrodurek approved these changes

@benkovy benkovy benkovy approved these changes

Assignees

@alololox alololox

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@alololox @pedrodurek @benkovy