@tvst is taking a look at the CSS changes today. If he's cool with them, I'll update the failing Cypress snapshots.

Found some vertical alignment issues which possibly predated this PR:

So I fixed them using flex:

See code here: 50b91a4
And this works with empty labels too.

Thanks, Thiago! (I've merged @tvst's changes in here.)

This PR introduces some subtle changes to the way the ColorPicker border renders - @tvst, is this cool/intentional?

@tconkling Probably out of the scope of this PR, but is there some reason why we don't take the same approach with

  {element.label}
  {element.help && (
    <StyledWidgetLabelHelp>
      <TooltipIcon
        content={element.help}
        placement={Placement.TOP_RIGHT}
      />
    </StyledWidgetLabelHelp>
  )}
</StyledWidgetLabel>

For Radio and ColorPicker components?

@tconkling Probably out of the scope of this PR, but is there some reason why we don't take the same approach with

  {element.label}
  {element.help && (
    <StyledWidgetLabelHelp>
      <TooltipIcon
        content={element.help}
        placement={Placement.TOP_RIGHT}
      />
    </StyledWidgetLabelHelp>
  )}
</StyledWidgetLabel>

For Radio and ColorPicker components?

I don't think there's a good reason - just different people touching the files at different times. Might be worth a drive-by cleanup down the line.