Add d2l-expand-collapse component to create collapsible areas #540
Conversation
AllanKerr
requested review from
dbatiste,
dlockhart,
margaree and
svanherk
as code owners
AllanKerr
force-pushed
the
akerr/expand-collapse/dev
branch
from
5367e39
to
c7cd86d
Compare
Add aria-expanded to the button in the demo as an example of how to use it. Remove px from height: 0. Use the _getContent helper instead of calling querySelector.
…tioning from display: none or from auto to 0 This was fixed by adding a double requestAnimationFrame wait. The reason for this is that when a Lit property gets updated, the browser will not immediately perform a style recalc. The next style recalc will happens after the next requestAnimationFrame. If we try to update styles again in the first requestAnimationFrame block then the first style change from the property change will be overwritten and never get displayed by the browser causing the transition to be skipped. In the second requestAnimationFrame we can guarantee that the property style change has taken effect so it is now safe to make our dependent style update.
…ght when starting already expanded
| <li>Tea</li> | ||
| <li>Milk</li> | ||
| </ul> | ||
| </d2l-expand-collapse> |
There was a problem hiding this comment.
Interesting that the blue border still appears even when it's collapsed. It makes sense given it's the internal container that gets a display: none on it, but as a consumer of this I wouldn't have expected it. I can't think of a super clean way to fix this without reflecting that _state property up to the host. Hmm...
There was a problem hiding this comment.
I think having the border still show up will work well. It aligns with FACE's use of expand collapse where they have a line where the expand collapse section is when collapsed. Implementing it like this means it can be done with an attribute selector:
It will also make it a lot easier to use with d2l-more-less since that component doesn't fully collapse by default, it leaves 4 ems visibile.
…itial state change so it can start expanded or collapsed
Add quotes around attribute Remove separate _getContent helper and inline it Add link to w3 aria-expanded in README
AllanKerr
force-pushed
the
akerr/expand-collapse/dev
branch
from
c206ce8
to
3ba6ee7
Compare
This is a componentized version of our d2l-dom-expand-collapse that I'm looking for some input on if we want this added as generic component in core.
Goals
d2l-alert.d2l-more-lessto use this internally.d2l-dom-expand-collapsewith this and deleted2l-dom-expand-collapseentirely.