[FEATURE] Display Pills rather than Icons

[JodieM]

Similar to #175 we would like to display Indicators as Pills https://github.com/SFDO-Community/Salesforce-Indicators/tree/metecho/pills

[JodieM]

This is in Branch https://github.com/SFDO-Community/Salesforce-Indicators/tree/metecho/pills

[JodieM]

It looks pretty good on first test.
The Pills look better than Badges
There is the similar issues to Badges and Pills not being compatible with the existing fields for Avatar and should hover text be displayed, especially since actual hover text is in use on Pills.
Note that on Clickable Links I said that I would like to see it go to a new tab, but the new Base Component reference says "Specifying a target to change where the link should open is not supported. The link opens on the same tab or window."

Some small issues to iron out:

• Can we reduce the space taken up by not having the X button
• They look better in SLSD1, and the variant Circle works correctly.
• It's interesting the different ways badges and pills handle error / warning / info styles - for badges it is a colour, but for pills it only has error as an attribute or class. So we will need to chat about whether we want to support these options.
• Notes for documentation
  • For Pills the Indicator Size does nothing.
  • Links on Pills are not designed to be primary navigation or actions
  • No long strings - one or two words, sentence case
• Need to look at accessibility - they are not in the tab order (but SLDS2 says they have keyboard navigation), but they act like they are editable (mouse changes to vertical bar on hover).
• Need to have more spacing between the pills, it should be min 4px.
• In SLDS1 docs they show the use of slds-popover slds-popover_tooltip slds-nubbin_bottom-left to show popovers as well as hovers (title).

I would like to test it alongside #175 and #204 and then it should be OK for a beta