Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(accordion): add skip-accordion-toggle attribute #30292

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(accordion): add skip-accordion-toggle attribute #30292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions core/src/components/accordion/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,12 +381,22 @@ export class Accordion implements ComponentInterface {
return previousSibling as HTMLIonAccordionElement;
};

private toggleExpanded() {
private toggleExpanded(event: MouseEvent) {
const { accordionGroupEl, disabled, readonly, value, state } = this;

if (disabled || readonly) return;

if (accordionGroupEl) {
/**
* We check if the element that was clicked has the attribute
* skip-accordion-toggle. In case the element has it, then the accordion
* won't request an accordion toggle if it's inside an accordion group
*/
const target = event.target as HTMLInputElement;
if (target.hasAttribute('skip-accordion-toggle') && target.getAttribute('skip-accordion-toggle') !== 'false') {
return;
}

/**
* Because the accordion group may or may
* not allow multiple accordions open, we
Expand Down Expand Up @@ -428,7 +438,7 @@ export class Accordion implements ComponentInterface {
}}
>
<div
onClick={() => this.toggleExpanded()}
onClick={($event) => this.toggleExpanded($event)}
id="header"
part={headerPart}
aria-controls="content"
Expand Down
32 changes: 32 additions & 0 deletions core/src/components/accordion/test/basic/accordion.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,20 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
<button slot="header">Header</button>
<div slot="content">Third Content</div>
</ion-accordion>
<ion-accordion value="fourth">
<ion-item slot="header">
<ion-button slot="start" skip-accordion-toggle>Skip Toggle</ion-button>
<ion-label>Header</ion-label>
</ion-item>
<div slot="content">Fourth Content</div>
</ion-accordion>
<ion-accordion value="fifth">
<ion-item slot="header">
<ion-button slot="start" skip-accordion-toggle="false">Skip Toggle</ion-button>
<ion-label>Header</ion-label>
</ion-item>
<div slot="content">Fifth Content</div>
</ion-accordion>
</ion-accordion-group>
`,
config
Expand All @@ -49,6 +63,24 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' });
});

test('should not fire ionChange when click comes from an element with skip-accordion-toggle', async ({ page }) => {
const ionChange = await page.spyOnEvent('ionChange');
const skipAccordionToggles = page.locator('[skip-accordion-toggle]');

await skipAccordionToggles.nth(0).click();
await expect(ionChange).not.toHaveReceivedEvent();
});

test('should fire ionChange when click comes from an element with skip-accordion-toggle set to false', async ({
page,
}) => {
const ionChange = await page.spyOnEvent('ionChange');
const skipAccordionToggles = page.locator('[skip-accordion-toggle="false"]');

await skipAccordionToggles.nth(0).click();
await expect(ionChange).toHaveReceivedEventDetail({ value: 'fourth' });
});

test('should not fire when programmatically setting a valid value', async ({ page }) => {
const ionChange = await page.spyOnEvent('ionChange');
const accordionGroup = page.locator('ion-accordion-group');
Expand Down
81 changes: 81 additions & 0 deletions core/src/components/accordion/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,87 @@ <h2>Compact</h2>
</ion-accordion>
</ion-accordion-group>
</div>

<div class="grid-item">
<h2>Radio Group with skip-accordion-toggle</h2>
<ion-accordion-group value="attractions">
<ion-radio-group>
<ion-accordion value="attractions">
<ion-item color="primary" slot="header" button detail="false">
<ion-radio slot="start" value="attractions" color="light" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
<ion-label>Attractions</ion-label>
</ion-item>
<ion-list lines="none" slot="content">
<ion-item>
<ion-label>Movie Theaters</ion-label>
</ion-item>
<ion-item>
<ion-label>Amusement Parks</ion-label>
</ion-item>
<ion-item>
<ion-label>Mini Golf</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="dining">
<ion-item color="warning" slot="header" button detail="false">
<ion-radio slot="start" value="dining" color="light" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="pizza"></ion-icon>
<ion-label>Dining</ion-label>
</ion-item>
<ion-list lines="none" slot="content">
<ion-item>
<ion-label>Breakfast & Brunch</ion-label>
</ion-item>
<ion-item>
<ion-label>New American</ion-label>
</ion-item>
<ion-item>
<ion-label>Sushi Bars</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="games">
<ion-item color="danger" slot="header" button detail="false">
<ion-radio slot="start" value="games" color="light" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
<ion-label>Games</ion-label>
</ion-item>

<ion-list lines="none" slot="content">
<ion-item>
<ion-label>Xbox</ion-label>
</ion-item>
<ion-item>
<ion-label>Playstation</ion-label>
</ion-item>
<ion-item>
<ion-label>Switch</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="exercise">
<ion-item color="success" slot="header" button detail="false">
<ion-radio slot="start" value="exercise" color="light" [skip-accordion-toggle]="false"></ion-radio>
<ion-label>This radio button toggles accordion</ion-label>
</ion-item>

<ion-list lines="none" slot="content">
<ion-item>
<ion-label>Jog</ion-label>
</ion-item>
<ion-item>
<ion-label>Swim</ion-label>
</ion-item>
<ion-item>
<ion-label>Nap</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-radio-group>
</ion-accordion-group>
</div>
</div>
</ion-content>
</ion-app>
Expand Down