💡 Proposal - Badge component: Pass Icon component

[Stephan Leece]

Forma 36 contribution proposal

The problem

In User Interface, there are some use cased where Badge is being used with an Icon / Image as a child component, however, this breaks the layout:

I understand it is also used in launch, with some color inconsistencies:

Currently, i'm having to add additional css to fix this, e/g give the Icon absolute positioning.

The proposed solution

Add an icon prop to the Badge, similar to how IconButton works.

Breaking changes

I don't believe so.

[Fabian Schultz]

Thanks for the proposal! We should create some consistency here.

I'd suggest we add startIcon and endIcon props similar to how icons work in the Button component. We'll write some guidelines on when to use start vs. end, happy to take that on. Let's also make sure we align the icon color with the label color:

[Moe Shaaban]

Hi @stephanLeece will you be able to contribute the proposed solution?

[Wake1st]

Would it be alright if I took a crack at it?

I've been looking to contribute to some open source, and I think this fits right in the valley of do-able-with-a-challenge for me (at least I hope so 😄).

[Kristoffer]

Hey @Wake1st, yes absolutely, that would be great 🙌 Let us know if you need any support, we're happy to help!

[Wake1st]

Well, I've got something working, but it's a bit hacky.

For the most part, I copied from the Button component (no need to reinvent the wheel). The one thing I did add was some padding adjustment for the icons - the sizing is a close call:

const getBadgeIconStyle = ({ hasChildren, variant, size }) => {
  ...

  const padding = size === 'small' ? { 
    position: 'relative',
    top: -3,
    padding: `0 ${tokens.spacing2Xs}`,
  } : {
    padding: `1px ${tokens.spacing2Xs}`,
  }

  ...
}

Since Icons come in bigger sizes, I had to limit them to small and tiny for the default and small badges, respectively. I adjusted the padded for the small icon, since that icon is 18px and the badge is 20px - those fit pretty well.

The small badge, however, is only 16px, which is the same height allotted for the tiny icons. So, some of them look ok:

... others look a bit... oof:

I know its a bit hackey, but it's my first go. If you're fine with this, I'll make a PR; if there are corrections to be made, let me know.

Also, I think the colors look ok, but I am color blind - please let me know if they are off.

[Kristoffer]

Thank you @Wake1st! I think it would be easier, at least for me personally, to base discussion around a PR so feel free to put that up 🙂 We can keep it as a draft for now, if you prefer.

[Wake1st]

Hey, I'm not able to push my branch. Is there a process to receive authorization? Or a different way of pushing changes?

[Kristoffer]

@Wake1st I replied on Slack 🙂

[github-actions]

Marking issue as stale since there was no activity for 30 days