feat(item, list): add support for lines property in ionic theme (#29816)

- Adds the supported styles for `lines` in both the item and list components
- Splits the tests up in `item/test/lines` and `list/test/lines` so that it isn't taking screenshots of an entire page and instead tests based on the lines property

core/src/components/item/item.ionic.scss

@@ -89,3 +89,30 @@ slot[name="end"]::slotted(*) {
 
   content: "";
 }
+
+// Ionic Item Lines
+// --------------------------------------------------
+
+// Full lines - apply the border to the item
+// Inset lines - apply the border to the item inner
+:host(.item-lines-full) {
+  --border-width: #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-025} #{globals.$ionic-border-size-0};
+}
+
+:host(.item-lines-inset) {
+  --inner-border-width: #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-025}
+    #{globals.$ionic-border-size-0};
+}
+
+// Full lines - remove the border from the item inner (inset list items)
+// Inset lines - remove the border on the item (full list items)
+// No lines - remove the border on both (full / inset list items)
+:host(.item-lines-inset),
+:host(.item-lines-none) {
+  --border-width: #{globals.$ionic-border-size-0};
+}
+
+:host(.item-lines-full),
+:host(.item-lines-none) {
+  --inner-border-width: #{globals.$ionic-border-size-0};
+}

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

@@ -1,14 +1,210 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item: lines'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/item/test/lines`, config);
+    test.describe('default', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item>
+            <ion-label>Label</ion-label>
+          </ion-item>
+        `,
+          config
+        );
 
-      await page.setIonViewport();
+        const item = page.locator('ion-item');
 
-      await expect(page).toHaveScreenshot(screenshot(`item-lines-diff`));
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-default`));
+      });
+
+      test('should not have visual regressions with slotted icons', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item>
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-default-icon`));
+      });
+
+      test('should not have visual regressions with color', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item color="danger">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-color`));
+      });
+    });
+
+    test.describe('inset', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="inset">
+            <ion-label>Label</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-inset`));
+      });
+
+      test('should not have visual regressions with slotted icons', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="inset">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-inset-icon`));
+      });
+
+      test('should not have visual regressions with color', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="inset" color="danger">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-inset-color`));
+      });
+    });
+
+    test.describe('full', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="full">
+            <ion-label>Label</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-full`));
+      });
+
+      test('should not have visual regressions with slotted icons', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="full">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-full-icon`));
+      });
+
+      test('should not have visual regressions with color', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="full" color="danger">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-full-color`));
+      });
+    });
+
+    test.describe('none', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="none">
+            <ion-label>Label</ion-label>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-none`));
+      });
+
+      test('should not have visual regressions with slotted icons', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="none">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-none-icon`));
+      });
+
+      test('should not have visual regressions with color', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-item lines="none" color="danger">
+            <ion-icon name="star" slot="start"></ion-icon>
+            <ion-label>Label</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+        `,
+          config
+        );
+
+        const item = page.locator('ion-item');
+
+        await expect(item).toHaveScreenshot(screenshot(`item-lines-none-color`));
+      });
     });
   });
 });