We're showing a number of properties as controlled when they are not

STR

1. Open below project
2. select ‘register’
3. Look at inspector

Expected: Height: 30 isn’t shown as controlled, since it’s not (no css class nor javascript is affecting it)

STR2

1. Open new project
2. Look at default view Expected: dimension properties aren’t controlled. Self-size property isn’t controlled.

/** @jsx jsx */
import * as React from 'react'
import { Rectangle, Scene, Storyboard, Text, View, img, jsx } from 'utopia-api'
export const cardData = [
  {
    title: 'Monument Valley',
    photoURL:
      'https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3310&q=80',
  },

  {
    title: 'Raja Ampat',
    photoURL:
      'https://images.unsplash.com/photo-1586517659479-eea1f837aaf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2090&q=80',
  },

  {
    title: 'Jal Mahal',
    photoURL:
      'https://images.unsplash.com/photo-1477586957327-847a0f3f4fe3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
  },

  {
    title: 'Tokyo',
    photoURL:
      'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2271&q=80',
  },
]
export var Card = (props) => {
  console.log(props)
  return (
    <div
      style={{
        ...(props.style || {}),
        minWidth: 335,
        minHeight: 184,
        paddingTop: 0,
        backgroundImage: `url(${props.photoURL})`,
        backgroundSize: 'cover',
        borderRadius: '0px',
        height: 255,
        top: -4,
        position: 'relative',
      }}
      className={props.className}
    >
      <div
        style={{
          height: 42,
          bottom: 0,
          display: 'flex',
          color: '#080808BA',
          fontFamily: 'Arvo, sans-serif',
          left: 0,
          backgroundColor: '#FFFFFFB8',
          opacity: 1,
          borderRadius: '0px',
          paddingLeft: 8,
          right: 0,
          alignItems: 'center',
          paddingRight: 8,
          position: 'absolute',
        }}
      >
        <span style={{ color: '#0A0A0A', fontFamily: 'Inter', border: 'none', flexGrow: 1 }}>
          {props.title}
        </span>
        <div
          layout={{ crossBasis: 30, flexBasis: 100 }}
          css={{
            justifyContent: 'center',
            transition: 'all .03s linear',
            display: 'flex',
            '&:hover': { color: 'white', backgroundColor: 'black', fontWeight: 500 },
            fontSize: 12,
            border: '1px solid black',
            '&:active': { transform: 'translateY(2px)' },
            alignItems: 'center',
          }}
        >
          Register
        </div>
      </div>
      <View
        style={{
          height: 30,
          backgroundColor: '#DDDDDDBD',
          width: 33,
          opacity: 1,
          borderRadius: '12.5px',
          right: 11,
          top: 12,
          position: 'absolute',
        }}
        layout={{ layoutSystem: 'pinSystem' }}
      >
        <img
          style={{
            height: 22,
            left: 6,
            width: 21,
            mixBlendMode: 'multiply',
            opacity: 0.25,
            top: 4,
          }}
          src={'./assets/heart-icon-transparent-icon-symbol-love-black-11553480202wbkavsmiom.png'}
          data-aspect-ratio-locked
          alt={''}
        />
      </View>
    </div>
  )
}
Card.propertyControls = {
  title: {
    type: 'string',
    title: 'Greetings',
    defaultValue: 'Hello World',
  },

  photoURL: {
    type: 'string',
    title: 'Photo URL',
    defaultValue:
      'https://images.unsplash.com/photo-1591587761216-4188baf81c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80',
  },
}
export var App = (props) => {
  return (
    <View style={{ ...(props.style || {}), backgroundColor: '#FFFFFF', width: 433 }} layout={{}}>
      <div
        style={{
          bottom: 0,
          flexDirection: 'column',
          display: 'flex',
          left: 0,
          right: 0,
          top: 0,
          alignItems: 'stretch',
          position: 'absolute',
        }}
        layout={{ gapMain: 27 }}
        data-label={'List Container'}
      >
        {cardData.map((item) => (
          <div
            onMouseDown={() => console.log(`clicked ${item.title}`)}
            css={{ transition: 'all .1s ease-in-out', '&:hover': { transform: 'scale(1.02)' } }}
            data-label={'Item'}
          >
            <Card
              photoURL={item.photoURL}
              layout={{ crossBasis: 184, flexBasis: 335 }}
              title={item.title}
            />
          </div>
        ))}
      </div>
    </View>
  )
}
export var storyboard = (
  <Storyboard layout={{ layoutSystem: 'pinSystem' }}>
    <Scene
      style={{ height: 812, left: 555, width: 434, top: -123 }}
      component={App}
      layout={{ layoutSystem: 'pinSystem' }}
      props={{ style: { bottom: 0, left: 0, right: 0, top: 0 } }}
      data-label={'List Example'}
    />
    <Scene
      style={{ height: 223, left: 555, width: 335, top: -434 }}
      component={Card}
      layout={{ layoutSystem: 'pinSystem' }}
      props={{
        photoURL:
          'https://images.unsplash.com/photo-1465805139202-a644e217f00e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80',
        title: 'The Trip of a Lifetime',
      }}
      data-label={'Card'}
    />
  </Storyboard>
)

[gbalint]

@seanparsons Yes, ‘detected’ makes sense, but as I see Malte would prefer to separate them

[seanparsons]

Closing due to this opening up discussions for more a comprehensive fix.