A new "Show-more" pattern

[solazio]

This would be used to wrap any tall <tag> and "truncate" it to a specific height. Once clicking the "Show more" button the full size of the <tag>.

Currently this pattern is used on snapcraft in 3 locations:

• https://snapcraft.io/#c
• https://snapcraft.io/install/riot-web/centos
• https://snapcraft.io/riot-web - distro list on mobile only

Link to codepen: https://codepen.io/solazio/pen/gOpYVqQ

[bartaz]

Extends on existing "back to top"

WG:

• use/modify existing back to top (change the name)
• have separate 'fadeout' pattern
• explore design

@danielmutis Provide examples where it works where it doesn't

[danielmutis]

Examples of places where it works

Snapcraft first snap flow:

Snapcraft list of users by distro for a single snap:

Example where it looks odd

Builds table:

[matthewpaulthomas]

Extends on existing "back to top"

I don’t know how much the similarity with “Back to top” is intentional. But things that act different should look different, and the behaviour of “Show more” is completely different from “Back to top”. So I think it’s misleading for them to look as similar as they do.

Interaction-wise, this is bog-standard progressive disclosure. Vanilla has an existing element for progressive disclosure, though it’s not currently described: <details>.

And Vanilla sites currently use a variety of icons for progressive disclosure, for example “+” and “–” in MAAS:

Now, we don’t have to use the same icon or style for this everywhere. For example, GitHub uses three different icons for progressive disclosure in different layout situations. What I do think we need, if we’re going to have more than one, is an explanation of when to use each one.

Snapcraft first snap flow:

That probably isn’t a good example to base a pattern on, for two reasons. First, it’s usually hiding ten lines or fewer, so it’s probably consuming more time in clicking than it saves in scrolling. And second, the purpose of that block is to show off how short and simple the Yaml is, so hiding part of it by default is defeating the point.

Example where it looks odd

Builds table:

I don’t understand the purpose of this one either, since there’s nothing below that table except the footer, so you won’t be trying to scroll past it. That aside, can you elaborate on why it looks odd? Some possibilities:

• There’s nothing visual to indicate it’s interactive! There’s the word “Show”, but no border, no colour, no icon, no underline. What’s the visually simplest way of making it look interactive? (Whatever it is, you might find that you don’t need the word “Show” any more.)
• Relatedly, it’s the same size, colour, and alignment as a column of text above it that isn’t interactive. Again, things that act different should look different.
• Either there’s no fadeout, or the fadeout is invisibly applying to whitespace below the table.

In short, I think this needs:

• [ ] A description of when you should use progressive disclosure at all.
• [ ] A description of when you should use this, vs. <details>, vs. something else.
• [ ] A visual design change to make it clearly different from “Back to top”.
• [ ] Either a visual design change (this might be the same change) to resolve the oddness with the builds table, or a guideline that it shouldn’t be used for tables.

[bartaz]

We could use the new 'Show more' styling used in modular table, with an addition of faded background.

We should propose a new container component that uses the ones mentioned above.

[bartaz]

This have been through WG before, but because it needs UX work we should pass it though our new process.

[clagom]

@elioqoshi to investigate this and look at the modular table spec for existing solutions.

[clagom]

@SirSamTumless ready for planning

[clagom]

WG: keeping it simple, this should just be a command blue link (related to the command link discussion) without lines, icons or any other elements.

[clagom]

WG: on the link area in Vanilla include this "show-more" option recommending using the command-link: https://vanillaframework.io/docs/patterns/links

[clagom]

Work in progress here: https://app.zenhub.com/workspaces/-design-system-tribe-59438c953747487777fbe484/issues/canonical-web-and-design/vanilla-framework/3923