Skip to content

Commit 69c5b4e

Browse files
OS-pedrolourencoOS-pedrolourenco
committed
Merge branch 'next' into ROU-11265
2 parents 1d58e62 + 15d6104 commit 69c5b4e

File tree

86 files changed

+1161
-146
lines changed

Some content is hidden

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

86 files changed

+1161
-146
lines changed

‎core/api.txt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -884,7 +884,7 @@ ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,fa
884884

885885
ion-input,scoped
886886
ion-input,prop,autocapitalize,string,'off',false,false
887-
ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
887+
ion-input,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
888888
ion-input,prop,autocorrect,"off" | "on",'off',false,false
889889
ion-input,prop,autofocus,boolean,false,false,false
890890
ion-input,prop,clearInput,boolean,false,false,false
@@ -1867,7 +1867,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
18671867
ion-searchbar,scoped
18681868
ion-searchbar,prop,animated,boolean,false,false,false
18691869
ion-searchbar,prop,autocapitalize,string,'off',false,false
1870-
ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
1870+
ion-searchbar,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
18711871
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
18721872
ion-searchbar,prop,cancelButtonIcon,string | undefined,undefined,false,false
18731873
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false

‎core/src/components/accordion-group/accordion-group.common.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Accordion Group: Common
2+
// --------------------------------------------------
3+
4+
:host {
5+
display: block;
6+
}

‎core/src/components/accordion-group/accordion-group.ionic.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@use "../../themes/ionic/ionic.globals.scss" as globals;
2+
@use "./accordion-group.common";
3+
4+
// Ionic Accordion Group
5+
// --------------------------------------------------
6+
7+
:host {
8+
min-width: 272px;
9+
10+
background-color: globals.$ionic-color-base-white;
11+
}
12+
13+
// Inset Accordion Group
14+
// --------------------------------------------------
15+
16+
// Shape and padding only apply if the group is inset
17+
:host(.accordion-group-expand-inset) {
18+
@include globals.border-radius(globals.$ionic-border-radius-400);
19+
@include globals.padding(globals.$ionic-space-100);
20+
}

‎core/src/components/accordion-group/accordion-group.ios.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "./accordion-group";
1+
@import "./accordion-group.native";
22

33
// iOS Accordion Group
44
// --------------------------------------------------

‎core/src/components/accordion-group/accordion-group.md.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "./accordion-group";
1+
@import "./accordion-group.native";
22
@import "../accordion/accordion.md.vars";
33

44
// Material Design Accordion Group

‎core/src/components/accordion-group/accordion-group.scss‎ renamed to ‎core/src/components/accordion-group/accordion-group.native.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1+
@import "./accordion-group.common";
12
@import "../../themes/native/native.globals";
23
@import "../accordion/accordion.vars";
34

4-
// Accordion Group
5+
// Accordion Group: Native
56
// --------------------------------------------------
67

7-
:host {
8-
display: block;
9-
}
10-
118
:host(.accordion-group-expand-inset) {
129
@include margin($accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin);
1310
}

‎core/src/components/accordion-group/accordion-group.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import type { AccordionGroupChangeEventDetail } from './accordion-group-interfac
1515
styleUrls: {
1616
ios: 'accordion-group.ios.scss',
1717
md: 'accordion-group.md.scss',
18-
ionic: 'accordion-group.md.scss',
18+
ionic: 'accordion-group.ionic.scss',
1919
},
2020
shadow: true,
2121
})

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
5+
test.describe(title('accordion-group: expand'), () => {
6+
test.describe(title('compact'), () => {
7+
test('should not have visual regressions', async ({ page }) => {
8+
await page.setContent(
9+
`
10+
<style>
11+
/* Background styles to show the border radius */
12+
:root {
13+
background: #ccc7c7;
14+
}
15+
</style>
16+
<ion-accordion-group>
17+
<ion-accordion value="first">
18+
<ion-item slot="header">
19+
<ion-label>Accordion title</ion-label>
20+
</ion-item>
21+
<div slot="content">This is the body of the accordion.</div>
22+
</ion-accordion>
23+
<ion-accordion value="second">
24+
<ion-item slot="header">
25+
<ion-label>Accordion title</ion-label>
26+
</ion-item>
27+
<div slot="content">This is the body of the accordion.</div>
28+
</ion-accordion>
29+
<ion-accordion value="third">
30+
<ion-item slot="header">
31+
<ion-label>Accordion title</ion-label>
32+
</ion-item>
33+
<div slot="content">This is the body of the accordion.</div>
34+
</ion-accordion>
35+
</ion-accordion-group>
36+
`,
37+
config
38+
);
39+
40+
const accordionGroup = page.locator('ion-accordion-group');
41+
42+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact'));
43+
});
44+
45+
test('should not have visual regressions when expanded', async ({ page }) => {
46+
await page.setContent(
47+
`
48+
<style>
49+
/* Background styles to show the border radius */
50+
:root {
51+
background: #ccc7c7;
52+
}
53+
</style>
54+
<ion-accordion-group value="first">
55+
<ion-accordion value="first">
56+
<ion-item slot="header">
57+
<ion-label>Accordion title</ion-label>
58+
</ion-item>
59+
<div slot="content">This is the body of the accordion.</div>
60+
</ion-accordion>
61+
<ion-accordion value="second">
62+
<ion-item slot="header">
63+
<ion-label>Accordion title</ion-label>
64+
</ion-item>
65+
<div slot="content">This is the body of the accordion.</div>
66+
</ion-accordion>
67+
<ion-accordion value="third">
68+
<ion-item slot="header">
69+
<ion-label>Accordion title</ion-label>
70+
</ion-item>
71+
<div slot="content">This is the body of the accordion.</div>
72+
</ion-accordion>
73+
</ion-accordion-group>
74+
`,
75+
config
76+
);
77+
78+
const accordionGroup = page.locator('ion-accordion-group');
79+
80+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact-expanded'));
81+
});
82+
});
83+
84+
test.describe(title('inset'), () => {
85+
test('should not have visual regressions', async ({ page }) => {
86+
await page.setContent(
87+
`
88+
<style>
89+
/* Background styles to show the border radius */
90+
:root {
91+
background: #ccc7c7;
92+
}
93+
</style>
94+
<ion-accordion-group expand="inset">
95+
<ion-accordion value="first">
96+
<ion-item slot="header">
97+
<ion-label>Accordion title</ion-label>
98+
</ion-item>
99+
<div slot="content">This is the body of the accordion.</div>
100+
</ion-accordion>
101+
<ion-accordion value="second">
102+
<ion-item slot="header">
103+
<ion-label>Accordion title</ion-label>
104+
</ion-item>
105+
<div slot="content">This is the body of the accordion.</div>
106+
</ion-accordion>
107+
<ion-accordion value="third">
108+
<ion-item slot="header">
109+
<ion-label>Accordion title</ion-label>
110+
</ion-item>
111+
<div slot="content">This is the body of the accordion.</div>
112+
</ion-accordion>
113+
</ion-accordion-group>
114+
`,
115+
config
116+
);
117+
118+
const accordionGroup = page.locator('ion-accordion-group');
119+
120+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset'));
121+
});
122+
123+
test('should not have visual regressions when expanded', async ({ page }) => {
124+
await page.setContent(
125+
`
126+
<style>
127+
/* Background styles to show the border radius */
128+
:root {
129+
background: #ccc7c7;
130+
}
131+
</style>
132+
<ion-accordion-group value="first" expand="inset">
133+
<ion-accordion value="first">
134+
<ion-item slot="header">
135+
<ion-label>Accordion title</ion-label>
136+
</ion-item>
137+
<div slot="content">This is the body of the accordion.</div>
138+
</ion-accordion>
139+
<ion-accordion value="second">
140+
<ion-item slot="header">
141+
<ion-label>Accordion title</ion-label>
142+
</ion-item>
143+
<div slot="content">This is the body of the accordion.</div>
144+
</ion-accordion>
145+
<ion-accordion value="third">
146+
<ion-item slot="header">
147+
<ion-label>Accordion title</ion-label>
148+
</ion-item>
149+
<div slot="content">This is the body of the accordion.</div>
150+
</ion-accordion>
151+
</ion-accordion-group>
152+
`,
153+
config
154+
);
155+
156+
const accordionGroup = page.locator('ion-accordion-group');
157+
158+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset-expanded'));
159+
});
160+
});
161+
});
162+
});

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

8.26 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

11.7 KB
Loading

0 commit comments

Comments
 (0)