Skip to content

Commit a0101bf

Browse files
brandyscarneybrandyscarney
authored
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
1 parent 51a86fb commit a0101bf

File tree

454 files changed

+600
-18
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

454 files changed

+600
-18
lines changed

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,30 @@ slot[name="end"]::slotted(*) {
8989

9090
content: "";
9191
}
92+
93+
// Ionic Item Lines
94+
// --------------------------------------------------
95+
96+
// Full lines - apply the border to the item
97+
// Inset lines - apply the border to the item inner
98+
:host(.item-lines-full) {
99+
--border-width: #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-025} #{globals.$ionic-border-size-0};
100+
}
101+
102+
:host(.item-lines-inset) {
103+
--inner-border-width: #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-0} #{globals.$ionic-border-size-025}
104+
#{globals.$ionic-border-size-0};
105+
}
106+
107+
// Full lines - remove the border from the item inner (inset list items)
108+
// Inset lines - remove the border on the item (full list items)
109+
// No lines - remove the border on both (full / inset list items)
110+
:host(.item-lines-inset),
111+
:host(.item-lines-none) {
112+
--border-width: #{globals.$ionic-border-size-0};
113+
}
114+
115+
:host(.item-lines-full),
116+
:host(.item-lines-none) {
117+
--inner-border-width: #{globals.$ionic-border-size-0};
118+
}

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

Lines changed: 201 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,210 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4-
configs().forEach(({ title, screenshot, config }) => {
4+
configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
55
test.describe(title('item: lines'), () => {
6-
test('should not have visual regressions', async ({ page }) => {
7-
await page.goto(`/src/components/item/test/lines`, config);
6+
test.describe('default', () => {
7+
test('should not have visual regressions', async ({ page }) => {
8+
await page.setContent(
9+
`
10+
<ion-item>
11+
<ion-label>Label</ion-label>
12+
</ion-item>
13+
`,
14+
config
15+
);
816

9-
await page.setIonViewport();
17+
const item = page.locator('ion-item');
1018

11-
await expect(page).toHaveScreenshot(screenshot(`item-lines-diff`));
19+
await expect(item).toHaveScreenshot(screenshot(`item-lines-default`));
20+
});
21+
22+
test('should not have visual regressions with slotted icons', async ({ page }) => {
23+
await page.setContent(
24+
`
25+
<ion-item>
26+
<ion-icon name="star" slot="start"></ion-icon>
27+
<ion-label>Label</ion-label>
28+
<ion-icon name="information-circle" slot="end"></ion-icon>
29+
</ion-item>
30+
`,
31+
config
32+
);
33+
34+
const item = page.locator('ion-item');
35+
36+
await expect(item).toHaveScreenshot(screenshot(`item-lines-default-icon`));
37+
});
38+
39+
test('should not have visual regressions with color', async ({ page }) => {
40+
await page.setContent(
41+
`
42+
<ion-item color="danger">
43+
<ion-icon name="star" slot="start"></ion-icon>
44+
<ion-label>Label</ion-label>
45+
<ion-icon name="information-circle" slot="end"></ion-icon>
46+
</ion-item>
47+
`,
48+
config
49+
);
50+
51+
const item = page.locator('ion-item');
52+
53+
await expect(item).toHaveScreenshot(screenshot(`item-lines-color`));
54+
});
55+
});
56+
57+
test.describe('inset', () => {
58+
test('should not have visual regressions', async ({ page }) => {
59+
await page.setContent(
60+
`
61+
<ion-item lines="inset">
62+
<ion-label>Label</ion-label>
63+
</ion-item>
64+
`,
65+
config
66+
);
67+
68+
const item = page.locator('ion-item');
69+
70+
await expect(item).toHaveScreenshot(screenshot(`item-lines-inset`));
71+
});
72+
73+
test('should not have visual regressions with slotted icons', async ({ page }) => {
74+
await page.setContent(
75+
`
76+
<ion-item lines="inset">
77+
<ion-icon name="star" slot="start"></ion-icon>
78+
<ion-label>Label</ion-label>
79+
<ion-icon name="information-circle" slot="end"></ion-icon>
80+
</ion-item>
81+
`,
82+
config
83+
);
84+
85+
const item = page.locator('ion-item');
86+
87+
await expect(item).toHaveScreenshot(screenshot(`item-lines-inset-icon`));
88+
});
89+
90+
test('should not have visual regressions with color', async ({ page }) => {
91+
await page.setContent(
92+
`
93+
<ion-item lines="inset" color="danger">
94+
<ion-icon name="star" slot="start"></ion-icon>
95+
<ion-label>Label</ion-label>
96+
<ion-icon name="information-circle" slot="end"></ion-icon>
97+
</ion-item>
98+
`,
99+
config
100+
);
101+
102+
const item = page.locator('ion-item');
103+
104+
await expect(item).toHaveScreenshot(screenshot(`item-lines-inset-color`));
105+
});
106+
});
107+
108+
test.describe('full', () => {
109+
test('should not have visual regressions', async ({ page }) => {
110+
await page.setContent(
111+
`
112+
<ion-item lines="full">
113+
<ion-label>Label</ion-label>
114+
</ion-item>
115+
`,
116+
config
117+
);
118+
119+
const item = page.locator('ion-item');
120+
121+
await expect(item).toHaveScreenshot(screenshot(`item-lines-full`));
122+
});
123+
124+
test('should not have visual regressions with slotted icons', async ({ page }) => {
125+
await page.setContent(
126+
`
127+
<ion-item lines="full">
128+
<ion-icon name="star" slot="start"></ion-icon>
129+
<ion-label>Label</ion-label>
130+
<ion-icon name="information-circle" slot="end"></ion-icon>
131+
</ion-item>
132+
`,
133+
config
134+
);
135+
136+
const item = page.locator('ion-item');
137+
138+
await expect(item).toHaveScreenshot(screenshot(`item-lines-full-icon`));
139+
});
140+
141+
test('should not have visual regressions with color', async ({ page }) => {
142+
await page.setContent(
143+
`
144+
<ion-item lines="full" color="danger">
145+
<ion-icon name="star" slot="start"></ion-icon>
146+
<ion-label>Label</ion-label>
147+
<ion-icon name="information-circle" slot="end"></ion-icon>
148+
</ion-item>
149+
`,
150+
config
151+
);
152+
153+
const item = page.locator('ion-item');
154+
155+
await expect(item).toHaveScreenshot(screenshot(`item-lines-full-color`));
156+
});
157+
});
158+
159+
test.describe('none', () => {
160+
test('should not have visual regressions', async ({ page }) => {
161+
await page.setContent(
162+
`
163+
<ion-item lines="none">
164+
<ion-label>Label</ion-label>
165+
</ion-item>
166+
`,
167+
config
168+
);
169+
170+
const item = page.locator('ion-item');
171+
172+
await expect(item).toHaveScreenshot(screenshot(`item-lines-none`));
173+
});
174+
175+
test('should not have visual regressions with slotted icons', async ({ page }) => {
176+
await page.setContent(
177+
`
178+
<ion-item lines="none">
179+
<ion-icon name="star" slot="start"></ion-icon>
180+
<ion-label>Label</ion-label>
181+
<ion-icon name="information-circle" slot="end"></ion-icon>
182+
</ion-item>
183+
`,
184+
config
185+
);
186+
187+
const item = page.locator('ion-item');
188+
189+
await expect(item).toHaveScreenshot(screenshot(`item-lines-none-icon`));
190+
});
191+
192+
test('should not have visual regressions with color', async ({ page }) => {
193+
await page.setContent(
194+
`
195+
<ion-item lines="none" color="danger">
196+
<ion-icon name="star" slot="start"></ion-icon>
197+
<ion-label>Label</ion-label>
198+
<ion-icon name="information-circle" slot="end"></ion-icon>
199+
</ion-item>
200+
`,
201+
config
202+
);
203+
204+
const item = page.locator('ion-item');
205+
206+
await expect(item).toHaveScreenshot(screenshot(`item-lines-none-color`));
207+
});
12208
});
13209
});
14210
});

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.92 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

3.16 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Safari-linux.png‎

2.77 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Chrome-linux.png‎

2.91 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Firefox-linux.png‎

3.17 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Safari-linux.png‎

2.75 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Chrome-linux.png‎

2.31 KB

‎core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Firefox-linux.png‎

2.71 KB

0 commit comments

Comments
 (0)