feat(accordion-group): add animated property to disable animations (#23530)

Author: liamdebeasi

angular/src/directives/proxies.ts

@@ -17,8 +17,8 @@ export class IonAccordion {
 }
 export declare interface IonAccordionGroup extends Components.IonAccordionGroup {
 }
-@ProxyCmp({ inputs: ["disabled", "expand", "mode", "multiple", "readonly", "value"] })
-@Component({ selector: "ion-accordion-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["disabled", "expand", "mode", "multiple", "readonly", "value"] })
+@ProxyCmp({ inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] })
+@Component({ selector: "ion-accordion-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] })
 export class IonAccordionGroup {
   ionChange!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;

core/api.txt

@@ -11,6 +11,7 @@ ion-accordion,part,expanded
 ion-accordion,part,header
 
 ion-accordion-group,shadow
+ion-accordion-group,prop,animated,boolean,true,false,false
 ion-accordion-group,prop,disabled,boolean,false,false,false
 ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
 ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -37,6 +37,10 @@ export namespace Components {
         "value": string;
     }
     interface IonAccordionGroup {
+        /**
+          * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
+         */
+        "animated": boolean;
         /**
           * If `true`, the accordion group cannot be interacted with.
          */
@@ -3555,6 +3559,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface IonAccordionGroup {
+        /**
+          * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
+         */
+        "animated"?: boolean;
         /**
           * If `true`, the accordion group cannot be interacted with.
          */

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

@@ -17,6 +17,13 @@ import { AccordionGroupChangeEventDetail } from '../../interface';
 export class AccordionGroup implements ComponentInterface {
   @Element() el!: HTMLIonAccordionGroupElement;
 
+  /**
+   * If `true`, all accordions inside of the
+   * accordion group will animate when expanding
+   * or collapsing.
+   */
+  @Prop() animated = true;
+
   /**
    * If `true`, the accordion group can have multiple
    * accordion components expanded at the same time.

core/src/components/accordion-group/readme.md

@@ -11,6 +11,7 @@ For more information as well as usage, see the [Accordion Documentation](./accor
 
 | Property   | Attribute  | Description                                                                                                                  | Type                                      | Default     |
 | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `animated` | `animated` | If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.                           | `boolean`                                 | `true`      |
 | `disabled` | `disabled` | If `true`, the accordion group cannot be interacted with.                                                                    | `boolean`                                 | `false`     |
 | `expand`   | `expand`   | Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`. | `"compact" \| "inset"`                    | `'compact'` |
 | `mode`     | `mode`     | The mode determines which platform styles to use.                                                                            | `"ios" \| "md"`                           | `undefined` |

core/src/components/accordion/accordion.tsx

@@ -292,6 +292,8 @@ export class Accordion implements ComponentInterface {
     const animated = config.get('animated', true);
     if (!animated) { return false; }
 
+    if (this.accordionGroupEl && !this.accordionGroupEl.animated) { return false; }
+
     return true;
   }
 

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

@@ -7,7 +7,7 @@ it('should properly set readonly on child accordions', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group>
+      <ion-accordion-group animated="false">
         <ion-accordion>
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -36,7 +36,7 @@ it('should properly set disabled on child accordions', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group>
+      <ion-accordion-group animated="false">
         <ion-accordion>
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -65,7 +65,7 @@ it('should open correct accordions', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group>
+      <ion-accordion-group animated="false">
         <ion-accordion value="first">
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -102,7 +102,7 @@ it('should not open more than one accordion when multiple="false"', async () =>
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group>
+      <ion-accordion-group animated="false">
         <ion-accordion value="first">
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -138,7 +138,7 @@ it('should open more than one accordion when multiple="true"', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group multiple="true">
+      <ion-accordion-group multiple="true" animated="false">
         <ion-accordion value="first">
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -174,7 +174,7 @@ it('should render with accordion open', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group value="first">
+      <ion-accordion-group value="first" animated="false">
         <ion-accordion value="first">
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -203,7 +203,7 @@ it('should accept a string when multiple="true"', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group multiple="true" value="first">
+      <ion-accordion-group multiple="true" value="first" animated="false">
         <ion-accordion value="first">
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>
@@ -232,7 +232,7 @@ it('should set default values if not provided', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
-      <ion-accordion-group>
+      <ion-accordion-group animated="false">
         <ion-accordion>
           <ion-item slot="header">Label</ion-item>
           <div slot="content">Content</div>

packages/vue/src/proxies.ts

@@ -88,6 +88,7 @@ export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion
 
 
 export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionGroup>('ion-accordion-group', IonAccordionGroupCmp, [
+  'animated',
   'multiple',
   'value',
   'disabled',