Allow setting display property on elements and components

[mattaningram]

Describe the solution you'd like
Buttons currently default to display: inline-flex, but there is nowhere to see that this is the case except looking at the Inspect panel where you can't change it. I would like to have display control of elements and components to override defaults the way we do with any element in regular CSS. This could be a dropdown control instead of needing to use custom CSS.

Not everything should be flex in web layout, sometimes we need a simple block or inline or inline-block.

Describe alternatives you've considered
If there is a specific need to keep components with their default display value, then at least make it more clear what that display value is with a disabled dropdown or something else in the Design panel.

[StephenHaney]

Thanks Mattan, we're always looking for the balance between being very CSS literal and abstracting things for less technical designers.

I think you're right display should be exposed.

One note, the way it works currently, if you want to get display: block from a flex Box, you can remove the flex with the - button in the top right corner (which will clear the display property of the div)

By the way, was this round of invites your first time into the app? Hope you enjoyed it! Please DM me on twitter with any deep thoughts or feedback if inspiration strikes!

[mattaningram]

Thanks Stephen! I figured removing Flex would reset the element to its default display, but I also saw that some components like Button come with defaults like inline-flex that I might want to change in some instances.

I was apparently in the March round of invites and totally missed the email, but I'm in now and really enjoying exploring Modulz. I have strong opinions on design tools and HTML/CSS, so I will definitely be sharing my thoughts with you!