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.

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

feat(progress-indicator): add vertical progress indicator to react #5146

Merged
merged 3 commits into from
Jan 23, 2020
Merged

feat(progress-indicator): add vertical progress indicator to react #5146

merged 3 commits into from
Jan 23, 2020

Conversation

tw15egan
Copy link
Collaborator

Closes #5141

Adds in the vertical ProgressIndicator variation to React. Enabled by passing in vertical to the ProgressIndicator component.

Changelog

New

  • Vertical variation of the ProgressIndicator

Changed

  • Modified some styles that account for an extra div in the React markup of ProgressIndicator

Testing / Reviewing

Check the Storybook and ensure the Vertical variation looks the same as the Vanilla version.

@tw15egan tw15egan requested a review from a team as a code owner January 22, 2020 23:35
@ghost ghost requested review from abbeyhrt and dakahn January 22, 2020 23:35
@tw15egan
Copy link
Collaborator Author

Question for @laurenmrice, did we want to reduce the padding between Vertical steps?

Current (6rem):
Screen Shot 2020-01-22 at 3 31 06 PM

Proposed (3.625rem):
Screen Shot 2020-01-22 at 3 30 56 PM

@tw15egan tw15egan force-pushed the progress-indicator-vertical branch from 042db72 to 17fb59d Compare January 22, 2020 23:39
@netlify
Copy link

netlify bot commented Jan 22, 2020

Deploy preview for the-carbon-components ready!

Built with commit 042db72

https://deploy-preview-5146--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Jan 22, 2020

Deploy preview for carbon-elements ready!

Built with commit 042db72

https://deploy-preview-5146--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Jan 22, 2020

Deploy preview for carbon-components-react failed.

Built with commit 042db72

https://app.netlify.com/sites/carbon-components-react/deploys/5e28dc3ea94ab900077455fa

@netlify
Copy link

netlify bot commented Jan 23, 2020 •
edited
Loading

Deploy preview for carbon-components-react failed.

Built with commit 97efab4

https://app.netlify.com/sites/carbon-components-react/deploys/5e2a0edcad01c40173946afd

@netlify
Copy link

netlify bot commented Jan 23, 2020 •
edited
Loading

Deploy preview for the-carbon-components ready!

Built with commit 97efab4

https://deploy-preview-5146--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Jan 23, 2020 •
edited
Loading

Deploy preview for carbon-elements failed.

Built with commit 97efab4

https://app.netlify.com/sites/carbon-elements/deploys/5e29f194bf97c10009fa4b8a

@asudoh asudoh requested review from a team and aagonzales and removed request for a team January 23, 2020 00:37
asudoh
asudoh approved these changes Jan 23, 2020
View reviewed changes
Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

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

Thank you for jumping in @tw15egan! I wonder vertical thing can be a knob, but I'm open for either way.

@aagonzales
Copy link
Member

@tw15egan I think it just needs to always have that 24px of padding-bottom and not a set height incase there are more lines in which case the text would wrap.

image

@tw15egan tw15egan force-pushed the progress-indicator-vertical branch from 4c3d90f to b05f46c Compare January 23, 2020 19:11
@tw15egan tw15egan force-pushed the progress-indicator-vertical branch from d81db0a to 6904c54 Compare January 23, 2020 19:16
@tw15egan
Copy link
Collaborator Author

@asudoh updated and changed it to a knob. Also added in another knob for the Label text so that it is easier to test long text blocks.

aagonzales
aagonzales approved these changes Jan 23, 2020
View reviewed changes
Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

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

LGTM

dakahn
dakahn approved these changes Jan 23, 2020
View reviewed changes
Copy link
Contributor

@dakahn dakahn 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 to me. Checked it out on Edge, Firefox, and Chrome latest on Windows 10

@asudoh
Copy link
Contributor

asudoh commented Jan 23, 2020

Thanks @tw15egan for the update!

@asudoh asudoh merged commit 1532cf7 into carbon-design-system:master Jan 23, 2020
@joshblack joshblack mentioned this pull request Jan 31, 2020
Closed
This was referenced Feb 25, 2020
Closed
Closed
@tw15egan tw15egan deleted the progress-indicator-vertical branch April 28, 2021 18:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dakahn dakahn dakahn approved these changes

@aagonzales aagonzales aagonzales approved these changes

@asudoh asudoh asudoh approved these changes

@abbeyhrt abbeyhrt Awaiting requested review from abbeyhrt

Assignees
No one assigned
Labels
status: one more review 👀 status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[progress indicator] add vertical variant to react
4 participants
@tw15egan @aagonzales @asudoh @dakahn