Change Details

## 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. ## (Early) design proposal For example, we could explore how a specific color scheme might support such requirement. In the example below, we're using a [[ https://personal.sron.nl/~pault/#fig:scheme_muted | color blind friendly palette ]], and we're assigning a different color for each one of the different nested layers (1st layer set in rose, 2nd layer set in indigo, 3rd layer set in olive, ...). In this exploration, the color is applied to the chevron icon, the label, and the border line. Once we would reach the end of the color scheme, we would restart from the first color. {F35773765} Additionally, once we have a first implementation, we could play with the different visual properties: - **Arrow icon** - Which icon (solid or line)? - Position and orientation of the arrow - **Left line border** (decide when lines will be visible, maybe we don't want to display them when the tree has less than X levels) - border stroke - border style - border alignment, - **Incremental indentation** - Horizontal separation between levels - Vertical separation between levels - Styles to represent the **first level** (Bold, Regular, colors?) - Styles to represent the **selected items** (Bold, Regular, colors?) - and much more {F35773883}

## 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 {F36278991} We've been testing the colors from this [[ https://personal.sron.nl/~pault/#fig:scheme_muted | article on accessible (and colorblind-friendly) colors for data visualization ]], and we selected the 6 colors that pass AA color contrast against white. {F36279001} 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. {F36279003} ### 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 [[ https://doc.wikimedia.org/codex/main/components/demos/select.html | 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`, [[ https://doc.wikimedia.org/codex/main/design-tokens/color.html | source ]]. - We've been using a base 8 grid for spacing (margins, paddings, ...) - 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`, [[ https://doc.wikimedia.org/codex/latest/design-tokens/transition.html | source ]]. We should disable animations if the `prefers-reduced-motion` is on. {F36279167}

## 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. ## (Early) d## Design proposal For example, we could explore how a specific color scheme might support such requirement. In the example below, we're using a [[ https://personal.sron.nl/~pault/#fig:scheme_muted | color blind friendly palette ]], and we're assigning a different color for each one of the different nested layers (1st layer set in rose, 2nd layer set in indigo, 3rd layer set in olive, ...). In this exploration, the color is applied to the chevron icon, the label, and the border line. Once we would reach the end of the color scheme, we would restart from the first color.igma file https://www.figma.com/file/Iw1bxoxa8RRFjwQs8NUZMg/T323013?node-id=29%3A5130&t=1BzLQC3TVi33Zu9E-1 {F35773765}{F36278991} Additionally, once we have a first implementationWe've been testing the colors from this [[ https://personal.sron.nl/~pault/#fig:scheme_muted | article on accessible (and colorblind-friendly) colors for data visualization ]], we could play with the different visual properties:and we selected the 6 colors that pass AA color contrast against white. - **Arrow icon** - Which icon (solid or line)? - Position and orientation of the arrow - **Left line border** (decide when lines will be visible,{F36279001} 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. maybe we don't want to display them when the tree has less than X levels) - border stroke - border style - border alignment, - **Incremental indentation** - Horizontal separation between levels - Vertical separation between levelsThe color is applied to the chevron icon, the keyline, and the parent label. {F36279003} ### 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 [[ https://doc.wikimedia.org/codex/main/components/demos/select.html | select component ]]. The icon is in a 20x20 bounding box, but the icon itself is 12px large. - Styles to represent the **first level** (Bold- As typography in general, labels are set to `color-subtle`, and literal/strings are set to `color-base`, Regularand links are set to `color-progressive`, [[ https://doc.wikimedia.org/codex/main/design-tokens/colors?).html | source ]]. - Styles to represent the **selected items** (Bold- We've been using a base 8 grid for spacing (margins, Regularpaddings, colors?...) - and much more {F35773883- 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`, [[ https://doc.wikimedia.org/codex/latest/design-tokens/transition.html | source ]]. We should disable animations if the `prefers-reduced-motion` is on. {F36279167}