Problem

• There is bug Eliminate need for clip-path on .s-expandable #1142
• See CodePen with this bug on CodePen

Solution

The expandable component uses CSS tricks that are outdated and they are not needed. That is why I think easier solution can work better.

I tried to simplify the component and it works for all content inside s-expandable and there is no need to wrap it into another container (like .s-expandable--content).

This fixes the stacking order bug and also create better user experience, because there is no more jumping content as you can see in the video.

Improving

It is possible to add a simple transition and achieve the same effect (but I think it is not right to have it there).

Comparison

Before

https://www.loom.com/share/b4467d1418c54a239fce305f559a91a1

After

https://www.loom.com/share/025b413f864a4bbfa5c15c4a8b229220

When pull request is accepted

• Update documentation

What do you think about this solution?