diff --git a/core/src/components/accordion-group/accordion-group.common.scss b/core/src/components/accordion-group/accordion-group.common.scss new file mode 100644 index 0000000000..510b0d85a6 --- /dev/null +++ b/core/src/components/accordion-group/accordion-group.common.scss @@ -0,0 +1,6 @@ +// Accordion Group: Common +// -------------------------------------------------- + +:host { + display: block; +} diff --git a/core/src/components/accordion-group/accordion-group.ionic.scss b/core/src/components/accordion-group/accordion-group.ionic.scss new file mode 100644 index 0000000000..5ed4ffa3d1 --- /dev/null +++ b/core/src/components/accordion-group/accordion-group.ionic.scss @@ -0,0 +1,20 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@use "./accordion-group.common"; + +// Ionic Accordion Group +// -------------------------------------------------- + +:host { + min-width: 272px; + + background-color: globals.$ionic-color-base-white; +} + +// Inset Accordion Group +// -------------------------------------------------- + +// Shape and padding only apply if the group is inset +:host(.accordion-group-expand-inset) { + @include globals.border-radius(globals.$ionic-border-radius-400); + @include globals.padding(globals.$ionic-space-100); +} diff --git a/core/src/components/accordion-group/accordion-group.ios.scss b/core/src/components/accordion-group/accordion-group.ios.scss index fdf32c14a7..c47bf8d6cb 100644 --- a/core/src/components/accordion-group/accordion-group.ios.scss +++ b/core/src/components/accordion-group/accordion-group.ios.scss @@ -1,4 +1,4 @@ -@import "./accordion-group"; +@import "./accordion-group.native"; // iOS Accordion Group // -------------------------------------------------- diff --git a/core/src/components/accordion-group/accordion-group.md.scss b/core/src/components/accordion-group/accordion-group.md.scss index 5a3e0cef12..cafa0f087b 100644 --- a/core/src/components/accordion-group/accordion-group.md.scss +++ b/core/src/components/accordion-group/accordion-group.md.scss @@ -1,4 +1,4 @@ -@import "./accordion-group"; +@import "./accordion-group.native"; @import "../accordion/accordion.md.vars"; // Material Design Accordion Group diff --git a/core/src/components/accordion-group/accordion-group.scss b/core/src/components/accordion-group/accordion-group.native.scss similarity index 82% rename from core/src/components/accordion-group/accordion-group.scss rename to core/src/components/accordion-group/accordion-group.native.scss index b02c96ad71..b34175d933 100644 --- a/core/src/components/accordion-group/accordion-group.scss +++ b/core/src/components/accordion-group/accordion-group.native.scss @@ -1,13 +1,10 @@ +@import "./accordion-group.common"; @import "../../themes/native/native.globals"; @import "../accordion/accordion.vars"; -// Accordion Group +// Accordion Group: Native // -------------------------------------------------- -:host { - display: block; -} - :host(.accordion-group-expand-inset) { @include margin($accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin); } diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx index 556b08993c..1e2caedb02 100644 --- a/core/src/components/accordion-group/accordion-group.tsx +++ b/core/src/components/accordion-group/accordion-group.tsx @@ -15,7 +15,7 @@ import type { AccordionGroupChangeEventDetail } from './accordion-group-interfac styleUrls: { ios: 'accordion-group.ios.scss', md: 'accordion-group.md.scss', - ionic: 'accordion-group.md.scss', + ionic: 'accordion-group.ionic.scss', }, shadow: true, }) diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts b/core/src/components/accordion-group/test/expand/accordion.e2e.ts new file mode 100644 index 0000000000..a79d5dd438 --- /dev/null +++ b/core/src/components/accordion-group/test/expand/accordion.e2e.ts @@ -0,0 +1,162 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('accordion-group: expand'), () => { + test.describe(title('compact'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+ `, + config + ); + + const accordionGroup = page.locator('ion-accordion-group'); + + await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact')); + }); + + test('should not have visual regressions when expanded', async ({ page }) => { + await page.setContent( + ` + + + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+ `, + config + ); + + const accordionGroup = page.locator('ion-accordion-group'); + + await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact-expanded')); + }); + }); + + test.describe(title('inset'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+ `, + config + ); + + const accordionGroup = page.locator('ion-accordion-group'); + + await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset')); + }); + + test('should not have visual regressions when expanded', async ({ page }) => { + await page.setContent( + ` + + + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+ `, + config + ); + + const accordionGroup = page.locator('ion-accordion-group'); + + await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset-expanded')); + }); + }); + }); +}); diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a7f2a9a2ba Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2e434897c7 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e76429954b Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4592d9ccbd Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..646b1b6d87 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8df1e6f8da Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0e2ac1bdb8 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7473b53a15 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..88bdb9fc62 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6994cf20dc Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b91457f2c0 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d7d7bd4c18 Binary files /dev/null and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/index.html b/core/src/components/accordion-group/test/expand/index.html new file mode 100644 index 0000000000..4b1e30b29c --- /dev/null +++ b/core/src/components/accordion-group/test/expand/index.html @@ -0,0 +1,135 @@ + + + + + Accordion Group - Expand + + + + + + + + + + + + + Accordion Group - Expand + + + +
+
+

Default

+ + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+
+
+

Default: Expanded

+ + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+
+
+

Inset

+ + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+
+
+

Inset: Expanded

+ + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+
+
+
+
+ + diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts b/core/src/components/accordion-group/test/states/accordion.e2e.ts new file mode 100644 index 0000000000..4a64227331 --- /dev/null +++ b/core/src/components/accordion-group/test/states/accordion.e2e.ts @@ -0,0 +1,38 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('accordion-group: states'), () => { + test('should render disabled state', async ({ page }) => { + await page.setContent( + ` + + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+ `, + config + ); + + const accordionGroup = page.locator('ion-accordion-group'); + + await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-disabled')); + }); + }); +}); diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7dd8e10044 Binary files /dev/null and b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..66f2278979 Binary files /dev/null and b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..011d3ac2c9 Binary files /dev/null and b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/states/index.html b/core/src/components/accordion-group/test/states/index.html new file mode 100644 index 0000000000..5045868ca7 --- /dev/null +++ b/core/src/components/accordion-group/test/states/index.html @@ -0,0 +1,89 @@ + + + + + Accordion Group - States + + + + + + + + + + + + + Accordion Group - States + + + +
+
+

Default

+ + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+
+
+

Disabled

+ + + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+ + + Accordion title + +
This is the body of the accordion.
+
+
+
+
+
+
+ + diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss index a95cff2717..95071e1ec9 100644 --- a/core/src/css/ionic/core.ionic.scss +++ b/core/src/css/ionic/core.ionic.scss @@ -309,9 +309,6 @@ ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type { border-bottom-left-radius: globals.$ionic-border-radius-200; border-bottom-right-radius: globals.$ionic-border-radius-200; } -ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] { - --border-width: 0; -} ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon { transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1); @@ -334,16 +331,6 @@ ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon { transform: rotate(180deg); } -ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot="header"] { - --border-width: 0; - --inner-border-width: 0; -} - -ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type, -ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type { - margin-top: 0; -} - // Safari/iOS 15 changes the appearance of input[type="date"]. // For backwards compatibility from Ionic 5/Safari 14 designs, // we override the appearance only when using within an ion-input.