Merge remote-tracking branch 'origin/main' into chore/sync-with-main-12-05-22-b

core/src/components/item/test/highlight/item.e2e.ts

@@ -7,6 +7,8 @@ test.describe('item: highlight', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot()).toMatchSnapshot(`item-highlight-diff-${page.getSnapshotSettings()}.png`);
+    expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `item-highlight-diff-${page.getSnapshotSettings()}.png`
+    );
   });
 });

core/src/components/list/test/inset/index.html

@@ -96,16 +96,6 @@
               <ion-select-option>3</ion-select-option>
             </ion-select>
           </ion-item>
-
-          <ion-item>
-            <ion-label>Normal Datetime</ion-label>
-            <ion-datetime value="2022-11-29"></ion-datetime>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="stacked">Stacked Datetime</ion-label>
-            <ion-datetime value="2022-11-29"></ion-datetime>
-          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>

core/src/components/popover/test/test.utils.ts

@@ -33,8 +33,8 @@ export const closePopover = async (page: E2EPage, popover?: Locator) => {
 
 export const screenshotPopover = async (page: E2EPage, buttonID: string, testName: string) => {
   await page.goto(`src/components/popover/test/${testName}`);
+  await page.setIonViewport();
 
   await openPopover(page, buttonID);
-  await page.setIonViewport();
   expect(await page.screenshot()).toMatchSnapshot(`popover-${testName}-${buttonID}-${page.getSnapshotSettings()}.png`);
 };

core/src/components/tab-bar/test/basic/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/tab-bar/test/basic/tab-bar.e2e.ts

@@ -0,0 +1,32 @@
+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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-bar-basic-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/tab-bar/test/custom/e2e.ts

@@ -1,22 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/custom?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  const tabBar = await page.find('ion-tab-bar');
-  await tabBar.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot('tab-bar: custom default'));
-
-  await page.keyboard.press('Tab');
-
-  screenshotCompares.push(await page.compareScreenshot('tab-bar: custom tabbed'));
-  await page.waitForTimeout(10000);
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});

core/src/components/tab-bar/test/custom/index.html

@@ -128,7 +128,7 @@
             <ion-icon name="star" class="custom-icon"></ion-icon>
           </ion-tab-button>
 
-          <ion-tab-button tab="33333">
+          <ion-tab-button tab="33333" class="custom-all-tab-button">
             <ion-icon name="cog"></ion-icon>
             <ion-label>Settings</ion-label>
           </ion-tab-button>
@@ -202,6 +202,11 @@
         height: 80px;
       }
 
+      .custom-all-tab-button {
+        --background: rgba(163, 43, 43, 0.6);
+        --color: white;
+      }
+
       .custom-icon {
         font-size: 50px;
       }

core/src/components/tab-bar/test/custom/tab-bar.e2e.ts

@@ -0,0 +1,15 @@
+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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-bar-custom-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/tab-bar/test/scenarios/camera.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>

core/src/components/tab-bar/test/scenarios/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: scenarios', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/scenarios?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('tab-bar:rtl: scenarios', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/scenarios?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/tab-bar/test/scenarios/index.html

@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Tab Bar - Scenarios</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
-    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <!-- Default -->
-        <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>6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Settings</ion-label>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons -->
-        <ion-tab-bar color="primary" selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-icon name="call"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" selected-tab="1">
-            <ion-icon name="heart"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons on top of text -->
-        <ion-tab-bar color="secondary" selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-label>Location</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-badge>6</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>
-
-        <!-- Icons below text -->
-        <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>6</ion-badge>
-            <ion-label>hi</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>
-
-        <!-- Icons right of text -->
-        <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>6</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>
-
-        <!-- Icons left of text -->
-        <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-tab-button>
-
-          <ion-tab-button tab="2" layout="icon-start">
-            <ion-label>Favorites</ion-label>
-            <ion-icon name="heart"></ion-icon>
-            <ion-badge color="danger">6</ion-badge>
-          </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>
-
-        <!-- No icons -->
-        <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-badge color="danger">6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="icon-hide">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- No label -->
-        <ion-tab-bar color="secondary" selected-tab="1">
-          <ion-tab-button tab="1" layout="label-hide">
-            <ion-label>Recents</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-            <ion-badge>6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" layout="label-hide">
-            <ion-label>Favorites</ion-label>
-            <ion-icon name="heart"></ion-icon>
-            <ion-badge color="danger">6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="label-hide">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- No overflow text -->
-        <ion-tab-bar color="danger" selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-label>Indiana Jones and the Raiders of the Lost Ark</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-label>Indiana Jones and the Temple of Doom</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Indiana Jones and the Last Crusade</ion-label>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Custom Tab Bar -->
-        <ion-tab-bar selected-tab="1" class="custom-tabbar">
-          <ion-tab-button tab="1">
-            <ion-label>Location</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" class="main-tab">
-            <ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></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>
-
-        <!-- Custom Tab Bar Colors -->
-        <ion-tab-bar selected-tab="1" class="custom-tabbar-color">
-          <ion-tab-button tab="1">
-            <ion-label>Location</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-icon name="settings"></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>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      .custom-tabbar {
-        margin-top: 30px;
-        margin-bottom: 30px;
-        overflow: visible;
-        contain: none;
-      }
-
-      .main-tab {
-        border-radius: 50%;
-        max-width: 80px;
-        height: 80px;
-        --background: #3880ff;
-        --color: rgba(255, 255, 255, 0.7);
-        --color-selected: white;
-      }
-
-      .main-tab-icon {
-        font-size: 36px;
-      }
-
-      .custom-tabbar-color {
-        --background: #7044ff;
-      }
-
-      .custom-tabbar-color ion-tab-button {
-        --color: rgba(255, 255, 255, 0.7);
-        --color-selected: white;
-      }
-    </style>
-  </body>
-</html>

core/src/components/tab-bar/test/spec/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/spec?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/tab-bar/test/spec/index.html

@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Tab Bar - Spec</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
-    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
-  </head>
-
-  <body>
-    <!-- Default -->
-    <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>6</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-label>Settings</ion-label>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Default -->
-    <ion-tab-bar selected-tab="2">
-      <ion-tab-button tab="1">
-        <ion-label>Favorites</ion-label>
-        <ion-icon name="star"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-label>Recents</ion-label>
-        <ion-icon name="time"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-label>Contacts</ion-label>
-        <ion-icon name="person-circle-outline"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-label>Keypad</ion-label>
-        <ion-icon name="apps"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="5">
-        <ion-label>Voicemail</ion-label>
-        <ion-icon name="recording-outline"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Badges -->
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-        <ion-label>Item One Max</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-badge color="danger">88</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-        <ion-badge color="danger">888+</ion-badge>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2" layout="icon-bottom">
-        <ion-icon name="heart"></ion-icon>
-        <ion-label>Item One Max</ion-label>
-        <ion-badge color="danger"></ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-        <ion-badge color="danger">88</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-        <ion-badge color="danger">888+</ion-badge>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </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-bar>
-
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2" layout="icon-bottom">
-        <ion-icon name="heart"></ion-icon>
-        <ion-label>Item One Max</ion-label>
-        <ion-badge color="danger">88</ion-badge>
-      </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-tab-button>
-    </ion-tab-bar>
-
-    <!-- Custom Height -->
-    <ion-tab-bar color="danger" selected-tab="3" class="custom-height">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </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-tab-button>
-    </ion-tab-bar>
-
-    <!-- Custom Height / Alignment -->
-    <ion-tab-bar color="tertiary" selected-tab="3" class="custom-height custom-top">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </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-tab-button>
-    </ion-tab-bar>
-
-    <!-- Translucent -->
-    <ion-tab-bar translucent>
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </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-tab-button>
-    </ion-tab-bar>
-
-    <!-- Translucent / Custom Color -->
-    <ion-tab-bar translucent color="dark">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </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-tab-button>
-    </ion-tab-bar>
-
-    <style>
-      body {
-        background: #222;
-      }
-
-      ion-tab-bar {
-        margin-bottom: 5px;
-      }
-
-      .custom-height {
-        height: 80px;
-      }
-
-      .custom-top ion-tab-button {
-        justify-content: start;
-      }
-    </style>
-  </body>
-</html>

core/src/components/tab-bar/test/translucent/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/translucent?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts

@@ -0,0 +1,37 @@
+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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-bar-translucent-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/tab-button/test/basic/tab-button.e2e.ts

@@ -0,0 +1,85 @@
+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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-badge-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/tab-button/test/layout/tab-button.e2e.ts

@@ -0,0 +1,133 @@
+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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`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');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-no-icon-${page.getSnapshotSettings()}.png`);
+  });
+});