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

Custom progress indicator #13

Open
vilvadot opened this issue Apr 23, 2018 · 5 comments
Open

Custom progress indicator #13

vilvadot opened this issue Apr 23, 2018 · 5 comments

Comments

@vilvadot
Copy link
Collaborator

vilvadot commented Apr 23, 2018

It would be cool to be able to show progress with a custom children. For example including an icon + text, only icon, an image etc... maybe use render props for it?

@vilvadot vilvadot changed the title Custom progres indicator Custom progress indicator Apr 23, 2018
@satiewaltz
Copy link
Collaborator

I don't understand this request, what you have in mind?

@vilvadot
Copy link
Collaborator Author

vilvadot commented May 3, 2018

I was thinking of an specific use case I need and thought many more options could be offered:

screen shot 2018-05-03 at 13 29 53

(Ignoring the text under the circle) In my example I need the text to be replaced by an icon, but I can see how different ui cases might required to place different items inside the circle: Images, Icons, Icons + number indicator etc...

How do you feel about it?

@satiewaltz
Copy link
Collaborator

satiewaltz commented May 3, 2018

Thank you for clarifying. I think this is a great idea and I think it'd be useful.
Here's one idea of how this could be implemented from a user perspective:

const Icon = <FaGithub/>;
// Passing of an icon component activates the "icon" mode, like in your example.
<Circle icon={ Icon } label="Women" textStyle={... />

This may add many more props to the API which has been slowly getting cluttered. We could address that potential issue by simplifying the entire API surface into a single configuration object that gets passed in as a prop. Just a thought.

@vilvadot
Copy link
Collaborator Author

vilvadot commented May 3, 2018

Yup definetly, that looks great.

Also worried about the prop clutter. Although not sure how to feel about the object config. Any opinion on this @zzarcon ?

@zzarcon
Copy link
Owner

zzarcon commented May 4, 2018

Yeah I think we should stop adding more props and instead use the render children approach. That will make even possible to make the example from above (text under the circle included)

<Circle progress={62,20} >
  {(progress) => (
    <div>
      <SomeCustomIcon />
    </div>
  )}
</Circle>

Not sure if it actually makes sense to pass progress back since is the user the one passing it down.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants