feat(filter-pill): DLT-1917 create component

apps/dialtone-documentation/docs/_data/filter-pill.json

@@ -0,0 +1,19 @@
+{
+  "classes": [
+    {
+      "class": "d-filter-pill",
+      "applies": "N/A",
+      "description": "Base filter pill style."
+    },
+    {
+      "class": "d-filter-pill__wrapper",
+      "applies": "N/A",
+      "description": "Applies relative positioning."
+    },
+    {
+      "class": "d-filter-pill__icon",
+      "applies": "N/A",
+      "description": "Applies the icon color."
+    }
+  ]
+}

apps/dialtone-documentation/docs/_data/site-nav.json

@@ -602,6 +602,11 @@
           "text": "Empty State",
           "link": "/components/empty-state.html"
         },
+        {
+          "text": "Filter Pill",
+          "link": "/components/filter-pill.html",
+          "planned": true
+        },
         {
           "text": "Hovercard",
           "link": "/components/hovercard.html"

apps/dialtone-documentation/docs/components/filter-pill.md

@@ -0,0 +1,241 @@
+---
+title: Filter Pill
+description: A Filter Pill offers a button paired with a popover to show and manage filtering options, the label and state of the filter can be handled through events and props.
+status: beta
+# storybook: https://dialtone.dialpad.com/vue/?path=/story/components-filter-pill--default @TODO: Uncomment once it's RFP
+---
+
+<code-well-header>
+  <dt-filter-pill
+    label="With header, content and footer"
+  >
+    <template #headerContent>
+      <div class="d-mr16">
+        <dt-input
+          v-model="inputValue"
+          aria-label="Search items"
+          placeholder="Search Items"
+          type="text"
+        >
+          <template #leftIcon="{ iconSize }">
+            <dt-icon-search
+              :size="iconSize"
+            />
+          </template>
+          <template
+            #rightIcon="{ clear }"
+          >
+            <dt-button
+              kind="muted"
+              importance="clear"
+              size="xs"
+              circle
+              aria-label="Clear search"
+              @click="clear"
+            >
+              <template #icon="{ iconSize }">
+                <dt-icon-close
+                  :size="iconSize"
+                />
+              </template>
+            </dt-button>
+          </template>
+        </dt-input>
+      </div>
+    </template>
+    <template #content>
+      <dt-checkbox
+        v-for="option in options"
+        :key="option"
+        :label="option"
+      />
+    </template>
+    <template #footerContent>
+      <div class="d-ta-right d-pr16">
+        <dt-button
+          kind="muted"
+          importance="outlined"
+          size="sm"
+        >
+          Apply
+        </dt-button>
+      </div>
+    </template>
+  </dt-filter-pill>
+</code-well-header>
+
+## Variants
+
+### Base
+
+<code-well-header>
+  <dt-stack direction="row" gap="400">
+      <dt-filter-pill
+        label="Simple example"
+        ref="simpleExample"
+      >
+        <template #content>
+          Main content
+        </template>
+      </dt-filter-pill>
+  </dt-stack>
+</code-well-header>
+
+<code-example-tabs
+:htmlCode='() => $refs.simpleExample'
+vueCode='
+<dt-filter-pill label="Simple example">
+  <template #content>
+    Main content
+  </template>
+</dt-filter-pill>
+'
+showHtmlWarning />
+
+### Disabled
+
+<code-well-header>
+  <dt-stack direction="row" gap="400">
+    <dt-filter-pill label="Disabled filter" disabled ref="disabledFilter"></dt-filter-pill>
+  </dt-stack>
+</code-well-header>
+
+<code-example-tabs
+:htmlCode='() => $refs.disabledFilter'
+vueCode='<dt-filter-pill label="Disabled filter" disabled/>'
+showHtmlWarning />
+
+### Active
+
+<code-well-header>
+  <dt-stack direction="row" gap="400">
+      <dt-filter-pill
+        label="Active example"
+        active
+        ref="activeExample"
+      >
+        <template #content>
+          Main content
+        </template>
+      </dt-filter-pill>
+  </dt-stack>
+</code-well-header>
+
+<code-example-tabs
+:htmlCode='() => $refs.activeExample'
+vueCode='
+<dt-filter-pill label="Active example" active>
+  <template #content>
+    Main content
+  </template>
+</dt-filter-pill>
+'
+showHtmlWarning />
+
+### Loading
+
+When `loading` prop is set, a loading skeleton will be shown, skeleton width can
+be customized via `loading-skeleton-width` prop.
+
+<code-well-header>
+  <dt-stack direction="row" gap="400">
+    <dt-filter-pill
+      label="Loading example"
+      loading
+      ref="loadingExample"
+    >
+      <template #content>
+        Loading filter
+      </template>
+    </dt-filter-pill>
+    <dt-filter-pill
+      label="Loading example"
+      loading
+      loading-skeleton-width="50px"
+    >
+      <template #content>
+        Loading filter with custom width
+      </template>
+    </dt-filter-pill>
+  </dt-stack>
+</code-well-header>
+
+<code-example-tabs
+:htmlCode='() => $refs.loadingExample'
+vueCode='
+<dt-filter-pill
+  label="Loading example"
+  loading
+>
+  <template #content>
+    Main content
+  </template>
+</dt-filter-pill>
+<dt-filter-pill
+  label="Loading example"
+  loading
+  loading-skeleton-width="50px"
+>
+  <template #content>
+    Main content
+  </template>
+</dt-filter-pill>
+'
+showHtmlWarning />
+
+### Clearable
+
+Setting the `show-reset` prop will show a reset button that will emit
+the `reset` event when clicked, so you can handle the filter resetting.
+
+<code-well-header>
+  <dt-stack direction="row" gap="400">
+    <dt-filter-pill
+      label="Clearable example"
+      active
+      show-reset
+      ref="clearableExample"
+    >
+      <template #content>
+        Clearable filter
+      </template>
+    </dt-filter-pill>
+  </dt-stack>
+</code-well-header>
+
+<code-example-tabs
+:htmlCode='() => $refs.clearableExample'
+vueCode='
+<dt-filter-pill
+  label="Clearable example"
+  active
+  show-reset
+>
+  <template #content>
+    Main content
+  </template>
+</dt-filter-pill>
+'
+showHtmlWarning />
+
+## Vue API
+
+<component-vue-api component-name="filterPill"></component-vue-api>
+
+## Classes
+
+<component-class-table component-name="filter-pill"></component-class-table>
+
+<script setup>
+import { ref } from 'vue';
+import { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue3';
+
+const inputValue = ref('');
+const options = [
+  'Option 1',
+  'Option 2',
+  'Option 3',
+  'Option 4',
+  'Option 5',
+];
+</script>

common/components_list.cjs

@@ -18,6 +18,7 @@ module.exports = [
   'emoji.vue',
   'emoji_picker.vue',
   'emoji_text_wrapper.vue',
+  'filter_pill.vue',
   'hovercard.vue',
   'icon.vue',
   'image_viewer.vue',

lint-staged.config.cjs

@@ -1,11 +1,27 @@
+const { ESLint } = require('eslint');
+
+const removeIgnoredFiles = async (files) => {
+  const eslint = new ESLint();
+  const isIgnored = await Promise.all(
+    files.map((file) => {
+      return eslint.isPathIgnored(file);
+    }),
+  );
+  const filteredFiles = files.filter((_, i) => !isIgnored[i]);
+  return filteredFiles.join(' ');
+};
+
 module.exports = {
-  '*.{js, mjs, cjs, vue}': [
-    'pnpm exec eslint --fix',
-  ],
+  '**/*.{js, mjs, cjs, vue}': async (files) => {
+    const filesToLint = await removeIgnoredFiles(files);
+    return [
+      `pnpm exec eslint --fix --max-warnings=0 ${filesToLint}`,
+    ];
+  },
   '*.less': [
-    'pnpm exec stylelint --fix'
+    'pnpm exec stylelint --fix',
   ],
   '*.{md, mdx}': [
-    'pnpm exec markdownlint'
-  ]
+    'pnpm exec markdownlint',
+  ],
 };

packages/dialtone-css/lib/build/less/components/filter-pill.less

@@ -0,0 +1,53 @@
+//
+//  DIALTONE
+//  COMPONENTS: FILTER PILL
+//
+//  These are the styles for filter-pill component.
+//
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+
+//  @@  BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-filter-pill {
+  &__wrapper {
+    position: relative;
+    display: inline-block;
+
+    &:has(.d-filter-pill__reset) .d-filter-pill__icon {
+      visibility: hidden;
+    }
+
+    &:hover .d-filter-pill--active,
+    &:focus-visible .d-filter-pill--active {
+      background-color: var(--dt-action-color-background-base-active);
+    }
+  }
+
+  &__icon {
+    color: var(--dt-color-foreground-muted);
+  }
+
+  &__reset {
+    position: absolute;
+    top: 50%;
+    right: var(--dt-space-200);
+    color: var(--dt-color-foreground-primary);
+    transform: translateY(-50%);
+    opacity: .5;
+
+    &:hover, &:focus-visible {
+      opacity: 1;
+    }
+  }
+
+  &--active {
+    background-color: var(--dt-action-color-background-base-hover);
+    border: 1px solid var(--dt-action-color-border-base-outlined-default);
+
+    &:hover, &:focus-visible {
+      background-color: var(--dt-action-color-background-base-active);
+    }
+  }
+}

packages/dialtone-css/lib/build/less/dialtone.less

@@ -53,6 +53,7 @@
 @import 'components/presence';
 @import 'components/icon';
 @import 'components/scrollbar';
+@import 'components/filter-pill';
 
 //  --  UTILITIES
 @import 'utilities/backgrounds';

packages/dialtone-vue2/.storybook/main.js

@@ -5,6 +5,10 @@ const config = {
   stories: [
     '../@(components|directives|recipes|prototypes)/**/*.stories.@(js|jsx|ts|tsx)',
     '../@(components|directives|docs|functions|recipes)/**/*.mdx',
+
+    // @TODO: Replace lines before merging to exclude filter_pill component from storybook.
+    //'../@(components|directives|recipes|prototypes)/**/!(filter_pill)/*.stories.@(js|jsx|ts|tsx)',
+    //'../@(components|directives|docs|functions|recipes)/**/!(filter_pill)/*.mdx',
   ],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-a11y", 'storybook-dark-mode'],
   framework: {

packages/dialtone-vue2/components/filter_pill/filter_pill.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks';
+import * as DtFilterPillStories from './filter_pill.stories.js';
+import RedirectToDocs from "@/common/snippets/redirect-to-docs.mdx"
+
+<Meta of={DtFilterPillStories} />
+
+# Filter Pill
+
+<RedirectToDocs name="filter-pill" />