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

Add badges component #211

Closed
guastallaigor opened this issue Dec 19, 2018 · 6 comments
Closed

Add badges component #211

guastallaigor opened this issue Dec 19, 2018 · 6 comments
Assignees
Labels
enhancement New feature or request waiting - contributor Waiting for the contributor to address some situations

Comments

@guastallaigor
Copy link
Member

Is your feature request related to a problem? Please describe.
Add a badges component kind of like github has but 8bit-like

Describe the solution you'd like

First draft

screencast-localhost-6006-2018 12 18-21-39-49

Describe alternatives you've considered
Not adding this or changing it to other classes like closable (with an close icon) or other things

Additional context
Up to this moment the badges must have two sides, a first and black one and the other one changes color. Suggestions are welcome.

@guastallaigor
Copy link
Member Author

Second draft, added hability to change left/right side

screencast-localhost-6006-2018 12 18-22-21-09

@guastallaigor guastallaigor self-assigned this Dec 19, 2018
@guastallaigor guastallaigor added the enhancement New feature or request label Dec 19, 2018
@BcRikko
Copy link
Member

BcRikko commented Dec 19, 2018

Sounds great 👍

We might like to use a simple badge like the image below. 🤔
badge

Could you do something like the following? 🤔
Or should I have a different style from this Issue?

<span class="nes-badge">10</span>

<!-- class name and elements are provisional -->
<span class="nes-badge is-splited is-primary">
  <label>npm</label>
  <span>1.0.0</span>
</span>

@jjspace
Copy link
Contributor

jjspace commented Dec 19, 2018

I like the idea and they look good. However I'm curious about where someone might use a two toned badge like this outside of the badges in say a Github README. Where else might it be used?

Regardless I think this could also be a good starting point/inspiration for button group or radio group.

@guastallaigor
Copy link
Member Author

@BcRikko I was thinking more like this badges:

image

But maybe I can try add a different approach like you've suggested.

@jjspace I'm not sure where exactly, that depends on the user. To me, I was planning on using this in the docs implementation that we were planning to create #180 , and a different private website I was starting to make.

I got the idea from Bulma. This implementation right now is just like github badges, but like Bulma, I was aiming for different implementations in the future.

@jjspace
Copy link
Contributor

jjspace commented Dec 19, 2018

I see. I'm still not sure where I'd use two tone badges like this but just because I don't have a use doesn't mean they're not useful 😄 They still look good and I do like the idea of fully fleshed out tags like Bulma has. I can definitely see a use for single tone tags or tags with a two tone X button and this is definitely a good start on that.

@guastallaigor
Copy link
Member Author

Thank you for your feedback, I will try to improve this in the next few days 🖌️

@guastallaigor guastallaigor added the waiting - contributor Waiting for the contributor to address some situations label Dec 19, 2018
guastallaigor added a commit that referenced this issue Dec 20, 2018
Removed box-sizing and border none, and classes that changed the size. Added cursor fallback and
size change by the font-size. Changed from span to a; display type; margin.

#211
@BcRikko BcRikko closed this as completed Dec 29, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request waiting - contributor Waiting for the contributor to address some situations
Projects
None yet
Development

No branches or pull requests

3 participants