Revisiting tile component design

[mceledonia]

Recently the RHDS team shared a design for link tile, which has refined visuals as well as a functional difference from the PatternFly tile — it acts as a link rather than a radio button. This sparked a discussion on the beta tile component and its flexibility where I noticed we placed some arbitrary constraints on the layout, and also questioned if we could or should extend the tile component with an additional variant which could act as a link. This brings into question how the tile component relates to the card component and where and why they differ.

Overall because the tile component is in beta, I think we should consider revisiting the component design and extending the functionality to support a linking variant. I have the following proposal to share:

Card component

• Stays as-is. Cards can support a wider variety of types of components and interactions — buttons, links, icon action menus, etc. These items are able to be interacted with independent of the card itself, this being the main differentiator between card and tile. In certain cases the card itself can be selectable, such as the selectable card or primary-detail interactions.

Tile component

• The full tile is always the only interactive element and it can contain no separate interactive elements. This is the main differentiation in terms of functionality when compared to a card. Layout is not restricted to center-aligned(1) and the tile can include text and or icon/image as non-interactive elements.

(1) We currently place this limitation of only center-aligned content on the tile component. The center-aligned layout itself does not suggest to a user that the tile is selectable or acts as a radio button, which makes this a kind of arbitrary limitation. It is the context which implies the interaction (in a form, content inside tile, interactive states), not the layout of the content. I believe this was done to further differentiate between cards and tiles, but due to it being rather arbitrary I think we should move away from it. An example (not suggestion) of something more effective in visually communicating the interaction would be something like a literal radio button on the tiles, but even so I don't think that would be necessary.

---

TL;DR/Proposal

Proposing we remove the center-align restriction on tile, and also support an interaction variant where it can act as a link to another page. Key differentiators between card and tile are as outlined in the bullets above, everything else would remain the same.

I also think we can revisit the need/usage of the large icon variation - It feels super top-heavy so if we can get a better sense of where and how this is used in products we can refine it to something a little more visually balanced.

CC @mmenestr @mcarrano @mcoker @nicolethoen @lboehling

[mceledonia]

Update here from the recent design sync - Let's remove the layout restriction (add support for left-aligned content) and not worry about adding the link variant in PF quite yet. CC @mcarrano to confirm.