Add dark storybook snapshots

WordPress · Sep 15, 2024 · afe26ab · afe26ab
1 parent f1458df
commit afe26ab
Show file tree

Hide file tree

Showing 95 changed files with 4 additions and 2 deletions.
diff --git a/frontend/test/playwright/utils/breakpoints.ts b/frontend/test/playwright/utils/breakpoints.ts
@@ -91,6 +91,8 @@ const makeBreakpointDescribe =
         options = {}
       ) => {
         const snapshotName = getSnapshotName(name, options.dir)
+        // TODO: Remove after the Playwright VR dark mode snapshots are added
+        options.useColorMode = false
         return innerExpectSnapshot(page, snapshotName, screenshotAble, options)
       }
 

diff --git a/frontend/test/playwright/utils/expect-snapshot.ts b/frontend/test/playwright/utils/expect-snapshot.ts
@@ -74,7 +74,7 @@ export const expectSnapshot: ExpectSnapshot = async (
   page,
   name,
   screenshotAble,
-  { screenshotOptions, snapshotOptions, useColorMode, dir } = {}
+  { screenshotOptions, snapshotOptions, useColorMode = true, dir } = {}
 ) => {
   // Hide the theme switcher before taking the screenshot.
   screenshotOptions = {
@@ -88,7 +88,7 @@ export const expectSnapshot: ExpectSnapshot = async (
     .soft(await screenshotAble.screenshot(screenshotOptions))
     .toMatchSnapshot(getSnapshotName(name, "light"), snapshotOptions)
 
-  if (!(useColorMode === true)) {
+  if (!useColorMode) {
     return
   }
   await turnOnDarkMode(page, dir ?? "ltr")

diff --git a/...book/visual-regression/focus.spec.ts-snapshots/focus-bold-filled-dark-linux.png b/...book/visual-regression/focus.spec.ts-snapshots/focus-bold-filled-dark-linux.png
diff --git a/...-regression/focus.spec.ts-snapshots/focus-slim-filled-borderless-dark-linux.png b/...-regression/focus.spec.ts-snapshots/focus-slim-filled-borderless-dark-linux.png
diff --git a/...book/visual-regression/focus.spec.ts-snapshots/focus-slim-filled-dark-linux.png b/...book/visual-regression/focus.spec.ts-snapshots/focus-slim-filled-dark-linux.png
diff --git a/...visual-regression/focus.spec.ts-snapshots/focus-slim-transparent-dark-linux.png b/...visual-regression/focus.spec.ts-snapshots/focus-slim-transparent-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-focused-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-focused-dark-linux.png
diff --git a/...ression/v-button.spec.ts-snapshots/bordered-gray-focused-hovered-dark-linux.png b/...ression/v-button.spec.ts-snapshots/bordered-gray-focused-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-hovered-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-resting-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-resting-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/bordered-white-focused-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/bordered-white-focused-dark-linux.png
diff --git a/...ession/v-button.spec.ts-snapshots/bordered-white-focused-hovered-dark-linux.png b/...ession/v-button.spec.ts-snapshots/bordered-white-focused-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/bordered-white-hovered-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/bordered-white-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/bordered-white-resting-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/bordered-white-resting-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-dark-focused-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-dark-focused-dark-linux.png
diff --git a/...egression/v-button.spec.ts-snapshots/filled-dark-focused-hovered-dark-linux.png b/...egression/v-button.spec.ts-snapshots/filled-dark-focused-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-dark-hovered-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-dark-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-dark-resting-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-dark-resting-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-gray-focused-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-gray-focused-dark-linux.png
diff --git a/...egression/v-button.spec.ts-snapshots/filled-gray-focused-hovered-dark-linux.png b/...egression/v-button.spec.ts-snapshots/filled-gray-focused-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-gray-hovered-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-gray-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-gray-resting-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-gray-resting-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-focused-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-focused-dark-linux.png
diff --git a/...ression/v-button.spec.ts-snapshots/filled-pink-8-focused-hovered-dark-linux.png b/...ression/v-button.spec.ts-snapshots/filled-pink-8-focused-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-hovered-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-resting-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-resting-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/filled-white-focused-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/filled-white-focused-dark-linux.png
diff --git a/...gression/v-button.spec.ts-snapshots/filled-white-focused-hovered-dark-linux.png b/...gression/v-button.spec.ts-snapshots/filled-white-focused-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/filled-white-hovered-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/filled-white-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/filled-white-resting-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/filled-white-resting-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-focused-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-focused-dark-linux.png
diff --git a/...gression/v-button.spec.ts-snapshots/plain--avoid-focused-hovered-dark-linux.png b/...gression/v-button.spec.ts-snapshots/plain--avoid-focused-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-dark-linux.png
diff --git a/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-focused-dark-linux.png b/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-focused-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/plain-focused-hovered-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/plain-focused-hovered-dark-linux.png
diff --git a/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-hovered-dark-linux.png b/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-hovered-dark-linux.png
diff --git a/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-resting-dark-linux.png b/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-resting-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-dark-focused-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-dark-focused-dark-linux.png
diff --git a/...sion/v-button.spec.ts-snapshots/transparent-dark-focused-hovered-dark-linux.png b/...sion/v-button.spec.ts-snapshots/transparent-dark-focused-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-dark-hovered-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-dark-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-dark-resting-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-dark-resting-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-gray-focused-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-gray-focused-dark-linux.png
diff --git a/...sion/v-button.spec.ts-snapshots/transparent-gray-focused-hovered-dark-linux.png b/...sion/v-button.spec.ts-snapshots/transparent-gray-focused-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-gray-hovered-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-gray-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-gray-resting-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-gray-resting-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-focused-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-focused-dark-linux.png
diff --git a/...ession/v-button.spec.ts-snapshots/transparent-tx-focused-hovered-dark-linux.png b/...ession/v-button.spec.ts-snapshots/transparent-tx-focused-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-hovered-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-resting-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-resting-dark-linux.png
diff --git a/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/default-dark-linux.png b/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/default-dark-linux.png
diff --git a/...torybook/visual-regression/v-checkbox.spec.ts-snapshots/disabled-dark-linux.png b/...torybook/visual-regression/v-checkbox.spec.ts-snapshots/disabled-dark-linux.png
diff --git a/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/focused-dark-linux.png b/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/focused-dark-linux.png
diff --git a/...t/storybook/visual-regression/v-checkbox.spec.ts-snapshots/hover-dark-linux.png b/...t/storybook/visual-regression/v-checkbox.spec.ts-snapshots/hover-dark-linux.png
diff --git a/...test/storybook/visual-regression/v-checkbox.spec.ts-snapshots/on-dark-linux.png b/...test/storybook/visual-regression/v-checkbox.spec.ts-snapshots/on-dark-linux.png
diff --git a/...ybook/visual-regression/v-checkbox.spec.ts-snapshots/on-disabled-dark-linux.png b/...ybook/visual-regression/v-checkbox.spec.ts-snapshots/on-disabled-dark-linux.png
diff --git a/...rybook/visual-regression/v-checkbox.spec.ts-snapshots/on-focused-dark-linux.png b/...rybook/visual-regression/v-checkbox.spec.ts-snapshots/on-focused-dark-linux.png
diff --git a/...v-collection-header.spec.ts-snapshots/VCollectionHeaders-ltr-xs-light-linux.png b/...v-collection-header.spec.ts-snapshots/VCollectionHeaders-ltr-xs-light-linux.png
diff --git a/...v-collection-header.spec.ts-snapshots/VCollectionHeaders-rtl-xs-light-linux.png b/...v-collection-header.spec.ts-snapshots/VCollectionHeaders-rtl-xs-light-linux.png
diff --git a/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-0-dark-linux.png b/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-0-dark-linux.png
diff --git a/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-1-dark-linux.png b/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-1-dark-linux.png
diff --git a/...-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-12-dark-linux.png b/...-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-12-dark-linux.png
diff --git a/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-0-dark-linux.png b/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-0-dark-linux.png
diff --git a/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-1-dark-linux.png b/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-1-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-12-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-12-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-0-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-0-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-1-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-1-dark-linux.png
diff --git a/...-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-12-dark-linux.png b/...-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-12-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-0-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-0-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-1-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-1-dark-linux.png
diff --git a/...on/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-12-dark-linux.png b/...on/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-12-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-0-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-0-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-1-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-1-dark-linux.png
diff --git a/...-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-12-dark-linux.png b/...-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-12-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-0-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-0-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-1-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-1-dark-linux.png
diff --git a/...on/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-12-dark-linux.png b/...on/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-12-dark-linux.png
diff --git a/...l-regression/v-icon-button.spec.ts-snapshots/v-icon-button-sizes-dark-linux.png b/...l-regression/v-icon-button.spec.ts-snapshots/v-icon-button-sizes-dark-linux.png
diff --git a/...l-regression/v-language-select.spec.ts-snapshots/vlanguageselect-dark-linux.png b/...l-regression/v-language-select.spec.ts-snapshots/vlanguageselect-dark-linux.png
diff --git a/...ession/v-search-bar-button.spec.ts-snapshots/back-button-focused-dark-linux.png b/...ession/v-search-bar-button.spec.ts-snapshots/back-button-focused-dark-linux.png
diff --git a/...ession/v-search-bar-button.spec.ts-snapshots/back-button-hovered-dark-linux.png b/...ession/v-search-bar-button.spec.ts-snapshots/back-button-hovered-dark-linux.png
diff --git a/...arch-bar-button.spec.ts-snapshots/clear-and-back-buttons-resting-dark-linux.png b/...arch-bar-button.spec.ts-snapshots/clear-and-back-buttons-resting-dark-linux.png
diff --git a/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-focused-dark-linux.png b/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-focused-dark-linux.png
diff --git a/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-hovered-dark-linux.png b/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-hovered-dark-linux.png
diff --git a/...ts-snapshots/v-search-type-button-button-with-text-label-at-rest-dark-linux.png b/...ts-snapshots/v-search-type-button-button-with-text-label-at-rest-dark-linux.png
diff --git a/...ts-snapshots/v-search-type-button-button-with-text-label-hovered-dark-linux.png b/...ts-snapshots/v-search-type-button-button-with-text-label-hovered-dark-linux.png
diff --git a/...hots/v-search-type-button-button-with-text-label-pressed-at-rest-dark-linux.png b/...hots/v-search-type-button-button-with-text-label-pressed-at-rest-dark-linux.png
diff --git a/...hots/v-search-type-button-button-with-text-label-pressed-hovered-dark-linux.png b/...hots/v-search-type-button-button-with-text-label-pressed-hovered-dark-linux.png
diff --git a/...snapshots/v-search-type-button-button-without-text-label-at-rest-dark-linux.png b/...snapshots/v-search-type-button-button-without-text-label-at-rest-dark-linux.png
diff --git a/...snapshots/v-search-type-button-button-without-text-label-hovered-dark-linux.png b/...snapshots/v-search-type-button-button-without-text-label-hovered-dark-linux.png
diff --git a/...s/v-search-type-button-button-without-text-label-pressed-at-rest-dark-linux.png b/...s/v-search-type-button-button-without-text-label-pressed-at-rest-dark-linux.png
diff --git a/...s/v-search-type-button-button-without-text-label-pressed-hovered-dark-linux.png b/...s/v-search-type-button-button-without-text-label-pressed-hovered-dark-linux.png
diff --git a/...regression/v-select-field.spec.ts-snapshots/vselectfield-default-dark-linux.png b/...regression/v-select-field.spec.ts-snapshots/vselectfield-default-dark-linux.png
diff --git a/...gression/v-select-field.spec.ts-snapshots/vselectfield-with-icon-dark-linux.png b/...gression/v-select-field.spec.ts-snapshots/vselectfield-with-icon-dark-linux.png
diff --git a/...ion/v-select-field.spec.ts-snapshots/vselectfield-without-border-dark-linux.png b/...ion/v-select-field.spec.ts-snapshots/vselectfield-without-border-dark-linux.png