From 114fe28f3cc9ee52bc5eefa569353f490ab01023 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 12 Apr 2023 12:45:30 -0700
Subject: [PATCH] fix(accordion): inset style respects animated property
 (#27173)

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

- Accordion groups with `expand='inset'` ignore the `animated='false'`.
- Accordions will render with the `accordion-animated` class regardless
of `animated='false'`.


<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #27047


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Accordion groups do not ignore `animated='false'` regardless of
`expand` value.
- Accordions render the `accordion-animated` class only when
`animated='true'`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A
---
 core/src/components/accordion/accordion.tsx   |  2 +-
 .../accordion/test/accordion.spec.ts          | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 8da0a312ff..41d1449400 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -417,7 +417,7 @@ export class Accordion implements ComponentInterface {
           'accordion-disabled': disabled,
           'accordion-readonly': readonly,
 
-          'accordion-animated': config.getBoolean('animated', true),
+          'accordion-animated': this.shouldAnimate(),
         }}
       >
         <div
diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts
index 4eefb14423..56c5162d93 100644
--- a/core/src/components/accordion/test/accordion.spec.ts
+++ b/core/src/components/accordion/test/accordion.spec.ts
@@ -163,3 +163,24 @@ it('should set default values if not provided', async () => {
 
   expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
 });
+
+// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
+it('should not have animated class when animated="false"', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordion = accordionGroup.querySelector('ion-accordion')!;
+
+  expect(accordionGroup.animated).toEqual(false);
+  expect(accordion.classList.contains('accordion-animated')).toEqual(false);
+});