From ce0767bbb07ec21be44aca8532140ee02fc1468f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 3 May 2023 11:51:48 -0400
Subject: [PATCH] test(tabs, tab-bar, tab-button): migrate to generators
 (#27356)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Tabs, tab bar, and tab button are using legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Tabs, tab bar, and tab button are using modern syntax


https://github.com/ionic-team/ionic-framework/pull/27356/commits/962754d09467fb7d6e0766a877f4cb27af1736f7

- A translucent screenshot test was written in `tab-bar/test/basic` but
it is already being tested in `tab-bar/test/translucent`, so I deleted
the duplicate test/screenshots.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 .../tab-bar/test/basic/tab-bar.e2e-legacy.ts  |  32 ----
 ...-bar-basic-ios-ltr-Mobile-Chrome-linux.png | Bin 4347 -> 0 bytes
 ...bar-basic-ios-ltr-Mobile-Firefox-linux.png | Bin 4795 -> 0 bytes
 ...-bar-basic-ios-ltr-Mobile-Safari-linux.png | Bin 4128 -> 0 bytes
 .../tab-bar/test/custom/tab-bar.e2e-legacy.ts |  15 --
 .../tab-bar/test/custom/tab-bar.e2e.ts        |  14 ++
 ...bar-custom-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...ar-custom-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...bar-custom-ios-ltr-Mobile-Safari-linux.png | Bin
 ...-bar-custom-md-ltr-Mobile-Chrome-linux.png | Bin
 ...bar-custom-md-ltr-Mobile-Firefox-linux.png | Bin
 ...-bar-custom-md-ltr-Mobile-Safari-linux.png | Bin
 .../test/translucent/tab-bar.e2e-legacy.ts    |  37 -----
 .../tab-bar/test/translucent/tab-bar.e2e.ts   |  43 +++++
 ...ranslucent-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...ranslucent-ios-ltr-Mobile-Safari-linux.png | Bin
 .../test/a11y/tab-button.e2e-legacy.ts        |  13 --
 .../tab-button/test/a11y/tab-button.e2e.ts    |  15 ++
 .../test/basic/tab-button.e2e-legacy.ts       |  85 ----------
 .../tab-button/test/basic/tab-button.e2e.ts   |  96 +++++++++++
 ...tton-badge-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...ton-badge-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...tton-badge-ios-ltr-Mobile-Safari-linux.png | Bin
 ...tton-badge-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...ton-badge-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...tton-badge-ios-rtl-Mobile-Safari-linux.png | Bin
 ...utton-badge-md-ltr-Mobile-Chrome-linux.png | Bin
 ...tton-badge-md-ltr-Mobile-Firefox-linux.png | Bin
 ...utton-badge-md-ltr-Mobile-Safari-linux.png | Bin
 ...utton-badge-md-rtl-Mobile-Chrome-linux.png | Bin
 ...tton-badge-md-rtl-Mobile-Firefox-linux.png | Bin
 ...utton-badge-md-rtl-Mobile-Safari-linux.png | Bin
 ...tton-label-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...ton-label-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...tton-label-ios-ltr-Mobile-Safari-linux.png | Bin
 ...tton-label-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...ton-label-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...tton-label-ios-rtl-Mobile-Safari-linux.png | Bin
 ...utton-label-md-ltr-Mobile-Chrome-linux.png | Bin
 ...tton-label-md-ltr-Mobile-Firefox-linux.png | Bin
 ...utton-label-md-ltr-Mobile-Safari-linux.png | Bin
 ...utton-label-md-rtl-Mobile-Chrome-linux.png | Bin
 ...tton-label-md-rtl-Mobile-Firefox-linux.png | Bin
 ...utton-label-md-rtl-Mobile-Safari-linux.png | Bin
 .../test/layout/tab-button.e2e-legacy.ts      | 133 ----------------
 .../tab-button/test/layout/tab-button.e2e.ts  | 150 ++++++++++++++++++
 ...icon-below-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...con-below-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...icon-below-ios-ltr-Mobile-Safari-linux.png | Bin
 ...icon-below-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...con-below-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...icon-below-ios-rtl-Mobile-Safari-linux.png | Bin
 ...-icon-below-md-ltr-Mobile-Chrome-linux.png | Bin
 ...icon-below-md-ltr-Mobile-Firefox-linux.png | Bin
 ...-icon-below-md-ltr-Mobile-Safari-linux.png | Bin
 ...-icon-below-md-rtl-Mobile-Chrome-linux.png | Bin
 ...icon-below-md-rtl-Mobile-Firefox-linux.png | Bin
 ...-icon-below-md-rtl-Mobile-Safari-linux.png | Bin
 ...-icon-left-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...icon-left-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...-icon-left-ios-ltr-Mobile-Safari-linux.png | Bin
 ...-icon-left-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...icon-left-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...-icon-left-ios-rtl-Mobile-Safari-linux.png | Bin
 ...n-icon-left-md-ltr-Mobile-Chrome-linux.png | Bin
 ...-icon-left-md-ltr-Mobile-Firefox-linux.png | Bin
 ...n-icon-left-md-ltr-Mobile-Safari-linux.png | Bin
 ...n-icon-left-md-rtl-Mobile-Chrome-linux.png | Bin
 ...-icon-left-md-rtl-Mobile-Firefox-linux.png | Bin
 ...n-icon-left-md-rtl-Mobile-Safari-linux.png | Bin
 ...icon-right-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...con-right-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...icon-right-ios-ltr-Mobile-Safari-linux.png | Bin
 ...icon-right-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...con-right-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...icon-right-ios-rtl-Mobile-Safari-linux.png | Bin
 ...-icon-right-md-ltr-Mobile-Chrome-linux.png | Bin
 ...icon-right-md-ltr-Mobile-Firefox-linux.png | Bin
 ...-icon-right-md-ltr-Mobile-Safari-linux.png | Bin
 ...-icon-right-md-rtl-Mobile-Chrome-linux.png | Bin
 ...icon-right-md-rtl-Mobile-Firefox-linux.png | Bin
 ...-icon-right-md-rtl-Mobile-Safari-linux.png | Bin
 ...n-icon-top-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...-icon-top-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...n-icon-top-ios-ltr-Mobile-Safari-linux.png | Bin
 ...n-icon-top-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...-icon-top-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...n-icon-top-ios-rtl-Mobile-Safari-linux.png | Bin
 ...on-icon-top-md-ltr-Mobile-Chrome-linux.png | Bin
 ...n-icon-top-md-ltr-Mobile-Firefox-linux.png | Bin
 ...on-icon-top-md-ltr-Mobile-Safari-linux.png | Bin
 ...on-icon-top-md-rtl-Mobile-Chrome-linux.png | Bin
 ...n-icon-top-md-rtl-Mobile-Firefox-linux.png | Bin
 ...on-icon-top-md-rtl-Mobile-Safari-linux.png | Bin
 ...on-no-icon-ios-ltr-Mobile-Chrome-linux.png | Bin
 ...n-no-icon-ios-ltr-Mobile-Firefox-linux.png | Bin
 ...on-no-icon-ios-ltr-Mobile-Safari-linux.png | Bin
 ...on-no-icon-ios-rtl-Mobile-Chrome-linux.png | Bin
 ...n-no-icon-ios-rtl-Mobile-Firefox-linux.png | Bin
 ...on-no-icon-ios-rtl-Mobile-Safari-linux.png | Bin
 ...ton-no-icon-md-ltr-Mobile-Chrome-linux.png | Bin
 ...on-no-icon-md-ltr-Mobile-Firefox-linux.png | Bin
 ...ton-no-icon-md-ltr-Mobile-Safari-linux.png | Bin
 ...ton-no-icon-md-rtl-Mobile-Chrome-linux.png | Bin
 ...on-no-icon-md-rtl-Mobile-Firefox-linux.png | Bin
 ...ton-no-icon-md-rtl-Mobile-Safari-linux.png | Bin
 .../tabs/test/basic/tabs.e2e-legacy.ts        |  38 -----
 .../components/tabs/test/basic/tabs.e2e.ts    |  38 +++++
 .../tabs/test/placements/tabs.e2e-legacy.ts   |  40 -----
 .../tabs/test/placements/tabs.e2e.ts          |  45 ++++++
 ...-bar-bottom-md-ltr-Mobile-Chrome-linux.png | Bin
 ...bar-bottom-md-ltr-Mobile-Firefox-linux.png | Bin
 ...-bar-bottom-md-ltr-Mobile-Safari-linux.png | Bin
 ...tab-bar-top-md-ltr-Mobile-Chrome-linux.png | Bin
 ...ab-bar-top-md-ltr-Mobile-Firefox-linux.png | Bin
 ...tab-bar-top-md-ltr-Mobile-Safari-linux.png | Bin
 116 files changed, 401 insertions(+), 393 deletions(-)
 delete mode 100644 core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts
 delete mode 100644 core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Chrome-linux.png
 delete mode 100644 core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Firefox-linux.png
 delete mode 100644 core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Safari-linux.png
 delete mode 100644 core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts
 create mode 100644 core/src/components/tab-bar/test/custom/tab-bar.e2e.ts
 rename core/src/components/tab-bar/test/custom/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-bar/test/custom/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-bar/test/custom/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-bar/test/custom/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-bar/test/custom/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-bar/test/custom/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-custom-md-ltr-Mobile-Safari-linux.png (100%)
 delete mode 100644 core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts
 create mode 100644 core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
 rename core/src/components/tab-bar/test/translucent/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-bar/test/translucent/{tab-bar.e2e-legacy.ts-snapshots => tab-bar.e2e.ts-snapshots}/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png (100%)
 delete mode 100644 core/src/components/tab-button/test/a11y/tab-button.e2e-legacy.ts
 create mode 100644 core/src/components/tab-button/test/a11y/tab-button.e2e.ts
 delete mode 100644 core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts
 create mode 100644 core/src/components/tab-button/test/basic/tab-button.e2e.ts
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-badge-md-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/basic/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-label-md-rtl-Mobile-Safari-linux.png (100%)
 delete mode 100644 core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts
 create mode 100644 core/src/components/tab-button/test/layout/tab-button.e2e.ts
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tab-button/test/layout/{tab-button.e2e-legacy.ts-snapshots => tab-button.e2e.ts-snapshots}/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png (100%)
 delete mode 100644 core/src/components/tabs/test/basic/tabs.e2e-legacy.ts
 create mode 100644 core/src/components/tabs/test/basic/tabs.e2e.ts
 delete mode 100644 core/src/components/tabs/test/placements/tabs.e2e-legacy.ts
 create mode 100644 core/src/components/tabs/test/placements/tabs.e2e.ts
 rename core/src/components/tabs/test/placements/{tabs.e2e-legacy.ts-snapshots => tabs.e2e.ts-snapshots}/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tabs/test/placements/{tabs.e2e-legacy.ts-snapshots => tabs.e2e.ts-snapshots}/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tabs/test/placements/{tabs.e2e-legacy.ts-snapshots => tabs.e2e.ts-snapshots}/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png (100%)
 rename core/src/components/tabs/test/placements/{tabs.e2e-legacy.ts-snapshots => tabs.e2e.ts-snapshots}/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png (100%)
 rename core/src/components/tabs/test/placements/{tabs.e2e-legacy.ts-snapshots => tabs.e2e.ts-snapshots}/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png (100%)
 rename core/src/components/tabs/test/placements/{tabs.e2e-legacy.ts-snapshots => tabs.e2e.ts-snapshots}/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png (100%)

diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts
deleted file mode 100644
index fca4323acb..0000000000
--- a/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tab-bar: basic', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('md', 'Translucent is only available in iOS mode');
-  });
-  test('should render tab bar', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar selected-tab="1">
-        <ion-tab-button tab="1">
-          <ion-label>Recents</ion-label>
-          <ion-icon name="call"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-label>Favorites</ion-label>
-          <ion-badge>23</ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3">
-          <ion-label>Settings</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-bar-basic-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index e4fcf20c7c56b493547ad09db7ea7fd9b920ed9b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4347
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

diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 02055f88e6500ca6f7e98376f0e60fe6f50b0aa8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4795
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
H^WgsjX$<|e

diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e-legacy.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 43a1892209af3469e769f95ecdeaf271ab6de216..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4128
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
bTDWG<#yI}Pz(wkTmLH_9s-se^WF7H8e&G29

diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts b/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts
deleted file mode 100644
index 15f9f2705b..0000000000
--- a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tab-bar: custom', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should render custom tab bar', async ({ page }) => {
-    await page.goto('/src/components/tab-bar/test/custom');
-
-    const tabBar = page.locator('ion-tab-bar.custom-all');
-
-    await expect(tabBar).toHaveScreenshot(`tab-bar-custom-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts
new file mode 100644
index 0000000000..fcd47a0a3a
--- /dev/null
+++ b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: custom'), () => {
+    test('should render custom tab bar', async ({ page }) => {
+      await page.goto('/src/components/tab-bar/test/custom', config);
+
+      const tabBar = page.locator('ion-tab-bar.custom-all');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-custom`));
+    });
+  });
+});
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/custom/tab-bar.e2e-legacy.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts
deleted file mode 100644
index 1d19f3faf7..0000000000
--- a/core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tab-bar: translucent', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('md', 'Translucent is only available in iOS mode');
-    skip.browser('firefox', 'Firefox does not support translucent effect');
-  });
-  test('should render translucent tab bar', async ({ page }) => {
-    await page.setContent(`
-      <style>
-        body {
-          background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
-        }
-      </style>
-      <ion-tab-bar translucent="true" selected-tab="1">
-        <ion-tab-button tab="1">
-          <ion-label>Recents</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-label>Favorites</ion-label>
-          <ion-badge>23</ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3">
-          <ion-label>Settings</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-bar-translucent-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
new file mode 100644
index 0000000000..fedd12f046
--- /dev/null
+++ b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Translucent is only available in iOS mode
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: translucent'), () => {
+    test.beforeEach(({ skip }) => {
+      skip.browser('firefox', 'Firefox does not support translucent effect');
+    });
+    test('should render translucent tab bar', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          body {
+            background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+          }
+        </style>
+        <ion-tab-bar translucent="true" selected-tab="1">
+          <ion-tab-button tab="1">
+            <ion-label>Recents</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-label>Favorites</ion-label>
+            <ion-badge>23</ion-badge>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-label>Settings</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent`));
+    });
+  });
+});
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-bar/test/translucent/tab-bar.e2e-legacy.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/a11y/tab-button.e2e-legacy.ts b/core/src/components/tab-button/test/a11y/tab-button.e2e-legacy.ts
deleted file mode 100644
index 3b5f4852a3..0000000000
--- a/core/src/components/tab-button/test/a11y/tab-button.e2e-legacy.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tab-button: a11y', () => {
-  test('should not have any axe violations', async ({ page }) => {
-    await page.goto('/src/components/tab-button/test/a11y');
-
-    // TODO FW-3604
-    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-    expect(results.violations).toEqual([]);
-  });
-});
diff --git a/core/src/components/tab-button/test/a11y/tab-button.e2e.ts b/core/src/components/tab-button/test/a11y/tab-button.e2e.ts
new file mode 100644
index 0000000000..d33365613d
--- /dev/null
+++ b/core/src/components/tab-button/test/a11y/tab-button.e2e.ts
@@ -0,0 +1,15 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, config }) => {
+  test.describe(title('tab-button: a11y'), () => {
+    test('should not have any axe violations', async ({ page }) => {
+      await page.goto('/src/components/tab-button/test/a11y', config);
+
+      // TODO FW-3604
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+      expect(results.violations).toEqual([]);
+    });
+  });
+});
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts b/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts
deleted file mode 100644
index 85f4814e05..0000000000
--- a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tab-button: basic', () => {
-  test('should render tab button with label', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar selected-tab="1">
-        <ion-tab-button tab="1">
-          <ion-label>Recents</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-label>Favorites</ion-label>
-          <ion-badge>23</ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3">
-          <ion-label>Settings</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-label-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render tab button with badges', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar selected-tab="1">
-        <ion-tab-button tab="1">
-          <ion-icon name="heart"></ion-icon>
-          <ion-label>Favorites</ion-label>
-          <ion-badge color="danger"></ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-icon name="musical-note"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3">
-          <ion-icon name="today"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="4">
-          <ion-icon name="calendar"></ion-icon>
-          <ion-badge color="danger">47</ion-badge>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-badge-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render tab button with icons', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar selected-tab="1">
-        <ion-tab-button tab="1">
-          <ion-icon name="heart"></ion-icon>
-          <ion-label>Favorites</ion-label>
-          <ion-badge color="danger"></ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-icon name="musical-note"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3">
-          <ion-icon name="today"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="4">
-          <ion-icon name="calendar"></ion-icon>
-          <ion-badge color="danger">47</ion-badge>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-badge-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts b/core/src/components/tab-button/test/basic/tab-button.e2e.ts
new file mode 100644
index 0000000000..0208f8bfab
--- /dev/null
+++ b/core/src/components/tab-button/test/basic/tab-button.e2e.ts
@@ -0,0 +1,96 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: basic'), () => {
+    test('should render tab button with label', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar selected-tab="1">
+          <ion-tab-button tab="1">
+            <ion-label>Recents</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-label>Favorites</ion-label>
+            <ion-badge>23</ion-badge>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-label>Settings</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-label`));
+    });
+
+    test('should render tab button with badges', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar selected-tab="1">
+          <ion-tab-button tab="1">
+            <ion-icon name="heart"></ion-icon>
+            <ion-label>Favorites</ion-label>
+            <ion-badge color="danger"></ion-badge>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="musical-note"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="today"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="4">
+            <ion-icon name="calendar"></ion-icon>
+            <ion-badge color="danger">47</ion-badge>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-badge`));
+    });
+
+    test('should render tab button with icons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar selected-tab="1">
+          <ion-tab-button tab="1">
+            <ion-icon name="heart"></ion-icon>
+            <ion-label>Favorites</ion-label>
+            <ion-badge color="danger"></ion-badge>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="musical-note"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-icon name="today"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="4">
+            <ion-icon name="calendar"></ion-icon>
+            <ion-badge color="danger">47</ion-badge>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-badge`));
+    });
+  });
+});
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/basic/tab-button.e2e-legacy.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts b/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts
deleted file mode 100644
index a3e907ee7c..0000000000
--- a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tab-button: basic', () => {
-  test('should render tab button with icons left of text', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar color="light" selected-tab="1">
-        <ion-tab-button tab="1" layout="icon-start">
-          <ion-label>Recents</ion-label>
-          <ion-icon name="call"></ion-icon>
-          <ion-badge color="danger">12</ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2" layout="icon-start">
-          <ion-label>Favorites</ion-label>
-          <ion-icon name="heart"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3" layout="icon-start">
-          <ion-label>Settings</ion-label>
-          <ion-icon name="settings"></ion-icon>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-icon-left-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render tab button with icons right of text', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar color="danger" selected-tab="1">
-        <ion-tab-button tab="1" layout="icon-end">
-          <ion-label>Recents</ion-label>
-          <ion-icon name="call"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2" layout="icon-end">
-          <ion-label>Favorites</ion-label>
-          <ion-icon name="heart"></ion-icon>
-          <ion-badge color="dark">33</ion-badge>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3" layout="icon-end">
-          <ion-label>Settings</ion-label>
-          <ion-icon name="settings"></ion-icon>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-icon-right-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render tab button with icons below text', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar color="dark" selected-tab="1">
-        <ion-tab-button tab="1" layout="icon-bottom">
-          <ion-label>Recents</ion-label>
-          <ion-icon name="call"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-badge>16</ion-badge>
-          <ion-label>Favorites</ion-label>
-          <ion-icon name="heart"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3" layout="icon-bottom">
-          <ion-label>Settings</ion-label>
-          <ion-icon name="settings"></ion-icon>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-icon-below-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render tab button with icons on top of text', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar color="secondary" selected-tab="1">
-        <ion-tab-button tab="1">
-          <ion-label>Location</ion-label>
-          <ion-icon name="navigate"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2">
-          <ion-badge color="danger">44</ion-badge>
-          <ion-icon name="heart"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3">
-          <ion-label>Radio</ion-label>
-          <ion-icon name="musical-notes"></ion-icon>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-icon-top-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render tab button with no icons', async ({ page }) => {
-    await page.setContent(`
-      <ion-tab-bar color="primary" selected-tab="1">
-        <ion-tab-button tab="1" layout="icon-hide">
-          <ion-label>Recents</ion-label>
-          <ion-icon name="call"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="2" layout="icon-hide">
-          <ion-label>Favorites</ion-label>
-          <ion-icon name="heart"></ion-icon>
-        </ion-tab-button>
-
-        <ion-tab-button tab="3" layout="icon-hide">
-          <ion-label>Settings</ion-label>
-          <ion-icon name="settings"></ion-icon>
-          <ion-badge color="danger">2</ion-badge>
-        </ion-tab-button>
-      </ion-tab-bar>
-    `);
-
-    const tabBar = page.locator('ion-tab-bar');
-
-    await expect(tabBar).toHaveScreenshot(`tab-button-no-icon-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts b/core/src/components/tab-button/test/layout/tab-button.e2e.ts
new file mode 100644
index 0000000000..9e61c4521b
--- /dev/null
+++ b/core/src/components/tab-button/test/layout/tab-button.e2e.ts
@@ -0,0 +1,150 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: basic'), () => {
+    test('should render tab button with icons left of text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar color="light" selected-tab="1">
+          <ion-tab-button tab="1" layout="icon-start">
+            <ion-label>Recents</ion-label>
+            <ion-icon name="call"></ion-icon>
+            <ion-badge color="danger">12</ion-badge>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2" layout="icon-start">
+            <ion-label>Favorites</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3" layout="icon-start">
+            <ion-label>Settings</ion-label>
+            <ion-icon name="settings"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-icon-left`));
+    });
+
+    test('should render tab button with icons right of text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar color="danger" selected-tab="1">
+          <ion-tab-button tab="1" layout="icon-end">
+            <ion-label>Recents</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2" layout="icon-end">
+            <ion-label>Favorites</ion-label>
+            <ion-icon name="heart"></ion-icon>
+            <ion-badge color="dark">33</ion-badge>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3" layout="icon-end">
+            <ion-label>Settings</ion-label>
+            <ion-icon name="settings"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-icon-right`));
+    });
+
+    test('should render tab button with icons below text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar color="dark" selected-tab="1">
+          <ion-tab-button tab="1" layout="icon-bottom">
+            <ion-label>Recents</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-badge>16</ion-badge>
+            <ion-label>Favorites</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3" layout="icon-bottom">
+            <ion-label>Settings</ion-label>
+            <ion-icon name="settings"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-icon-below`));
+    });
+
+    test('should render tab button with icons on top of text', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar color="secondary" selected-tab="1">
+          <ion-tab-button tab="1">
+            <ion-label>Location</ion-label>
+            <ion-icon name="navigate"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-badge color="danger">44</ion-badge>
+            <ion-icon name="heart"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3">
+            <ion-label>Radio</ion-label>
+            <ion-icon name="musical-notes"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-icon-top`));
+    });
+
+    test('should render tab button with no icons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tab-bar color="primary" selected-tab="1">
+          <ion-tab-button tab="1" layout="icon-hide">
+            <ion-label>Recents</ion-label>
+            <ion-icon name="call"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2" layout="icon-hide">
+            <ion-label>Favorites</ion-label>
+            <ion-icon name="heart"></ion-icon>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3" layout="icon-hide">
+            <ion-label>Settings</ion-label>
+            <ion-icon name="settings"></ion-icon>
+            <ion-badge color="danger">2</ion-badge>
+          </ion-tab-button>
+        </ion-tab-bar>
+      `,
+        config
+      );
+
+      const tabBar = page.locator('ion-tab-bar');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-button-no-icon`));
+    });
+  });
+});
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tab-button/test/layout/tab-button.e2e-legacy.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/tabs/test/basic/tabs.e2e-legacy.ts b/core/src/components/tabs/test/basic/tabs.e2e-legacy.ts
deleted file mode 100644
index 464fc3a842..0000000000
--- a/core/src/components/tabs/test/basic/tabs.e2e-legacy.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tabs: basic', () => {
-  test('should show correct tab when clicking the tab button', async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios');
-    await page.goto('/src/components/tabs/test/basic');
-
-    const tabOne = page.locator('ion-tab[tab="tab-one"]');
-    const tabTwo = page.locator('ion-tab[tab="schedule"]');
-
-    // The tab button for tab 3 is disabled so this is never visible
-    const tabThree = page.locator('ion-tab[tab="tab-three"]');
-
-    // Tab Four renders a nested web component
-    const tabFour = page.locator('ion-tab[tab="tab-four"] page-one');
-
-    await expect(tabOne).toBeVisible();
-    await expect(tabTwo).toBeHidden();
-    await expect(tabThree).toBeHidden();
-    await expect(tabFour).toBeHidden();
-
-    await page.click('ion-tab-button[tab="schedule"]');
-
-    await expect(tabOne).toBeHidden();
-    await expect(tabTwo).toBeVisible();
-    await expect(tabThree).toBeHidden();
-    await expect(tabFour).toBeHidden();
-
-    await page.click('ion-tab-button[tab="tab-four"]');
-
-    await expect(tabOne).toBeHidden();
-    await expect(tabTwo).toBeHidden();
-    await expect(tabThree).toBeHidden();
-    await expect(tabFour).toBeVisible();
-  });
-});
diff --git a/core/src/components/tabs/test/basic/tabs.e2e.ts b/core/src/components/tabs/test/basic/tabs.e2e.ts
new file mode 100644
index 0000000000..65e487784b
--- /dev/null
+++ b/core/src/components/tabs/test/basic/tabs.e2e.ts
@@ -0,0 +1,38 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('tabs: basic'), () => {
+    test('should show correct tab when clicking the tab button', async ({ page }) => {
+      await page.goto('/src/components/tabs/test/basic', config);
+
+      const tabOne = page.locator('ion-tab[tab="tab-one"]');
+      const tabTwo = page.locator('ion-tab[tab="schedule"]');
+
+      // The tab button for tab 3 is disabled so this is never visible
+      const tabThree = page.locator('ion-tab[tab="tab-three"]');
+
+      // Tab Four renders a nested web component
+      const tabFour = page.locator('ion-tab[tab="tab-four"] page-one');
+
+      await expect(tabOne).toBeVisible();
+      await expect(tabTwo).toBeHidden();
+      await expect(tabThree).toBeHidden();
+      await expect(tabFour).toBeHidden();
+
+      await page.click('ion-tab-button[tab="schedule"]');
+
+      await expect(tabOne).toBeHidden();
+      await expect(tabTwo).toBeVisible();
+      await expect(tabThree).toBeHidden();
+      await expect(tabFour).toBeHidden();
+
+      await page.click('ion-tab-button[tab="tab-four"]');
+
+      await expect(tabOne).toBeHidden();
+      await expect(tabTwo).toBeHidden();
+      await expect(tabThree).toBeHidden();
+      await expect(tabFour).toBeVisible();
+    });
+  });
+});
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts b/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts
deleted file mode 100644
index 692d885603..0000000000
--- a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('tabs: placement', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios');
-
-    await page.setViewportSize({
-      width: 300,
-      height: 200,
-    });
-  });
-  test('should show tab bar at the top of tabs', async ({ page }) => {
-    await page.setContent(`
-      <ion-tabs>
-        <ion-tab tab="one">My Content</ion-tab>
-        <ion-tab-bar slot="top">
-          <ion-tab-button tab="one">One</ion-tab-button>
-        </ion-tab-bar>
-      </ion-tabs>
-    `);
-
-    const tabs = page.locator('ion-tabs');
-    await expect(tabs).toHaveScreenshot(`tabs-tab-bar-top-${page.getSnapshotSettings()}.png`);
-  });
-  test('should show tab bar at the bottom of tabs', async ({ page }) => {
-    await page.setContent(`
-      <ion-tabs>
-        <ion-tab tab="one">My Content</ion-tab>
-        <ion-tab-bar slot="bottom">
-          <ion-tab-button tab="one">One</ion-tab-button>
-        </ion-tab-bar>
-      </ion-tabs>
-    `);
-
-    const tabs = page.locator('ion-tabs');
-    await expect(tabs).toHaveScreenshot(`tabs-tab-bar-bottom-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts b/core/src/components/tabs/test/placements/tabs.e2e.ts
new file mode 100644
index 0000000000..f43e8b2824
--- /dev/null
+++ b/core/src/components/tabs/test/placements/tabs.e2e.ts
@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tabs: placement'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setViewportSize({
+        width: 300,
+        height: 200,
+      });
+    });
+    test('should show tab bar at the top of tabs', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tabs>
+          <ion-tab tab="one">My Content</ion-tab>
+          <ion-tab-bar slot="top">
+            <ion-tab-button tab="one">One</ion-tab-button>
+          </ion-tab-bar>
+        </ion-tabs>
+      `,
+        config
+      );
+
+      const tabs = page.locator('ion-tabs');
+      await expect(tabs).toHaveScreenshot(screenshot(`tabs-tab-bar-top`));
+    });
+    test('should show tab bar at the bottom of tabs', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-tabs>
+          <ion-tab tab="one">My Content</ion-tab>
+          <ion-tab-bar slot="bottom">
+            <ion-tab-button tab="one">One</ion-tab-button>
+          </ion-tab-bar>
+        </ion-tabs>
+      `,
+        config
+      );
+
+      const tabs = page.locator('ion-tabs');
+      await expect(tabs).toHaveScreenshot(screenshot(`tabs-tab-bar-bottom`));
+    });
+  });
+});
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/tabs/test/placements/tabs.e2e-legacy.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png