Badge refractor

[iRoachie]

Motivation

The Badge is a component that doesn't get as much use as it could. This PR aims to make the badge more useful as well as highlighting use cases where it may be good to use a badge.

BREAKING CHANGES

• wrapperStyle has been removed. Was kind of pointless and misleading since we don't use the term wrapper anywhere in other components. containerStyle now functions as what was wrapperStyle and a new prop badgeStyle replaces what was containerStyle in a similar fashion to the Button component.
• The element prop which was undocumented was removed. Just use the value prop
• Badges can no longer render children. Instead, if you want a custom component you can use the value prop which now supports rendering react components (thanks to renderNodehelper).

Features

• Adds "mini badge" which functions as a status indicator when no value is provided.
• Adds status prop which is a convenience prop for styling the background via badgeStyle for quick and commonly used scenarios

API

// Standard badge
<Badge value="99+" status="error" />
<Badge value={<Text>My Custom Badge</Text>}/>

// Mini badge
<Badge status="success" />
<Badge status="error" />
<Badge status="primary" />
<Badge status="warning" />

// Avatar with mini badge
<View>
  <Avatar
    source={{
      uri: 'https://randomuser.me/api/portraits/men/41.jpg',
    }}
    size="large"
  />

  <Badge
    status="success"
    containerStyle={{ position: 'absolute', top: -5, right: -5 }}
  />
</View>

Screenshots

[codecov]

Codecov Report

Merging #1545 into next will decrease coverage by 0.07%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             next    #1545      +/-   ##
==========================================
- Coverage   75.72%   75.64%   -0.08%     
==========================================
  Files          33       33              
  Lines         618      616       -2     
  Branches       86       82       -4     
==========================================
- Hits          468      466       -2     
  Misses        129      129              
  Partials       21       21

Impacted Files	Coverage Δ
src/badge/badge.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 364e1a7...eb97e8e. Read the comment docs.

[xavier-villelegier]

That is a neeeaaat PR, tests, docs, clean code. That's a 💯