feat(filter-pill): DLT-1962 design

[lizard-boy]

🚧 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

[greptile-apps]

PR Summary

This PR introduces a new Filter Pill component to the Dialtone design system. Here are the key points about the changes:

• Added new Filter Pill component documentation in filter-pill.md
• Filter Pill appears to be a specialized version of the Chip component for filtering purposes
• Updated Button component documentation in button.md to use Vue components for disabled button examples
• Added tooltip functionality to disabled buttons in the Button documentation

The Filter Pill component offers various states and configurations, including:

• Unselected and selected states
• Disabled state
• Options with and without clear buttons
• Different sizes

The documentation demonstrates how Filter Pills can be used in combination with other components like tab groups and tables for filtering various types of data (e.g., calls, CSAT, moments).

These changes enhance the Dialtone design system by providing a specific component for filtering functionality, which should improve consistency and usability across applications using the system.

_{2 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings}

[greptile-apps]

style: Inconsistent placeholder text. Remove 'asdf'

[greptile-apps]

style: Consider moving script to separate file for better organization