Skip to content

fix(accordion): animate visibility#7539

Merged
mcoker merged 3 commits intopatternfly:mainfrom
mcoker:issue-7538
May 22, 2025
Merged

fix(accordion): animate visibility#7539
mcoker merged 3 commits intopatternfly:mainfrom
mcoker:issue-7538

Conversation

@mcoker
Copy link
Contributor

@mcoker mcoker commented May 20, 2025

fixes #7538

@patternfly-build
Copy link
Collaborator

patternfly-build commented May 21, 2025

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticing in React for a fixed implementation, if the accordion item content has a scrollbar, the overflow is removed as the collapsing animation occurs. Adding overflow-y of auto to .pf-v6-c-accordion__expandable-content seems to help.

Basically looks like we're only applying the overflow auto when the content is expanded, causing the overflow content to break out of its container when the collapse animation is occuring.

Video of the behavior I'm seeing just pulling into React, no react changes made:

Screen.Recording.2025-05-21.at.12.03.18.PM.mov

@starting-style {
--#{$accordion}__expandable-content--Opacity: 0;
--#{$accordion}__expandable-content--TranslateY: -.5rem;
max-height: 9999px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than setting an arbitrary max-height, would we be able to just unset the max-height: 0 declaration?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per convo with Coker we need a px value to transition correctly

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, my other comment above about max-height isnt blocking

Copy link
Member

@srambach srambach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also see a lag at 20x CPU loading here.
Fine to merge with that imho.

@mcoker mcoker merged commit aac5702 into patternfly:main May 22, 2025
4 checks passed
@mcoker mcoker deleted the issue-7538 branch May 22, 2025 14:42
@patternfly-build
Copy link
Collaborator

🎉 This PR is included in version 6.3.0-prerelease.24 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accordion - update to animate visibility

4 participants