Skip to content

Commit 114fe28

Browse files
authored
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
1 parent 9f51bdc commit 114fe28

File tree

2 files changed

+22
-1
lines changed

2 files changed

+22
-1
lines changed

core/src/components/accordion/accordion.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ export class Accordion implements ComponentInterface {
417417
'accordion-disabled': disabled,
418418
'accordion-readonly': readonly,
419419

420-
'accordion-animated': config.getBoolean('animated', true),
420+
'accordion-animated': this.shouldAnimate(),
421421
}}
422422
>
423423
<div

core/src/components/accordion/test/accordion.spec.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,3 +163,24 @@ it('should set default values if not provided', async () => {
163163

164164
expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
165165
});
166+
167+
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
168+
it('should not have animated class when animated="false"', async () => {
169+
const page = await newSpecPage({
170+
components: [Item, Accordion, AccordionGroup],
171+
html: `
172+
<ion-accordion-group animated="false">
173+
<ion-accordion>
174+
<ion-item slot="header">Label</ion-item>
175+
<div slot="content">Content</div>
176+
</ion-accordion>
177+
</ion-accordion-group>
178+
`,
179+
});
180+
181+
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
182+
const accordion = accordionGroup.querySelector('ion-accordion')!;
183+
184+
expect(accordionGroup.animated).toEqual(false);
185+
expect(accordion.classList.contains('accordion-animated')).toEqual(false);
186+
});

0 commit comments

Comments
 (0)