Skip to content

Bug - Expandable section - Can't be nested #7767

@rebeccaalpert

Description

@rebeccaalpert

Describe the problem
This is an issue with

  • Patternfly 5
  • Patternfly 6
  • other

When I use an expandable section with a truncated expandable section inside, it causes some rendering issues. We were looking to do something like this with nested expandable sections:

Image

How do you reproduce the problem?
https://codesandbox.io/p/sandbox/5p2lg8?file=%2Findex.html

Expected behavior
Able to nest expandable sections.

Is this issue blocking you?
No, I overrode some tokens to get it to work:

style={
                      {
                        '--pf-v6-c-expandable-section__content--Opacity': '1', // fixed opacity issue 
                        '--pf-v6-c-expandable-section__content--PaddingInlineStart': 0, // fixed inherited indent spacing
                        '--pf-v6-c-expandable-section__content--TranslateY': 0, // fixed issue where there was a different sized gap when expanded or collapsed
                        '--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0 // fixed issue where there was a different sized gap when expanded or collapsed
                      }
}

Can see demo here: https://chatbot-pr-chatbot-662.surge.sh/patternfly-ai/chatbot/messages#messages-with-tool-responses. Would rather not have to do this though.

What is your environment?

  • OS: MacOS
  • Browser: Chrome
  • Version: 139.0.7258.128

What is your product and what release date are you targeting?
ChatBot extension

Metadata

Metadata

Assignees

Labels

PF TeamIssue originates from PF Team

Type

Projects

Status

PR Review

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions