Add Progress Bar Component #1773

aswinshenoy · 2019-02-28T11:37:11Z

Added Progress Bar Component support.

@interactivellama @futuremint, kindly review it, I will make any changes required.

Additional description

The progress bar component as found in SLDS has been ported to react, with almost all its functionality, and reusing the same classes.

Props Taken

id - HTML id for the component container
className - CSS classes to be added to tag with .slds-progress-bar.
label - Label for the progress bar, if provided will render as a descriptive progress bar
color - Color to be filled in the progress bar
thickness - Thickness of the progress bar
value - Percentage of progress completion, ranging [0, 100].

Limitations

Vertical Progress bar has not been implemented as of now, but can easily be added
Color, Radius are limited to already defined classes in SLDS.

Screenshots

Default -

With Label -

Color set to success -

Different Thickness -

Rounded -

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
npm run lint:fix has been run and linting passes.
Review the appropriate Storybook stories. Open http://localhost:9001/.
The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
Tests have been added for new props to prevent regressions in the future. See readme.
Review tests are passing in the browser. Open http://localhost:8001/.
Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
Tests have been added for new props to prevent regressions in the future. See readme.
Review the appropriate Storybook stories. Open http://localhost:9001/.
The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
Review tests are passing in the browser. Open http://localhost:8001/.
Review markup conforms to SLDS by looking at DOM snapshot strings.

Required only if there are markup / UX changes

Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

aswinshenoy · 2019-02-28T11:40:10Z

I learning and working on adding test cases, as per given instructions in the contribution guide. I will update with a patch, adding it in sometime soon. :)

interactivellama · 2019-02-28T18:42:31Z

@aswinshenoy Screenshots are looking great! I'll try to get you feedback on your props/API proposal soon.

aswinshenoy · 2019-03-01T11:30:13Z

@interactivellama meanwhile, I will add the component into components/component-docs.json, and also try writing tests.
Are multiple commits per PR okay?

Regards,

interactivellama · 2019-03-01T19:15:22Z

yes, multiple commits are fine.

tanhengyeow

Just some friendly pointers from me after taking a quick look at this PR :)

Can take them into consideration but I think @interactivellama would advice better 😄

components/progress-bar/index.jsx

interactivellama · 2019-03-06T07:57:39Z

Props proposal is approved. Please ping when you are ready for a review.

interactivellama · 2019-03-21T04:29:58Z

Props approved. Please proceed with tests, since this isn't interactive DOM and image snapshots should be enough.

@aswinshenoy The prop type for label should be able to be node and string.

interactivellama · 2019-03-21T04:30:35Z

Also, you have lint errors

aswinshenoy · 2019-03-26T10:19:52Z

I have added snapshot test, and written progress-bar.snapshot-test.jsx similar to that of progress-ring.snapshot-test.jsx.

…to pr/aswinshenoy/1773

interactivellama · 2019-04-16T22:42:17Z

@aswinshenoy Because I was unclear about how the Jest snapshot tests were to be created, I went ahead and pushed an update to your branch. 9dcb6d5#diff-ef6040eafe786a4a9723ca820a5e2566R43

The id prop in the examples need to be set so that the DOM snapshots are always the same when rendered.

aswinshenoy · 2019-04-20T09:27:55Z

@interactivellama I have pushed adding ids in the examples, and the tests have passed it seems :) Sorry, I was a bit late and inactive for some days.

interactivellama · 2019-04-22T17:27:11Z

@aswinshenoy I will be the last person to complain about being late and inactive (at least before and after the official GSoC time 😄 ).

interactivellama · 2019-04-25T20:00:13Z

As an aside, @aswinshenoy it's great that you have added some of the building block components that will be consumed by Setup Assistant.

move width to progress-bar__value

…to pr/aswinshenoy/1773 # Conflicts: # components/story-based-tests.js

interactivellama

I found a few bugs. Mostly the width issue.

interactivellama · 2019-04-26T04:57:38Z

components/progress-bar/index.jsx

+						this.props.className
+					)}
+					style={{
+						width: `${this.props.value}%`,


There isn't a gray background on the progress bar as in https://www.lightningdesignsystem.com/components/progress-bar/. This is because the "container" width is being set instead of slds-progress-bar__value.

Sorry, I must have been a little careless there. :( Looks perfect with your patch 👍

interactivellama · 2019-04-26T04:58:14Z

components/progress-bar/index.jsx

+				>
+					<span>{this.props.label}</span>
+					<span aria-hidden="true">
+						<strong>{this.props.value}% Complete</strong>


All text should be able to be changed with props in order to support internationalization.

True, I forgot about the internationalization part. Seems like you already fixed it with labels prop. Thank you :)

…eact into pr/aswinshenoy/1773 # Conflicts: # components/progress-bar/__examples__/default.jsx # components/progress-bar/__examples__/descriptive.jsx

interactivellama · 2019-04-26T07:29:58Z

Looks good! Thank you @aswinshenoy

aswinshenoy · 2019-04-26T07:37:18Z

@interactivellama It is wonderful to see it done :) I will looking forward for more 👍 Thank you so much for writing out the test, and doing all those changes. 💯 I had been a little sloppy on this, perhaps, sorry.

interactivellama · 2019-04-26T08:08:30Z

I just talked to a program manager today on an internal team, and they are looking to consume this and ScopedNotification, so I wanted to go ahead and get this these merged.

aswinshenoy · 2019-04-26T09:35:50Z

@interactivellama that's cool, thank you. The #1785 PR that adds ScopedNotifications also has also passed the tests and seems it is mergeable now after your fixes.

Add Progress Bar Component

3725d3b

salesforce-cla bot added the cla:signed label Feb 28, 2019

Add Progress Bar Entry in Component Docs

54b35dd

aswinshenoy force-pushed the progress-bar branch from 3e94f26 to 54b35dd Compare March 1, 2019 15:42

futuremint self-requested a review March 1, 2019 16:46

futuremint self-assigned this Mar 1, 2019

futuremint removed their request for review March 1, 2019 16:46

futuremint removed their assignment Mar 1, 2019

tanhengyeow reviewed Mar 2, 2019

View reviewed changes

components/progress-bar/index.jsx Outdated Show resolved Hide resolved

components/progress-bar/index.jsx Outdated Show resolved Hide resolved

components/progress-bar/index.jsx Outdated Show resolved Hide resolved

components/progress-bar/index.jsx Outdated Show resolved Hide resolved

aswinshenoy added 2 commits March 3, 2019 23:07

Remove Progress Bar Prop Functions

d101bde

Update Component Docs of Progress Bar

395a91d

interactivellama reviewed Mar 6, 2019

View reviewed changes

components/progress-bar/index.jsx Outdated Show resolved Hide resolved

Update prop label to Node type

eda81e6

Lint Fix & Support for Node & String Both for label Prop

fab2565

aswinshenoy added 2 commits March 26, 2019 21:09

Add Snapshot Tests

db5411c

Lint Fix

c356c2c

interactivellama self-requested a review April 16, 2019 22:26

interactivellama added 2 commits April 16, 2019 16:37

Merge branch 'master' of github.com:salesforce/design-system-react in…

b00c7fd

…to pr/aswinshenoy/1773

Add ProgressBar to storybook based snapshot tests

9dcb6d5

interactivellama assigned aswinshenoy Apr 16, 2019

Add Ids to examples

12917f9

aswinshenoy force-pushed the progress-bar branch 2 times, most recently from f1fd7de to 12917f9 Compare April 20, 2019 09:42

pulkonet mentioned this pull request Apr 21, 2019

Components Checklist: Exhaustive checklist of components to be added to align DSR with SLDS #1933

Closed

interactivellama assigned interactivellama and unassigned aswinshenoy Apr 22, 2019

interactivellama added the progress-bar label Apr 22, 2019

interactivellama added this to the July 2019 Release cycle milestone Apr 25, 2019

interactivellama added 4 commits April 25, 2019 23:08

ProgressBar: Remove extra background styling

5c9e7e0

ProgressBar: Add labels, move width

35b3237

move width to progress-bar__value

Merge branch 'master' of github.com:salesforce/design-system-react in…

4af7fd2

…to pr/aswinshenoy/1773 # Conflicts: # components/story-based-tests.js

Update snapshots

2804306

interactivellama requested changes Apr 26, 2019

View reviewed changes

interactivellama added 3 commits April 26, 2019 00:40

Progress Bar: Add site story and default export

45ab4f7

Merge branch 'progress-bar' of github.com:aswinshenoy/design-system-r…

d53e238

…eact into pr/aswinshenoy/1773 # Conflicts: # components/progress-bar/__examples__/default.jsx # components/progress-bar/__examples__/descriptive.jsx

ProgressBar: Update snapshots

1532da4

interactivellama approved these changes Apr 26, 2019

View reviewed changes

interactivellama merged commit d289279 into salesforce:master Apr 26, 2019

Add Progress Bar Component #1773

Add Progress Bar Component #1773

Uh oh!

Conversation

aswinshenoy commented Feb 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional description

Props Taken

Limitations

Screenshots

CONTRIBUTOR checklist (do not remove)

REVIEWER checklist (do not remove)

Required only if there are markup / UX changes

Uh oh!

aswinshenoy commented Feb 28, 2019

Uh oh!

interactivellama commented Feb 28, 2019

Uh oh!

aswinshenoy commented Mar 1, 2019

Uh oh!

interactivellama commented Mar 1, 2019

Uh oh!

tanhengyeow left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

interactivellama commented Mar 6, 2019

Uh oh!

interactivellama commented Mar 21, 2019

Uh oh!

interactivellama commented Mar 21, 2019

Uh oh!

aswinshenoy commented Mar 26, 2019

Uh oh!

interactivellama commented Apr 16, 2019

Uh oh!

aswinshenoy commented Apr 20, 2019

Uh oh!

interactivellama commented Apr 22, 2019

Uh oh!

interactivellama commented Apr 25, 2019

Uh oh!

interactivellama left a comment

Choose a reason for hiding this comment

Uh oh!

interactivellama Apr 26, 2019

Choose a reason for hiding this comment

Uh oh!

aswinshenoy Apr 26, 2019

Choose a reason for hiding this comment

Uh oh!

interactivellama Apr 26, 2019

Choose a reason for hiding this comment

Uh oh!

aswinshenoy Apr 26, 2019

Choose a reason for hiding this comment

Uh oh!

interactivellama commented Apr 26, 2019

Uh oh!

aswinshenoy commented Apr 26, 2019

Uh oh!

interactivellama commented Apr 26, 2019

Uh oh!

aswinshenoy commented Apr 26, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

aswinshenoy commented Feb 28, 2019 •

edited

Loading

aswinshenoy commented Apr 26, 2019 •

edited

Loading