Badge Component

[avelinet]

Status: Ready to merge

Reviewers: @jeffkamo @kpeatt @cole-sanderson @nastiatikk @mlworks

Minor work todo

• [x] Consider trimming configurable variables. Open to arguments to the contrary
• [x] Ensure badge is never less than circular (when using a narrow font)
• [x] Decide if we add modifiers and which
• [x] Decide whether to wrap the inner text in an element (needs use case)

[kpeatt]

I did two things:

• I refactored the CSS to make it render dependent on the font size of the badge instead of based on another size. Also made variables for padding so you could change the shape of the badge easily. I think we should also add in some different state.
• Generalized the function of the component to take any content instead of just quantity while providing a use case.

I think we should add modifiers to this for things like success, error, warning, and whatnot. Might want to wrap the content in a span so we can separate text or content styling from the badge styling.

[ry5n]

In general this looks really good. My main concerns are:

• Lots of configurable variables. Can we trim them down to the ones people will commonly change (colors), and leave the rest to overrides? (Don’t forget to update the readme to reflect changes – right now it’s out-of-sync with the code.)
• The width of the badge is dependent on the width of the font. As an extreme example, I changed the font-family to Impact and the badge is no longer circular. On EBS, we fixed this by setting a fixed height and a min-width to the same value so that it’s either a perfect circle or wider.
• I don’t think we need to add modifiers. Those will be project-specific and I don’t want to bloat the component with those decisions. The base component is a great starting point.
• I’d also want to see a use case before wrapping an element around the value inside the component.

[kpeatt]

@ry5n I think we probably want the badge to move to a pill shape when the font size gets wider but that's a design preference.

[ry5n]

@kpeatt I think that’s sensible default behaviour. What I’m saying is that it should not get narrower if you use a condensed face though. So it should be circular, or grow horizontally. Hence setting height and min-width.

[kpeatt]

@ry5n :+1:

[avelinet]

I agree with omitting the modifiers for the base component, can't think of the last project I would have needed them on a badge component.

Also agree with @ry5n regarding wrapping the inner text.

[ry5n]

+1

[ry5n]

@kpeatt Any comments on the last two todos in the summary? Do you disagree?

[kpeatt]

Nope, I don't think they're blockers and we could add them later if necessary.

[kpeatt]

:+1: from me

[ry5n]

Implementation looks good. It’s smaller than it was; what do you think of bumping the font-size to 0.85em?