Gutenberg: ToggleControl visually broken when wrapped in `Disabled` component

[simison]

ToggleControl is visually broken by having a thick rectangular border around it when wrapped in Disabled component.

To Reproduce

1. Use Gutenberg 4.4.0 or current master.

2. Create a block:

   import { registerBlockType } from '@wordpress/blocks';
   import { Disabled, ToggleControl } from '@wordpress/components';
   import { Fragment } from '@wordpress/element';
   import { InspectorControls } from '@wordpress/editor';
   
   const toggles = (
     <Fragment>
       <Disabled>
         <ToggleControl label="This is disabled" />
       </Disabled>
       <ToggleControl label="This is not disabled" />
     </Fragment>
   );
   
   registerBlockType( 'demo/toggle-control', {
     title: 'Toggle Control demo',
     category: 'layout',
     edit: () => (
       <Fragment>
         <InspectorControls>{ toggles }</InspectorControls>
         { toggles }
       </Fragment>
     ),
     save: () => null,
   } );
   

3. Insert block in the editor
   Observe how disabled toggle has funky borders around it in both sidebar inspector as well at the block content area.

Expected behavior

✔︎ No funkiness.

Desktop:

• OS: MacOS
• Browser Firefox
• Version 63

[catehstn]

This is not great, @jasmussen can you take a look when you have a minute? I'm hoping this will be some straight forward CSS <3

[jasmussen]

Sure I'll take a look.

[jasmussen]

Submitted #12091 to fix this.