Repository: concrete-utopia/utopia

Issue #28: Improve the 'Insert to Flex',  'Convert to Flex' and 'reparent to flex' outcomes
Created: 2020-05-28T15:24:24Z
Problem
Converting a view to flex, or conversely reparenting an element into a flex environment leads to unexpected outcomes that are not obvious from looking at the inspector.
This is typically because of one of these reasons

the presence of width, height, left etcand position properties.
the presence of those properties because of css classes or spread operators
the presence of invisible or uneditable style attributes in a React component that cannot be overridden.

Proposal
To improve this experience:
Remove these properties where they exist

width and height that are explicitly set are transferred to base. Implicitly set ones are ignored
left, right, top, bottom are cleared
position is cleared

On insertion, we need to be particularly careful: inserting an element into a flex context should never set positional properties (left, right, top, bottom), and should only set flexBase and crossBase.
Warn of objects that cannot be well positioned

For elements and components where this fails, warn via toast
For elements that end up with 0 height, width, or both - warn via toast.

Other approaches considered and not in scope or rejected

Inserting 'neutralizing' overrides into style that would override css classes (clutter, outside of 80/20)
inserting 'neutralizing' css classes (same)

Duplicate issue #62: When converting a view to Flex, things end up in odd / unpredicted positions and dimensions
Created: 2020-06-08T19:15:59Z
STR

Use the sample code below
Convert the outer view to flex via the inspector

Expected: things resize and reposition nicely, eg in a row
Observed: things end up in super strange places, as if someone manually redistributed them. Without the code editor open, it's hard to know how and why.
Investigation shows that the children are not changed, and still carry the same information (top, left, width, height) as before.
Suggested fix: when changing the layout system, strip the children of that information.

 Width and height should (used to?) go into flexBase and crossBase.
 positional information (left, top, bottom, right, margin, position) should be removed.
 This should also happen after reparenting or pasting an element into a flex container
 Fire one Info toast if at least one element had to be changed: "One or more elements had position information that was removed"

/** @jsx jsx */
import * as React from 'react'
import { Scene, Storyboard, View, jsx } from 'utopia-api'
export var App = (props) => {
  return (
    <View
      style={{ ...(props.style || {}), backgroundColor: '#FFFFFF' }}
      layout={{ layoutSystem: 'pinSystem' }}
    >
      <View
        style={{ backgroundColor: '#DDDDDD', left: 0, width: 375, height: 38, top: 774 }}
        layout={{ layoutSystem: 'pinSystem' }}
      />
      <View
        style={{ backgroundColor: '#DDDDDD', left: 0, width: 375, height: 674, top: 69 }}
        layout={{ layoutSystem: 'pinSystem' }}
      />
      <View
        style={{ backgroundColor: '#DDDDDD', left: 0, top: 0, width: 375, height: 38 }}
        layout={{ layoutSystem: 'pinSystem' }}
      />
    </View>
  )
}
export var storyboard = (
  <Storyboard layout={{ layoutSystem: 'pinSystem' }}>
    <Scene
      component={App}
      props={{ style: { top: 0, left: 0, bottom: 0, right: 0 } }}
      style={{ left: 0, top: 0, width: 375, height: 812 }}
      layout={{ layoutSystem: 'pinSystem' }}
    />
  </Storyboard>
)

Closing comment (2020-06-08T19:16:50Z): Seems like this is a duplicate of #28