Blueprint: Feature request: Avatar and Badge

[volkandkaya]

Having an avatar and badge component would be great. Both are must haves in web applications.

Something similar to Material-UI but with Palantir design would be amazing.

Example Avatar - http://www.material-ui.com/#/components/avatar
Example Badge - http://www.material-ui.com/#/components/badge

[llorca]

Hmm, it seems like straightforward and simple styling (I don't see any interactivity), I'm unclear what value such a component would provide

[giladgray]

We already have Tag which is most of Badge (minus the positioning, but that's best left to you anyway).

[adidahiya]

If you built this as an external package that depended on @blueprintjs/core, we could feature it in a "community components" section in our README or wiki for you.

[orecus]

A "Community Components" section would be a great addition I think.

I have a couple that I could complete and share, specially if you could provide some guidelines for how they should be constructed, packaged and such.

[giladgray]

what sort of guidelines are you looking for? i'd say try to do what we do: src/ for original source code, dist/ for compiled commonjs modules, ensure package.json has the correct main/style/typings entries.

[orecus]

As a complete newbie in terms of sharing components and such I guess i'm more looking for a "template" that would serve as the base I guess. I atleast think that would be a great start for that section too if you provide a set of guidelines and a "template structure" that we could adhere to.

For example;

• Naming Standard: pt-componentName or bp-componentName?
• Folder structure
• package.json template
• Anything else of use that you would require or want the components to adhere to.

I just like structure and having everthing to adhere to a set standard. ;)

[llorca]

I think it's worth differentiating two things:

1. contributions from the community into core and other main Blueprint packages
2. community-built components that work well with Blueprint

Sounds like we're talking about the latter here, and it's something I'd love to get to. I think we need at least a solid guidelines document on how to contribute (template files/generators could be great, also build on top of https://github.com/palantir/blueprint/wiki/Development-practices?), and we'd need a way to showcase community components (wiki is okay but it'd quickly get buried, maybe a better option is a dedicated page on blueprintjs.com). Hopefully around Q1 or Q2 next year.

[orecus]

@llorca Yeah exactly i'm talking about the latter and I think it would be great to build a community around that. I'd happy to share what I work on, if I just know how you want it to be shared, what guidelines and standard conventions you would like us to follow, naming or otherwise. So I think a set of solid guidelines and process around it would be great.

Also related, is Gitter something you have considered using?

Looking forward to this then in 2017! :)

[seansfkelley]

I think a Badge component would be great -- it's a pretty common UI tidbit, and while it's on the simpler end of the components that Blueprint offers I don't think it would fall under "so trivial as to be considered library bloat". As you say, it's about a complicated as Tag, but that one made it into the library! Here's a strawman props definition for the component:

interface IBadgeProps {
  className?: string;
  position?: Position; // default TOP_LEFT
  intent?: Intent;
  content: React.ReactChild; // or whatever your preferred thing that gets this job done is
}

and it could be used as follows (actually, this would be my exact use-case):

<Badge intent={Intent.PRIMARY} content={this.props.count}>
  <Button .../>
</Badge>

[llorca]

@seansfkelley yup I understand that, what you describe is an opinionated usage of a tag basically--tag is arguably a more generic element. We're working on a way to share and expose these cool components built on top of Blueprint, without having to necessarily integrate everything into core. Look out for updates on that soon!