Page MenuHomePhabricator

Default component: nested logic and visual style
Closed, ResolvedPublic

Assigned To
Authored By
AAlhazwani-WMF
Nov 14 2022, 10:42 AM
Referenced Files
F36279167: image.png
Jan 17 2023, 2:28 PM
F36279003: image.png
Jan 17 2023, 2:28 PM
F36279001: image.png
Jan 17 2023, 2:28 PM
F36278991: image.png
Jan 17 2023, 2:28 PM
F36259404: image.png
Jan 16 2023, 3:15 PM
F36259400: image.png
Jan 16 2023, 3:15 PM
F36259398: image.png
Jan 16 2023, 3:15 PM
F36259394: image.png
Jan 16 2023, 3:15 PM

Description

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

image.png (1×1 px, 202 KB)

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.

image.png (430×1 px, 57 KB)

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.

image.png (498×1 px, 42 KB)

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.

image.png (1×1 px, 240 KB)

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.

Event Timeline

Note to self: sticky headers on scroll. We could this for the first nested layer, or maybe for the following layers too?

image.png (1×750 px, 71 KB)

Some other explorations that we could combine, and test...

Playing with icons:

  • chevron
  • caret
  • fill/empty dot
  • plus/minus icon
  • fill empty caret
  • plus/close icon

image.png (1×3 px, 337 KB)

Playing with color, we could apply color (independently) to:

  • typography
  • icons
  • keylines

image.png (1×1 px, 173 KB)

Playing with keylines

  • stroke width
  • stroke style

image.png (1×2 px, 233 KB)

Playing with layout

  • spacing
  • indentation

image.png (1×1 px, 173 KB)

Playing with the background

  • fill background
  • gradient background
  • outline background

image.png (1×2 px, 285 KB)

AAlhazwani-WMF updated the task description. (Show Details)
AAlhazwani-WMF updated the task description. (Show Details)
AAlhazwani-WMF unsubscribed.

Change 880973 had a related patch set uploaded (by Genoveva Galarza; author: Genoveva Galarza):

[mediawiki/extensions/WikiLambda@master] Fix styles for default view nesting

https://gerrit.wikimedia.org/r/880973

Change 880973 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Fix styles for default view nesting

https://gerrit.wikimedia.org/r/880973

DVrandecic subscribed.

My understanding of this task is that this is done now, given Geno moved it to Ready to review, and the Beta seems to show consistent behavior. Therefore closing. Please reopen if I misunderstood.