Preamble

Wikifunctions objects can feature several nested properties. In these scenarios, the design of the default component needs to support the display (and the understanding) of how those properties are connected to each other, possible through visual cues and interaction patterns.

Design proposal

Figma file https://www.figma.com/file/Iw1bxoxa8RRFjwQs8NUZMg/T323013?node-id=29%3A5130&t=1BzLQC3TVi33Zu9E-1

We've been testing the colors from this article on accessible (and colorblind-friendly) colors for data visualization, and we selected the 6 colors that pass AA color contrast against white.

We assigned each color to a nested layer, and we ordered the colors to create the strongest contrast, and difference in hue. After the 6th layer, we restart to apply the same palette from the first color. The color is applied to the chevron icon, the keyline, and the parent label.

Notes on style

• We've been using the 'cdxIconExpand' icon for the expanded mode, but in the same size as its variant used used for the select component. The icon is in a 20x20 bounding box, but the icon itself is 12px large.
• As typography in general, labels are set to color-subtle, and literal/strings are set to color-base, and links are set to color-progressive, source.
• We've been using a base 8 grid for spacing (margins, paddings, ...)
• The chevron icon, when close is set to border-color-interactive, source.
• We could animate the rotation of the chevron icon, and the height of the keyline. We could set the animation duration to transition-duration-medium, and the timing function to transition-timing-function-system, source. We should disable animations if the prefers-reduced-motion is on.

This is a first implementation proposal, as described in this comment, once we have this on beta, we could like to play with the different visual cues described, if people don't find the current proposal clear enough.