Hrm, I don't particularly like the idea of having something run on DOM ready just to loop over each expander and expand/collapse them as necessary.
Why not tell them to set the property to show/hide the expanded content on the element directly? Let the delegated event handler capture all the functionality, but the initial state will all be correct.
Even better, create a Soy template that does this for the developer, who can simply supply the initial state as collapsed or expanded and let the template do the rest. IMO, this component is incomplete without a Soy template.
so I think, since we don't really have soy support yet for our plugin devs we can't encourage them to use soy so we still need to polish up the html API (I will still add a soy template though).
But we do have Soy support for plugin devs. What do you think I've been using for JIRA's Bamboo plugin? :)
Need to have a think about the certain height thing.
I could tell the AUI Tabs approach was used for this, which is why I was like "noooooooooooo". There is nothing in tabs.js that needs to run on DOM ready… NOTHING. (well, except for the vertical tabs text clipping detection, but other than that, nothing :P)
The tests/demo page should be a soy template, not a flat html file which involves copy/pasting and maintaing huge chunks of untemplated markup. We're not doing that any more! See all the other recently created components…
It doesn't work well if you've increased the size of the font (Cmd +). I'm with Jason - I'd prefer not to have a FOUEC (Flash Of Un-Expanded Content) on page load. It won't manifest itself in such a simple test page but once you get that code into a product page with a lot more markup/js it'll be noticeable.
...and have the expander remove the class when the JS kicks in. Could still get a flicker, of course. For the options that don't have that uncertainty, just having expanded/collapsed as an initial state will probably do.
Well they have to set a data-aui-expander-height property anyway, might as well use min-height instead (and height: 0; if it's collapsed, set height to default height when expanded) and not have to worry about doing all the shit in JS.