evergreen-badges outline

[jeroenransijn]

evergreen-badges is a package exporting a Badge, and Pill React component.

Usage

import {
  Badge,
  Pill
} from 'evergreen-badges'

<Badge appearance="neutral">Neutral badge</Badge>
<Badge appearance="red" isSolid>Solid Red badge</Badge>

<Pill appearance="red">99</Pill>
<Pill appearance="blue" isSolid>2</Pill>

Design example

Usage

• Use Pill for numbers: 1-99
• Use Badge for status: success, new, etc.

Implementation details

The Badge component should implement the Strong component.
Pill will implement Badge with a rounded border radius, similar to how a Card implements Pane with a additional border radius prop.

Key implementation takeaways

• Badge implements Strong from evergreen-typography
• Pill implements Badge
• Default height is 16px (line-height should be 16px for size=200)
• Display inline-block
• isSolid is false by default (defaultProps)
• Default appearance is neutral (defaultProps)
• Badge border radius should be 2px
• Pill border radius should be 999px

Badge appearance

I think it makes sense to implement a isSolid bool prop that determines wether or not the badge or pill looks solid. In other implementations the value passed into the appearance prop maps directly to a object. In this case this is not possible because of the isSolid prop. Here is a approximation of the implementation:

const getBadgeStyle = ({ appearance, isSolid }) => {
  const colorGroup = colors[appearance]
  if (isSolid) {
     return {
        backgroundColor: colorGroup['500'],
        color: 'white',
     }
  }
  return {
     backgroundColor: colorGroup['15A'],
     color: colorGroup['1000']
  }
}

In the design the neutral Badge/Pill uses neutral['500'] instead of neutral['1000']. Let's see how it looks with 1000 first before making an exception.