Slot contents pushes height of page even when collapsed

[levibrooke]

Describe the bug

On MP Elite team, we're trying to use the component to show FAQs on a new page. The size of the content inside the content part of the accordion is taking up space even when collapsed resulting in undesired whitespace below the footer in this case. I believe this is because the component only sets visibility: hidden.

To address this, I have attempted to target the css part "content" setting it to display: none by default. But then I'd need to have another selector to target when the accordion expands to override that value to display: block. As currently built, I can't seem to get this second part to work.

Expected behavior

When accordion is not expanded, the size of the content should not be displayed.

Screenshots

Collapsed:

Expanded:

[blackfalcon]

@levibrooke looking at the inspector, I see that the element is not wrapped in the containing element.

<auro-accordion-group>
  <auro-accordion id="epIV" expanded>
    <span slot="trigger">Star Wars: A New Hope</span>
    <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
  </auro-accordion>
</auro-accordion-group>

[blackfalcon]

It was determined that the missing wrapping element was not the issue.

[blackfalcon]

Spoke with @levibrooke and validated that this is an issue with the element. This issue is consistent with the Auro doc site as well. See attached image.

The main difference here is their use of an accordion element at the bottom of the page and the fact that there is a lot of content that exposed an otherwise unknown issue with the element.

Issue

The issue comes from the fact that we need to use visibility: hidden; versus display: none. This is intentional due to the desired animation.

Proposal

We may want to look into seeing if setting height: 0 may work. A recommendation is to add CSS ::part() that will allow user to adjust the CSS for their unique use case.

Exit criteria

This issue will be considered addressed once we are able to maintain the same UI and animation but also remove the phantom space that appears in the DOM when the accordion is closed.

[levibrooke]

Hi @blackfalcon - My team is projected to finish development of the feature this accordion is used for sometime during Sprint 7. So ideally, we'd love to see this issue addressed by the end of March.

[blackfalcon]

@levibrooke this work has been added to our current sprint.