plbabin commented 2 years ago

Problem

For a new project, the badge UI in a filtered list was updated. We modify the component to match those new figma styles:

At the same time we: -fixed the focused style when there is a tooltip -rewrite the component as a functional one -rewrite the test to only use RTL

Write to your heart's content, include:

[ ] A link to the Figma design in your story (list regularly updated here)
[ ] A link to the Story(ies) in the description
[ ] Is there a Jira ticket associated?
[ ] If useful, add screenshots or videos
[ ] If useful (and unclear), add a little explanation of why a certain path was taken
[ ] Instructions on how to test
[ ] Found any restrictions/limitations? Let us know!

Guidelines

Make sure the pull request:

[ ] Follows the established folder/file structure
[ ] Adds unit tests
[ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
[ ] Did you verify some accessibility (a11y) basics?
[ ] Adds/updates stories. Guidelines
[ ] Adds/updates documentation (ie proptypes) Guidelines
[ ] Has it been tested in Help Scout's supported browsers?
[ ] Requests review from designer of the feature
[ ] Add label (bug? feature?)

plbabin commented 2 years ago

cc @phamburglar

phamburglar commented 2 years ago

Looks great pl! I've already updated the HSDS Figma file to match ✅