Implement transition for collapsible

[vegegoku]

The current implementation of collapsible in domino-ui uses the display css property to show/hide the elements.
We can define a Collapsible for an element using the syntaxt Collapsible.create(someElement), and all domino-ui components that extends from BaseDominoElement come already initialized with a collapsible.

But since we are using the display property we dont apply transition on hide/show of the element.

and recently on domino gitter channel @bykka suggested that using height and a transition is better for implementing the collapse behavior for Accordions... Which is actually right as it provide a better look and feel. also he shared a quick sample of how this could be implemented https://codepen.io/mbxtr/pen/pCfcy

According to this I went a head ans started to experiment around this feature. and here what I did so far

In the collapsible class I found that the bahvior to show/hide the element is actually isolated from the rest of the logic in the collapsible class, which means we can refactor that bahvior into an external class and inject it into the collapsible class.

So I added a new Interface CollapseStrategy and created a a default implementation called DisplayCollapseStrategy which uses the current logic in the collapsible , then refactored the collapsible to use this instead of directly implementing the behavior.

This means we can also implement as many strategies as we wont and even those who want to build thereown custome ones will be able to do so. but then I also went a head to test this and implement a height with transition startegy ...in this startegy the element will start to shrink in height until it has 0 height. and I noticed that despite how it looks easy and simple it turns out to be more complex than I initially thougt and here are my conclusions :

1. Transition for height property does not work with auto height..so it is expected for this to work that the element should have a fixed height, now if we check the example posted above we will see that it works even though the height is not defined but that because on click there the height is being calculated and set on the element before it get collapsed. and I managed the same thing and it works. but this has its own issues. check next
2. To calculate the height of an element it must be actually attached, otherwise it will give a wrong height, I could also work around this by only calculating the height after the element is attached to the dom. but then found that we have even more issues. check next
3. What if the element height after attach is changed, i.e we added more content as we recieve an async call response? so now the element height is changed and we need to calculate the element height again? and to make things more complex, what if we actually called collapse on the element before it is attached to the dom and we expect to be collapsed by default which means the height is actually 0 and we cant calculate the actual height.
4. We could actually always attach the element as a not collapsed element and then only on attach we check it should be collapsed and collapse it after we calculate the height, we can avoid the flickering on the UI caused by the transition by not applying transition on initial state on attach. But
5. Again what if called collapsed before that attach and we wait till it is attached to collapse it , then using some async code we added more content, then we end up with a wrong height when we expand the element.
6. The example works because they always assume the initial state is expanded and the element is attached with fixed contebt so they could always calculate the hieght.
7. Instead of height we can actually use transition over the max-height instead of height in this case we initially start with a very big max-height despite the actual height of the element and we change the element max-height instead of height, but as this solve the issues with attached state and collapsed initial state it comes with its own issue, as this affect the transition based on the actual height of the element, so with an element with a height very close to the max-height the transition will be smooth while an element with a height much smaller than the assigned max-height will flicker.
8. The actuall way to solve all issue is to make sure the user manually maintains at least the height or the max height of the element that should be collapsible.

I am starting this discussion to share ideas/solution/thoughts on this. any contribution is heighly appreciated

[vegegoku]

Looking into this and it is still seems to be non-ideal
https://css-tricks.com/using-css-transitions-auto-dimensions/

[bykka]

What about looking into the source code of some popular material design libraries to understand how it's solved there?

For example, https://materializecss.com/collapsible.html is implemented in the next way:
https://github.com/Dogfalo/materialize/blob/v1-dev/js/collapsible.js
line 159, 167 - they use scrollHeight

[vegegoku]

Yes I have seen this too which I will give a second try, but my initial result was that it will has some drawbacks and limitations for dynamic content. lets see how it ends.

[vegegoku]

@bykka I managed to make this work, I had to workaround few edge cases and I think we will still have some to show up with more testing.
I will be making a new release soon that holds the changes.

Thank you very much.