diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue index f70b569e15..58f42165db 100644 --- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue +++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue @@ -5,7 +5,6 @@ > @@ -361,3 +360,12 @@ export default defineComponent({ }, }) + diff --git a/src/components/VHeader/VSearchBar/VSearchBar.vue b/src/components/VHeader/VSearchBar/VSearchBar.vue index 8514f86049..81cc7e3e76 100644 --- a/src/components/VHeader/VSearchBar/VSearchBar.vue +++ b/src/components/VHeader/VSearchBar/VSearchBar.vue @@ -267,10 +267,10 @@ export default defineComponent({ diff --git a/src/components/VHeaderOld/VHeaderFilter.vue b/src/components/VHeaderOld/VHeaderFilter.vue index 6fdcbc0f86..e56b8745ed 100644 --- a/src/components/VHeaderOld/VHeaderFilter.vue +++ b/src/components/VHeaderOld/VHeaderFilter.vue @@ -38,8 +38,6 @@ import { watch, computed, onMounted, - inject, - Ref, toRef, onBeforeUnmount, } from '@nuxtjs/composition-api' @@ -49,6 +47,7 @@ import { Portal as VTeleport } from 'portal-vue' import { useBodyScrollLock } from '~/composables/use-body-scroll-lock' import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility' import { useFocusFilters } from '~/composables/use-focus-filters' +import { isMinScreen } from '~/composables/use-media-query' import { Focus } from '~/utils/focus-management' import { defineEvent } from '~/types/emits' @@ -90,7 +89,7 @@ export default defineComponent({ const filterSidebar = useFilterSidebarVisibility() const disabledRef = toRef(props, 'disabled') - const isMinScreenMd: Ref = inject('isMinScreenMd') + const isMinScreenMd = isMinScreen('md') const open = () => (visibleRef.value = true) const close = () => (visibleRef.value = false) diff --git a/src/layouts/default.vue b/src/layouts/default.vue index b4c78e983a..7c2e791351 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -107,7 +107,6 @@ const embeddedPage = { mounted.value = true }) - const isMinScreenMd = isMinScreen('md') /** * If we use the `isMinScreen('lg')` composable for conditionally * rendering components, we get a server-client side rendering @@ -121,6 +120,10 @@ const embeddedPage = { const isMinScreenLg = computed(() => Boolean(innerIsMinScreenLg.value && mounted.value) ) + const innerIsMinScreenMd = isMinScreen('md') + const isMinScreenMd = computed(() => + Boolean(innerIsMinScreenMd.value && mounted.value) + ) const isSidebarVisible = computed(() => { return isNewHeaderEnabled.value diff --git a/src/pages/search.vue b/src/pages/search.vue index cf8aa28ac8..d4bfbf17b5 100644 --- a/src/pages/search.vue +++ b/src/pages/search.vue @@ -37,9 +37,6 @@ import { isShallowEqualObjects } from '@wordpress/is-shallow-equal' import { computed, defineComponent, inject, ref } from '@nuxtjs/composition-api' -import { Context } from '@nuxt/types' - -import { isMinScreen } from '~/composables/use-media-query' import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility' import { Focus, focusIn } from '~/utils/focus-management' import { useMediaStore } from '~/stores/media' @@ -49,6 +46,8 @@ import VSearchGrid from '~/components/VSearchGrid.vue' import VSkipToContentContainer from '~/components/VSkipToContentContainer.vue' import VScrollButton from '~/components/VScrollButton.vue' +import type { Context } from '@nuxt/types' + export default defineComponent({ name: 'BrowsePage', components: { @@ -68,7 +67,6 @@ export default defineComponent({ scrollToTop: false, setup() { const searchGridRef = ref(null) - const isMinScreenMd = isMinScreen('md') const { isVisible: isFilterSidebarVisible } = useFilterSidebarVisibility() const showScrollButton = inject('showScrollButton') const mediaStore = useMediaStore() @@ -99,7 +97,6 @@ export default defineComponent({ return { searchGridRef, - isMinScreenMd, isFilterSidebarVisible, showScrollButton, searchTerm, @@ -156,9 +153,9 @@ export default defineComponent({ } focusIn(document.getElementById('__layout'), Focus.First) }, - fetchMedia(...args: unknown[]) { + fetchMedia({ shouldPersistMedia } = { shouldPersistMedia: false }) { const mediaStore = useMediaStore(this.$pinia) - return mediaStore.fetchMedia(...args) + return mediaStore.fetchMedia({ shouldPersistMedia }) }, }, }) diff --git a/src/pages/search/audio.vue b/src/pages/search/audio.vue index 25c34271b5..a1b635c92e 100644 --- a/src/pages/search/audio.vue +++ b/src/pages/search/audio.vue @@ -39,15 +39,17 @@ import { defineComponent, useMeta, ref, + inject, } from '@nuxtjs/composition-api' -import { isMinScreen } from '~/composables/use-media-query' import { useBrowserIsMobile } from '~/composables/use-browser-detection' import { useFocusFilters } from '~/composables/use-focus-filters' import { Focus } from '~/utils/focus-management' import { useUiStore } from '~/stores/ui' +import { IsMinScreenMdKey } from '~/types/provides' + import VSnackbar from '~/components/VSnackbar.vue' import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue' import VLoadMore from '~/components/VLoadMore.vue' @@ -69,7 +71,7 @@ export default defineComponent({ const results = computed(() => props.resultItems.audio) - const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true }) + const isMinScreenMd = inject(IsMinScreenMdKey) // On SSR, we set the size to small if the User Agent is mobile, otherwise we set the size to medium. const isMobile = useBrowserIsMobile() diff --git a/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png b/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png index b851b7b2e5..ec3333021e 100644 Binary files a/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png and b/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png b/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png index d88fcd6fce..13a60a850e 100644 Binary files a/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png and b/test/playwright/visual-regression/components/audio-results-old.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts b/test/playwright/visual-regression/components/audio-results.spec.ts new file mode 100644 index 0000000000..2c2dd1c0f7 --- /dev/null +++ b/test/playwright/visual-regression/components/audio-results.spec.ts @@ -0,0 +1,41 @@ +import { test } from '@playwright/test' + +import breakpoints from '~~/test/playwright/utils/breakpoints' +import { + closeFilters, + enableNewHeader, +} from '~~/test/playwright/utils/navigation' + +test.describe.configure({ mode: 'parallel' }) + +test.describe('audio results', () => { + test.beforeEach(async ({ page }) => { + await enableNewHeader(page) + await page.goto('/search/audio?q=birds') + }) + + breakpoints.describeEachMobile({ uaMocking: false }, ({ expectSnapshot }) => { + test('should render small row layout desktop UA with narrow viewport', async ({ + page, + }) => { + await expectSnapshot('audio-results-narrow-viewport-desktop-UA', page) + }) + }) + + breakpoints.describeEachMobile({ uaMocking: true }, ({ expectSnapshot }) => { + test('should render small row layout mobile UA with narrow viewport', async ({ + page, + }) => { + await expectSnapshot('audio-results-narrow-viewport-mobile-UA', page) + }) + }) + + breakpoints.describeEachDesktop(({ expectSnapshot }) => { + test('desktop audio results', async ({ page }) => { + await closeFilters(page) + // Make sure filters button is not hovered + await page.mouse.move(0, 150) + await expectSnapshot('audio-results-desktop', page) + }) + }) +}) diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png new file mode 100644 index 0000000000..2d2188c230 Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-2xl-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png new file mode 100644 index 0000000000..2571966b01 Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-lg-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png new file mode 100644 index 0000000000..be6a7da6eb Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-desktop-xl-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png new file mode 100644 index 0000000000..7361fe620c Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png new file mode 100644 index 0000000000..d70f0beaff Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-desktop-UA-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-mobile-UA-sm-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-mobile-UA-sm-linux.png new file mode 100644 index 0000000000..7361fe620c Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-mobile-UA-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-mobile-UA-xs-linux.png b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-mobile-UA-xs-linux.png new file mode 100644 index 0000000000..d70f0beaff Binary files /dev/null and b/test/playwright/visual-regression/components/audio-results.spec.ts-snapshots/audio-results-narrow-viewport-mobile-UA-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts b/test/playwright/visual-regression/components/header.spec.ts index 01f9fcb76d..144773bea8 100644 --- a/test/playwright/visual-regression/components/header.spec.ts +++ b/test/playwright/visual-regression/components/header.spec.ts @@ -4,7 +4,9 @@ import breakpoints from '~~/test/playwright/utils/breakpoints' import { hideInputCursors } from '~~/test/playwright/utils/page' import { closeFilters, + enableNewHeader, goToSearchTerm, + isPageDesktop, languageDirections, scrollToBottom, sleep, @@ -14,66 +16,64 @@ test.describe.configure({ mode: 'parallel' }) const headerSelector = '.main-header' -test.describe('header snapshots', () => { +test.describe('header', () => { for (const dir of languageDirections) { test.describe(dir, () => { test.beforeEach(async ({ page }) => { - await goToSearchTerm(page, 'birds', { - dir: dir, - query: 'ff_new_header=on', + await enableNewHeader(page) + await goToSearchTerm(page, 'birds', { dir }) + }) + breakpoints.describeEachDesktop(({ expectSnapshot }) => { + test('filters open', async ({ page }) => { + await page.mouse.move(0, 150) + await expectSnapshot( + `filters-open-${dir}`, + page.locator(headerSelector) + ) }) }) - test.describe('header', () => { - breakpoints.describeEachDesktop(({ expectSnapshot }) => { - test('filters open', async ({ page }) => { - await page.mouse.move(0, 150) - await expectSnapshot( - `filters-open-${dir}`, - page.locator(headerSelector) - ) - }) - - test('resting', async ({ page }) => { - // By default, filters are open. We need to close them. - await closeFilters(page, 'old') - // Make sure the header is not hovered on - await page.mouse.move(0, 150) - await expectSnapshot(`resting-${dir}`, page.locator(headerSelector)) - }) + breakpoints.describeEvery(({ expectSnapshot }) => { + test.beforeEach(async ({ page }) => { + // By default, filters are open on desktop. We need to close them. + if (isPageDesktop(page)) { + await closeFilters(page) + } + }) + test('resting', async ({ page }) => { + // Make sure the header is not hovered on + await page.mouse.move(0, 150) + await expectSnapshot(`resting-${dir}`, page.locator(headerSelector)) + }) - test('scrolled', async ({ page }) => { - await closeFilters(page, 'old') - await scrollToBottom(page) - await page.mouse.move(0, 150) - await sleep(200) - await expectSnapshot( - `scrolled-${dir}`, - page.locator(headerSelector) - ) - }) + test('scrolled', async ({ page }) => { + await scrollToBottom(page) + await page.mouse.move(0, 150) + await sleep(200) + await expectSnapshot(`scrolled-${dir}`, page.locator(headerSelector)) + }) - test('searchbar hovered', async ({ page }) => { - await closeFilters(page, 'old') - await page.hover('input') - await hideInputCursors(page) - await expectSnapshot( - `searchbar-hovered-${dir}`, - page.locator(headerSelector) - ) - }) + test('searchbar hovered', async ({ page }) => { + await page.hover('input') + await hideInputCursors(page) + await expectSnapshot( + `searchbar-hovered-${dir}`, + page.locator(headerSelector) + ) + }) - test('searchbar active', async ({ page }) => { - await closeFilters(page, 'old') - await hideInputCursors(page) - await page.click('input') - await expectSnapshot( - `searchbar-active-${dir}`, - page.locator(headerSelector) - ) - }) + test('searchbar active', async ({ page }) => { + await hideInputCursors(page) + await page.click('input') + // On mobile, the headerSelector is not visible when the searchbar is active. + const searchbarSelector = isPageDesktop(page) + ? headerSelector + : '[role="dialog"]' + await expectSnapshot( + `searchbar-active-${dir}`, + page.locator(searchbarSelector) + ) }) - // TODO: add mobile tests }) }) } diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-md-linux.png new file mode 100644 index 0000000000..2f04c8b748 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-sm-linux.png new file mode 100644 index 0000000000..a6b0c425b8 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-xs-linux.png new file mode 100644 index 0000000000..bc40c803ac Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-ltr-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-md-linux.png new file mode 100644 index 0000000000..61aa862b9a Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-sm-linux.png new file mode 100644 index 0000000000..7d5defd90e Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-xs-linux.png new file mode 100644 index 0000000000..69c0f73f75 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/resting-rtl-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-md-linux.png new file mode 100644 index 0000000000..f72fd18c79 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-sm-linux.png new file mode 100644 index 0000000000..dcf6aebc66 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-xs-linux.png new file mode 100644 index 0000000000..d32d99944e Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-ltr-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-md-linux.png new file mode 100644 index 0000000000..0cdad717a4 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-sm-linux.png new file mode 100644 index 0000000000..336a21e0ed Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-xs-linux.png new file mode 100644 index 0000000000..c55cd485ee Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/scrolled-rtl-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-md-linux.png new file mode 100644 index 0000000000..236f8935fc Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-sm-linux.png new file mode 100644 index 0000000000..76fc80e0d3 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-xs-linux.png new file mode 100644 index 0000000000..b56fe6c72d Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-ltr-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-md-linux.png new file mode 100644 index 0000000000..73180d2617 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-sm-linux.png new file mode 100644 index 0000000000..f0ad5b8132 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-xs-linux.png new file mode 100644 index 0000000000..72947ed0b7 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-active-rtl-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-2xl-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-2xl-linux.png index 1e8ab2e83f..74db1910f2 100644 Binary files a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-2xl-linux.png and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-2xl-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-lg-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-lg-linux.png index 7ca305b2ff..4f7d3115b4 100644 Binary files a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-lg-linux.png and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-lg-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-md-linux.png new file mode 100644 index 0000000000..9557737d3a Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-sm-linux.png new file mode 100644 index 0000000000..97587cf3ef Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xl-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xl-linux.png index 422507ba8f..6373c73739 100644 Binary files a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xl-linux.png and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xl-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xs-linux.png new file mode 100644 index 0000000000..44d29df59f Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-ltr-xs-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-2xl-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-2xl-linux.png index fc949986a4..6daec82f2d 100644 Binary files a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-2xl-linux.png and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-2xl-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-lg-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-lg-linux.png index c6c9bd6548..70992db6e2 100644 Binary files a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-lg-linux.png and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-lg-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-md-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-md-linux.png new file mode 100644 index 0000000000..d73014345b Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-md-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-sm-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-sm-linux.png new file mode 100644 index 0000000000..83009f5d49 Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-sm-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xl-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xl-linux.png index 84804e4d8d..9db5ac428c 100644 Binary files a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xl-linux.png and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xl-linux.png differ diff --git a/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xs-linux.png b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xs-linux.png new file mode 100644 index 0000000000..f04415c99d Binary files /dev/null and b/test/playwright/visual-regression/components/header.spec.ts-snapshots/searchbar-hovered-rtl-xs-linux.png differ