carbon-design-system/carbon

[AccordionItem] extend to render contents when expanded/opened

Open

#5,901 opened on Apr 21, 2020

View on GitHubContributor guide
 (4 comments) (0 reactions) (0 assignees)JavaScript (1,733 forks)batch import
afrohackscomponent: accordionhacktoberfestneeds: community contributionproposal: opentype: enhancement 💡

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (Avg merge 9d 14h) (106 merged PRs in 30d)

Description

Summary

I'd like to offer up a contribution that we made recently in https://github.com/IBM/carbon-addons-iot-react/pull/1105 , if the team is interested.

We've extended AccordionItem to include optional stateful logic to only render the contents on expand of the section.

Justification

Some consuming applications with a ton of content (think entire dashboards) see a perf hit when contents is always rendered irrespective of if the AccordionItem is closed.

Desired UX and success metrics

via a prop or composition, the accordion item can be configured to render content when expanded. Closing of the section should not unmount the contents, but preserve it.

Specific timeline issues / requests

n/a

Available extra resources

I can submit a PR if y'all are good with this idea 👍

Contributor guide

Research direction
Examine the existing AccordionItem component implementation and add a prop (e.g., `shouldRenderContentOnlyWhenOpen`) that controls whether children are rendered only when the accordion is expanded. Ensure children are preserved when closing by using CSS visibility or keep alive techniques.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
React
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80