Accordion: Automatically resize the Accordion if the content changes.

[christoph-schlumpf]

In SPAs (Single Page Application). The content of the 'Accordion' might dynamically change based on user input or async data fetching.

At the moment 'Accordion' does not dynamically resize if the content changes. So if the height of the content increases the 'Accordion' does not show all the content.

Possible use-cases:

• async loading / rendering of data after the Accordion is opended
• content added to Accordion based on user actions
• Accordion inside Accordion (mind-blowing ;-) )

Proposed implementation: Use an implementation based on ResizeObserver.

We have implemented a workaround for this in https://github.axa.com/avengers/bra-frontend (AccordionDynamic) that is dependent on implementation details of 'Accordion'.

Best regards

[MKaHead]

Hi @christoph-schlumpf I will rewrite the whole accordion. That will probably happen in the middle of August.

Litte bit inside: I will also remove fix from me with the resize. I will do the animation with javascript but after the animation is over set height to auto again then we don't need observer listeners etc. Furthermore, the accordion doesn't have good HTML semantics and more DOM manipulation hacks that I want to write differently.

[christoph-schlumpf]

Hi @MKaHead,

Is this already on the patterns lib homepage? At least the version there seems not to correctly adjust to changing content or changing size. https://patterns.axa.ch/?path=/story/components-accordion--accordion

[christoph-schlumpf]

@MKaHead,

I just saw that the accordion version on the pattern library homepage is still 1.1.0 while your new version is 1.2.0. Can you please provide it so that I can check the new version online?

Best regards, Christoph

[MKaHead]

@christoph-schlumpf Only received aproval for the release branch late yesterday. They were released on npm, but you only see it later in the repo due to the late merge. Should be up to date now and thanks for your patience and indulgence.

[christoph-schlumpf]

Hi @MKaHead , I just tested "@axa-ch/accordion": "1.2.2" inside our app and it unfortunately still does not adjust to changing content.

Do you intend to fix this?

Best regards, Christoph

[christoph-schlumpf]

By the way: In patterns-library there is still the old version of accordion shown (1.1.0). https://patterns.axa.ch/?path=/story/components-accordion--accordion

[MKaHead]

Hi @christoph-schlumpf, as a finding the issue was coming in and my test didn't cover it. And we have new URL: https://axa-ch-webhub-cloud.github.io/plib-feature/develop