Action nodes redesign to improve visual canvas' readability

[sangwoohaan]

Description

Currently, all the action nodes have the same format(Label-sublabel) which works for few, but not for the others. This is demanding a redesign sooner or later.
The redesign's goal is to improve the overall readability of visual canvas through a flexible design system – you should be able to quickly scan through it and understand the flow, where to find what.

Execution plan

• (in PR feat: support multi-line node block in Visual Editor #2005 ) Layout: smart layouter, support size-sensitive node blocks
• (in PR feat: repaint ui for setProperties in visual editor #2017 ) Widget: enhance the appearance of SetProperties as a multi-line node, extract shared elements
• Widget: implement multi-section node widget which is split by '-------v-------', apply to specific $types
• LG: Syntax hightlighting lib of LanguageGeneration(LG) text
• Layout: node size adjustment and node styles fine tune

Other context

Design link: https://www.figma.com/file/04DymSq4xElhOBdAyutvvTbq/Composer-SH-06.19?node-id=4585%3A1049

[yeze322]

It's really nice!

[sangwoohaan]

@hibrenda Could you add this to the R8 design discussion as well?

[sangwoohaan]

adding #1476

[mareekuh]

Per design review:
@sangwoohaan - due : 01/28

1. • Add the name of the action in the label, in addition to the action type (Begin Help (dialog))
2. • Keep body of node white
     3.- If there are input values, list them vertically
3. -If there are output values, list them below a line ----v-----
4. • @sangwoohaan

• Create update a page like this (screenshot) that includes different types of node so Marc can see the nodes in context when designing the final visuals
• Create a sample node for each of the different types of actions : use this list as a starting point. Do Prompt nodes last (as they are more complicated)

@DesignPolice - Start on final design on 01/28. Due: 01/31
FYI for @cwhitten

[mareekuh]

Oops clicked wrong button

[sangwoohaan]

Final design : https://www.figma.com/file/04DymSq4xElhOBdAyutvvTbq/Composer-SH-06.19?node-id=4585%3A1049

[DesignPolice]

@Kaiqb I think this one is in progress. Does anyone else have other design needs?

[yeze322]

@Kaiqb I think this one is in progress. Does anyone else have other design needs?

Awesome work! Alan and I are taking actions on it 💯

Just want to check two extra things:

1. A choice can have synonyms, do we want to show it?
   
2. There is a DeleteProperties type which is quite similar to SetProperties. Do we want to show it as a list?
   

@sangwoohaan @DesignPolice

[yeze322]

Execution plan:

• (in PR feat: support multi-line node block in Visual Editor #2005 ) Layout: smart layouter, support size-sensitive node blocks
• (in PR feat: repaint ui for setProperties in visual editor #2017 ) Widget: enhance the appearance of SetProperties as a multi-line node, extract shared elements
• Widget: implement multi-section node widget which is split by '-------v-------', apply to specific $types
• LG: Syntax hightlighting lib of LanguageGeneration(LG) text
• Layout: node size adjustment

[cwhitten]

addressed via #2136