Card layout with multi text sections and avatars

[shanaka-rajitha]

Features

• Display multiple rows of information.
• Bottom section of card will show clickable avatars.

Design URL for specs : https://xd.adobe.com/view/809c4f44-9861-4f57-978a-e2d3515a426e-d5cf/

Card layout with Avatars

[mturoci]

@shanaka-rajitha as discussed on Slack, this card is implementable as a form_card. The only feature missing is bottom facepile, please edit the issue accordingly.

[shanaka-rajitha]

Hi @mturoci the following feature card is part of the MLOps screens, so its vital we get the entire card with all the sections. We will plan to use the same card on other future designs too.

[mturoci]

IMO the proposed component is too specific for Wave, wdyt @lo5? Is this the path we want to take?

[shanaka-rajitha]

Including @mtanco @iamabhishekmathur

[iamabhishekmathur]

@mturoci this card does indeed contain a lot of information ... how else do you recommend it be implemented, with this many data elements?

[mturoci]

Wave is currently capable of this:

The only 2 missing pieces are bottom facepile component and spacing.

The facepile component will be implemented, that's the easy part.

Note that one of the Wave goals is to provide good-looking usable UIs with zero knowledge of UI/UX design. That means that we should enhance our existing ui.text component that is currently only capable of specifying size in a way that it is impossible to build bad looking cards. For example:

We can think of mapping our existing text components in following way:

• ui.text_xl -> title
• ui.text_l -> subtitle
• ui.text_m -> regular text content and so on...

We can then assume that if title and subtitle are next to each other, they should have just a minimal spacing. Regular text content on the other hand should probably have more spacing in relation to header part etc. Hope you all got the point. This is something for design team to lay out as they are the typography experts.

The current text sizes need refinements based on - https://xd.adobe.com/view/0790f950-abbd-41fa-b372-332295fd876f-52c3/screen/0eaf1110-4f69-40da-9417-3f764032248f/variables/?x_product=cc-slack%2F1.5.1.

This way, we can easily keep typography consistency across all the Wave apps, help people make less decisions and reduce Wave development time.

@lo5 opinion?

Minor update: it is also possible to use ui.stats component (without icon) for the experiment / model part, it would just need to have width prop added and maybe a bit of typography refinement.

[shanaka-rajitha]

This way, we can easily keep typography consistency across all the Wave apps, help people make less decisions and reduce Wave development time.

Thanks, @mturoci for noting the inconsistency, the UX team will try to match the existing and new designs as per the Wave SDK Dark Theme typography.