Add a square filter count to filter button and tab

src/components/VHeader/VFilterButton.vue

@@ -1,25 +1,26 @@
 <template>
   <VButton
     id="filter-button"
-    :variant="filtersAreApplied ? 'action-menu-muted' : 'action-menu'"
+    variant="plain"
     size="disabled"
-    class="align-center label-regular h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3"
-    :class="[filtersAreApplied ? 'xl:pe-3' : 'xl:pe-4']"
+    class="align-center label-regular h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3 xl:pe-4"
+    :class="
+      pressed
+        ? 'border-tx bg-dark-charcoal text-white hover:bg-dark-charcoal-90'
+        : 'border-tx bg-tx hover:border-dark-charcoal-20 '
+    "
     :pressed="pressed"
     :disabled="disabled"
     aria-controls="filters"
-    :aria-label="xlMinLabel"
+    :aria-label="ariaLabel"
     @click="$emit('toggle')"
     @keydown.tab.exact="$emit('tab', $event)"
   >
-    <VIcon
-      :class="filtersAreApplied ? 'hidden' : 'block'"
-      :icon-path="filterIcon"
+    <VFilterIconOrCounter
+      :applied-filter-count="filterCount"
+      :pressed="pressed"
     />
-    <span class="hidden xl:inline-block">{{ xlMinLabel }}</span>
-    <span class="xl:hidden" :class="{ hidden: !filtersAreApplied }">{{
-      lgMaxLabel
-    }}</span>
+    <span class="hidden xl:inline-block">{{ textLabel }}</span>
   </VButton>
 </template>
 
@@ -31,14 +32,12 @@ import { defineEvent } from "~/types/emits"
 import { useI18n } from "~/composables/use-i18n"
 
 import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
-
-import filterIcon from "~/assets/icons/filter.svg"
+import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue"
 
 export default defineComponent({
   name: "VFilterButton",
   components: {
-    VIcon,
+    VFilterIconOrCounter,
     VButton,
   },
   props: {
@@ -61,26 +60,16 @@ export default defineComponent({
     const filterCount = computed(() => searchStore.appliedFilterCount)
     const filtersAreApplied = computed(() => filterCount.value > 0)
 
-    /**
-     * This label's verbosity makes it useful for the aria-label
-     * where it is also used, especially on mobile where the
-     * label would just be the number of applied filters, and therefore
-     * basically useless as far as a label is concerned!
-     */
-    const xlMinLabel = computed(() =>
-      filtersAreApplied.value
-        ? i18n.tc("header.filter-button.with-count", filterCount.value)
-        : i18n.t("header.filter-button.simple")
-    )
-    const lgMaxLabel = computed(() =>
-      filtersAreApplied ? filterCount.value : ""
+    const textLabel = computed(() => i18n.t("header.filter-button.simple"))
+    const ariaLabel = computed(() =>
+      i18n.tc("header.filter-button.with-count", filterCount.value)
     )
 
     return {
-      filterIcon,
-      xlMinLabel,
-      lgMaxLabel,
+      ariaLabel,
+      textLabel,
       filtersAreApplied,
+      filterCount,
     }
   },
 })

src/components/VHeader/VFilterIconOrCounter.vue

@@ -0,0 +1,40 @@
+<template>
+  <VIcon v-if="showIcon" :icon-path="filterIcon" />
+  <p
+    v-else
+    class="flex h-6 w-6 items-center justify-center bg-dark-charcoal-10"
+    :class="{ 'bg-dark-charcoal-10 group-hover:bg-dark-charcoal-20': pressed }"
+  >
+    {{ appliedFilterCount }}
+  </p>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api"
+
+import VIcon from "~/components/VIcon/VIcon.vue"
+
+import filterIcon from "~/assets/icons/filter.svg"
+
+export default defineComponent({
+  name: "VFilterIconOrCounter",
+  components: { VIcon },
+  props: {
+    appliedFilterCount: {
+      type: Number,
+      default: 0,
+    },
+    pressed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const showIcon = computed(() => props.appliedFilterCount === 0)
+
+    return {
+      showIcon,
+      filterIcon,
+    }
+  },
+})
+</script>

src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -38,7 +38,9 @@
           size="medium"
           class="label-regular gap-x-2"
         >
-          <VIcon :icon-path="filtersIcon" />{{ $t("filters.title") }}</VTab
+          <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" />{{
+            $t("filters.title")
+          }}</VTab
         >
         <VIconButton
           class="self-center ms-auto hover:bg-dark-charcoal hover:text-white"
@@ -95,12 +97,15 @@ import VTab from "~/components/VTabs/VTab.vue"
 import VTabPanel from "~/components/VTabs/VTabPanel.vue"
 import VTabs from "~/components/VTabs/VTabs.vue"
 
+import VFilterIconOrCounter from "../VFilterIconOrCounter.vue"
+
 import closeIcon from "~/assets/icons/close-small.svg"
 import filtersIcon from "~/assets/icons/filter.svg"
 
 export default defineComponent({
   name: "VContentSettingsModalContent",
   components: {
+    VFilterIconOrCounter,
     VIcon,
     VModalContent,
     VButton,

test/playwright/e2e/filters.spec.ts

@@ -167,7 +167,7 @@ breakpoints.describeMobileAndDesktop(() => {
       const filterButtonText = await page
         .locator('[aria-controls="filters"] span:visible')
         .textContent()
-      expect(filterButtonText).toContain("1")
+      expect(filterButtonText).toContain("Filters")
     } else {
       const filtersAriaLabel =
         (await page

test/playwright/visual-regression/components/filters.spec.ts

@@ -4,6 +4,7 @@ import {
   enableNewHeader,
   goToSearchTerm,
   languageDirections,
+  t,
 } from "~~/test/playwright/utils/navigation"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
@@ -39,7 +40,7 @@ for (const dir of languageDirections) {
 
       await goToSearchTerm(page, "birds", { dir })
       await page.getByRole("button", { name: "Menu" }).click()
-      await page.getByRole("tab", { name: "Filters" }).click()
+      await page.getByRole("tab", { name: t("filters.title", dir) }).click()
 
       await expectSnapshot(`filters-modal-${dir}.png`, page)
     })
@@ -49,7 +50,7 @@ for (const dir of languageDirections) {
 
       await goToSearchTerm(page, "birds", { dir })
       await page.getByRole("button", { name: "Menu" }).click()
-      await page.getByRole("tab", { name: "Filters" }).click()
+      await page.getByRole("tab", { name: t("filters.title", dir) }).click()
 
       await page.locator('input[type="checkbox"]').first().check()