paper-dropdown-menu icon indicating copy to clipboard operation
paper-dropdown-menu copied to clipboard

Docs confusing - CSS hard to track down

Open StokeMasterJack opened this issue 9 years ago • 4 comments

In your demo, you have this snipped:

            <paper-dropdown-menu label="Dinosaurs">
                <paper-listbox class="dropdown-content">
                    <paper-item>allosaurus</paper-item>
                    <paper-item>brontosaurus</paper-item>
                    <paper-item>carcharodontosaurus</paper-item>
                    <paper-item>diplodocus</paper-item>
                </paper-listbox>
            </paper-dropdown-menu>

This snippet uses a CSS class (dropdown-content). Unfortunately, it's hard to track down where the CSS is coming from. Apparently, for efficiency purposes, someone created some reusable CSS (somewhere) that this example uses. But, for demo code, reusable CSS is less important than clarity. Please just put the CSS as part of the example. Thanks.

StokeMasterJack avatar Sep 21 '16 18:09 StokeMasterJack

Also, what is paper-dropdown-menu-light? It is in the examples, but not clear what it is or why it's there. How does is differ from paper-dropdown-menu (without the -light suffix)? Thanks.

StokeMasterJack avatar Sep 21 '16 18:09 StokeMasterJack

Thanks @StokeMasterJack. Here's what the docs should clarify:

  • The dropdown-content class isn't used for styling, at all. It's used to identify the element that's going to be used as the content for the dropdown. In this example, that's a listbox. This is mentioned in the docs, but could be more explicit. Currently we say:

    "The child element with the class dropdown-content is used as the dropdown menu. This can be a paper-listbox, or any other or element that acts like an iron-selector."

    "You provide a menu-like element to be displayed as the dropdown menu. This element must have class="dropdown-content" (as shown in the example).

    The menu element be a paper-listbox, or any other element that acts like an iron-selector.

  • The -light version of the element should be documented, but basically it's a lighter-weight version of the element, recommended for pages where you're using a lot of dropdowns. (Note to whoever fixes this, it's missing from the bower.json main field).

arthurevans avatar Oct 11 '16 15:10 arthurevans

paper-dropdown-menu-light is documented here: https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu-light.html#L27

notwaldorf avatar Oct 11 '16 17:10 notwaldorf

Yes, but: docs aren't getting picked up on the catalog:

https://elements.polymer-project.org/elements/paper-dropdown-menu

I think it just needs to get added to bower.json for the catalog's sake.

arthurevans avatar Oct 11 '16 19:10 arthurevans