Update the VFilterButton to use the new variants (#1132)

* Update VR snapshots

* Fix snapshots

* Fix snapshot

* Use the new variants for filter button

* Update VFilterButton Storybook tests

* Update stories to make the visual changes easier to see

* Update snapshots

* Try to fix flaky test

frontend/src/components/VHeader/VFilterButton.vue

@@ -1,14 +1,9 @@
 <template>
   <VButton
     id="filter-button"
-    variant="plain"
+    :variant="pressed ? 'filled-dark' : 'bordered-white'"
     size="disabled"
-    class="align-center label-regular h-12 w-12 gap-2 self-center border-tx xl:w-auto xl:pe-4 xl:ps-3"
-    :class="
-      pressed
-        ? 'bg-dark-charcoal text-white hover:bg-dark-charcoal-90'
-        : 'bg-white hover:border-dark-charcoal-20'
-    "
+    class="label-regular h-12 w-12 gap-x-2 self-center xl:w-auto xl:pe-4 xl:ps-3"
     :pressed="pressed"
     :disabled="disabled"
     aria-controls="filters"

frontend/src/components/VHeader/meta/VFilterButton.stories.mdx

@@ -29,10 +29,16 @@ import { IMAGE } from "~/constants/media"
   }}
 />
 
+[//]:
+  #
+  "Flexible-width wrappers are added to the template to make the button
+better visible on a darker background and to make the changes in button width
+easier to see."
+
 export const Template = (args, { argTypes }) => ({
-  template: `<div id="wrapper" class="w-40 h-16 bg-dark-charcoal-06 flex align-center justify-center">
+  template: `<div class="flex"><div id="wrapper" class="px-4 h-16 bg-dark-charcoal-06 flex align-center justify-center">
   <VFilterButton v-bind="args" v-on="args" />
-  </div>`,
+  </div></div>`,
   components: { VFilterButton },
   props: Object.keys(argTypes),
   setup() {

frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts

@@ -16,27 +16,30 @@ test.describe.configure({ mode: "parallel" })
 for (const mediaType of supportedMediaTypes) {
   for (const dir of languageDirections) {
     test.describe(`${mediaType} ${dir} single-result page snapshots`, () => {
-      breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
-        test.beforeEach(async ({ context, page }) => {
-          await setCookies(context, {
-            uiBreakpoint: breakpoint,
-            uiIsFilterDismissed: true,
-            uiDismissedBanners: ["translation-ar"],
+      breakpoints.describeEvery(
+        { maxDiffPixelRatio: 0.02 },
+        ({ breakpoint, expectSnapshot }) => {
+          test.beforeEach(async ({ context, page }) => {
+            await setCookies(context, {
+              uiBreakpoint: breakpoint,
+              uiIsFilterDismissed: true,
+              uiDismissedBanners: ["translation-ar"],
+            })
+            await goToSearchTerm(page, "birds", { dir })
           })
-          await goToSearchTerm(page, "birds", { dir })
-        })
-
-        test(`from search results`, async ({ page }) => {
-          // This will include the "Back to results" link.
-          await openFirstResult(page, mediaType)
-
-          await expectSnapshot(
-            `${mediaType}-${dir}-from-search-results`,
-            page,
-            { fullPage: true }
-          )
-        })
-      })
+
+          test(`from search results`, async ({ page }) => {
+            // This will include the "Back to results" link.
+            await openFirstResult(page, mediaType)
+
+            await expectSnapshot(
+              `${mediaType}-${dir}-from-search-results`,
+              page,
+              { fullPage: true }
+            )
+          })
+        }
+      )
     })
   }
 }

frontend/test/storybook/visual-regression/v-filter-button.spec.ts

@@ -2,7 +2,6 @@ import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { makeGotoWithArgs } from "~~/test/storybook/utils/args"
-import { sleep } from "~~/test/playwright/utils/navigation"
 
 const gotoWithArgs = makeGotoWithArgs(
   "components-vheader-vfilterbutton--default-story"
@@ -22,46 +21,72 @@ test.describe("VFilterButton", () => {
           page.locator(wrapper)
         )
       })
-      test(`pressed, ${filterCount} filters`, async ({ page }) => {
+
+      test(`hovered, ${filterCount} filters`, async ({ page }) => {
         await gotoWithArgs(page, {
           appliedFilters: filterCount,
-          pressed: true,
         })
+        await page.locator("button", { hasText: "Filter" }).hover()
         await expectSnapshot(
-          `filter-button-pressed-${filterCount}-checked`,
+          `filter-button-hovered-${filterCount}-checked`,
           page.locator(wrapper)
         )
       })
-      test(`pressed, hovered, ${filterCount} filters`, async ({ page }) => {
+
+      test(`focused, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await page.locator("button", { hasText: "Filter" }).focus()
+        await expectSnapshot(
+          `filter-button-focused-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+
+      /**
+       * When focused and not pressed, the button is the same with and without hover,
+       * so we reuse the snapshot from the focused test.
+       */
+      test(`focused, hovered, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await page.locator("button", { hasText: "Filter" }).focus()
+        await page.locator("button", { hasText: "Filter" }).hover()
+        await expectSnapshot(
+          `filter-button-focused-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+
+      test(`pressed, ${filterCount} filters`, async ({ page }) => {
         await gotoWithArgs(page, {
           appliedFilters: filterCount,
           pressed: true,
         })
-        await page.locator("button", { hasText: "Filter" }).hover()
         await expectSnapshot(
-          `filter-button-pressed-hovered-${filterCount}-checked`,
+          `filter-button-pressed-${filterCount}-checked`,
           page.locator(wrapper)
         )
       })
-      test(`hovered, ${filterCount} filters`, async ({ page }) => {
+
+      test(`pressed, hovered, ${filterCount} filters`, async ({ page }) => {
         await gotoWithArgs(page, {
           appliedFilters: filterCount,
+          pressed: true,
         })
         await page.locator("button", { hasText: "Filter" }).hover()
         await expectSnapshot(
-          `filter-button-hovered-${filterCount}-checked`,
+          `filter-button-pressed-hovered-${filterCount}-checked`,
           page.locator(wrapper)
         )
       })
-      test(`focused, pressed ${filterCount} filters`, async ({ page }) => {
+
+      test(`pressed, focused, ${filterCount} filters`, async ({ page }) => {
         await gotoWithArgs(page, {
           appliedFilters: filterCount,
           pressed: true,
         })
         await page.locator("button", { hasText: "Filter" }).focus()
-        await sleep(500)
         await expectSnapshot(
-          `filter-button-focused-pressed-${filterCount}-checked`,
+          `filter-button-pressed-focused-${filterCount}-checked`,
           page.locator(wrapper)
         )
       })