"Group Selection" creates a non-flex Stack

[balleverte]

Reproduction

1. create several blocks, e.g. a button, a text, and an image
2. highlight these blocks in the Layers view or press ⌘-G
3. Builder creates a new Box and adds all the selected items as children. The new Box has a Stack inner-layout, but lacks display: flex; flex-direction: column:
   
   

If I then select Row and then Column again, I get the CSS properties I expect:

You can also reproduce this by creating a Box, then dragging items into it. As soon as it has multiple children, it will become a non-flex Stack.

Why this is a problem

Setting the gap property on an element that doesn’t have display: flex (or similar) has no effect.

Preferred Solution

As soon as a Box becomes a Stack, give it display: flex; flex-direction: column.

Alternate Solution

Don’t make the Box a Stack (or row). Users must explicitly opt into that layout. I don’t like this solution because there’s no Static layout in Builder, so this becomes the only way to create an element that has display: block.

[manish-sharma]

Hi @balleverte,

We are not able to reproduce this behaviour, could you please check and confirm if the Use default styles is enabled under the Account Settings → Advanced Settings → Editor

[balleverte]

I had, indeed, disabled “Use default styles” because our design team wants strict control over the visual display, so they want styles to inherit via CSS. Re-enabling that feature does fix the problem.

(In particular, I had hoped that disabling that feature would remove the default height: 200px from Box and the line-height: normal from Text, but neither seems to be the case.)

[manish-sharma]

Hi @balleverte,

The default height: 200px; and line-height: normal;. These default styles help keep things in order for box layout, and text. These are necessary so that when creating them a user can focus on the look and feel. You can read more about them at Builder Best Practices