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): support nested accordion #16933

Merged
merged 8 commits into from
Jul 31, 2024
Merged

feat(accordion): support nested accordion #16933

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9d38ef3
feat(accordion): support nested accordion
Jul 9, 2024
ebcdde8
test: add nested accordion tests
tekno0ryder Jul 10, 2024
e57909b
Merge branch 'main' into feat/nested-accordion
tekno0ryder Jul 18, 2024
71f7faf
docs(accordion): add temp story for nested accordion
tekno0ryder Jul 18, 2024
6af391c
Merge branch 'main' into feat/nested-accordion
2nikhiltom Jul 22, 2024
ddffff6
test(accordion): modify test logic to be more realistic
tekno0ryder Jul 26, 2024
9d404ba
chore: remove code used for testing
tay1orjones Jul 31, 2024
ab18d08
Merge branch 'main' into feat/nested-accordion
tay1orjones Jul 31, 2024
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
9 changes: 9 additions & 0 deletions .all-contributorsrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1569,6 +1569,15 @@
"contributions": [
"code"
]
},
{
"login": "tekno0ryder",
"name": "Ahmed Alsinan",
"avatar_url": "https://avatars.githubusercontent.com/u/8721803?v=4",
"profile": "https://github.com/tekno0ryder",
"contributions": [
"code"
]
}
],
"commitConvention": "none"
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
<td align="center"><a href="https://github.com/nandininarayanofficial"><img src="https://avatars.githubusercontent.com/u/165769075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nandininarayanofficial</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nandininarayanofficial" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/tekno0ryder"><img src="https://avatars.githubusercontent.com/u/8721803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Alsinan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tekno0ryder" title="Code">💻</a></td>
</tr>
</table>

Expand Down
59 changes: 59 additions & 0 deletions packages/react/src/components/Accordion/Accordion.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,65 @@ export const Playground = (args) => (
</Accordion>
);

export const NestedAccordion = () => (
<Accordion>
<AccordionItem title="Section 1 title">
<Accordion>
<AccordionItem title="Section 1.1 title">
<Accordion>
<AccordionItem title="Section 1.1.1 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</AccordionItem>
</Accordion>
<Accordion>
<AccordionItem title="Section 1.1.2 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
</AccordionItem>
<AccordionItem title="Section 2 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</AccordionItem>
<AccordionItem title="Section 3 title">
<Accordion>
<AccordionItem title="Section 3.1 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</AccordionItem>
<AccordionItem title="Section 3.2 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
);

Playground.args = {
disabled: false,
isFlush: false,
Expand Down
37 changes: 37 additions & 0 deletions packages/react/src/components/Accordion/__tests__/Accordion-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,4 +295,41 @@ describe('Accordion', () => {
expect(ul).toBeInTheDocument();
});
});

describe('Nested Accordion', () => {
it('should not expand inner Accordion item when expanding outer Accordion item', () => {
render(
<Accordion>
<AccordionItem open>
<Accordion>
<AccordionItem>Panel</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
);

const panel = screen.getByText('Panel');
expect(panel).not.toBeVisible();
});

it('should not close outer Accordion item when closing inner Accordion item', async () => {
render(
<Accordion>
<AccordionItem open>
outer panel
<Accordion>
<AccordionItem title="inner title" open>
inner panel
</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
);

// close inner
await userEvent.click(screen.getByText('inner title'));

expect(screen.getByText('outer panel')).toBeVisible();
});
});
});
10 changes: 6 additions & 4 deletions packages/styles/scss/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
.#{$prefix}--accordion__item--active {
overflow: visible;

.#{$prefix}--accordion__wrapper {
> .#{$prefix}--accordion__wrapper {
// Properties for when the accordion is open
overflow: visible;
max-block-size: fit-content;
Expand All @@ -226,9 +226,11 @@ $content-padding: 0 0 0 $spacing-05 !default;
padding-block-end: $spacing-06;
}

.#{$prefix}--accordion__arrow {
fill: $icon-primary;
transform: rotate(-90deg) #{'/*rtl:ignore*/'};
> .#{$prefix}--accordion__heading {
> .#{$prefix}--accordion__arrow {
fill: $icon-primary;
transform: rotate(-90deg) #{'/*rtl:ignore*/'};
}
}
}

Expand Down
Loading