New pattern proposal: reveal/collapse elements

[gforcada]

The idea

I have a list of say tags of a document, but there are way too many, applying this pattern, given a data-reveal-amount number, that number of tags are shown, the others are hidden behind a button that reveals them 🎉

Extra nice would be if elements are sorted given a data-reveal-key that is sortable within the elements of the list.

This way, if each tag has a relevance number, the most relevant could be sorted, so by automatically hiding the other elements, the most relevant tags would be shown.

Implementation

Is there any pattern that provides this functionality? I could not find any, the sortable allows manual sorting, not automatic sorting, AFAIU

Are there guidelines on how to create a new pattern and submit it? 🤔

[thet]

Hi, sounds like an interesting idea!

I could imagine to add automatic sorting as a feature to pat-sortable. But that would need to run through an internal specification process.

A related pattern to this idea is pat-collapsible - however, it does not support something like the reveal amount idea.
Instead of pat-collabpsible you can also use pat-toggle to toggle a class on an element.

In any case, you might be able to get what you want with pure CSS.
For example, if you toggle the .closed class on a div containing li elements:

.closed  li:nth-child[n+5] {
  display: none;
}

and then do a animation on the height of the div if you want.
Sorting in that case would have to be done server side.

If you decide to go for a Pattern:

• For Patternslib core patterns that idea would need to go through an design and specification process, which would certainly take some time.

• But for an external Pattern you can start right away. We could then later always integrate ideas from the external pattern into the Patternslib core pattern.

• To get you started, the following resources would be helpul:

  • https://github.com/plone/mockup/blob/master/README.md
  • https://github.com/Patternslib/Patterns/blob/master/README.md
  • https://github.com/Patternslib/pat-PATTERN_TEMPLATE

The pattern template repo should get you quickly started.

Please don't read anything except "module federation" or "styleguide" from https://github.com/Patternslib/Patterns/tree/master/docs/developer - this is still outdated.

[gforcada]

@thet thanks! 🙇🏾 I will have a look and decide 😄

[thet]

@gforcada let me know if I can help bootstrapping a new pattern or getting this done