fix(expandable-section): hide overflow when not expanded by mcoker · Pull Request #7843 · patternfly/patternfly

mcoker · 2025-09-17T00:02:03Z

You can replicate the bug by adding overflow: auto to .ws-preview-html (the element that wraps examples) on the docs site. Validated in react that the animations still work as expected and it doesn't conflict with overflow: hidden needed in the truncate/line-clamp variation.

Also addressed nested truncated issues from #7767. There were 2 issues:

nested truncate variant's content had opacity: 0 so content didn't show up unless it was expanded
content was offset with translateY when not expanded

Also addressed 2 small bugs:

In truncate variation, when you collapse the expandable section, the gap is removed but only after a delay. Disabled that transition-delay for truncate since it doesn't animate open/closed.
Fixed issue where isIndented was being inherited by nested expandable sections and shouldn't be.

patternfly-build · 2025-09-17T00:05:40Z

Preview: https://pf-pr-7843.surge.sh

A11y report: https://pf-pr-7843-a11y.surge.sh

rebeccaalpert · 2025-09-18T18:46:39Z

I'm still thinking this through to make sure it addresses what we'd need in ChatBot world, but is it expected that we'd get something like this when nesting a truncated one in an indented one? (Truncated button doesn't get the indent, but the content does.) The opacity fix looks great!

rebeccaalpert · 2025-09-18T19:11:10Z

Verified Freya's issue is fixed using this on org vs PR:

<div class="pf-v6-c-card" id="card-basic-example">
  <div class="pf-v6-c-card__title">
    <h2 class="pf-v6-c-card__title-text">Title</h2>
  </div>
  <div class="pf-v6-c-card__body"><div class="pf-v6-c-expandable-section">
  <div class="pf-v6-c-expandable-section__toggle">
    <button
      class="pf-v6-c-button pf-m-link"
      id="hidden-toggle"
      type="button"
      aria-controls="hidden-content"
    >
      <span class="pf-v6-c-button__icon pf-m-start">
        <span class="pf-v6-c-expandable-section__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </span>
      <span class="pf-v6-c-button__text">Show more hidden example content</span>
    </button>
  </div>
  <div
    class="pf-v6-c-expandable-section__content"
    hidden
    id="hidden-content"
    role="region"
    aria-labelledby="hidden-toggle"
  ><div id="" class="pf-v6-c-card" data-ouia-component-type="PF6/Card" data-ouia-safe="true" data-ouia-component-id="BasicCard"><div class="pf-v6-c-card__title"><div class="pf-v6-c-card__title-text">Title</div></div><div class="pf-v6-c-card__body"><div class="pf-v6-c-expandable-section"><div class="pf-v6-c-expandable-section__toggle"><button aria-expanded="false" aria-controls="expandable-section-content-17582213411326nbpj7bbxqr" id="expandable-section-toggle-1758221341132vg1sni667mm" class="pf-v6-c-button pf-m-link" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-link-1"><span class="pf-v6-c-button__icon pf-m-start"><span class="pf-v6-c-expandable-section__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span><span class="pf-v6-c-button__text">Show more basic example content</span></button></div><div class="pf-v6-c-expandable-section__content" id="expandable-section-content-17582213411326nbpj7bbxqr" aria-labelledby="expandable-section-toggle-1758221341132vg1sni667mm" role="region" hidden=""> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque tristique lacus. Nulla facilisi. Vestibulum auctor feugiat mi non accumsan. Phasellus sed purus magna. Nulla egestas nec sem eget efficitur. Sed sapien nulla, tempor eu ipsum vestibulum, mollis malesuada dolor. Donec et lacus id turpis tempus lobortis ut in est.
  <br/ ><br />
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin felis arcu, rutrum eu diam vitae, venenatis vestibulum dui. Phasellus nisl nibh, venenatis et tincidunt convallis, tincidunt sed neque. Vivamus eu justo nec magna congue vestibulum. Suspendisse potenti. Aenean et maximus sem. Morbi lorem nulla, gravida eu dapibus a, congue vel risus. Ut purus mauris, finibus a tristique id, molestie sit amet eros. Nunc massa justo, facilisis eget rhoncus eget, tempus nec tellus. Duis quis sodales erat, sed dignissim felis.
 </div></div></div></div></div></div>
</div></div>
  <div class="pf-v6-c-card__footer">Footer</div>
</div>

rebeccaalpert

I can't test the transition I had overrides for to make sure that works outside of React (not sure how), but I plugged the compiled ChatBot HTML into your PR vs my local copy of ChatBot (without the overrides I had) and got this:

Desired state	State prior to this PR	Current state in this PR

I guess - is it expected we'd still get an indent under "Response" in the truncated expandable? Otherwise I am much happier. :)

Code (removed my style overrides):

<div id="" class="pf-v6-c-card pf-m-compact pf-chatbot__tool-response" data-ouia-component-type="PF6/Card" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Card-48"><div class="pf-v6-c-card__body"><div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented pf-chatbot__tool-response-expandable-section"><div class="pf-v6-c-expandable-section__toggle"><button aria-expanded="true" aria-controls="expandable-section-content-1758224397553ksc2cvm2srp" id="expandable-section-toggle-17582243975537zqg7dud5pq" class="pf-v6-c-button pf-m-link" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-link-77"><span class="pf-v6-c-button__icon pf-m-start"><span class="pf-v6-c-expandable-section__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span><span class="pf-v6-c-button__text">Tool response: toolName</span></button></div><div class="pf-v6-c-expandable-section__content" id="expandable-section-content-1758224397553ksc2cvm2srp" aria-labelledby="expandable-section-toggle-17582243975537zqg7dud5pq" role="region"><div class="pf-chatbot__tool-response-section"><div class="pf-chatbot__tool-response-subheading"><span>Thought for 3 seconds</span></div><div class="pf-chatbot__tool-response-body">Here's the summary for your toolName response:</div><div id="" class="pf-v6-c-card pf-m-compact pf-chatbot__tool-response-card" data-ouia-component-type="PF6/Card" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Card-49"><div class="pf-v6-c-card__title"><div class="pf-v6-c-card__title-text"><div class="pf-v6-l-flex pf-m-align-items-center pf-m-justify-content-space-between"><div class=""><div class="pf-v6-l-flex pf-m-column pf-m-gap-xs"><div class="pf-m-grow"><div class="pf-v6-l-flex pf-m-gap-xs"><div class=""><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="color: var(--pf-t--global--icon--color--brand--default;"><path d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path></svg></div><div class="">toolName</div></div></div><div class=""><div class="pf-v6-l-flex pf-m-gap-sm" style="font-size: 12px; font-weight: 400;"><div class="">Execution time:</div><div class="">0.12 seconds</div></div></div></div></div><div class=""><button aria-label="Copy tool response to clipboard" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-124"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="color: var(--pf-t--global--icon--color--subtle);"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path></svg></span></button></div></div></div></div><hr class="pf-v6-c-divider"><div class="pf-v6-c-card__body"><dl class="pf-v6-c-description-list" aria-label="Tool response" style="--pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--md);"><div class="pf-v6-c-description-list__group" style="--pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--xs);"><dt class="pf-v6-c-description-list__term"><span class="pf-v6-c-description-list__text">Parameters</span></dt><dd class="pf-v6-c-description-list__description"><div class="pf-v6-c-description-list__text"><div class="pf-v6-l-flex pf-m-column"><div class="">Optional description text for parameters.</div><div class=""><div class="pf-v6-l-flex pf-m-gap-sm"><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-outline"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text"> type </span></span></span></div><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-outline"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text"> properties </span></span></span></div><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-outline"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text"> label </span></span></span></div><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-outline"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text"> label </span></span></span></div></div></div></div></div></dd></div><div class="pf-v6-c-description-list__group" style="--pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--xs);"><dt class="pf-v6-c-description-list__term"><span class="pf-v6-c-description-list__text">Response</span></dt><dd class="pf-v6-c-description-list__description"><div class="pf-v6-c-description-list__text"><div class="pf-v6-c-expandable-section pf-m-truncate"><div class="pf-v6-c-expandable-section__content" id="expandable-section-content-17582243975581fmgvuxoxf" aria-labelledby="expandable-section-toggle-1758224397558rqbmtodo2sp" role="region"> Descriptive text about the tool response, including completion status, details on the data that was processed, or anything else relevant to the use case. Descriptive text about the tool response, including completion status, details on the data that was processed, or anything else relevant to the use case. Descriptive text about the tool response, including completion status, details on the data that was processed, or anything else relevant to the use case. Descriptive text about the tool response, including completion status, details on the data that was processed, or anything else relevant to the use case. </div><div class="pf-v6-c-expandable-section__toggle"><button aria-expanded="false" aria-controls="expandable-section-content-17582243975581fmgvuxoxf" id="expandable-section-toggle-1758224397558rqbmtodo2sp" class="pf-v6-c-button pf-m-link pf-m-inline" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-link-78"><span class="pf-v6-c-button__text">show more</span></button></div></div></div></dd></div></dl></div></div></div></div></div></div></div>

mcoker · 2025-09-18T21:12:18Z

@rebeccaalpert ah thanks! isIndented was being inherited to nested expandable sections. Looks like that bug exists on org, too... looks like an old bug, it was in v5 as well 😅 I can't imagine that's on purpose because you wouldn't even have a way to un-indent the nested one if you wanted to without a CSS override. Updated with a fix.

@lboehling or @andrew-ronaldson can you confirm that isIndented shouldn't inherit to nested expandable sections? Just want to make sure that wasn't on purpose before we fix it. Assuming it's a bug, WDYT about calling it out in the release notes since it's a bug from back in v5 since it could change folks' layouts unexpectedly if they have this setup. Something like "If you use nested expandable section components with the isIndented prop on the parent, we fixed a bug where isIndented was inherited to nested expandable sections."

rebeccaalpert

It looks great! Thank you so much.

patternfly-build · 2025-09-19T17:57:49Z

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

The release is available on:

Your semantic-release bot 📦🚀

There is an issue at upstream code that make the parent show scrollbars when the expandable section is collapsed. Check patternfly/patternfly#7843

fix(expandable-section): hide overflow when not expanded

fb1670c

mcoker requested a review from srambach September 17, 2025 00:02

mcoker added 3 commits September 16, 2025 19:08

fix(truncate): fix gap change delay for truncate variation

2c9f163

fix: fix nested truncated variant

080f02f

chore: different approach to fix truncated variant

20e29f4

mcoker requested a review from rebeccaalpert September 17, 2025 03:13

rebeccaalpert reviewed Sep 18, 2025

View reviewed changes

fix: keep indentation from nesting

dd07a4d

mcoker requested a review from rebeccaalpert September 18, 2025 20:53

rebeccaalpert approved these changes Sep 19, 2025

View reviewed changes

srambach merged commit 8a63646 into patternfly:main Sep 19, 2025
4 checks passed

patternfly-build added the released on @prerelease label Sep 19, 2025

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

fix(expandable-section): hide overflow when not expanded - #7843

fix(expandable-section): hide overflow when not expanded#7843
srambach merged 5 commits into
patternfly:mainfrom
mcoker:issue-7746

mcoker commented Sep 17, 2025 •

edited

Loading

Uh oh!

patternfly-build commented Sep 17, 2025 •

edited

Loading

Uh oh!

rebeccaalpert commented Sep 18, 2025 •

edited

Loading

Uh oh!

rebeccaalpert commented Sep 18, 2025

Uh oh!

rebeccaalpert left a comment •

edited

Loading

Uh oh!

mcoker commented Sep 18, 2025

Uh oh!

rebeccaalpert left a comment

Uh oh!

Uh oh!

patternfly-build commented Sep 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mcoker commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rebeccaalpert commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rebeccaalpert commented Sep 18, 2025

Uh oh!

rebeccaalpert left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker commented Sep 18, 2025

Uh oh!

rebeccaalpert left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Sep 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mcoker commented Sep 17, 2025 •

edited

Loading

patternfly-build commented Sep 17, 2025 •

edited

Loading

rebeccaalpert commented Sep 18, 2025 •

edited

Loading

rebeccaalpert left a comment •

edited

Loading