feat(accordion): add default styles for ionic theme

core/src/components/accordion/accordion.scss → core/src/components/accordion/accordion.common.scss

@@ -1,6 +1,7 @@
-@import "./accordion.vars.scss";
+// @import "../../themes/functions.string";
+// @import "../../themes/mixins";
 
-// Accordion
+// Accordion: Common
 // --------------------------------------------------
 
 :host {
@@ -10,8 +11,6 @@
 
   width: 100%;
 
-  background-color: $accordion-background-color;
-
   overflow: hidden;
 
   /**
@@ -30,14 +29,6 @@
   --border-width: 0px;
 }
 
-:host(.accordion-animated) {
-  transition: all $accordion-transition-duration $accordion-transition-easing;
-}
-
-:host(.accordion-animated) #content {
-  transition: max-height $accordion-transition-duration $accordion-transition-easing;
-}
-
 #content {
   overflow: hidden;
 
@@ -72,16 +63,6 @@
   pointer-events: none;
 }
 
-/**
- * We do not set the opacity on the
- * host otherwise you would see the
- * box-shadow behind it.
- */
-:host(.accordion-disabled) #header,
-:host(.accordion-disabled) #content {
-  opacity: $accordion-disabled-opacity;
-}
-
 @media (prefers-reduced-motion: reduce) {
   :host,
   #content {

core/src/components/accordion/accordion.ionic.scss

@@ -0,0 +1,81 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./accordion.common";
+
+// Ionic Accordion
+// --------------------------------------------------
+
+:host {
+  position: relative;
+}
+
+// The border is added to the ::after element
+// to properly inset the border relative to the entire
+// accordion, rather than just the header.
+:host::after {
+  @include globals.margin(null, globals.$ionic-space-400, null, globals.$ionic-space-400);
+  @include globals.position(null, 0, 0, 0);
+
+  display: block;
+
+  position: absolute;
+
+  height: globals.$ionic-border-size-025;
+
+  background-color: globals.$ionic-color-neutral-300;
+
+  content: "";
+
+  z-index: 3;
+}
+
+:host(.accordion-animated) {
+  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+// Accordion Header
+// --------------------------------------------------
+
+// The border is removed from the item in the header because
+// we are adding a border to the ::after element of the accordion.
+::slotted(ion-item[slot="header"]) {
+  --border-radius: #{globals.$ionic-border-radius-0};
+  --color: #{globals.$ionic-color-neutral-1200};
+  --border-width: 0;
+  --inner-border-width: 0;
+  --min-height: #{globals.$ionic-scale-700};
+  --padding-top: #{globals.$ionic-space-300};
+  --padding-end: #{globals.$ionic-space-400};
+  --padding-bottom: #{globals.$ionic-space-300};
+  --padding-start: #{globals.$ionic-space-400};
+
+  @include globals.typography(globals.$ionic-heading-h6-medium);
+}
+
+// Shape only applies when inside an inset accordion group
+:host(.in-accordion-group-expand-inset) ::slotted(ion-item[slot="header"]) {
+  --border-radius: #{globals.$ionic-border-radius-400};
+}
+
+// Accordion Content
+// --------------------------------------------------
+
+#content {
+  @include globals.padding(null, globals.$ionic-space-400, globals.$ionic-space-300, globals.$ionic-space-400);
+  @include globals.typography(globals.$ionic-body-md-regular);
+
+  color: globals.$ionic-color-neutral-1000;
+}
+
+// Disabled Accordion
+// --------------------------------------------------
+
+:host(.accordion-disabled)::before {
+  @include globals.border-radius(inherit);
+  @include globals.disabled-state();
+
+  z-index: 2;
+}

core/src/components/accordion/accordion.ios.scss

@@ -1,4 +1,4 @@
-@import "./accordion.scss";
+@import "./accordion.native";
 @import "../item/item.ios.vars";
 
 // iOS Accordion

core/src/components/accordion/accordion.md.scss

@@ -1,4 +1,4 @@
-@import "./accordion.scss";
+@import "./accordion.native";
 
 // Material Design Accordion
 // --------------------------------------------------

core/src/components/accordion/accordion.native.scss

@@ -0,0 +1,27 @@
+@import "./accordion.common";
+@import "./accordion.vars.scss";
+
+// Accordion: Native
+// --------------------------------------------------
+
+:host {
+  background-color: $accordion-background-color;
+}
+
+:host(.accordion-animated) {
+  transition: all $accordion-transition-duration $accordion-transition-easing;
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height $accordion-transition-duration $accordion-transition-easing;
+}
+
+/**
+ * We do not set the opacity on the
+ * host otherwise you would see the
+ * box-shadow behind it.
+ */
+:host(.accordion-disabled) #header,
+:host(.accordion-disabled) #content {
+  opacity: $accordion-disabled-opacity;
+}

core/src/components/accordion/accordion.tsx

@@ -2,6 +2,7 @@ import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
+import { hostContext } from '@utils/theme';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -33,7 +34,7 @@ const enum AccordionState {
   styleUrls: {
     ios: 'accordion.ios.scss',
     md: 'accordion.md.scss',
-    ionic: 'accordion.md.scss',
+    ionic: 'accordion.ionic.scss',
   },
   shadow: {
     delegatesFocus: true,
@@ -48,7 +49,7 @@ export class Accordion implements ComponentInterface {
 
   private currentRaf: number | undefined;
 
-  @Element() el?: HTMLElement;
+  @Element() el!: HTMLElement;
 
   @State() state: AccordionState = AccordionState.Collapsed;
   @State() isNext = false;
@@ -378,10 +379,6 @@ export class Accordion implements ComponentInterface {
   };
 
   private getNextSibling = () => {
-    if (!this.el) {
-      return;
-    }
-
     const nextSibling = this.el.nextElementSibling;
 
     if (nextSibling?.tagName !== 'ION-ACCORDION') {
@@ -392,10 +389,6 @@ export class Accordion implements ComponentInterface {
   };
 
   private getPreviousSibling = () => {
-    if (!this.el) {
-      return;
-    }
-
     const previousSibling = this.el.previousElementSibling;
 
     if (previousSibling?.tagName !== 'ION-ACCORDION') {
@@ -449,6 +442,8 @@ export class Accordion implements ComponentInterface {
           'accordion-readonly': readonly,
 
           'accordion-animated': this.shouldAnimate(),
+
+          'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
         }}
       >
         <div

core/src/components/accordion/test/basic/accordion.e2e.ts

@@ -12,6 +12,7 @@ configs().forEach(({ config, screenshot, title }) => {
     });
   });
 });
+
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('accordion: ionChange'), () => {
     test.beforeEach(async ({ page }) => {
@@ -58,3 +59,39 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
+
+configs({ modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: basic'), () => {
+    test('should not have visual regressions with text content', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-accordion-group value="first">
+          <ion-accordion value="first">
+            <ion-item slot="header">
+              <ion-label>Accordion title</ion-label>
+            </ion-item>
+            <div slot="content">This is the body of the accordion.</div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header">
+              <ion-label>Accordion title</ion-label>
+            </ion-item>
+            <div slot="content">This is the body of the accordion.</div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header">
+              <ion-label>Accordion title</ion-label>
+            </ion-item>
+            <div slot="content">This is the body of the accordion.</div>
+          </ion-accordion>
+        </ion-accordion-group>
+      `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion-group');
+
+      await expect(accordion).toHaveScreenshot(screenshot('accordion-basic-text'));
+    });
+  });
+});

core/src/components/accordion/test/multiple/accordion.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('accordion: multiple'), () => {
     test('should update value and visually expand items', async ({ page }) => {
       await page.goto(`/src/components/accordion/test/multiple`, config);