Better style panel UI discussion

[webstudio-is]

Better style panel UI discussion

[natlusyht]

Specification: Display (draft)

Figma Document With All The Design Elements In Context

display: flex

A general ethos of this design language is: less is more, this manifests itself in less use of labels that take space real estate, and for the labels that do, they at least serve more than the singular purpose of a label, for example the fact that Section labels serve as both labels and interactive select controls:

another design ethos is in space management, controls are often times compressed to their minimal interactive counter-part to avoid clutter and allow more vertical space to display more above the fold.

The sidebar in it's collapsed state features the secondary function of being able to display what that section has been previously authored/configured to, for example I would be able to see that display Is set to flex, font to a particular font, position to relative, for example:

• properties: input/h1/div/button (tag name or component name)
• display: inline-block/inline-block/flex/inline-flex/grid/-inline-grid
• font: arial/sans-serif/serif
• position: static/relative/absolute/fixed/sticky
• sizing: border-box/content-box (sizing will also contain margins/paddings)
• background: color
• border: solid/dashed/dotted

which will assume the same form and function as Display Flex (chevron) and Font SF Pro Display (chevron) is in the expanded variants — that is they are the selectable overarching property of the section. For example in Properties whether it is input or button will define what kind of properties are configurable by default, the same for Position absolute vs relative.

The flex display control features 4 primary controls, namely Grid, Icon and Input. In general all controls can be reset to the original state i.e (initial/inherited) with the option + click interaction on the control. Icon controls that are not in their inherited/initial state are represented in blue to indicate they are active states that where explicitly set by the author.

No labels, which means in its stead all controls feature a "delayed" tooltip with its intended label.

The attached video Figma's iteration of the proposed interaction.

tooltip.mp4

Grid

A visual control that allows one to toggle between the positional states of flex-box, this includes space-between/around, the grid control is an enhanced experience control and in no way replaces the Icon controls that supplement it, the effect of changing either the grid or icon control are in turn displayed and represented within the other, for example if the grid is configured to a center position, the relevant icon controls will reflect this state and vice-versa.

The grid control has a secondary interaction that allows an author to toggle between the space-around/between states on double click once on a settled state, shown above.

grid.mp4

Icon

The icon control in "general" takes the same action space as a radio control group, it allows you to select between pre-defined states of a control, on secondary interaction it allows you enter any explicit value that once resolved is resolved to one of the pre-defined options, i.e inherit would be an example of this, as would var(--variable), the resolved value of these explicit inputs would be what the controls active state resolves to and displays: in this case the icon best suited to represent that state.

Input

Input controls feature an input with additional features that make working with numbers and units an enhanced experience. this includes cursor-mouse slider on numbers, pre-suggested unit selection on units explained in more depth here: #52.

Both Icon and Input controls feature a secondary auto-input control that is a selectable list of expected values, with option to input any arbitrary value/variable that is resolvable to an expected value.

and a possible theme control, to be later expanded upon.

[taylornowotny]

Webstidio.Flex.panel.prototype.mp4

[kof]

@taylornowotny @natlusyht @okonet I think we should close this issue and create more specific once where needed

[kof]

Closing in favor of separate issues