Revert other unrelated changes

src/components/VHeader/VContentSettingsButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="relative inline-block flex h-8 w-8 self-center">
+  <span class="relative inline-block h-8 w-8">
     <VIconButton
       size="new-small"
       :icon-props="{ iconPath: sourceIcon }"

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

@@ -5,6 +5,7 @@ import {
   Meta,
   Story,
 } from '@storybook/addon-docs'
+import { provide, ref } from '@nuxtjs/composition-api'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import { useSearchStore } from '~/stores/search'
 import { filterData, mediaFilterKeys } from '~/constants/filters'
@@ -20,6 +21,12 @@ import { IMAGE } from '~/constants/media'
     appliedFilters: {
       type: 'number',
     },
+    scrolled: {
+      type: 'boolean',
+    },
+    isMinMd: {
+      type: 'boolean',
+    },
   }}
 />
 
@@ -49,6 +56,12 @@ export const Template = (args, { argTypes }) => ({
       }
     }
     applyNFilters(args.appliedFilters)
+    if (args.scrolled) {
+      provide('isHeaderScrolled', ref(true))
+    }
+    if (args.isMinMd) {
+      provide('isMinScreenMd', ref(true))
+    }
     return { args }
   },
 })
@@ -65,24 +78,15 @@ the field receives an input. It also emits the `search` event when the search
 button is clicked.
 
 <Canvas>
-  <Story
-    name="Default"
-    parameters={{
-      viewport: {
-        defaultViewport: 'lg',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
 <Canvas>
   <Story
-    name="With text label"
+    name="Mobile Scrolled"
     parameters={{
       viewport: {
-        defaultViewport: 'xl',
+        defaultViewport: 'iphonex',
       },
     }}
   >

tailwind.config.js

@@ -52,7 +52,6 @@ module.exports = {
         60: '#837d82',
         70: '#6e686d',
         80: '#595258',
-        90: '#453D43',
       },
 
       // Special keywords

test/storybook/playwright.config.ts

@@ -21,12 +21,6 @@ const config: PlaywrightTestConfig = {
     trace: 'retain-on-failure',
   },
   timeout: 2 * 60 * 1e3,
-  expect: {
-    toMatchSnapshot: {
-      // To avoid flaky tests, we allow a small amount of pixel difference.
-      maxDiffPixelRatio: 0.02,
-    },
-  },
 }
 
 export default config

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

@@ -6,20 +6,21 @@ import { makeGotoWithArgs } from '~~/test/storybook/utils/args'
 const gotoWithArgs = makeGotoWithArgs(
   'components-vheader-vfilterbutton--default-story'
 )
+
 test.describe('VFilterButton', () => {
-  breakpoints.describeLg(({ expectSnapshot }) => {
+  breakpoints.describeMd(({ expectSnapshot }) => {
     test('no filters applied', async ({ page }) => {
       await gotoWithArgs(page, { isMinMd: true })
       await expectSnapshot('filter-button-at-rest', page)
     })
 
     test('no filters pressed', async ({ page }) => {
-      await gotoWithArgs(page, { pressed: true })
+      await gotoWithArgs(page, { isMinMd: true, pressed: true })
       await expectSnapshot('filter-button-pressed', page)
     })
 
     test('filters applied', async ({ page }) => {
-      await gotoWithArgs(page, { appliedFilters: 2 })
+      await gotoWithArgs(page, { isMinMd: true, appliedFilters: 2 })
       await expectSnapshot('filter-button-2-filters', page)
     })
 
@@ -33,15 +34,25 @@ test.describe('VFilterButton', () => {
     })
   })
 
-  breakpoints.describeXl(({ expectSnapshot }) => {
-    test('no filters applied', async ({ page }) => {
+  breakpoints.describeXs(({ expectSnapshot }) => {
+    test('no filters applied and not scrolled', async ({ page }) => {
       await gotoWithArgs(page)
       await expectSnapshot('filter-button-no-filters-not-scrolled', page)
     })
 
-    test('2 filters', async ({ page }) => {
+    test('no filters but scrolled', async ({ page }) => {
+      await gotoWithArgs(page, { scrolled: true })
+      await expectSnapshot('filter-button-no-filters-scrolled', page)
+    })
+
+    test('2 filters not scrolled', async ({ page }) => {
       await gotoWithArgs(page, { appliedFilters: 2 })
       await expectSnapshot('filter-button-2-filters-not-scrolled', page)
     })
+
+    test('2 filters and scrolled', async ({ page }) => {
+      await gotoWithArgs(page, { appliedFilters: 2, scrolled: true })
+      await expectSnapshot('filter-button-2-filters-scrolled', page)
+    })
   })
 })