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

StepProgress component #302

Open
aVileBroker opened this issue Aug 24, 2021 · 0 comments
Open

StepProgress component #302

aVileBroker opened this issue Aug 24, 2021 · 0 comments
Assignees
@PatrickDeVries
Labels
1 Story Point Story points: 1 good first issue Good for newcomers help wanted Extra attention is needed new component New base component

Comments

@aVileBroker
Copy link
Contributor

aVileBroker commented Aug 24, 2021 •
edited
Loading

As a developer I want to be able to show the users progress through a wizard, form flow, or other multistep process.

I'm leaving this one intentionally vague for the person who implements it to give some creative freedom on what we can do.

Things to consider:

  • We probably want click events on each step with a reference passed as an argument for which step is clicked
  • Indicators for complete, current, and not completed.
  • Many forms let us go back to previous steps - we should be able to differentiate the current step even if it's completed.
  • Animations?
  • Dots, lines, etc?

Animated example from Dribbble: https://dribbble.com/shots/5937491-Page-Control-Indicator-Transitions-Collection

Animated example from Dribbble: https://dribbble.com/shots/10034848-Tabbar-Indicator
image

Example from Dribbble: https://dribbble.com/shots/15007566-Progress-Indicator-Dark
image

Example from Dribbble: https://dribbble.com/shots/2146282-Sign-Up-Progress-Indicators
image

Do your own research - I always suggest Dribbble to find fun animated inspiration. Remember we want to be enable developers to do whatever they want with our components - no Dribbble shot should be impossible to recreate. (within reason)
@aVileBroker aVileBroker added good first issue Good for newcomers help wanted Extra attention is needed new component New base component 1 Story Point Story points: 1 labels Aug 24, 2021
@aVileBroker aVileBroker mentioned this issue Aug 24, 2021
Closed
@PatrickDeVries PatrickDeVries self-assigned this Sep 8, 2021
@PatrickDeVries PatrickDeVries mentioned this issue Oct 4, 2021
Closed
@PatrickDeVries PatrickDeVries linked a pull request Oct 4, 2021 that will close this issue
302 StepProgress component #339
Closed
PatrickDeVries added a commit to PatrickDeVries/foundry-ui that referenced this issue Oct 25, 2021
@PatrickDeVries
feat(stepprogress): add StepProgress component
96f2e8f 
Add a new component for tracking progress through forms and navigating through them. Supports
styling options like rounding of buttons and vertical progression. Also supports disabling of
clicking forward or backward and setting onClicks for each step.

re Headstorm#302
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@PatrickDeVries PatrickDeVries

Labels
1 Story Point Story points: 1 good first issue Good for newcomers help wanted Extra attention is needed new component New base component
Projects
Foundry-React-UI
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

302 StepProgress component PatrickDeVries/foundry-ui
2 participants
@aVileBroker @PatrickDeVries