Skip to content

Commit 9a60dd0

Browse files
authored
feat(accordion-group): add animated property to disable animations (#23530)
1 parent fc9e1b4 commit 9a60dd0

File tree

8 files changed

+30
-10
lines changed

8 files changed

+30
-10
lines changed

angular/src/directives/proxies.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export class IonAccordion {
1717
}
1818
export declare interface IonAccordionGroup extends Components.IonAccordionGroup {
1919
}
20-
@ProxyCmp({ inputs: ["disabled", "expand", "mode", "multiple", "readonly", "value"] })
21-
@Component({ selector: "ion-accordion-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["disabled", "expand", "mode", "multiple", "readonly", "value"] })
20+
@ProxyCmp({ inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] })
21+
@Component({ selector: "ion-accordion-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] })
2222
export class IonAccordionGroup {
2323
ionChange!: EventEmitter<CustomEvent>;
2424
protected el: HTMLElement;

core/api.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ ion-accordion,part,expanded
1111
ion-accordion,part,header
1212

1313
ion-accordion-group,shadow
14+
ion-accordion-group,prop,animated,boolean,true,false,false
1415
ion-accordion-group,prop,disabled,boolean,false,false,false
1516
ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
1617
ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export namespace Components {
3737
"value": string;
3838
}
3939
interface IonAccordionGroup {
40+
/**
41+
* If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
42+
*/
43+
"animated": boolean;
4044
/**
4145
* If `true`, the accordion group cannot be interacted with.
4246
*/
@@ -3555,6 +3559,10 @@ declare namespace LocalJSX {
35553559
"value"?: string;
35563560
}
35573561
interface IonAccordionGroup {
3562+
/**
3563+
* If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
3564+
*/
3565+
"animated"?: boolean;
35583566
/**
35593567
* If `true`, the accordion group cannot be interacted with.
35603568
*/

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ import { AccordionGroupChangeEventDetail } from '../../interface';
1717
export class AccordionGroup implements ComponentInterface {
1818
@Element() el!: HTMLIonAccordionGroupElement;
1919

20+
/**
21+
* If `true`, all accordions inside of the
22+
* accordion group will animate when expanding
23+
* or collapsing.
24+
*/
25+
@Prop() animated = true;
26+
2027
/**
2128
* If `true`, the accordion group can have multiple
2229
* accordion components expanded at the same time.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ For more information as well as usage, see the [Accordion Documentation](./accor
1111

1212
| Property | Attribute | Description | Type | Default |
1313
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
14+
| `animated` | `animated` | If `true`, all accordions inside of the accordion group will animate when expanding or collapsing. | `boolean` | `true` |
1415
| `disabled` | `disabled` | If `true`, the accordion group cannot be interacted with. | `boolean` | `false` |
1516
| `expand` | `expand` | Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`. | `"compact" \| "inset"` | `'compact'` |
1617
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |

core/src/components/accordion/accordion.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,8 @@ export class Accordion implements ComponentInterface {
292292
const animated = config.get('animated', true);
293293
if (!animated) { return false; }
294294

295+
if (this.accordionGroupEl && !this.accordionGroupEl.animated) { return false; }
296+
295297
return true;
296298
}
297299

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ it('should properly set readonly on child accordions', async () => {
77
const page = await newSpecPage({
88
components: [Item, Accordion, AccordionGroup],
99
html: `
10-
<ion-accordion-group>
10+
<ion-accordion-group animated="false">
1111
<ion-accordion>
1212
<ion-item slot="header">Label</ion-item>
1313
<div slot="content">Content</div>
@@ -36,7 +36,7 @@ it('should properly set disabled on child accordions', async () => {
3636
const page = await newSpecPage({
3737
components: [Item, Accordion, AccordionGroup],
3838
html: `
39-
<ion-accordion-group>
39+
<ion-accordion-group animated="false">
4040
<ion-accordion>
4141
<ion-item slot="header">Label</ion-item>
4242
<div slot="content">Content</div>
@@ -65,7 +65,7 @@ it('should open correct accordions', async () => {
6565
const page = await newSpecPage({
6666
components: [Item, Accordion, AccordionGroup],
6767
html: `
68-
<ion-accordion-group>
68+
<ion-accordion-group animated="false">
6969
<ion-accordion value="first">
7070
<ion-item slot="header">Label</ion-item>
7171
<div slot="content">Content</div>
@@ -102,7 +102,7 @@ it('should not open more than one accordion when multiple="false"', async () =>
102102
const page = await newSpecPage({
103103
components: [Item, Accordion, AccordionGroup],
104104
html: `
105-
<ion-accordion-group>
105+
<ion-accordion-group animated="false">
106106
<ion-accordion value="first">
107107
<ion-item slot="header">Label</ion-item>
108108
<div slot="content">Content</div>
@@ -138,7 +138,7 @@ it('should open more than one accordion when multiple="true"', async () => {
138138
const page = await newSpecPage({
139139
components: [Item, Accordion, AccordionGroup],
140140
html: `
141-
<ion-accordion-group multiple="true">
141+
<ion-accordion-group multiple="true" animated="false">
142142
<ion-accordion value="first">
143143
<ion-item slot="header">Label</ion-item>
144144
<div slot="content">Content</div>
@@ -174,7 +174,7 @@ it('should render with accordion open', async () => {
174174
const page = await newSpecPage({
175175
components: [Item, Accordion, AccordionGroup],
176176
html: `
177-
<ion-accordion-group value="first">
177+
<ion-accordion-group value="first" animated="false">
178178
<ion-accordion value="first">
179179
<ion-item slot="header">Label</ion-item>
180180
<div slot="content">Content</div>
@@ -203,7 +203,7 @@ it('should accept a string when multiple="true"', async () => {
203203
const page = await newSpecPage({
204204
components: [Item, Accordion, AccordionGroup],
205205
html: `
206-
<ion-accordion-group multiple="true" value="first">
206+
<ion-accordion-group multiple="true" value="first" animated="false">
207207
<ion-accordion value="first">
208208
<ion-item slot="header">Label</ion-item>
209209
<div slot="content">Content</div>
@@ -232,7 +232,7 @@ it('should set default values if not provided', async () => {
232232
const page = await newSpecPage({
233233
components: [Item, Accordion, AccordionGroup],
234234
html: `
235-
<ion-accordion-group>
235+
<ion-accordion-group animated="false">
236236
<ion-accordion>
237237
<ion-item slot="header">Label</ion-item>
238238
<div slot="content">Content</div>

packages/vue/src/proxies.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion
8888

8989

9090
export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionGroup>('ion-accordion-group', IonAccordionGroupCmp, [
91+
'animated',
9192
'multiple',
9293
'value',
9394
'disabled',

0 commit comments

Comments
 (0)