feat(filter-pill): DLT-1962 design

[francisrupert]

🚧 Filter Pill Design

🛠️ Type Of Change

These types will increment the version number on release:

• Fix
• Feature
• Performance Improvement
• Refactor

📖 Jira Ticket

📖 Description

💡 Context

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

If new component:

• I am exporting any new components or constants:
  • from the index.js in the component directory.
  • from the index.js in the root (either packages/dialtone-vue2 or packages/dialtone-vue3).
• I have added the styles for the new component to the packages/dialtone-css package.
• I have created a page for the new component on the documentation site in apps/dialtone-documentation.
• I have added the new component to common/components_list.js
• I have created a component story in storybook
• I have created story / stories for any relevant component variants in storybook
• I have created a docs page for the component in storybook.
• I have checked that changing all props/slots via the UI in storybook works as expected.

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-484/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-484/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-484/