Eliminate need for clip-path on .s-expandable

[dancormier]

We use the clip-path property on .s-expandable to allow for height animations. Lately, it seems like more trouble than it's worth, as it affects stacking contexts in undesirable ways. We should consider ditching the animation (and the clip-path property we use here) altogether in favor of a simple display: none/block.

If we're feeling ambitious, we could do a top-to-bottom rewrite of .s-expandable to either a) find a better CSS-based approach to animating height: 0/auto or b) animate height using JS.

From MDN:

Note: A computed value other than none results in the creation of a new stacking context the same way that CSS opacity does for values other than 1.

This codepen illustrates the stacking context issue: https://codepen.io/dc-so/pen/QWmJBmz?editors=1000

[ondrejkonec]

Hi @dancormier

I tried to fix this bug by removing unnecessary styles from CSS. It also has a positive effect on the behavior of the component, when the content does not jump (the height does not flash when switching to the Radio / Checkbox button).

You can find description in pull request #1145

I will be glad for your feedback.