Add details

[genericallyterrible]

Adds new function details to automatically create a well formed Details disclosure element (<details>).

Currently scoped as:

using PlutoUI.ExperimentalLayout: details

using PlutoUI #: details

Since this new function creates normal HTML <details> elements, collapsed details elements will omit their contents from any print/export. If this behavior is undesirable, it seems a JS fix could be applied as discussed here on SO though I'm unsure where it would slot in.

I couldn't get @bind to behave properly in the Layout.jl notebook to fully test it internally. UI elements would render, but bound variables would never update. When using details in the binder environment automatically created by github-actions it behaves as expected.

[github-actions]

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/genericallyterrible/PlutoUI.jl", rev="summary-details")
julia> using PlutoUI

Or run this code in your browser:

[fonsp]

Super nice!! And really well implemented, happy to see that you are using HypertextLiteral!! I would say that this is not "experimental", and it can go directly into PlutoUI. What do you think?

[genericallyterrible]

Sounds good to me! Wasn't super sure where details should end up, and honestly stumbled my way into Layout.jl. If it should live in some other file so it's not submoduled under ExperimentalLayout, the only reliance it has on the other code in Layout.jl is the 5 lines implementing embed_display (and the variable p for example purposes).

I can move details into its own notebook and copy over the functionality of embed_display if that's appropriate, or perhaps there's some other path you had in mind?

[genericallyterrible]

details has been moved to Details.jl and is now reexported from PlutoUI.jl

Edit: Running on the binder image:

[fonsp]

Hey! Again this PR is really impressive! Thanks so much for the contribution :)

After this PR is merged, I would like to move all of the CSS into Pluto itself: a details element created without PlutoUI should also get these nice styles :) Can you make a PR to Pluto for that?

I made some small tweaks, see the comments. To me this is ready to merge, let me know!

[fonsp]

FYI this can later be replaced with JuliaPluto/AbstractPlutoDingetjes.jl#9

[genericallyterrible]

Thanks so much for the tweaks and tests!

I'd be happy to PR the CSS over to Pluto once this is accepted, everyone deserves pretty <details>. 😊

I have a bit of clarification on one of your changes and its impacts on the assumptions I made about how details should format its contents, but I'll leave that comment as a response to the change itself.

[fonsp]

Thanks so much for the PR! Let me know what you would like to work on next :)