[docs] All Elements page improvements/refresh

[markcaron]

Update/refresh the All Elements page.

• Perhaps use RH Tile (whole thing clickable)
• Maybe 3 per row?
• Design mock component thumbnails
• Mockup what category filters would look like, so we can improve findability/sorting (related: 1437)

[coreyvickery]

Add toggle similar to PatternFly.

https://www.patternfly.org/components/all-components

[zeroedin]

Easy win: just by changing minmax (400px -> 290px) on the grid-template-columns can move to 3 columns.

@media (min-width: 820px)
  .multi-column--min-400-wide {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

[zeroedin]

Partially handled in #1465. I'll leave this issue open if we want to add in a toggle and we can close the ticket in a separate PR..

[coreyvickery]

@markcaron @marionnegp An Elements page refresh design is below that covers the following:

• [x] Perhaps use RH Tile (whole thing clickable)
• [x] Maybe 3 per row?

Still in progress:

• [x] Design mock component thumbnails

For discussion:

• [ ] Mockup what category filters would look like, so we can improve findability/sorting (related: https://github.com/RedHat-UX/red-hat-design-system/issues/1437)

I already covered a possible taxonomy in #1437. This refresh design explores using filtering components like rh-tabs, rh-chip (or rh-chip-group), pf-toggle-group, and pf-dropdown.

https://www.figma.com/proto/r3ncImHRFAyTwQ5up3jM7J/All-elements-categorization?page-id=0%3A1&type=design&node-id=5-9609&viewport=105%2C119%2C1&t=SdV3E6jDGCjS8bm3-1&scaling=scale-down&mode=design

[markcaron]

@coreyvickery I think I'm a fan of the chip-group! The toggle-group is also cool, but I feel like the chip-group has more potential. Nice work!

[marionnegp]

@coreyvickery, I like the chip-group best too. It looks good when it shows just alphabetical and categorical chips and when you list the individual categories, so it's pretty flexible.

[coreyvickery]

@markcaron @marionnegp Might have to go with or for categorization in the meantime since is not in dev yet.

[coreyvickery]

Update 9/18:

Figma mock-up that will be coded. Other tasks are done (3) or kicked (1).

• [x] Perhaps use RH Tile (whole thing clickable)
• [x] Maybe 3 per row?
• [x] Design mock component thumbnails

Kicked

• Mockup what category filters would look like, so we can improve findability/sorting (kicked to Cubone)

[bennypowers]

we're good here