From 66ec200991cdf5e7dd1b9682cf6f61bf13ca99b1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 2 Apr 2020 17:17:04 -0400
Subject: [PATCH 001/103] Creating initial BoxControl component

---
 packages/components/src/box-control/index.js  | 297 ++++++++++++++++++
 .../src/box-control/stories/index.js          |  10 +
 packages/components/src/unit-control/index.js |   4 +-
 3 files changed, 309 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/box-control/index.js
 create mode 100644 packages/components/src/box-control/stories/index.js

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
new file mode 100644
index 00000000000000..fcf2f5cabd07f6
--- /dev/null
+++ b/packages/components/src/box-control/index.js
@@ -0,0 +1,297 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
+import styled from '@emotion/styled';
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '../button-group';
+import Button from '../button';
+import BaseUnitControl from '../unit-control';
+
+const types = [ 'all', 'pairs', 'custom' ];
+const defaultInputProps = {
+	min: 0,
+};
+const typeOptions = {
+	all: 'All',
+	pairs: 'Pairs',
+	custom: 'Custom',
+};
+
+const defaultValueProps = {
+	top: [ 0, 'px' ],
+	right: [ 0, 'px' ],
+	bottom: [ 0, 'px' ],
+	left: [ 0, 'px' ],
+};
+
+const BoxControlComponent = {
+	all: BoxAllControl,
+	pairs: BoxPairsControl,
+	custom: BoxCustomControl,
+};
+
+const parseType = ( type ) => {
+	return types.includes( type ) ? type : 'all';
+};
+
+export default function BoxControl( {
+	inputProps = defaultInputProps,
+	onChange = noop,
+	label = 'Box Control',
+	type: typeProp = 'pairs',
+	values: valuesProp,
+} ) {
+	const [ type, setType ] = useState( parseType( typeProp ) );
+	const [ values, setValues ] = useState( parseValues( valuesProp ) );
+	const ControlComponent = BoxControlComponent[ type ];
+
+	const updateValues = ( nextValues ) => {
+		const mergedValues = { ...values, ...nextValues };
+		setValues( mergedValues );
+		onChange( mergedValues );
+	};
+
+	const mixedLabel = __( 'Mixed' );
+
+	return (
+		<div>
+			<div>
+				{ label }
+				<div>
+					<BoxTypeControl
+						label={ label }
+						onChange={ setType }
+						type={ type }
+					/>
+				</div>
+			</div>
+			<ControlComponent
+				{ ...inputProps }
+				placeholder={ mixedLabel }
+				values={ values }
+				onChange={ updateValues }
+			/>
+		</div>
+	);
+}
+
+function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
+	const [ value, unit ] = values.top;
+	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
+	const isMixed = ! allValues.every( ( v ) => v === value );
+
+	return (
+		<UnitControl
+			{ ...props }
+			value={ isMixed ? '' : value }
+			placeholder={ placeholder }
+			unit={ unit }
+			onChange={ ( next ) => {
+				onChange( {
+					top: [ next, unit ],
+					right: [ next, unit ],
+					bottom: [ next, unit ],
+					left: [ next, unit ],
+				} );
+			} }
+			onUnitChange={ ( next ) => {
+				onChange( {
+					top: [ value, next ],
+					right: [ value, next ],
+					bottom: [ value, next ],
+					left: [ value, next ],
+				} );
+			} }
+		/>
+	);
+}
+
+function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
+	const [ vertical, verticalUnit ] = values.top;
+	const [ horizontal, horizontalUnit ] = values.left;
+
+	const isVerticalMixed = ! getValues( values, 'top', 'bottom' ).every(
+		( v ) => v === vertical
+	);
+	const isHorizontalMixed = ! getValues( values, 'left', 'right' ).every(
+		( v ) => v === horizontal
+	);
+
+	return (
+		<UnitControlContainer>
+			<UnitControl
+				{ ...props }
+				placeholder={ placeholder }
+				onChange={ ( next ) => {
+					onChange( {
+						top: [ next, verticalUnit ],
+						bottom: [ next, verticalUnit ],
+					} );
+				} }
+				onUnitChange={ ( next ) => {
+					onChange( {
+						top: [ vertical, next ],
+						bottom: [ vertical, next ],
+					} );
+				} }
+				value={ isVerticalMixed ? '' : vertical }
+				unit={ verticalUnit }
+			/>
+			<UnitControl
+				{ ...props }
+				placeholder={ placeholder }
+				onChange={ ( next ) => {
+					onChange( {
+						left: [ next, horizontalUnit ],
+						right: [ next, horizontalUnit ],
+					} );
+				} }
+				onUnitChange={ ( next ) => {
+					onChange( {
+						left: [ horizontal, next ],
+						right: [ horizontal, next ],
+					} );
+				} }
+				value={ isHorizontalMixed ? '' : horizontal }
+				unit={ horizontalUnit }
+			/>
+		</UnitControlContainer>
+	);
+}
+
+function BoxCustomControl( { onChange = noop, values, ...props } ) {
+	const unitControlProps = useCustomUnitControlProps( {
+		values,
+		onChange,
+	} );
+
+	return (
+		<UnitControlContainer>
+			<UnitControl
+				{ ...unitControlProps.top }
+				{ ...props }
+				placeholder=""
+			/>
+			<UnitControl
+				{ ...unitControlProps.right }
+				{ ...props }
+				placeholder=""
+			/>
+			<UnitControl
+				{ ...unitControlProps.bottom }
+				{ ...props }
+				placeholder=""
+			/>
+			<UnitControl
+				{ ...unitControlProps.left }
+				{ ...props }
+				placeholder=""
+			/>
+		</UnitControlContainer>
+	);
+}
+
+function useCustomUnitControlProps( { values, onChange = noop } ) {
+	const valueKeys = Object.keys( values );
+	const props = {};
+
+	valueKeys.forEach( ( key ) => {
+		const [ value, unit ] = values[ key ];
+
+		const handleOnChange = ( next ) => {
+			onChange( { [ key ]: [ next, unit ] } );
+		};
+
+		const handleOnUnitChange = ( next ) => {
+			onChange( { [ key ]: [ value, next ] } );
+		};
+
+		props[ key ] = {
+			value,
+			unit,
+			onChange: handleOnChange,
+			onUnitChange: handleOnUnitChange,
+		};
+	} );
+
+	return props;
+}
+
+function BoxTypeControl( {
+	label = 'Box Control',
+	onChange = noop,
+	type = 'all',
+} ) {
+	const radio = useRadioState( { state: type } );
+
+	useEffect( () => {
+		onChange( radio.state );
+	}, [ radio.state ] );
+
+	return (
+		<RadioGroup { ...radio } as={ ButtonGroup } aria-label={ label }>
+			{ types.map( ( value ) => (
+				<Radio
+					{ ...radio }
+					as={ Button }
+					isPrimary={ radio.state === value }
+					key={ value }
+					value={ value }
+				>
+					{ typeOptions[ value ] }
+				</Radio>
+			) ) }
+		</RadioGroup>
+	);
+}
+
+function UnitControl( props ) {
+	return (
+		<UnitControlWrapper>
+			<BaseUnitControl isResetValueOnUnitChange={ false } { ...props } />
+		</UnitControlWrapper>
+	);
+}
+
+const UnitControlContainer = styled.div`
+	display: flex;
+`;
+
+const UnitControlWrapper = styled.div`
+	max-width: 80px;
+	padding-right: 4px;
+`;
+
+function parseValues( values = {} ) {
+	const nextValueProps = {};
+
+	Object.keys( defaultValueProps ).forEach( ( key ) => {
+		const defaultValue = defaultValueProps[ key ];
+		const prop = values[ key ] || [];
+
+		nextValueProps[ key ] = [
+			prop?.[ 0 ] || defaultValue[ 0 ],
+			prop?.[ 1 ] || defaultValue[ 1 ],
+		];
+	} );
+
+	return nextValueProps;
+}
+
+function getValues( values, ...args ) {
+	const nextValues = [];
+	args.forEach( ( key ) => {
+		nextValues.push( values[ key ][ 0 ] );
+	} );
+
+	return nextValues;
+}
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
new file mode 100644
index 00000000000000..adea88ad550a5e
--- /dev/null
+++ b/packages/components/src/box-control/stories/index.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import BoxControl from '../';
+
+export default { title: 'Components/BoxControl', component: BoxControl };
+
+export const _default = () => {
+	return <BoxControl />;
+};
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 7276b10141a55f..c88ea378c28c3c 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isUndefined, noop } from 'lodash';
+import { noop } from 'lodash';
 import classnames from 'classnames';
 /**
  * Internal dependencies
@@ -28,7 +28,7 @@ export default function UnitControl( {
 		const { data } = changeProps;
 		onUnitChange( unitValue, changeProps );
 
-		if ( isResetValueOnUnitChange && ! isUndefined( data.default ) ) {
+		if ( isResetValueOnUnitChange && ! data.default === undefined ) {
 			onChange( data.default, changeProps );
 		}
 	};

From dff4163ad84f3307f07a67d6a67f51965db4dd02 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 12:08:15 -0400
Subject: [PATCH 002/103] Add BoxControlIcon

---
 packages/components/src/box-control/icon.js   | 96 +++++++++++++++++++
 packages/components/src/box-control/index.js  | 80 ++++++++++------
 .../src/box-control/stories/index.js          | 19 +++-
 .../components/src/utils/colors-values.js     |  1 +
 4 files changed, 168 insertions(+), 28 deletions(-)
 create mode 100644 packages/components/src/box-control/icon.js

diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
new file mode 100644
index 00000000000000..78aa39182242c1
--- /dev/null
+++ b/packages/components/src/box-control/icon.js
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import { color } from '../utils/style-mixins';
+
+export default function BoxControlIcon( { sides = [ 'all' ] } ) {
+	const top = getSide( sides, 'top' );
+	const right = getSide( sides, 'right' );
+	const bottom = getSide( sides, 'bottom' );
+	const left = getSide( sides, 'left' );
+
+	return (
+		<Root>
+			<Viewbox>
+				<TopStroke isFocused={ top } />
+				<RightStroke isFocused={ right } />
+				<BottomStroke isFocused={ bottom } />
+				<LeftStroke isFocused={ left } />
+			</Viewbox>
+		</Root>
+	);
+}
+
+function getSide( sides, value ) {
+	const match = value.toLowerCase();
+
+	return sides.find( ( side ) => {
+		const sideValue = side.toLowerCase();
+		return [ 'all', match ].includes( sideValue );
+	} );
+}
+
+const Root = styled.span`
+	box-sizing: border-box;
+	display: block;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	padding: 4px;
+`;
+
+const Viewbox = styled.span`
+	box-sizing: border-box;
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+`;
+
+const strokeFocus = ( { isFocused } ) => {
+	return css( {
+		backgroundColor: color( 'ui.border' ),
+		opacity: isFocused ? 1 : 0.3,
+	} );
+};
+
+const Stroke = styled.span`
+	box-sizing: border-box;
+	display: block;
+	pointer-events: none;
+	position: absolute;
+	${strokeFocus};
+`;
+
+const VerticalStroke = styled( Stroke )`
+	bottom: 3px;
+	top: 3px;
+	width: 2px;
+`;
+
+const HorizontalStroke = styled( Stroke )`
+	height: 2px;
+	left: 3px;
+	right: 3px;
+`;
+
+const TopStroke = styled( HorizontalStroke )`
+	top: 0;
+`;
+
+const RightStroke = styled( VerticalStroke )`
+	right: 0;
+`;
+
+const BottomStroke = styled( HorizontalStroke )`
+	bottom: 0;
+`;
+
+const LeftStroke = styled( VerticalStroke )`
+	left: 0;
+`;
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index fcf2f5cabd07f6..0059cfe881edf8 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -14,16 +14,17 @@ import { __ } from '@wordpress/i18n';
  */
 import ButtonGroup from '../button-group';
 import Button from '../button';
+import BoxControlIcon from './icon';
 import BaseUnitControl from '../unit-control';
 
 const types = [ 'all', 'pairs', 'custom' ];
 const defaultInputProps = {
 	min: 0,
 };
-const typeOptions = {
-	all: 'All',
-	pairs: 'Pairs',
-	custom: 'Custom',
+const typeIconSides = {
+	all: [ 'all' ],
+	pairs: [ 'top', 'bottom' ],
+	custom: [ 'top' ],
 };
 
 const defaultValueProps = {
@@ -49,6 +50,8 @@ export default function BoxControl( {
 	label = 'Box Control',
 	type: typeProp = 'pairs',
 	values: valuesProp,
+	// Disable units for now
+	units = false,
 } ) {
 	const [ type, setType ] = useState( parseType( typeProp ) );
 	const [ values, setValues ] = useState( parseValues( valuesProp ) );
@@ -79,6 +82,7 @@ export default function BoxControl( {
 				placeholder={ mixedLabel }
 				values={ values }
 				onChange={ updateValues }
+				units={ units }
 			/>
 		</div>
 	);
@@ -90,32 +94,36 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 	const isMixed = ! allValues.every( ( v ) => v === value );
 
 	return (
-		<UnitControl
-			{ ...props }
-			value={ isMixed ? '' : value }
-			placeholder={ placeholder }
-			unit={ unit }
-			onChange={ ( next ) => {
-				onChange( {
-					top: [ next, unit ],
-					right: [ next, unit ],
-					bottom: [ next, unit ],
-					left: [ next, unit ],
-				} );
-			} }
-			onUnitChange={ ( next ) => {
-				onChange( {
-					top: [ value, next ],
-					right: [ value, next ],
-					bottom: [ value, next ],
-					left: [ value, next ],
-				} );
-			} }
-		/>
+		<UnitControlContainer>
+			<BoxControlIcon />
+			<UnitControl
+				{ ...props }
+				value={ isMixed ? '' : value }
+				placeholder={ placeholder }
+				unit={ unit }
+				onChange={ ( next ) => {
+					onChange( {
+						top: [ next, unit ],
+						right: [ next, unit ],
+						bottom: [ next, unit ],
+						left: [ next, unit ],
+					} );
+				} }
+				onUnitChange={ ( next ) => {
+					onChange( {
+						top: [ value, next ],
+						right: [ value, next ],
+						bottom: [ value, next ],
+						left: [ value, next ],
+					} );
+				} }
+			/>
+		</UnitControlContainer>
 	);
 }
 
 function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
+	const [ selected, setSelected ] = useState( 'vertical' );
 	const [ vertical, verticalUnit ] = values.top;
 	const [ horizontal, horizontalUnit ] = values.left;
 
@@ -126,11 +134,20 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 		( v ) => v === horizontal
 	);
 
+	const iconSides = {
+		vertical: [ 'top', 'bottom' ],
+		horizontal: [ 'left', 'right' ],
+	};
+
+	const iconSide = iconSides[ selected ];
+
 	return (
 		<UnitControlContainer>
+			<BoxControlIcon sides={ iconSide } />
 			<UnitControl
 				{ ...props }
 				placeholder={ placeholder }
+				onFocus={ () => setSelected( 'vertical' ) }
 				onChange={ ( next ) => {
 					onChange( {
 						top: [ next, verticalUnit ],
@@ -149,6 +166,7 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 			<UnitControl
 				{ ...props }
 				placeholder={ placeholder }
+				onFocus={ () => setSelected( 'horizontal' ) }
 				onChange={ ( next ) => {
 					onChange( {
 						left: [ next, horizontalUnit ],
@@ -169,6 +187,7 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 }
 
 function BoxCustomControl( { onChange = noop, values, ...props } ) {
+	const [ selected, setSelected ] = useState( 'top' );
 	const unitControlProps = useCustomUnitControlProps( {
 		values,
 		onChange,
@@ -176,24 +195,29 @@ function BoxCustomControl( { onChange = noop, values, ...props } ) {
 
 	return (
 		<UnitControlContainer>
+			<BoxControlIcon sides={ [ selected ] } />
 			<UnitControl
 				{ ...unitControlProps.top }
 				{ ...props }
+				onFocus={ () => setSelected( 'top' ) }
 				placeholder=""
 			/>
 			<UnitControl
 				{ ...unitControlProps.right }
 				{ ...props }
+				onFocus={ () => setSelected( 'right' ) }
 				placeholder=""
 			/>
 			<UnitControl
 				{ ...unitControlProps.bottom }
 				{ ...props }
+				onFocus={ () => setSelected( 'bottom' ) }
 				placeholder=""
 			/>
 			<UnitControl
 				{ ...unitControlProps.left }
 				{ ...props }
+				onFocus={ () => setSelected( 'left' ) }
 				placeholder=""
 			/>
 		</UnitControlContainer>
@@ -247,7 +271,7 @@ function BoxTypeControl( {
 					key={ value }
 					value={ value }
 				>
-					{ typeOptions[ value ] }
+					<BoxControlIcon sides={ typeIconSides[ value ] } />
 				</Radio>
 			) ) }
 		</RadioGroup>
@@ -263,10 +287,12 @@ function UnitControl( props ) {
 }
 
 const UnitControlContainer = styled.div`
+	box-sizing: border-box;
 	display: flex;
 `;
 
 const UnitControlWrapper = styled.div`
+	box-sizing: border-box;
 	max-width: 80px;
 	padding-right: 4px;
 `;
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index adea88ad550a5e..ef9a00021aeb75 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -1,10 +1,27 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
 import BoxControl from '../';
+import BoxControlIcon from '../icon';
 
 export default { title: 'Components/BoxControl', component: BoxControl };
 
 export const _default = () => {
-	return <BoxControl />;
+	return (
+		<Wrapper>
+			<BoxControl />
+		</Wrapper>
+	);
 };
+
+export const icon = () => {
+	return <BoxControlIcon />;
+};
+
+const Wrapper = styled.div`
+	padding: 40px;
+`;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 7e152a4263cc8f..974acb607d1e16 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -138,6 +138,7 @@ export const UI = {
 	background: BASE.white,
 	border: BASE.black,
 	borderFocus: BLUE.medium.focus,
+	borderLight: LIGHT_GRAY[ 600 ],
 };
 
 export const COLORS = {

From 7904c7594d4883acb31502883ef230f3d93c41de Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 12:55:45 -0400
Subject: [PATCH 003/103] Add Flex component and integrate into BoxControl
 component

---
 packages/components/src/box-control/index.js  | 149 ++++++-----
 packages/components/src/flex/block.js         |  21 ++
 packages/components/src/flex/flex.js          |  40 +++
 packages/components/src/flex/index.js         |  10 +
 packages/components/src/flex/item.js          |  22 ++
 packages/components/src/flex/stories/index.js | 241 ++++++++++++++++++
 .../components/src/flex/stories/style.css     |   7 +
 .../components/src/flex/styles/flex-styles.js |  62 +++++
 packages/components/src/index.js              |   3 +
 packages/components/src/unit-control/index.js |  44 ++--
 10 files changed, 518 insertions(+), 81 deletions(-)
 create mode 100644 packages/components/src/flex/block.js
 create mode 100644 packages/components/src/flex/flex.js
 create mode 100644 packages/components/src/flex/index.js
 create mode 100644 packages/components/src/flex/item.js
 create mode 100644 packages/components/src/flex/stories/index.js
 create mode 100644 packages/components/src/flex/stories/style.css
 create mode 100644 packages/components/src/flex/styles/flex-styles.js

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 0059cfe881edf8..769ab659975cff 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -16,6 +16,7 @@ import ButtonGroup from '../button-group';
 import Button from '../button';
 import BoxControlIcon from './icon';
 import BaseUnitControl from '../unit-control';
+import { Flex, FlexBlock, FlexItem } from '../flex';
 
 const types = [ 'all', 'pairs', 'custom' ];
 const defaultInputProps = {
@@ -66,17 +67,17 @@ export default function BoxControl( {
 	const mixedLabel = __( 'Mixed' );
 
 	return (
-		<div>
-			<div>
-				{ label }
-				<div>
+		<Root>
+			<Header>
+				<FlexItem>{ label }</FlexItem>
+				<FlexItem>
 					<BoxTypeControl
 						label={ label }
 						onChange={ setType }
 						type={ type }
 					/>
-				</div>
-			</div>
+				</FlexItem>
+			</Header>
 			<ControlComponent
 				{ ...inputProps }
 				placeholder={ mixedLabel }
@@ -84,7 +85,7 @@ export default function BoxControl( {
 				onChange={ updateValues }
 				units={ units }
 			/>
-		</div>
+		</Root>
 	);
 }
 
@@ -94,31 +95,35 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 	const isMixed = ! allValues.every( ( v ) => v === value );
 
 	return (
-		<UnitControlContainer>
-			<BoxControlIcon />
-			<UnitControl
-				{ ...props }
-				value={ isMixed ? '' : value }
-				placeholder={ placeholder }
-				unit={ unit }
-				onChange={ ( next ) => {
-					onChange( {
-						top: [ next, unit ],
-						right: [ next, unit ],
-						bottom: [ next, unit ],
-						left: [ next, unit ],
-					} );
-				} }
-				onUnitChange={ ( next ) => {
-					onChange( {
-						top: [ value, next ],
-						right: [ value, next ],
-						bottom: [ value, next ],
-						left: [ value, next ],
-					} );
-				} }
-			/>
-		</UnitControlContainer>
+		<ControlContainer>
+			<FlexItem>
+				<BoxControlIcon />
+			</FlexItem>
+			<FlexBlock>
+				<UnitControl
+					{ ...props }
+					value={ isMixed ? '' : value }
+					placeholder={ placeholder }
+					unit={ unit }
+					onChange={ ( next ) => {
+						onChange( {
+							top: [ next, unit ],
+							right: [ next, unit ],
+							bottom: [ next, unit ],
+							left: [ next, unit ],
+						} );
+					} }
+					onUnitChange={ ( next ) => {
+						onChange( {
+							top: [ value, next ],
+							right: [ value, next ],
+							bottom: [ value, next ],
+							left: [ value, next ],
+						} );
+					} }
+				/>
+			</FlexBlock>
+		</ControlContainer>
 	);
 }
 
@@ -142,7 +147,7 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 	const iconSide = iconSides[ selected ];
 
 	return (
-		<UnitControlContainer>
+		<ControlContainer>
 			<BoxControlIcon sides={ iconSide } />
 			<UnitControl
 				{ ...props }
@@ -182,7 +187,7 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 				value={ isHorizontalMixed ? '' : horizontal }
 				unit={ horizontalUnit }
 			/>
-		</UnitControlContainer>
+		</ControlContainer>
 	);
 }
 
@@ -194,33 +199,45 @@ function BoxCustomControl( { onChange = noop, values, ...props } ) {
 	} );
 
 	return (
-		<UnitControlContainer>
-			<BoxControlIcon sides={ [ selected ] } />
-			<UnitControl
-				{ ...unitControlProps.top }
-				{ ...props }
-				onFocus={ () => setSelected( 'top' ) }
-				placeholder=""
-			/>
-			<UnitControl
-				{ ...unitControlProps.right }
-				{ ...props }
-				onFocus={ () => setSelected( 'right' ) }
-				placeholder=""
-			/>
-			<UnitControl
-				{ ...unitControlProps.bottom }
-				{ ...props }
-				onFocus={ () => setSelected( 'bottom' ) }
-				placeholder=""
-			/>
-			<UnitControl
-				{ ...unitControlProps.left }
-				{ ...props }
-				onFocus={ () => setSelected( 'left' ) }
-				placeholder=""
-			/>
-		</UnitControlContainer>
+		<ControlContainer>
+			<FlexItem>
+				<BoxControlIcon sides={ [ selected ] } />
+			</FlexItem>
+			<ControlContainer>
+				<UnitControl
+					{ ...unitControlProps.top }
+					{ ...props }
+					onFocus={ () => setSelected( 'top' ) }
+					placeholder=""
+				/>
+				<UnitControl
+					{ ...unitControlProps.right }
+					{ ...props }
+					onFocus={ () => setSelected( 'right' ) }
+					placeholder=""
+				/>
+				<UnitControl
+					{ ...unitControlProps.bottom }
+					{ ...props }
+					onFocus={ () => setSelected( 'bottom' ) }
+					placeholder=""
+				/>
+				<UnitControl
+					{ ...unitControlProps.left }
+					{ ...props }
+					onFocus={ () => setSelected( 'left' ) }
+					placeholder=""
+				/>
+			</ControlContainer>
+		</ControlContainer>
+	);
+}
+
+function ControlContainer( { children } ) {
+	return (
+		<Flex justify="left" gap={ 1 }>
+			{ children }
+		</Flex>
 	);
 }
 
@@ -286,15 +303,17 @@ function UnitControl( props ) {
 	);
 }
 
-const UnitControlContainer = styled.div`
-	box-sizing: border-box;
-	display: flex;
+const Root = styled.div`
+	max-width: 400px;
+`;
+
+const Header = styled( Flex )`
+	margin-bottom: 8px;
 `;
 
 const UnitControlWrapper = styled.div`
 	box-sizing: border-box;
 	max-width: 80px;
-	padding-right: 4px;
 `;
 
 function parseValues( values = {} ) {
diff --git a/packages/components/src/flex/block.js b/packages/components/src/flex/block.js
new file mode 100644
index 00000000000000..adcded360dbb30
--- /dev/null
+++ b/packages/components/src/flex/block.js
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import { Block } from './styles/flex-styles';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function FlexBlock( { className, ...props }, ref ) {
+	const classes = classnames( 'components-flex__block', className );
+
+	return <Block { ...props } className={ classes } ref={ ref } />;
+}
+
+export default forwardRef( FlexBlock );
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex.js
new file mode 100644
index 00000000000000..3b230d29cd5058
--- /dev/null
+++ b/packages/components/src/flex/flex.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Flex as BaseFlex } from './styles/flex-styles';
+
+function Flex(
+	{
+		align = 'center',
+		className,
+		gap = 2,
+		justify = 'space-between',
+		...props
+	},
+	ref
+) {
+	const classes = classnames( 'components-flex', className );
+
+	return (
+		<BaseFlex
+			{ ...props }
+			align={ align }
+			className={ classes }
+			ref={ ref }
+			gap={ gap }
+			justify={ justify }
+		/>
+	);
+}
+
+export default forwardRef( Flex );
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js
new file mode 100644
index 00000000000000..174da20e5be467
--- /dev/null
+++ b/packages/components/src/flex/index.js
@@ -0,0 +1,10 @@
+export { default as Flex } from './flex';
+export { default as FlexBlock } from './block';
+export { default as FlexItem } from './item';
+
+/**
+ * Internal dependencies
+ */
+import Flex from './flex';
+
+export default Flex;
diff --git a/packages/components/src/flex/item.js b/packages/components/src/flex/item.js
new file mode 100644
index 00000000000000..9112d010c1f0ca
--- /dev/null
+++ b/packages/components/src/flex/item.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Item } from './styles/flex-styles';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function FlexItem( { className, ...props }, ref ) {
+	const classes = classnames( 'components-flex__item', className );
+
+	return <Item { ...props } className={ classes } ref={ ref } />;
+}
+
+export default forwardRef( FlexItem );
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
new file mode 100644
index 00000000000000..a67883dd49482b
--- /dev/null
+++ b/packages/components/src/flex/stories/index.js
@@ -0,0 +1,241 @@
+/**
+ * External dependencies
+ */
+import { boolean, number, select } from '@storybook/addon-knobs';
+import { random } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { arrowLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Flex from '../flex';
+import FlexBlock from '../block';
+import FlexItem from '../item';
+
+import './style.css';
+
+export default { title: 'Components/Flex', component: Flex };
+
+const getStoryProps = () => {
+	const showOutline = boolean( 'Example: Show Outline', true );
+
+	const align = select(
+		'align',
+		{
+			top: 'top',
+			center: 'center',
+			bottom: 'bottom',
+		},
+		'center'
+	);
+
+	const gap = number( 'gap', 1 );
+
+	const justify = select(
+		'justify',
+		{
+			'space-between': 'space-between',
+			left: 'left',
+			center: 'center',
+			right: 'right',
+		},
+		'space-between'
+	);
+
+	return {
+		showOutline,
+		align,
+		gap,
+		justify,
+	};
+};
+
+const Box = ( props ) => {
+	const { height, width, style: styleProps = {} } = props;
+
+	const style = {
+		background: '#ddd',
+		fontSize: 12,
+		...styleProps,
+		height: height || 40,
+		width: width || '100%',
+	};
+
+	return <div { ...props } style={ style } />;
+};
+
+const EnhancedFlex = ( props ) => {
+	const { showOutline, ...restProps } = props;
+	const exampleClassName = showOutline ? 'example-only-show-outline' : '';
+
+	return <Flex { ...restProps } className={ exampleClassName } />;
+};
+
+export const _default = () => {
+	const showBlock = boolean( 'Example: Show Block', true );
+	const differSize = boolean( 'Example: Differ Sizes', true );
+	const props = getStoryProps();
+
+	const baseSize = 40;
+
+	return (
+		<EnhancedFlex { ...props }>
+			<FlexItem>
+				<Box
+					width={ differSize ? 100 : baseSize }
+					height={ differSize ? 100 : baseSize }
+				>
+					Item
+				</Box>
+			</FlexItem>
+			{ showBlock && (
+				<FlexBlock>
+					<Box height={ differSize ? 300 : null }>Block</Box>
+				</FlexBlock>
+			) }
+
+			<FlexItem>
+				<Box width={ 40 }>Item</Box>
+			</FlexItem>
+		</EnhancedFlex>
+	);
+};
+
+const ItemExample = () => {
+	const props = getStoryProps();
+
+	const [ items, setItems ] = useState( [
+		{
+			width: 40,
+			height: 40,
+		},
+	] );
+
+	const addItem = () => {
+		setItems( [
+			...items,
+			{ width: random( 12, 150 ), height: random( 12, 150 ) },
+		] );
+	};
+
+	const removeItem = () => {
+		const nextItems = items.filter( ( item, index ) => {
+			return index !== items.length - 1;
+		} );
+		setItems( nextItems );
+	};
+
+	return (
+		<div>
+			<Flex justify="left" gap="small">
+				<FlexItem>
+					<Button onClick={ addItem } isDefault>
+						Add Item
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button onClick={ removeItem } isDefault>
+						Remove Item
+					</Button>
+				</FlexItem>
+			</Flex>
+			<hr />
+			<EnhancedFlex { ...props }>
+				{ items.map( ( item, index ) => (
+					<FlexItem key={ index }>
+						<Box { ...item } />
+					</FlexItem>
+				) ) }
+			</EnhancedFlex>
+		</div>
+	);
+};
+
+export const flexItem = () => {
+	return <ItemExample />;
+};
+
+const BlockExample = () => {
+	const props = getStoryProps();
+
+	const [ items, setItems ] = useState( [
+		{
+			height: 40,
+		},
+	] );
+
+	const addItem = () => {
+		setItems( [ ...items, { height: random( 20, 150 ) } ] );
+	};
+
+	const removeItem = () => {
+		const nextItems = items.filter( ( item, index ) => {
+			return index !== items.length - 1;
+		} );
+		setItems( nextItems );
+	};
+
+	return (
+		<div>
+			<Flex justify="left" gap="small">
+				<FlexItem>
+					<Button onClick={ addItem } isDefault>
+						Add Block
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button onClick={ removeItem } isDefault>
+						Remove Blcok
+					</Button>
+				</FlexItem>
+			</Flex>
+			<hr />
+			<EnhancedFlex { ...props }>
+				<FlexItem>
+					<Box width={ 40 } height={ 40 } />
+				</FlexItem>
+				{ items.map( ( item, index ) => (
+					<FlexBlock key={ index }>
+						<Box { ...item } />
+					</FlexBlock>
+				) ) }
+				<FlexItem>
+					<Box width={ 40 } height={ 40 } />
+				</FlexItem>
+			</EnhancedFlex>
+		</div>
+	);
+};
+
+export const flexBlock = () => {
+	return <BlockExample />;
+};
+
+export const exampleActions = () => {
+	const props = getStoryProps();
+
+	return (
+		<EnhancedFlex { ...props }>
+			<FlexItem>
+				<Button icon={ arrowLeft } isTertiary />
+			</FlexItem>
+			<FlexItem>
+				<Flex justify="left" gap="small">
+					<FlexItem>
+						<Button isDefault isPrimary>
+							Add
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button isDefault>Remove Item</Button>
+					</FlexItem>
+				</Flex>
+			</FlexItem>
+		</EnhancedFlex>
+	);
+};
diff --git a/packages/components/src/flex/stories/style.css b/packages/components/src/flex/stories/style.css
new file mode 100644
index 00000000000000..06a05379c37354
--- /dev/null
+++ b/packages/components/src/flex/stories/style.css
@@ -0,0 +1,7 @@
+.components-flex.example-only-show-outline {
+	box-shadow: 0 0 0 1px pink;
+}
+
+.components-flex.example-only-show-outline > * {
+	box-shadow: 0 0 0 1px pink;
+}
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
new file mode 100644
index 00000000000000..3c192d8b94d796
--- /dev/null
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+const alignStyle = ( { align } ) => {
+	const aligns = {
+		top: 'flex-start',
+		bottom: 'flex-end',
+	};
+	const value = aligns[ align ] || align;
+
+	return css( {
+		alignItems: value,
+	} );
+};
+
+const justifyStyle = ( { justify } ) => {
+	const justifies = {
+		left: 'flex-start',
+		right: 'flex-end',
+	};
+	const value = justifies[ justify ] || justify;
+
+	return css( {
+		justifyContent: value,
+	} );
+};
+
+const gapStyle = ( { gap } ) => {
+	const base = 4;
+	const value = typeof gap === 'number' ? base * gap : base;
+
+	return css`
+		> * {
+			margin-right: ${value}px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	`;
+};
+
+export const Flex = styled.div`
+	box-sizing: border-box;
+	display: flex;
+
+	${alignStyle};
+	${justifyStyle};
+	${gapStyle};
+`;
+
+export const Item = styled.div`
+	min-width: 0;
+	max-width: 100%;
+`;
+
+export const Block = styled( Item )`
+	flex: 1;
+`;
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 293eff0c10bf11..b6188e94b0113a 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -43,6 +43,9 @@ export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as ExternalLink } from './external-link';
+export { default as __experimentalFlex } from './flex';
+export { default as __experimentalFlexBlock } from './flex/block';
+export { default as __experimentalFlexItem } from './flex/item';
 export { default as FocalPointPicker } from './focal-point-picker';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index c88ea378c28c3c..05a9f176e6f473 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -3,6 +3,12 @@
  */
 import { noop } from 'lodash';
 import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -10,20 +16,23 @@ import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import { CSS_UNITS } from './utils';
 
-export default function UnitControl( {
-	className,
-	isUnitSelectTabbable = true,
-	isResetValueOnUnitChange = true,
-	label,
-	onChange = noop,
-	onUnitChange = noop,
-	size = 'default',
-	style,
-	unit = 'px',
-	units = CSS_UNITS,
-	value,
-	...props
-} ) {
+function UnitControl(
+	{
+		className,
+		isUnitSelectTabbable = true,
+		isResetValueOnUnitChange = true,
+		label,
+		onChange = noop,
+		onUnitChange = noop,
+		size = 'default',
+		style,
+		unit = 'px',
+		units = CSS_UNITS,
+		value,
+		...props
+	},
+	ref
+) {
 	const handleOnUnitChange = ( unitValue, changeProps ) => {
 		const { data } = changeProps;
 		onUnitChange( unitValue, changeProps );
@@ -36,7 +45,7 @@ export default function UnitControl( {
 	const classes = classnames( 'component-unit-control', className );
 
 	return (
-		<Root className={ classes } style={ style }>
+		<Root className={ classes } ref={ ref } style={ style }>
 			<ValueInput
 				aria-label={ label }
 				{ ...props }
@@ -58,4 +67,7 @@ export default function UnitControl( {
 	);
 }
 
-UnitControl.__defaultUnits = CSS_UNITS;
+const ForwardedUnitControl = forwardRef( UnitControl );
+ForwardedUnitControl.__defaultUnits = CSS_UNITS;
+
+export default ForwardedUnitControl;

From 0f3c00d599da9a4c07524da5460bb258ba157fad Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 13:53:15 -0400
Subject: [PATCH 004/103] Add labels for UnitControls

---
 packages/components/src/box-control/index.js  | 87 +++++++++++++------
 .../components/src/flex/styles/flex-styles.js |  4 +-
 2 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 769ab659975cff..9dc614b8daf559 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 import ButtonGroup from '../button-group';
 import Button from '../button';
 import BoxControlIcon from './icon';
+import Tooltip from '../tooltip';
 import BaseUnitControl from '../unit-control';
 import { Flex, FlexBlock, FlexItem } from '../flex';
 
@@ -22,10 +23,20 @@ const types = [ 'all', 'pairs', 'custom' ];
 const defaultInputProps = {
 	min: 0,
 };
-const typeIconSides = {
-	all: [ 'all' ],
-	pairs: [ 'top', 'bottom' ],
-	custom: [ 'top' ],
+
+const typeProps = {
+	all: {
+		sides: [ 'all' ],
+		label: __( 'All sides' ),
+	},
+	pairs: {
+		sides: [ 'top', 'bottom' ],
+		label: __( 'Pair of sides' ),
+	},
+	custom: {
+		sides: [ 'top' ],
+		label: __( 'Individual sides' ),
+	},
 };
 
 const defaultValueProps = {
@@ -48,7 +59,7 @@ const parseType = ( type ) => {
 export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
-	label = 'Box Control',
+	label = __( 'Box Control' ),
 	type: typeProp = 'pairs',
 	values: valuesProp,
 	// Disable units for now
@@ -96,12 +107,13 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 
 	return (
 		<ControlContainer>
-			<FlexItem>
+			<IconWrapper>
 				<BoxControlIcon />
-			</FlexItem>
+			</IconWrapper>
 			<FlexBlock>
 				<UnitControl
 					{ ...props }
+					label={ __( 'All Sides' ) }
 					value={ isMixed ? '' : value }
 					placeholder={ placeholder }
 					unit={ unit }
@@ -148,9 +160,12 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 
 	return (
 		<ControlContainer>
-			<BoxControlIcon sides={ iconSide } />
+			<IconWrapper>
+				<BoxControlIcon sides={ iconSide } />
+			</IconWrapper>
 			<UnitControl
 				{ ...props }
+				label={ __( 'Left/Right' ) }
 				placeholder={ placeholder }
 				onFocus={ () => setSelected( 'vertical' ) }
 				onChange={ ( next ) => {
@@ -170,6 +185,7 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 			/>
 			<UnitControl
 				{ ...props }
+				label={ __( 'Top/Bottom' ) }
 				placeholder={ placeholder }
 				onFocus={ () => setSelected( 'horizontal' ) }
 				onChange={ ( next ) => {
@@ -200,31 +216,35 @@ function BoxCustomControl( { onChange = noop, values, ...props } ) {
 
 	return (
 		<ControlContainer>
-			<FlexItem>
+			<IconWrapper>
 				<BoxControlIcon sides={ [ selected ] } />
-			</FlexItem>
+			</IconWrapper>
 			<ControlContainer>
 				<UnitControl
 					{ ...unitControlProps.top }
 					{ ...props }
+					label={ __( 'Top' ) }
 					onFocus={ () => setSelected( 'top' ) }
 					placeholder=""
 				/>
 				<UnitControl
 					{ ...unitControlProps.right }
 					{ ...props }
+					label={ __( 'Right' ) }
 					onFocus={ () => setSelected( 'right' ) }
 					placeholder=""
 				/>
 				<UnitControl
 					{ ...unitControlProps.bottom }
 					{ ...props }
+					label={ __( 'Bottom' ) }
 					onFocus={ () => setSelected( 'bottom' ) }
 					placeholder=""
 				/>
 				<UnitControl
 					{ ...unitControlProps.left }
 					{ ...props }
+					label={ __( 'Left' ) }
 					onFocus={ () => setSelected( 'left' ) }
 					placeholder=""
 				/>
@@ -280,26 +300,37 @@ function BoxTypeControl( {
 
 	return (
 		<RadioGroup { ...radio } as={ ButtonGroup } aria-label={ label }>
-			{ types.map( ( value ) => (
-				<Radio
-					{ ...radio }
-					as={ Button }
-					isPrimary={ radio.state === value }
-					key={ value }
-					value={ value }
-				>
-					<BoxControlIcon sides={ typeIconSides[ value ] } />
-				</Radio>
-			) ) }
+			{ types.map( ( value ) => {
+				const valueProps = typeProps[ value ];
+				const isSelected = radio.state === value;
+
+				return (
+					<Tooltip key={ value } text={ valueProps.label }>
+						<Radio
+							{ ...radio }
+							as={ Button }
+							isPrimary={ isSelected }
+							value={ value }
+						>
+							<BoxControlIcon sides={ valueProps.sides } />
+						</Radio>
+					</Tooltip>
+				);
+			} ) }
 		</RadioGroup>
 	);
 }
 
-function UnitControl( props ) {
+function UnitControl( { label, ...props } ) {
 	return (
-		<UnitControlWrapper>
-			<BaseUnitControl isResetValueOnUnitChange={ false } { ...props } />
-		</UnitControlWrapper>
+		<Tooltip text={ label }>
+			<UnitControlWrapper aria-label={ label }>
+				<BaseUnitControl
+					isResetValueOnUnitChange={ false }
+					{ ...props }
+				/>
+			</UnitControlWrapper>
+		</Tooltip>
 	);
 }
 
@@ -311,9 +342,13 @@ const Header = styled( Flex )`
 	margin-bottom: 8px;
 `;
 
+const IconWrapper = styled( FlexItem )`
+	padding-right: 8px;
+`;
+
 const UnitControlWrapper = styled.div`
 	box-sizing: border-box;
-	max-width: 80px;
+	max-width: 70px;
 `;
 
 function parseValues( values = {} ) {
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
index 3c192d8b94d796..f923cb505bf69e 100644
--- a/packages/components/src/flex/styles/flex-styles.js
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -34,10 +34,10 @@ const gapStyle = ( { gap } ) => {
 
 	return css`
 		> * {
-			margin-right: ${value}px;
+			padding-right: ${value}px;
 
 			&:last-child {
-				margin-right: 0;
+				padding-right: 0;
 			}
 		}
 	`;

From fb77888b77380984be56b69e7986ebdb5e6b7a23 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 17:11:40 -0400
Subject: [PATCH 005/103] Add react-use-gesture

---
 package-lock.json                | 6 ++++++
 packages/components/package.json | 1 +
 2 files changed, 7 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 73ce417bfa67fb..a07351cd266899 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9954,6 +9954,7 @@
 				"re-resizable": "^6.0.0",
 				"react-dates": "^17.1.1",
 				"react-spring": "^8.0.20",
+				"react-use-gesture": "^7.0.9",
 				"reakit": "^1.0.0-rc.2",
 				"rememo": "^3.0.0",
 				"tinycolor2": "^1.4.1",
@@ -36857,6 +36858,11 @@
 				"react-lifecycles-compat": "^3.0.4"
 			}
 		},
+		"react-use-gesture": {
+			"version": "7.0.9",
+			"resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-7.0.9.tgz",
+			"integrity": "sha512-z2gNEZhMBiyVRF7g+n54oA/1abEd+v6k99KqlzR+emG+I90rFXBG8U0ftk0h0B3MUxXcBWHZJijlrNQhS6iLAw=="
+		},
 		"react-with-direction": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/react-with-direction/-/react-with-direction-1.3.0.tgz",
diff --git a/packages/components/package.json b/packages/components/package.json
index 641933d747b6c5..e0f5ce12190718 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -53,6 +53,7 @@
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
+		"react-use-gesture": "^7.0.9",
 		"reakit": "^1.0.0-rc.2",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",

From 69e4a1ceb024586a695465ad88c4bbd2ffc57a71 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 17:12:56 -0400
Subject: [PATCH 006/103] Add drag support to NumberControl

---
 .../components/src/number-control/index.js    | 80 ++++++++++++++++---
 .../components/src/number-control/utils.js    | 25 ++++++
 .../src/unit-control/stories/index.js         |  8 +-
 3 files changed, 98 insertions(+), 15 deletions(-)
 create mode 100644 packages/components/src/number-control/utils.js

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 33914140975b06..257169b923f43b 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -3,25 +3,70 @@
  */
 import { clamp, noop } from 'lodash';
 import classNames from 'classnames';
+import { useDrag } from 'react-use-gesture';
 
 /**
  * WordPress dependencies
  */
+import { forwardRef, useState } from '@wordpress/element';
 import { UP, DOWN } from '@wordpress/keycodes';
 
-export default function NumberControl( {
-	className,
-	isShiftStepEnabled = true,
-	max = Infinity,
-	min = -Infinity,
-	onChange = noop,
-	onKeyDown = noop,
-	shiftStep = 10,
-	step = 1,
-	...props
-} ) {
+/**
+ * Internal dependencies
+ */
+import { DRAG_CURSOR, useDragCursor, add } from './utils';
+
+export function NumberControl(
+	{
+		className,
+		dragAxis = 'y',
+		dragThreshold = 10,
+		isDragEnabled = true,
+		isShiftStepEnabled = true,
+		max = Infinity,
+		min = -Infinity,
+		onChange = noop,
+		onKeyDown = noop,
+		shiftStep = 10,
+		step = 1,
+		style: styleProp,
+		value: valueProp,
+		...props
+	},
+	ref
+) {
+	const [ isDragging, setIsDragging ] = useState( false );
 	const baseValue = clamp( 0, min, max );
 
+	useDragCursor( isDragging );
+
+	const dragGestureProps = useDrag(
+		( { dragging, delta, event } ) => {
+			if ( ! isDragEnabled ) return;
+			if ( ! dragging ) {
+				setIsDragging( false );
+				return;
+			}
+
+			event.stopPropagation();
+
+			const [ , y ] = delta;
+			const distance = y * -1;
+			const nextValue = clamp( add( valueProp, distance ), min, max );
+
+			onChange( nextValue.toString(), { event } );
+
+			if ( ! isDragging ) {
+				setIsDragging( true );
+			}
+		},
+		{
+			axis: dragAxis,
+			threshold: dragThreshold,
+			enabled: isDragEnabled,
+		}
+	);
+
 	const handleOnKeyDown = ( event ) => {
 		onKeyDown( event );
 		const { value } = event.target;
@@ -65,15 +110,26 @@ export default function NumberControl( {
 	};
 
 	const classes = classNames( 'component-number-control', className );
+	const style = {
+		...styleProp,
+		cursor: isDragging ? DRAG_CURSOR : styleProp?.cursor,
+		userSelect: isDragging ? 'none' : styleProp?.userSelect,
+	};
 
 	return (
 		<input
 			inputMode="numeric"
 			{ ...props }
+			{ ...dragGestureProps() }
 			className={ classes }
-			type="number"
+			ref={ ref }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
+			style={ style }
+			type="number"
+			value={ valueProp }
 		/>
 	);
 }
+
+export default forwardRef( NumberControl );
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
new file mode 100644
index 00000000000000..e8b30b2a0f235c
--- /dev/null
+++ b/packages/components/src/number-control/utils.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+export const DRAG_CURSOR = 'ns-resize';
+
+export function useDragCursor( isDragging ) {
+	useEffect( () => {
+		if ( isDragging ) {
+			document.documentElement.style.cursor = DRAG_CURSOR;
+		} else {
+			document.documentElement.style.cursor = null;
+		}
+	}, [ isDragging ] );
+}
+
+function getValue( value ) {
+	const number = Number( value );
+	return isNaN( number ) ? 0 : number;
+}
+
+export function add( a, b ) {
+	return getValue( a ) + getValue( b );
+}
diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index bf5680c6ae630f..2aab99180fd39c 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -20,13 +20,15 @@ export default {
 };
 
 function Example() {
-	const [ value, setValue ] = useState( '' );
+	const [ value, setValue ] = useState( '10' );
 	const [ unit, setUnit ] = useState( 'px' );
 
 	const props = {
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		isUnitSelectTabbable: boolean( 'isUnitSelectTabbable', true ),
 		shiftStep: number( 'shiftStep', 10 ),
+		max: number( 'max', 100 ),
+		min: number( 'min', 0 ),
 		size: select(
 			'size',
 			{
@@ -43,9 +45,9 @@ function Example() {
 			<UnitControl
 				{ ...props }
 				value={ value }
-				onChange={ setValue }
+				onChange={ ( v ) => setValue( v ) }
 				unit={ unit }
-				onUnitChange={ setUnit }
+				onUnitChange={ ( v ) => setUnit( v ) }
 			/>
 		</ControlWrapperView>
 	);

From b0877d1b4f85b9d2bc94ec205ec0f7d130df0034 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 17:13:07 -0400
Subject: [PATCH 007/103] Improve layout for BoxControl

---
 packages/components/src/box-control/icon.js   |   9 +-
 packages/components/src/box-control/index.js  |  28 +++--
 .../src/box-control/stories/index.js          | 101 ++++++++++++++++--
 3 files changed, 121 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
index 78aa39182242c1..3bfac3ead3d178 100644
--- a/packages/components/src/box-control/icon.js
+++ b/packages/components/src/box-control/icon.js
@@ -8,14 +8,19 @@ import styled from '@emotion/styled';
  */
 import { color } from '../utils/style-mixins';
 
-export default function BoxControlIcon( { sides = [ 'all' ] } ) {
+const BASE_ICON_SIZE = 24;
+
+export default function BoxControlIcon( { size = 24, sides = [ 'all' ] } ) {
 	const top = getSide( sides, 'top' );
 	const right = getSide( sides, 'right' );
 	const bottom = getSide( sides, 'bottom' );
 	const left = getSide( sides, 'left' );
 
+	// Simulates SVG Icon scaling
+	const scale = size / BASE_ICON_SIZE;
+
 	return (
-		<Root>
+		<Root style={ { transform: `scale(${ scale })` } }>
 			<Viewbox>
 				<TopStroke isFocused={ top } />
 				<RightStroke isFocused={ right } />
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 9dc614b8daf559..ca4acd5a3381ee 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -60,7 +60,7 @@ export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
-	type: typeProp = 'pairs',
+	type: typeProp = 'all',
 	values: valuesProp,
 	// Disable units for now
 	units = false,
@@ -105,6 +105,8 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
 	const isMixed = ! allValues.every( ( v ) => v === value );
 
+	const placeholderLabel = typeof value === 'number' ? placeholder : null;
+
 	return (
 		<ControlContainer>
 			<IconWrapper>
@@ -115,7 +117,7 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 					{ ...props }
 					label={ __( 'All Sides' ) }
 					value={ isMixed ? '' : value }
-					placeholder={ placeholder }
+					placeholder={ placeholderLabel }
 					unit={ unit }
 					onChange={ ( next ) => {
 						onChange( {
@@ -151,6 +153,11 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 		( v ) => v === horizontal
 	);
 
+	const verticalPlaceholder =
+		typeof vertical === 'number' ? placeholder : null;
+	const horizontalPlaceholder =
+		typeof horizontal === 'number' ? placeholder : null;
+
 	const iconSides = {
 		vertical: [ 'top', 'bottom' ],
 		horizontal: [ 'left', 'right' ],
@@ -165,8 +172,8 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 			</IconWrapper>
 			<UnitControl
 				{ ...props }
-				label={ __( 'Left/Right' ) }
-				placeholder={ placeholder }
+				label={ __( 'Top/Bottom' ) }
+				placeholder={ verticalPlaceholder }
 				onFocus={ () => setSelected( 'vertical' ) }
 				onChange={ ( next ) => {
 					onChange( {
@@ -185,8 +192,8 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 			/>
 			<UnitControl
 				{ ...props }
-				label={ __( 'Top/Bottom' ) }
-				placeholder={ placeholder }
+				label={ __( 'Left/Right' ) }
+				placeholder={ horizontalPlaceholder }
 				onFocus={ () => setSelected( 'horizontal' ) }
 				onChange={ ( next ) => {
 					onChange( {
@@ -321,12 +328,17 @@ function BoxTypeControl( {
 	);
 }
 
-function UnitControl( { label, ...props } ) {
+function UnitControl( { onChange, label, ...props } ) {
+	const handleOnChange = ( nextValue ) => {
+		const value = parseFloat( nextValue );
+		onChange( isNaN( value ) ? nextValue : value );
+	};
 	return (
 		<Tooltip text={ label }>
 			<UnitControlWrapper aria-label={ label }>
 				<BaseUnitControl
 					isResetValueOnUnitChange={ false }
+					onChange={ handleOnChange }
 					{ ...props }
 				/>
 			</UnitControlWrapper>
@@ -348,7 +360,7 @@ const IconWrapper = styled( FlexItem )`
 
 const UnitControlWrapper = styled.div`
 	box-sizing: border-box;
-	max-width: 70px;
+	max-width: 75px;
 `;
 
 function parseValues( values = {} ) {
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index ef9a00021aeb75..06b711efc90c50 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -2,26 +2,113 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import BoxControl from '../';
 import BoxControlIcon from '../icon';
+import { Flex, FlexBlock } from '../../flex';
 
 export default { title: 'Components/BoxControl', component: BoxControl };
 
 export const _default = () => {
-	return (
-		<Wrapper>
-			<BoxControl />
-		</Wrapper>
-	);
+	return <BoxControl />;
 };
 
 export const icon = () => {
 	return <BoxControlIcon />;
 };
 
-const Wrapper = styled.div`
-	padding: 40px;
+function DemoExample() {
+	const [ values, setValues ] = useState( {
+		top: [ 10 ],
+		right: [ 10 ],
+		bottom: [ 10 ],
+		left: [ 10 ],
+	} );
+	const top = values?.top?.[ 0 ];
+	const right = values?.right?.[ 0 ];
+	const bottom = values?.bottom?.[ 0 ];
+	const left = values?.left?.[ 0 ];
+
+	return (
+		<Container align="top" gap={ 8 }>
+			<FlexBlock>
+				<Content>
+					<BoxControl
+						label="Padding"
+						values={ values }
+						onChange={ setValues }
+					/>
+				</Content>
+			</FlexBlock>
+			<FlexBlock>
+				<Content>
+					<Box>
+						<Padding
+							style={ {
+								top: 0,
+								left: 0,
+								width: '100%',
+								padding: top,
+							} }
+						/>
+						<Padding
+							style={ {
+								top: 0,
+								right: 0,
+								height: '100%',
+								padding: right,
+							} }
+						/>
+						<Padding
+							style={ {
+								bottom: 0,
+								left: 0,
+								width: '100%',
+								padding: bottom,
+							} }
+						/>
+						<Padding
+							style={ {
+								top: 0,
+								left: 0,
+								height: '100%',
+								padding: left,
+							} }
+						/>
+					</Box>
+				</Content>
+			</FlexBlock>
+		</Container>
+	);
+}
+
+export const demo = () => {
+	return <DemoExample />;
+};
+
+const Container = styled( Flex )`
+	max-width: 780px;
+`;
+
+const Box = styled.div`
+	width: 300px;
+	height: 300px;
+	position: relative;
+`;
+
+const Padding = styled.div`
+	position: absolute;
+	background: blue;
+	opacity: 0.2;
+`;
+
+const Content = styled.div`
+	padding: 20px;
 `;

From 4f05a2473e8b6fd86c0c1da85780c0a8fbcc93e1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 17:19:15 -0400
Subject: [PATCH 008/103] Update snapshot tests

---
 packages/components/src/flex/stories/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
index a67883dd49482b..1408270a11c855 100644
--- a/packages/components/src/flex/stories/index.js
+++ b/packages/components/src/flex/stories/index.js
@@ -134,12 +134,12 @@ const ItemExample = () => {
 		<div>
 			<Flex justify="left" gap="small">
 				<FlexItem>
-					<Button onClick={ addItem } isDefault>
+					<Button onClick={ addItem } isSecondary>
 						Add Item
 					</Button>
 				</FlexItem>
 				<FlexItem>
-					<Button onClick={ removeItem } isDefault>
+					<Button onClick={ removeItem } isSecondary>
 						Remove Item
 					</Button>
 				</FlexItem>
@@ -184,12 +184,12 @@ const BlockExample = () => {
 		<div>
 			<Flex justify="left" gap="small">
 				<FlexItem>
-					<Button onClick={ addItem } isDefault>
+					<Button onClick={ addItem } isSecondary>
 						Add Block
 					</Button>
 				</FlexItem>
 				<FlexItem>
-					<Button onClick={ removeItem } isDefault>
+					<Button onClick={ removeItem } isSecondary>
 						Remove Blcok
 					</Button>
 				</FlexItem>
@@ -227,12 +227,12 @@ export const exampleActions = () => {
 			<FlexItem>
 				<Flex justify="left" gap="small">
 					<FlexItem>
-						<Button isDefault isPrimary>
+						<Button isSecondary isPrimary>
 							Add
 						</Button>
 					</FlexItem>
 					<FlexItem>
-						<Button isDefault>Remove Item</Button>
+						<Button isSecondary>Remove Item</Button>
 					</FlexItem>
 				</Flex>
 			</FlexItem>

From 65736fc5dab0bcd676f76d2a9622689895334c45 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 3 Apr 2020 17:38:37 -0400
Subject: [PATCH 009/103] Add shiftStep in drag feature in NumberControl

---
 packages/components/src/number-control/index.js       | 11 +++++++----
 .../components/src/number-control/stories/index.js    |  8 +++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 257169b923f43b..6cc57777fb7daa 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -41,7 +41,7 @@ export function NumberControl(
 	useDragCursor( isDragging );
 
 	const dragGestureProps = useDrag(
-		( { dragging, delta, event } ) => {
+		( { dragging, delta, event, shiftKey } ) => {
 			if ( ! isDragEnabled ) return;
 			if ( ! dragging ) {
 				setIsDragging( false );
@@ -51,10 +51,13 @@ export function NumberControl(
 			event.stopPropagation();
 
 			const [ , y ] = delta;
-			const distance = y * -1;
-			const nextValue = clamp( add( valueProp, distance ), min, max );
+			const modifier = shiftKey ? shiftStep : 1;
+			const distance = y * modifier * -1;
 
-			onChange( nextValue.toString(), { event } );
+			if ( distance !== 0 ) {
+				const nextValue = clamp( add( valueProp, distance ), min, max );
+				onChange( nextValue.toString(), { event } );
+			}
 
 			if ( ! isDragging ) {
 				setIsDragging( true );
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
index b35af6a74eb11f..859afe27fc867c 100644
--- a/packages/components/src/number-control/stories/index.js
+++ b/packages/components/src/number-control/stories/index.js
@@ -27,7 +27,13 @@ function Example() {
 		step: number( 'step', 1 ),
 	};
 
-	return <NumberControl { ...props } value={ value } onChange={ setValue } />;
+	return (
+		<NumberControl
+			{ ...props }
+			value={ value }
+			onChange={ ( v ) => setValue( v ) }
+		/>
+	);
 }
 
 export const _default = () => {

From 779ae5bf149fc71676ff70f50bcf8fa37834df95 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Apr 2020 13:12:50 -0400
Subject: [PATCH 010/103] Adjust Box control UI

---
 packages/components/src/box-control/icon.js   |   6 +-
 packages/components/src/box-control/index.js  | 280 ++++++++++++------
 .../components/src/flex/styles/flex-styles.js |   1 +
 .../styles/unit-control-styles.js             |   1 -
 4 files changed, 184 insertions(+), 104 deletions(-)

diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
index 3bfac3ead3d178..b3baed2810e039 100644
--- a/packages/components/src/box-control/icon.js
+++ b/packages/components/src/box-control/icon.js
@@ -3,10 +3,6 @@
  */
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-/**
- * Internal dependencies
- */
-import { color } from '../utils/style-mixins';
 
 const BASE_ICON_SIZE = 24;
 
@@ -59,7 +55,7 @@ const Viewbox = styled.span`
 
 const strokeFocus = ( { isFocused } ) => {
 	return css( {
-		backgroundColor: color( 'ui.border' ),
+		backgroundColor: 'currentColor',
 		opacity: isFocused ? 1 : 0.3,
 	} );
 };
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index ca4acd5a3381ee..d59410dad03cf5 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -2,18 +2,19 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
+// import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
 import styled from '@emotion/styled';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
+import { Icon, chevronDown } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ButtonGroup from '../button-group';
-import Button from '../button';
+// import BaseButtonGroup from '../button-group';
+import DropdownMenu from '../dropdown-menu';
 import BoxControlIcon from './icon';
 import Tooltip from '../tooltip';
 import BaseUnitControl from '../unit-control';
@@ -67,6 +68,7 @@ export default function BoxControl( {
 } ) {
 	const [ type, setType ] = useState( parseType( typeProp ) );
 	const [ values, setValues ] = useState( parseValues( valuesProp ) );
+	const [ icon, setIcon ] = useState( parseType( typeProp ) );
 	const ControlComponent = BoxControlComponent[ type ];
 
 	const updateValues = ( nextValues ) => {
@@ -81,21 +83,28 @@ export default function BoxControl( {
 		<Root>
 			<Header>
 				<FlexItem>{ label }</FlexItem>
+			</Header>
+			<Flex gap={ 1 }>
 				<FlexItem>
-					<BoxTypeControl
+					<BoxTypeDropdown
+						icon={ icon }
 						label={ label }
 						onChange={ setType }
+						onSelect={ setIcon }
 						type={ type }
 					/>
 				</FlexItem>
-			</Header>
-			<ControlComponent
-				{ ...inputProps }
-				placeholder={ mixedLabel }
-				values={ values }
-				onChange={ updateValues }
-				units={ units }
-			/>
+				<FlexBlock>
+					<ControlComponent
+						{ ...inputProps }
+						placeholder={ mixedLabel }
+						values={ values }
+						onSelect={ setIcon }
+						onChange={ updateValues }
+						units={ units }
+					/>
+				</FlexBlock>
+			</Flex>
 		</Root>
 	);
 }
@@ -109,9 +118,6 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 
 	return (
 		<ControlContainer>
-			<IconWrapper>
-				<BoxControlIcon />
-			</IconWrapper>
 			<FlexBlock>
 				<UnitControl
 					{ ...props }
@@ -141,8 +147,13 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 	);
 }
 
-function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
-	const [ selected, setSelected ] = useState( 'vertical' );
+function BoxPairsControl( {
+	placeholder,
+	onChange = noop,
+	onSelect = noop,
+	values,
+	...props
+} ) {
 	const [ vertical, verticalUnit ] = values.top;
 	const [ horizontal, horizontalUnit ] = values.left;
 
@@ -158,23 +169,22 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 	const horizontalPlaceholder =
 		typeof horizontal === 'number' ? placeholder : null;
 
-	const iconSides = {
-		vertical: [ 'top', 'bottom' ],
-		horizontal: [ 'left', 'right' ],
+	const labels = {
+		vertical: __( 'Top/Bottom' ),
+		horizontal: __( 'Left/Right' ),
 	};
 
-	const iconSide = iconSides[ selected ];
+	const handleOnSelect = ( next ) => {
+		onSelect( next );
+	};
 
 	return (
 		<ControlContainer>
-			<IconWrapper>
-				<BoxControlIcon sides={ iconSide } />
-			</IconWrapper>
 			<UnitControl
 				{ ...props }
-				label={ __( 'Top/Bottom' ) }
+				label={ labels.vertical }
 				placeholder={ verticalPlaceholder }
-				onFocus={ () => setSelected( 'vertical' ) }
+				onFocus={ () => handleOnSelect( 'vertical' ) }
 				onChange={ ( next ) => {
 					onChange( {
 						top: [ next, verticalUnit ],
@@ -192,9 +202,9 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 			/>
 			<UnitControl
 				{ ...props }
-				label={ __( 'Left/Right' ) }
+				label={ labels.horizontal }
 				placeholder={ horizontalPlaceholder }
-				onFocus={ () => setSelected( 'horizontal' ) }
+				onFocus={ () => handleOnSelect( 'horizontal' ) }
 				onChange={ ( next ) => {
 					onChange( {
 						left: [ next, horizontalUnit ],
@@ -214,55 +224,65 @@ function BoxPairsControl( { placeholder, onChange = noop, values, ...props } ) {
 	);
 }
 
-function BoxCustomControl( { onChange = noop, values, ...props } ) {
-	const [ selected, setSelected ] = useState( 'top' );
+function BoxCustomControl( {
+	onSelect = noop,
+	onChange = noop,
+	values,
+	...props
+} ) {
 	const unitControlProps = useCustomUnitControlProps( {
 		values,
 		onChange,
 	} );
 
+	const labels = {
+		top: __( 'Top' ),
+		right: __( 'Right' ),
+		bottom: __( 'Bottom' ),
+		left: __( 'Left' ),
+	};
+
+	const handleOnSelect = ( next ) => {
+		onSelect( next );
+	};
+
 	return (
 		<ControlContainer>
-			<IconWrapper>
-				<BoxControlIcon sides={ [ selected ] } />
-			</IconWrapper>
-			<ControlContainer>
-				<UnitControl
-					{ ...unitControlProps.top }
-					{ ...props }
-					label={ __( 'Top' ) }
-					onFocus={ () => setSelected( 'top' ) }
-					placeholder=""
-				/>
-				<UnitControl
-					{ ...unitControlProps.right }
-					{ ...props }
-					label={ __( 'Right' ) }
-					onFocus={ () => setSelected( 'right' ) }
-					placeholder=""
-				/>
-				<UnitControl
-					{ ...unitControlProps.bottom }
-					{ ...props }
-					label={ __( 'Bottom' ) }
-					onFocus={ () => setSelected( 'bottom' ) }
-					placeholder=""
-				/>
-				<UnitControl
-					{ ...unitControlProps.left }
-					{ ...props }
-					label={ __( 'Left' ) }
-					onFocus={ () => setSelected( 'left' ) }
-					placeholder=""
-				/>
-			</ControlContainer>
+			<UnitControl
+				{ ...unitControlProps.top }
+				{ ...props }
+				label={ labels.top }
+				onFocus={ () => handleOnSelect( 'top' ) }
+				placeholder=""
+			/>
+			<UnitControl
+				{ ...unitControlProps.right }
+				{ ...props }
+				label={ labels.right }
+				onFocus={ () => handleOnSelect( 'right' ) }
+				placeholder=""
+			/>
+			<UnitControl
+				{ ...unitControlProps.bottom }
+				{ ...props }
+				label={ labels.bottom }
+				onFocus={ () => handleOnSelect( 'bottom' ) }
+				placeholder=""
+			/>
+			<UnitControl
+				{ ...unitControlProps.left }
+				{ ...props }
+				label={ labels.left }
+				onFocus={ () => handleOnSelect( 'left' ) }
+				placeholder=""
+			/>
 		</ControlContainer>
 	);
 }
 
 function ControlContainer( { children } ) {
 	return (
-		<Flex justify="left" gap={ 1 }>
+		<Flex justify="left" gap={ 0.5 }>
 			{ children }
 		</Flex>
 	);
@@ -294,40 +314,99 @@ function useCustomUnitControlProps( { values, onChange = noop } ) {
 	return props;
 }
 
-function BoxTypeControl( {
-	label = 'Box Control',
-	onChange = noop,
-	type = 'all',
-} ) {
-	const radio = useRadioState( { state: type } );
+function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon } ) {
+	const icons = {
+		all: <BoxControlIcon sides={ typeProps.all.sides } />,
+		pairs: <BoxControlIcon sides={ typeProps.pairs.sides } />,
+		custom: <BoxControlIcon sides={ typeProps.custom.sides } />,
+		vertical: <BoxControlIcon sides={ [ 'top', 'bottom' ] } />,
+		horizontal: <BoxControlIcon sides={ [ 'left', 'right' ] } />,
+		top: <BoxControlIcon sides={ [ 'top' ] } />,
+		right: <BoxControlIcon sides={ [ 'right' ] } />,
+		bottom: <BoxControlIcon sides={ [ 'bottom' ] } />,
+		left: <BoxControlIcon sides={ [ 'left' ] } />,
+	};
+
+	const handleOnChange = ( next ) => {
+		onChange( next );
+		onSelect( next );
+	};
 
-	useEffect( () => {
-		onChange( radio.state );
-	}, [ radio.state ] );
+	const options = [
+		{
+			title: typeProps.all.label,
+			value: 'all',
+			icon: icons.all,
+			onClick: () => handleOnChange( 'all' ),
+		},
+		{
+			title: typeProps.pairs.label,
+			value: 'pairs',
+			icon: icons.pairs,
+			onClick: () => handleOnChange( 'pairs' ),
+		},
+		{
+			title: typeProps.custom.label,
+			value: 'custom',
+			icon: icons.custom,
+			onClick: () => handleOnChange( 'custom' ),
+		},
+	];
+
+	const dropdownIcon = (
+		<DropdownButton gap={ 0 }>
+			{ icons[ icon ] }
+			<Icon icon={ chevronDown } size={ 16 } />
+		</DropdownButton>
+	);
+
+	const toggleProps = {
+		children: dropdownIcon,
+	};
 
 	return (
-		<RadioGroup { ...radio } as={ ButtonGroup } aria-label={ label }>
-			{ types.map( ( value ) => {
-				const valueProps = typeProps[ value ];
-				const isSelected = radio.state === value;
-
-				return (
-					<Tooltip key={ value } text={ valueProps.label }>
-						<Radio
-							{ ...radio }
-							as={ Button }
-							isPrimary={ isSelected }
-							value={ value }
-						>
-							<BoxControlIcon sides={ valueProps.sides } />
-						</Radio>
-					</Tooltip>
-				);
-			} ) }
-		</RadioGroup>
+		<DropdownMenu
+			icon={ null }
+			toggleProps={ toggleProps }
+			controls={ options }
+		/>
 	);
 }
 
+// function BoxTypeControl( {
+// 	label = 'Box Control',
+// 	onChange = noop,
+// 	type = 'all',
+// } ) {
+// 	const radio = useRadioState( { state: type } );
+
+// 	useEffect( () => {
+// 		onChange( radio.state );
+// 	}, [ radio.state ] );
+
+// 	return (
+// 		<RadioGroup { ...radio } as={ ButtonGroup } aria-label={ label }>
+// 			{ types.map( ( value ) => {
+// 				const valueProps = typeProps[ value ];
+// 				const isSelected = radio.state === value;
+
+// 				return (
+// 					<Tooltip key={ value } text={ valueProps.label }>
+// 						<Radio
+// 							{ ...radio }
+// 							as={ Button }
+// 							isPrimary={ isSelected }
+// 							value={ value }
+// 						>
+// 							<BoxControlIcon sides={ valueProps.sides } />
+// 						</Radio>
+// 					</Tooltip>
+// 				);
+// 			} ) }
+// 		</RadioGroup>
+// 	);
+// }
+
 function UnitControl( { onChange, label, ...props } ) {
 	const handleOnChange = ( nextValue ) => {
 		const value = parseFloat( nextValue );
@@ -347,22 +426,27 @@ function UnitControl( { onChange, label, ...props } ) {
 }
 
 const Root = styled.div`
-	max-width: 400px;
+	max-width: 280px;
 `;
 
 const Header = styled( Flex )`
 	margin-bottom: 8px;
 `;
 
-const IconWrapper = styled( FlexItem )`
-	padding-right: 8px;
-`;
-
 const UnitControlWrapper = styled.div`
 	box-sizing: border-box;
 	max-width: 75px;
 `;
 
+// const ButtonGroup = styled( BaseButtonGroup )`
+// 	display: flex;
+// 	margin: 0;
+// `;
+
+const DropdownButton = styled( Flex )`
+	margin: 0 -8px;
+`;
+
 function parseValues( values = {} ) {
 	const nextValueProps = {};
 
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
index f923cb505bf69e..3e53a5e06f0daf 100644
--- a/packages/components/src/flex/styles/flex-styles.js
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -53,6 +53,7 @@ export const Flex = styled.div`
 `;
 
 export const Item = styled.div`
+	box-sizing: border-box;
 	min-width: 0;
 	max-width: 100%;
 `;
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index eb17bdf1d87fb8..9d3f5c29191bf5 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -111,7 +111,6 @@ const baseUnitLabelStyles = ( props ) => {
 		text-align-last: center;
 		text-transform: uppercase;
 		width: 22px;
-		z-index: 1;
 
 		${rtl( { right: 4 } )()}
 		${unitSizeStyles( props )}

From d37a6f5072a8260c0048e431d1274bed327cb2f6 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Apr 2020 14:15:23 -0400
Subject: [PATCH 011/103] Initial integration with Cover

---
 packages/block-library/src/cover/block.json   |   3 +
 packages/block-library/src/cover/edit.js      |   2 +
 packages/components/src/box-control/index.js  | 113 +++++++++++-------
 packages/components/src/flex/flex.js          |   2 +
 .../components/src/flex/styles/flex-styles.js |  25 +++-
 packages/components/src/index.js              |   1 +
 .../components/src/number-control/utils.js    |   2 +
 7 files changed, 103 insertions(+), 45 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 630bb1aeed8430..46d8e0fefddd56 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -43,6 +43,9 @@
 		},
 		"contentPosition": {
 			"type": "string"
+		},
+		"padding": {
+			"type": "object"
 		}
 	}
 }
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 70c0d1b350dccc..1fcf366fbbf48e 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -19,6 +19,7 @@ import {
 	ResizableBox,
 	ToggleControl,
 	withNotices,
+	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
 import {
@@ -376,6 +377,7 @@ function CoverEdit( {
 									} );
 								} }
 							/>
+							<BoxControl label="Padding" />
 						</PanelBody>
 						<PanelColorGradientSettings
 							title={ __( 'Overlay' ) }
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index d59410dad03cf5..8873639f7dbcd3 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -84,7 +84,7 @@ export default function BoxControl( {
 			<Header>
 				<FlexItem>{ label }</FlexItem>
 			</Header>
-			<Flex gap={ 1 }>
+			<Flex align="top" gap={ 1 }>
 				<FlexItem>
 					<BoxTypeDropdown
 						icon={ icon }
@@ -109,7 +109,13 @@ export default function BoxControl( {
 	);
 }
 
-function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
+function BoxAllControl( {
+	placeholder,
+	onSelect = noop,
+	onChange = noop,
+	values,
+	...props
+} ) {
 	const [ value, unit ] = values.top;
 	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
 	const isMixed = ! allValues.every( ( v ) => v === value );
@@ -126,6 +132,7 @@ function BoxAllControl( { placeholder, onChange = noop, values, ...props } ) {
 					placeholder={ placeholderLabel }
 					unit={ unit }
 					onChange={ ( next ) => {
+						onSelect( 'all' );
 						onChange( {
 							top: [ next, unit ],
 							right: [ next, unit ],
@@ -247,42 +254,54 @@ function BoxCustomControl( {
 	};
 
 	return (
-		<ControlContainer>
-			<UnitControl
-				{ ...unitControlProps.top }
-				{ ...props }
-				label={ labels.top }
-				onFocus={ () => handleOnSelect( 'top' ) }
-				placeholder=""
-			/>
-			<UnitControl
-				{ ...unitControlProps.right }
-				{ ...props }
-				label={ labels.right }
-				onFocus={ () => handleOnSelect( 'right' ) }
-				placeholder=""
-			/>
-			<UnitControl
-				{ ...unitControlProps.bottom }
-				{ ...props }
-				label={ labels.bottom }
-				onFocus={ () => handleOnSelect( 'bottom' ) }
-				placeholder=""
-			/>
-			<UnitControl
-				{ ...unitControlProps.left }
-				{ ...props }
-				label={ labels.left }
-				onFocus={ () => handleOnSelect( 'left' ) }
-				placeholder=""
-			/>
-		</ControlContainer>
+		<div>
+			<ControlContainer style={ { marginBottom: 2 } }>
+				<FlexItem>
+					<UnitControl
+						{ ...unitControlProps.top }
+						{ ...props }
+						label={ labels.top }
+						onFocus={ () => handleOnSelect( 'top' ) }
+						placeholder=""
+					/>
+				</FlexItem>
+				<FlexItem>
+					<UnitControl
+						{ ...unitControlProps.right }
+						{ ...props }
+						label={ labels.right }
+						onFocus={ () => handleOnSelect( 'right' ) }
+						placeholder=""
+					/>
+				</FlexItem>
+			</ControlContainer>
+			<ControlContainer isReversed>
+				<FlexItem>
+					<UnitControl
+						{ ...unitControlProps.bottom }
+						{ ...props }
+						label={ labels.bottom }
+						onFocus={ () => handleOnSelect( 'bottom' ) }
+						placeholder=""
+					/>
+				</FlexItem>
+				<FlexItem>
+					<UnitControl
+						{ ...unitControlProps.left }
+						{ ...props }
+						label={ labels.left }
+						onFocus={ () => handleOnSelect( 'left' ) }
+						placeholder=""
+					/>
+				</FlexItem>
+			</ControlContainer>
+		</div>
 	);
 }
 
-function ControlContainer( { children } ) {
+function ControlContainer( { children, ...props } ) {
 	return (
-		<Flex justify="left" gap={ 0.5 }>
+		<Flex align="top" justify="left" gap={ 0.5 } { ...props }>
 			{ children }
 		</Flex>
 	);
@@ -314,7 +333,7 @@ function useCustomUnitControlProps( { values, onChange = noop } ) {
 	return props;
 }
 
-function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon } ) {
+function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon, type } ) {
 	const icons = {
 		all: <BoxControlIcon sides={ typeProps.all.sides } />,
 		pairs: <BoxControlIcon sides={ typeProps.pairs.sides } />,
@@ -336,20 +355,23 @@ function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon } ) {
 		{
 			title: typeProps.all.label,
 			value: 'all',
-			icon: icons.all,
+			icon: <DropdownIconWrapper>{ icons.all }</DropdownIconWrapper>,
 			onClick: () => handleOnChange( 'all' ),
+			isActive: type === 'all',
 		},
 		{
 			title: typeProps.pairs.label,
 			value: 'pairs',
-			icon: icons.pairs,
+			icon: <DropdownIconWrapper>{ icons.pairs }</DropdownIconWrapper>,
 			onClick: () => handleOnChange( 'pairs' ),
+			isActive: type === 'pairs',
 		},
 		{
 			title: typeProps.custom.label,
 			value: 'custom',
-			icon: icons.custom,
+			icon: <DropdownIconWrapper>{ icons.custom }</DropdownIconWrapper>,
 			onClick: () => handleOnChange( 'custom' ),
+			isActive: type === 'custom',
 		},
 	];
 
@@ -362,13 +384,19 @@ function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon } ) {
 
 	const toggleProps = {
 		children: dropdownIcon,
+		isSmall: true,
+		style: {
+			height: 30,
+			lineHeight: 28,
+		},
 	};
 
 	return (
 		<DropdownMenu
+			controls={ options }
 			icon={ null }
+			popoverProps={ { position: 'bottom' } }
 			toggleProps={ toggleProps }
-			controls={ options }
 		/>
 	);
 }
@@ -412,6 +440,7 @@ function UnitControl( { onChange, label, ...props } ) {
 		const value = parseFloat( nextValue );
 		onChange( isNaN( value ) ? nextValue : value );
 	};
+
 	return (
 		<Tooltip text={ label }>
 			<UnitControlWrapper aria-label={ label }>
@@ -444,7 +473,11 @@ const UnitControlWrapper = styled.div`
 // `;
 
 const DropdownButton = styled( Flex )`
-	margin: 0 -8px;
+	margin: 0 -4px;
+`;
+
+const DropdownIconWrapper = styled.div`
+	margin-right: 8px;
 `;
 
 function parseValues( values = {} ) {
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex.js
index 3b230d29cd5058..a601b207be81c0 100644
--- a/packages/components/src/flex/flex.js
+++ b/packages/components/src/flex/flex.js
@@ -19,6 +19,7 @@ function Flex(
 		className,
 		gap = 2,
 		justify = 'space-between',
+		isReversed = false,
 		...props
 	},
 	ref
@@ -33,6 +34,7 @@ function Flex(
 			ref={ ref }
 			gap={ gap }
 			justify={ justify }
+			isReversed={ isReversed }
 		/>
 	);
 }
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
index 3e53a5e06f0daf..50bfbfd087b58d 100644
--- a/packages/components/src/flex/styles/flex-styles.js
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -16,33 +16,47 @@ const alignStyle = ( { align } ) => {
 	} );
 };
 
-const justifyStyle = ( { justify } ) => {
+const justifyStyle = ( { justify, isReversed } ) => {
 	const justifies = {
 		left: 'flex-start',
 		right: 'flex-end',
 	};
-	const value = justifies[ justify ] || justify;
+	let value = justifies[ justify ] || justify;
+
+	if ( isReversed && justifies[ justify ] ) {
+		value = justify === 'left' ? justifies.right : justifies.left;
+	}
 
 	return css( {
 		justifyContent: value,
 	} );
 };
 
-const gapStyle = ( { gap } ) => {
+const gapStyle = ( { gap, isReversed } ) => {
 	const base = 4;
 	const value = typeof gap === 'number' ? base * gap : base;
+	const dir = isReversed ? 'left' : 'right';
+	const padding = `padding-${ dir }`;
 
 	return css`
 		> * {
-			padding-right: ${value}px;
+			${padding}: ${value}px;
 
 			&:last-child {
-				padding-right: 0;
+				${padding}: 0;
 			}
 		}
 	`;
 };
 
+const reversedStyles = ( { isReversed } ) => {
+	if ( ! isReversed ) return '';
+
+	return css`
+		flex-direction: row-reverse;
+	`;
+};
+
 export const Flex = styled.div`
 	box-sizing: border-box;
 	display: flex;
@@ -50,6 +64,7 @@ export const Flex = styled.div`
 	${alignStyle};
 	${justifyStyle};
 	${gapStyle};
+	${reversedStyles};
 `;
 
 export const Item = styled.div`
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index b6188e94b0113a..4410c5e4b2256f 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -16,6 +16,7 @@ export { default as Animate } from './animate';
 export { default as AnglePickerControl } from './angle-picker-control';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
+export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export { default as Card } from './card';
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index e8b30b2a0f235c..0159091791f23d 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -9,8 +9,10 @@ export function useDragCursor( isDragging ) {
 	useEffect( () => {
 		if ( isDragging ) {
 			document.documentElement.style.cursor = DRAG_CURSOR;
+			document.documentElement.style.pointerEvents = 'none';
 		} else {
 			document.documentElement.style.cursor = null;
+			document.documentElement.style.pointerEvents = null;
 		}
 	}, [ isDragging ] );
 }

From 8ef3f80f13ccc12a928974aabc97b98dd855e5ac Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Apr 2020 16:45:08 -0400
Subject: [PATCH 012/103] Integrate PaddingControl with Cover using hooks

---
 packages/block-editor/src/hooks/padding.js    |  61 ++++++++
 packages/block-editor/src/hooks/style.js      |  14 ++
 packages/block-library/src/cover/edit.js      | 114 +++++++-------
 packages/block-library/src/cover/index.js     |   1 +
 packages/block-library/src/cover/style.scss   |  10 ++
 packages/components/src/box-control/index.js  | 118 +++++++-------
 .../src/box-control/stories/index.js          |  54 ++-----
 packages/components/src/box-control/utils.js  |  83 ++++++++++
 .../components/src/box-control/visualizer.js  | 148 ++++++++++++++++++
 .../components/src/utils/colors-values.js     |   1 +
 10 files changed, 440 insertions(+), 164 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/padding.js
 create mode 100644 packages/components/src/box-control/utils.js
 create mode 100644 packages/components/src/box-control/visualizer.js

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
new file mode 100644
index 00000000000000..a59f55644dd49d
--- /dev/null
+++ b/packages/block-editor/src/hooks/padding.js
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+
+export const PADDING_SUPPORT_KEY = '__experimentalPadding';
+
+/**
+ * Inspector control panel containing the line height related configuration
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Line height edit element.
+ */
+export function PaddingEdit( props ) {
+	const {
+		name: blockName,
+		attributes: { padding, style },
+		setAttributes,
+	} = props;
+
+	if ( ! hasBlockSupport( blockName, PADDING_SUPPORT_KEY ) ) {
+		return null;
+	}
+
+	const onChange = ( next ) => {
+		const { top, right, bottom, left } = next;
+
+		const newStyle = {
+			...style,
+			paddingTop: `${ top[ 0 ] }${ top[ 1 ] }`,
+			paddingRight: `${ right[ 0 ] }${ right[ 1 ] }`,
+			paddingBottom: `${ bottom[ 0 ] }${ bottom[ 1 ] }`,
+			paddingLeft: `${ left[ 0 ] }${ left[ 1 ] }`,
+		};
+
+		setAttributes( {
+			padding: next,
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	return Platform.select( {
+		web: (
+			<BoxControl
+				values={ padding }
+				onChange={ onChange }
+				label={ __( 'Padding' ) }
+			/>
+		),
+		native: null,
+	} );
+}
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index f23a5c2612e2bc..a86180cb195d4e 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -20,11 +20,13 @@ import InspectorControls from '../components/inspector-controls';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
 import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
+import { PADDING_SUPPORT_KEY, PaddingEdit } from './padding';
 
 const styleSupportKeys = [
 	COLOR_SUPPORT_KEY,
 	LINE_HEIGHT_SUPPORT_KEY,
 	FONT_SIZE_SUPPORT_KEY,
+	PADDING_SUPPORT_KEY,
 ];
 
 const typographySupportKeys = [
@@ -144,6 +146,11 @@ export const withBlockControls = createHigherOrderComponent(
 			hasBlockSupport( blockName, key )
 		);
 
+		const hasPaddingSupport = hasBlockSupport(
+			blockName,
+			PADDING_SUPPORT_KEY
+		);
+
 		return [
 			Platform.OS === 'web' && hasTypographySupport && (
 				<InspectorControls key="typography">
@@ -155,6 +162,13 @@ export const withBlockControls = createHigherOrderComponent(
 			),
 			<ColorEdit key="colors" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
+			hasPaddingSupport && (
+				<InspectorControls key="spacing">
+					<PanelBody title={ __( 'Spacing' ) }>
+						<PaddingEdit { ...props } />
+					</PanelBody>
+				</InspectorControls>
+			),
 		];
 	},
 	'withToolbarControls'
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 1fcf366fbbf48e..9366e39625e14c 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -70,6 +70,8 @@ const INNER_BLOCKS_TEMPLATE = [
 	],
 ];
 
+const { __Visualizer: BoxControlVisualizer } = BoxControl;
+
 function retrieveFastAverageColor() {
 	if ( ! retrieveFastAverageColor.fastAverageColor ) {
 		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
@@ -245,6 +247,7 @@ function CoverEdit( {
 		hasParallax,
 		minHeight,
 		minHeightUnit,
+		padding,
 		url,
 	} = attributes;
 	const {
@@ -377,7 +380,6 @@ function CoverEdit( {
 									} );
 								} }
 							/>
-							<BoxControl label="Padding" />
 						</PanelBody>
 						<PanelColorGradientSettings
 							title={ __( 'Overlay' ) }
@@ -472,62 +474,64 @@ function CoverEdit( {
 	return (
 		<>
 			{ controls }
-			<ResizableCover
-				className={ classnames(
-					'block-library-cover__resize-container',
-					{
-						'is-selected': isSelected,
-					}
-				) }
-				onResizeStart={ () => {
-					setAttributes( { minHeightUnit: 'px' } );
-					toggleSelection( false );
-				} }
-				onResize={ setTemporaryMinHeight }
-				onResizeStop={ ( newMinHeight ) => {
-					toggleSelection( true );
-					setAttributes( { minHeight: newMinHeight } );
-					setTemporaryMinHeight( null );
-				} }
-			>
-				<div data-url={ url } style={ style } className={ classes }>
-					{ IMAGE_BACKGROUND_TYPE === backgroundType && (
-						// Used only to programmatically check if the image is dark or not
-						<img
-							ref={ isDarkElement }
-							aria-hidden
-							alt=""
-							style={ {
-								display: 'none',
-							} }
-							src={ url }
-						/>
+			<BoxControlVisualizer values={ padding }>
+				<ResizableCover
+					className={ classnames(
+						'block-library-cover__resize-container',
+						{
+							'is-selected': isSelected,
+						}
 					) }
-					{ url && gradientValue && dimRatio !== 0 && (
-						<span
-							aria-hidden="true"
-							className={ classnames(
-								'wp-block-cover__gradient-background',
-								gradientClass
-							) }
-							style={ { background: gradientValue } }
-						/>
-					) }
-					{ VIDEO_BACKGROUND_TYPE === backgroundType && (
-						<video
-							ref={ isDarkElement }
-							className="wp-block-cover__video-background"
-							autoPlay
-							muted
-							loop
-							src={ url }
-						/>
-					) }
-					<div className="wp-block-cover__inner-container">
-						<InnerBlocks template={ INNER_BLOCKS_TEMPLATE } />
+					onResizeStart={ () => {
+						setAttributes( { minHeightUnit: 'px' } );
+						toggleSelection( false );
+					} }
+					onResize={ setTemporaryMinHeight }
+					onResizeStop={ ( newMinHeight ) => {
+						toggleSelection( true );
+						setAttributes( { minHeight: newMinHeight } );
+						setTemporaryMinHeight( null );
+					} }
+				>
+					<div data-url={ url } style={ style } className={ classes }>
+						{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+							// Used only to programmatically check if the image is dark or not
+							<img
+								ref={ isDarkElement }
+								aria-hidden
+								alt=""
+								style={ {
+									display: 'none',
+								} }
+								src={ url }
+							/>
+						) }
+						{ url && gradientValue && dimRatio !== 0 && (
+							<span
+								aria-hidden="true"
+								className={ classnames(
+									'wp-block-cover__gradient-background',
+									gradientClass
+								) }
+								style={ { background: gradientValue } }
+							/>
+						) }
+						{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+							<video
+								ref={ isDarkElement }
+								className="wp-block-cover__video-background"
+								autoPlay
+								muted
+								loop
+								src={ url }
+							/>
+						) }
+						<div className="wp-block-cover__inner-container">
+							<InnerBlocks template={ INNER_BLOCKS_TEMPLATE } />
+						</div>
 					</div>
-				</div>
-			</ResizableCover>
+				</ResizableCover>
+			</BoxControlVisualizer>
 		</>
 	);
 }
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index cba3d554e5f01a..caf1e41746cf6a 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -26,6 +26,7 @@ export const settings = {
 	supports: {
 		align: true,
 		html: false,
+		__experimentalPadding: true,
 	},
 	example: {
 		attributes: {
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 4dc295d28fd849..0469ed6ee3663c 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,3 +1,13 @@
+:root {
+	.wp-block-cover-image,
+	.wp-block-cover {
+		padding-top: var(--wp--padding-top);
+		padding-right: var(--wp--padding-right);
+		padding-bottom: var(--wp--padding-bottom);
+		padding-left: var(--wp--padding-left);
+	}
+}
+
 .wp-block-cover-image,
 .wp-block-cover {
 	position: relative;
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 8873639f7dbcd3..c6e24ee7b8d966 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -16,59 +16,40 @@ import { __ } from '@wordpress/i18n';
 // import BaseButtonGroup from '../button-group';
 import DropdownMenu from '../dropdown-menu';
 import BoxControlIcon from './icon';
+import Visualizer from './visualizer';
 import Tooltip from '../tooltip';
 import BaseUnitControl from '../unit-control';
 import { Flex, FlexBlock, FlexItem } from '../flex';
+import {
+	DEFAULT_VALUES,
+	TYPE_PROPS,
+	parseValues,
+	parseType,
+	getValues,
+} from './utils';
 
-const types = [ 'all', 'pairs', 'custom' ];
 const defaultInputProps = {
 	min: 0,
 };
 
-const typeProps = {
-	all: {
-		sides: [ 'all' ],
-		label: __( 'All sides' ),
-	},
-	pairs: {
-		sides: [ 'top', 'bottom' ],
-		label: __( 'Pair of sides' ),
-	},
-	custom: {
-		sides: [ 'top' ],
-		label: __( 'Individual sides' ),
-	},
-};
-
-const defaultValueProps = {
-	top: [ 0, 'px' ],
-	right: [ 0, 'px' ],
-	bottom: [ 0, 'px' ],
-	left: [ 0, 'px' ],
-};
-
 const BoxControlComponent = {
 	all: BoxAllControl,
 	pairs: BoxPairsControl,
 	custom: BoxCustomControl,
 };
 
-const parseType = ( type ) => {
-	return types.includes( type ) ? type : 'all';
-};
-
 export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
+	onSelect = noop,
 	label = __( 'Box Control' ),
-	type: typeProp = 'all',
-	values: valuesProp,
+	values: valuesProp = DEFAULT_VALUES,
 	// Disable units for now
 	units = false,
 } ) {
-	const [ type, setType ] = useState( parseType( typeProp ) );
+	const [ type, setType ] = useState( parseType( valuesProp ) );
 	const [ values, setValues ] = useState( parseValues( valuesProp ) );
-	const [ icon, setIcon ] = useState( parseType( typeProp ) );
+	const [ icon, setIcon ] = useState( parseType( valuesProp ) );
 	const ControlComponent = BoxControlComponent[ type ];
 
 	const updateValues = ( nextValues ) => {
@@ -77,6 +58,30 @@ export default function BoxControl( {
 		onChange( mergedValues );
 	};
 
+	const handleOnSelect = ( next ) => {
+		let nextSelect = [ next ];
+
+		switch ( next ) {
+			case 'all':
+				nextSelect = [ 'top', 'right', 'bottom', 'left' ];
+				break;
+			case 'vertical':
+				nextSelect = [ 'top', 'bottom' ];
+				break;
+			case 'horizontal':
+				nextSelect = [ 'right', 'left' ];
+				break;
+			case 'pairs':
+				nextSelect = [ 'top', 'bottom' ];
+				break;
+			case 'custom':
+				nextSelect = [ 'top' ];
+				break;
+		}
+
+		onSelect( nextSelect );
+	};
+
 	const mixedLabel = __( 'Mixed' );
 
 	return (
@@ -89,7 +94,10 @@ export default function BoxControl( {
 					<BoxTypeDropdown
 						icon={ icon }
 						label={ label }
-						onChange={ setType }
+						onChange={ ( next ) => {
+							setType( next );
+							handleOnSelect( next );
+						} }
 						onSelect={ setIcon }
 						type={ type }
 					/>
@@ -99,7 +107,10 @@ export default function BoxControl( {
 						{ ...inputProps }
 						placeholder={ mixedLabel }
 						values={ values }
-						onSelect={ setIcon }
+						onSelect={ ( next ) => {
+							handleOnSelect( next );
+							setIcon( next );
+						} }
 						onChange={ updateValues }
 						units={ units }
 					/>
@@ -131,8 +142,8 @@ function BoxAllControl( {
 					value={ isMixed ? '' : value }
 					placeholder={ placeholderLabel }
 					unit={ unit }
+					onFocus={ () => onSelect( 'all' ) }
 					onChange={ ( next ) => {
-						onSelect( 'all' );
 						onChange( {
 							top: [ next, unit ],
 							right: [ next, unit ],
@@ -335,9 +346,9 @@ function useCustomUnitControlProps( { values, onChange = noop } ) {
 
 function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon, type } ) {
 	const icons = {
-		all: <BoxControlIcon sides={ typeProps.all.sides } />,
-		pairs: <BoxControlIcon sides={ typeProps.pairs.sides } />,
-		custom: <BoxControlIcon sides={ typeProps.custom.sides } />,
+		all: <BoxControlIcon sides={ TYPE_PROPS.all.sides } />,
+		pairs: <BoxControlIcon sides={ TYPE_PROPS.pairs.sides } />,
+		custom: <BoxControlIcon sides={ TYPE_PROPS.custom.sides } />,
 		vertical: <BoxControlIcon sides={ [ 'top', 'bottom' ] } />,
 		horizontal: <BoxControlIcon sides={ [ 'left', 'right' ] } />,
 		top: <BoxControlIcon sides={ [ 'top' ] } />,
@@ -353,21 +364,21 @@ function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon, type } ) {
 
 	const options = [
 		{
-			title: typeProps.all.label,
+			title: TYPE_PROPS.all.label,
 			value: 'all',
 			icon: <DropdownIconWrapper>{ icons.all }</DropdownIconWrapper>,
 			onClick: () => handleOnChange( 'all' ),
 			isActive: type === 'all',
 		},
 		{
-			title: typeProps.pairs.label,
+			title: TYPE_PROPS.pairs.label,
 			value: 'pairs',
 			icon: <DropdownIconWrapper>{ icons.pairs }</DropdownIconWrapper>,
 			onClick: () => handleOnChange( 'pairs' ),
 			isActive: type === 'pairs',
 		},
 		{
-			title: typeProps.custom.label,
+			title: TYPE_PROPS.custom.label,
 			value: 'custom',
 			icon: <DropdownIconWrapper>{ icons.custom }</DropdownIconWrapper>,
 			onClick: () => handleOnChange( 'custom' ),
@@ -415,7 +426,7 @@ function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon, type } ) {
 // 	return (
 // 		<RadioGroup { ...radio } as={ ButtonGroup } aria-label={ label }>
 // 			{ types.map( ( value ) => {
-// 				const valueProps = typeProps[ value ];
+// 				const valueProps = TYPE_PROPS[ value ];
 // 				const isSelected = radio.state === value;
 
 // 				return (
@@ -480,27 +491,4 @@ const DropdownIconWrapper = styled.div`
 	margin-right: 8px;
 `;
 
-function parseValues( values = {} ) {
-	const nextValueProps = {};
-
-	Object.keys( defaultValueProps ).forEach( ( key ) => {
-		const defaultValue = defaultValueProps[ key ];
-		const prop = values[ key ] || [];
-
-		nextValueProps[ key ] = [
-			prop?.[ 0 ] || defaultValue[ 0 ],
-			prop?.[ 1 ] || defaultValue[ 1 ],
-		];
-	} );
-
-	return nextValueProps;
-}
-
-function getValues( values, ...args ) {
-	const nextValues = [];
-	args.forEach( ( key ) => {
-		nextValues.push( values[ key ][ 0 ] );
-	} );
-
-	return nextValues;
-}
+BoxControl.__Visualizer = Visualizer;
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index 06b711efc90c50..bda9725e01eea3 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 import BoxControlIcon from '../icon';
+import BoxControlVisualizer from '../visualizer';
 import { Flex, FlexBlock } from '../../flex';
 
 export default { title: 'Components/BoxControl', component: BoxControl };
@@ -31,10 +32,6 @@ function DemoExample() {
 		bottom: [ 10 ],
 		left: [ 10 ],
 	} );
-	const top = values?.top?.[ 0 ];
-	const right = values?.right?.[ 0 ];
-	const bottom = values?.bottom?.[ 0 ];
-	const left = values?.left?.[ 0 ];
 
 	return (
 		<Container align="top" gap={ 8 }>
@@ -49,40 +46,11 @@ function DemoExample() {
 			</FlexBlock>
 			<FlexBlock>
 				<Content>
-					<Box>
-						<Padding
-							style={ {
-								top: 0,
-								left: 0,
-								width: '100%',
-								padding: top,
-							} }
-						/>
-						<Padding
-							style={ {
-								top: 0,
-								right: 0,
-								height: '100%',
-								padding: right,
-							} }
-						/>
-						<Padding
-							style={ {
-								bottom: 0,
-								left: 0,
-								width: '100%',
-								padding: bottom,
-							} }
-						/>
-						<Padding
-							style={ {
-								top: 0,
-								left: 0,
-								height: '100%',
-								padding: left,
-							} }
-						/>
-					</Box>
+					<BoxContainer>
+						<BoxControlVisualizer values={ values }>
+							<Box />
+						</BoxControlVisualizer>
+					</BoxContainer>
 				</Content>
 			</FlexBlock>
 		</Container>
@@ -97,16 +65,14 @@ const Container = styled( Flex )`
 	max-width: 780px;
 `;
 
-const Box = styled.div`
+const BoxContainer = styled.div`
 	width: 300px;
 	height: 300px;
-	position: relative;
 `;
 
-const Padding = styled.div`
-	position: absolute;
-	background: blue;
-	opacity: 0.2;
+const Box = styled.div`
+	background: #ddd;
+	height: 300px;
 `;
 
 const Content = styled.div`
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
new file mode 100644
index 00000000000000..5c09be501f12f2
--- /dev/null
+++ b/packages/components/src/box-control/utils.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const TYPES = [ 'all', 'pairs', 'custom' ];
+
+export const TYPE_PROPS = {
+	all: {
+		sides: [ 'all' ],
+		label: __( 'All sides' ),
+	},
+	pairs: {
+		sides: [ 'top', 'bottom' ],
+		label: __( 'Pair of sides' ),
+	},
+	custom: {
+		sides: [ 'top' ],
+		label: __( 'Individual sides' ),
+	},
+};
+
+export const DEFAULT_VALUES = {
+	top: [ 0, 'px' ],
+	right: [ 0, 'px' ],
+	bottom: [ 0, 'px' ],
+	left: [ 0, 'px' ],
+};
+
+export const parseType = ( values = {} ) => {
+	const {
+		top: [ top ],
+		bottom: [ bottom ],
+		left: [ left ],
+		right: [ right ],
+	} = parseValues( values );
+
+	const isAll = [ top, bottom, left, right ].every(
+		( value ) => value === top
+	);
+
+	if ( isAll ) {
+		return 'all';
+	}
+
+	const isVerticalMatch = [ top, bottom ].every( ( value ) => value === top );
+	const isHorizontalMatch = [ left, right ].every(
+		( value ) => value === left
+	);
+
+	const isPairs = isVerticalMatch && isHorizontalMatch;
+
+	if ( isPairs ) {
+		return 'pairs';
+	}
+
+	return 'custom';
+};
+
+export function parseValues( values = {} ) {
+	const nextValueProps = {};
+
+	Object.keys( DEFAULT_VALUES ).forEach( ( key ) => {
+		const defaultValue = DEFAULT_VALUES[ key ];
+		const prop = values[ key ] || [];
+
+		nextValueProps[ key ] = [
+			prop?.[ 0 ] || defaultValue[ 0 ],
+			prop?.[ 1 ] || defaultValue[ 1 ],
+		];
+	} );
+
+	return nextValueProps;
+}
+
+export function getValues( values, ...args ) {
+	const nextValues = [];
+	args.forEach( ( key ) => {
+		nextValues.push( values[ key ][ 0 ] );
+	} );
+
+	return nextValues;
+}
diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
new file mode 100644
index 00000000000000..9cc3e911a97a8c
--- /dev/null
+++ b/packages/components/src/box-control/visualizer.js
@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { color } from '../utils/style-mixins';
+import { DEFAULT_VALUES, parseValues } from './utils';
+
+export default function BoxControlVisualizer( {
+	children,
+	values: valuesProp = DEFAULT_VALUES,
+	...props
+} ) {
+	const values = parseValues( valuesProp );
+
+	return (
+		<Container { ...props }>
+			<Sides values={ values } />
+			{ children }
+		</Container>
+	);
+}
+
+function Sides( { values } ) {
+	const { top, right, bottom, left } = values;
+
+	return (
+		<>
+			<Top value={ top } />
+			<Right value={ right } />
+			<Bottom value={ bottom } />
+			<Left value={ left } />
+		</>
+	);
+}
+
+function Top( { value } ) {
+	const [ height ] = value;
+	const animationProps = useSideAnimation( height );
+
+	return <TopView { ...animationProps } style={ { height } } />;
+}
+
+function Right( { value } ) {
+	const [ width ] = value;
+	const animationProps = useSideAnimation( width );
+
+	return <RightView { ...animationProps } style={ { width } } />;
+}
+
+function Bottom( { value } ) {
+	const [ height ] = value;
+	const animationProps = useSideAnimation( height );
+
+	return <BottomView { ...animationProps } style={ { height } } />;
+}
+
+function Left( { value } ) {
+	const [ width ] = value;
+	const animationProps = useSideAnimation( width );
+
+	return <LeftView { ...animationProps } style={ { width } } />;
+}
+
+function useSideAnimation( value ) {
+	const [ isActive, setIsActive ] = useState( false );
+	const valueRef = useRef( value );
+	const timeoutRef = useRef();
+
+	const clearTimer = () => {
+		if ( timeoutRef.current ) {
+			window.clearTimeout( timeoutRef.current );
+		}
+	};
+
+	useEffect( () => {
+		if ( value !== valueRef.current ) {
+			setIsActive( true );
+			valueRef.current = value;
+
+			clearTimer();
+
+			timeoutRef.current = setTimeout( () => {
+				setIsActive( false );
+			}, 400 );
+		}
+
+		return () => clearTimer();
+	}, [ value ] );
+
+	return {
+		isActive,
+	};
+}
+
+const Container = styled.div`
+	box-sizing: border-box;
+	position: relative;
+`;
+
+const Side = styled.div`
+	box-sizing: border-box;
+	background: ${color( 'ui.brand' )};
+	filter: brightness( 0.7 );
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+	transition: opacity 120ms linear;
+	z-index: 1;
+
+	${( { isActive } ) =>
+		isActive &&
+		`
+		opacity: 0.3;
+	`}
+`;
+
+const TopView = styled( Side )`
+	top: 0;
+	left: 0;
+	right: 0;
+`;
+
+const RightView = styled( Side )`
+	top: 0;
+	bottom: 0;
+	right: 0;
+`;
+
+const BottomView = styled( Side )`
+	bottom: 0;
+	left: 0;
+	right: 0;
+`;
+
+const LeftView = styled( Side )`
+	top: 0;
+	bottom: 0;
+	left: 0;
+`;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 974acb607d1e16..38d6a6f5030164 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -136,6 +136,7 @@ export const ALERT = {
 // Namespaced values for raw colors hex codes
 export const UI = {
 	background: BASE.white,
+	brand: BLUE.wordpress[ 700 ],
 	border: BASE.black,
 	borderFocus: BLUE.medium.focus,
 	borderLight: LIGHT_GRAY[ 600 ],

From 74e327c5279e7c2573ac1a643b34fa705625d7ed Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Apr 2020 16:47:31 -0400
Subject: [PATCH 013/103] Improve visualization of padding

---
 packages/components/src/box-control/visualizer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index 9cc3e911a97a8c..4d1096e3aac5fc 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -109,7 +109,7 @@ const Container = styled.div`
 const Side = styled.div`
 	box-sizing: border-box;
 	background: ${color( 'ui.brand' )};
-	filter: brightness( 0.7 );
+	filter: brightness( 1 );
 	opacity: 0;
 	position: absolute;
 	pointer-events: none;

From aa790eac5b1011258e6f54bdc47c8b3bc8bf9f5d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 10:51:59 -0400
Subject: [PATCH 014/103] Experiment with new Box Controls layout

---
 packages/components/src/box-control/index.js  | 238 ++++++++++++++++--
 .../components/src/number-control/index.js    |  52 +++-
 .../components/src/number-control/utils.js    |  21 ++
 packages/components/src/unit-control/index.js |  20 +-
 .../styles/unit-control-styles.js             |  32 ++-
 5 files changed, 313 insertions(+), 50 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index c6e24ee7b8d966..7796cf50d5a5b6 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -89,37 +89,189 @@ export default function BoxControl( {
 			<Header>
 				<FlexItem>{ label }</FlexItem>
 			</Header>
-			<Flex align="top" gap={ 1 }>
-				<FlexItem>
-					<BoxTypeDropdown
-						icon={ icon }
-						label={ label }
-						onChange={ ( next ) => {
-							setType( next );
-							handleOnSelect( next );
-						} }
-						onSelect={ setIcon }
-						type={ type }
-					/>
-				</FlexItem>
-				<FlexBlock>
-					<ControlComponent
-						{ ...inputProps }
-						placeholder={ mixedLabel }
-						values={ values }
-						onSelect={ ( next ) => {
-							handleOnSelect( next );
-							setIcon( next );
-						} }
-						onChange={ updateValues }
-						units={ units }
-					/>
-				</FlexBlock>
-			</Flex>
+			{ false && (
+				<Flex align="top" gap={ 1 }>
+					<FlexItem>
+						<BoxTypeDropdown
+							icon={ icon }
+							label={ label }
+							onChange={ ( next ) => {
+								setType( next );
+								handleOnSelect( next );
+							} }
+							onSelect={ setIcon }
+							type={ type }
+						/>
+					</FlexItem>
+					<FlexBlock>
+						<ControlComponent
+							{ ...inputProps }
+							placeholder={ mixedLabel }
+							values={ values }
+							onSelect={ ( next ) => {
+								handleOnSelect( next );
+								setIcon( next );
+							} }
+							onChange={ updateValues }
+							units={ units }
+						/>
+					</FlexBlock>
+				</Flex>
+			) }
+			<BoxUIControl
+				{ ...inputProps }
+				placeholder={ mixedLabel }
+				values={ values }
+				onSelect={ ( next ) => {
+					handleOnSelect( next );
+					setIcon( next );
+				} }
+				onChange={ updateValues }
+				units={ units }
+			/>
 		</Root>
 	);
 }
 
+function BoxUIControl( { onChange = noop, values, ...props } ) {
+	const {
+		top: [ top, unit ],
+		right: [ right ],
+		bottom: [ bottom ],
+		left: [ left ],
+	} = values;
+
+	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
+	const isMixed = ! allValues.every( ( v ) => v === top );
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		onChange( { ...values, [ side ]: [ next, unit ] } );
+	};
+
+	const baseStyles = {
+		position: 'absolute',
+		zIndex: 1,
+		maxWidth: 50,
+	};
+
+	return (
+		<GridUI>
+			<GridIndicator
+				style={ {
+					left: '50%',
+					top: '50%',
+					transform: 'translate(0, -30px)',
+				} }
+			/>
+			<GridIndicator
+				style={ {
+					left: '50%',
+					bottom: '50%',
+					transform: 'translate(0, 30px)',
+				} }
+			/>
+			<GridIndicator
+				style={ {
+					left: '50%',
+					top: '50%',
+					transform: 'rotate(-90deg) translate(7px, -38px)',
+				} }
+			/>
+			<GridIndicator
+				style={ {
+					right: '50%',
+					top: '50%',
+					transform: 'rotate(-90deg) translate(7px, 38px)',
+				} }
+			/>
+
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ top }
+				onChange={ createHandleOnChange( 'top' ) }
+				placeholder="Top"
+				label="Top"
+				size="small"
+				style={ {
+					...baseStyles,
+					left: '50%',
+					top: 0,
+					transform: 'translateX(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ right }
+				onChange={ createHandleOnChange( 'right' ) }
+				placeholder="Right"
+				label="Right"
+				size="small"
+				style={ {
+					...baseStyles,
+					right: 0,
+					top: '50%',
+					transform: 'translateY(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ bottom }
+				onChange={ createHandleOnChange( 'bottom' ) }
+				placeholder="Bottom"
+				label="Bottom"
+				size="small"
+				style={ {
+					...baseStyles,
+					left: '50%',
+					bottom: 0,
+					transform: 'translateX(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ left }
+				onChange={ createHandleOnChange( 'left' ) }
+				placeholder="Left"
+				label="Left"
+				size="small"
+				style={ {
+					...baseStyles,
+					position: 'absolute',
+					left: 0,
+					top: '50%',
+					transform: 'translateY(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ isMixed ? '' : top }
+				onChange={ ( next ) => {
+					onChange( {
+						top: [ next, unit ],
+						right: [ next, unit ],
+						bottom: [ next, unit ],
+						left: [ next, unit ],
+					} );
+				} }
+				placeholder="All"
+				label="All"
+				size="small"
+				style={ {
+					...baseStyles,
+					left: '50%',
+					top: '50%',
+					transform: 'translate(-50%, -50%)',
+				} }
+			/>
+		</GridUI>
+	);
+}
+
 function BoxAllControl( {
 	placeholder,
 	onSelect = noop,
@@ -491,4 +643,36 @@ const DropdownIconWrapper = styled.div`
 	margin-right: 8px;
 `;
 
+const GridUI = styled.div`
+	position: relative;
+	height: 120px;
+	width: 200px;
+`;
+
+const GridIndicator = styled.div`
+	height: 14px;
+	border-left: 1px dashed dodgerblue;
+	width: 0;
+	position: absolute;
+
+	&::before {
+		content: '';
+		position: absolute;
+		width: 7px;
+		height: 0;
+		border-top: 1px dashed dodgerblue;
+		top: 0;
+		left: -4px;
+	}
+	&::after {
+		content: '';
+		position: absolute;
+		width: 7px;
+		height: 0;
+		border-top: 1px dashed dodgerblue;
+		bottom: 0;
+		left: -4px;
+	}
+`;
+
 BoxControl.__Visualizer = Visualizer;
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 6cc57777fb7daa..0fa4adfbaeeac1 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -4,6 +4,8 @@
 import { clamp, noop } from 'lodash';
 import classNames from 'classnames';
 import { useDrag } from 'react-use-gesture';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 
 /**
  * WordPress dependencies
@@ -14,7 +16,7 @@ import { UP, DOWN } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { DRAG_CURSOR, useDragCursor, add } from './utils';
+import { DRAG_CURSOR, useDragCursor, add, roundClampString } from './utils';
 
 export function NumberControl(
 	{
@@ -55,8 +57,13 @@ export function NumberControl(
 			const distance = y * modifier * -1;
 
 			if ( distance !== 0 ) {
-				const nextValue = clamp( add( valueProp, distance ), min, max );
-				onChange( nextValue.toString(), { event } );
+				const nextValue = roundClampString(
+					add( valueProp, distance ),
+					min,
+					max,
+					modifier
+				);
+				onChange( nextValue, { event } );
 			}
 
 			if ( ! isDragging ) {
@@ -90,9 +97,14 @@ export function NumberControl(
 				event.preventDefault();
 
 				nextValue = nextValue + incrementalValue;
-				nextValue = clamp( nextValue, min, max );
+				nextValue = roundClampString(
+					nextValue,
+					min,
+					max,
+					incrementalValue
+				);
 
-				onChange( nextValue.toString(), { event } );
+				onChange( nextValue, { event } );
 
 				break;
 
@@ -100,9 +112,14 @@ export function NumberControl(
 				event.preventDefault();
 
 				nextValue = nextValue - incrementalValue;
-				nextValue = clamp( nextValue, min, max );
+				nextValue = roundClampString(
+					nextValue,
+					min,
+					max,
+					incrementalValue
+				);
 
-				onChange( nextValue.toString(), { event } );
+				onChange( nextValue, { event } );
 
 				break;
 		}
@@ -120,11 +137,12 @@ export function NumberControl(
 	};
 
 	return (
-		<input
+		<Input
 			inputMode="numeric"
 			{ ...props }
 			{ ...dragGestureProps() }
 			className={ classes }
+			isDragging={ isDragging }
 			ref={ ref }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
@@ -135,4 +153,22 @@ export function NumberControl(
 	);
 }
 
+const dragStyles = ( { isDragging } ) => {
+	if ( ! isDragging ) return '';
+
+	return css`
+		user-select: none;
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none !important;
+			margin: 0 !important;
+		}
+	`;
+};
+
+const Input = styled.input`
+	${dragStyles};
+`;
+
 export default forwardRef( NumberControl );
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index 0159091791f23d..ccffb649edfb0b 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { clamp } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -25,3 +30,19 @@ function getValue( value ) {
 export function add( a, b ) {
 	return getValue( a ) + getValue( b );
 }
+
+export function roundClamp(
+	value = 0,
+	min = Infinity,
+	max = Infinity,
+	step = 1
+) {
+	const clampedValue = clamp( value, min, max );
+	const rounded = Math.ceil( clampedValue / step ) * step;
+
+	return rounded;
+}
+
+export function roundClampString( ...args ) {
+	return roundClamp( ...args ).toString();
+}
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 05a9f176e6f473..b82c55745c059c 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -19,6 +19,7 @@ import { CSS_UNITS } from './utils';
 function UnitControl(
 	{
 		className,
+		disableUnits = false,
 		isUnitSelectTabbable = true,
 		isResetValueOnUnitChange = true,
 		label,
@@ -49,20 +50,23 @@ function UnitControl(
 			<ValueInput
 				aria-label={ label }
 				{ ...props }
+				disableUnits={ disableUnits }
 				className="component-unit-control__input"
 				value={ value }
 				onChange={ onChange }
 				size={ size }
 				type="number"
 			/>
-			<UnitSelectControl
-				className="component-unit-control__select"
-				isTabbable={ isUnitSelectTabbable }
-				options={ units }
-				onChange={ handleOnUnitChange }
-				size={ size }
-				value={ unit }
-			/>
+			{ ! disableUnits && (
+				<UnitSelectControl
+					className="component-unit-control__select"
+					isTabbable={ isUnitSelectTabbable }
+					options={ units }
+					onChange={ handleOnUnitChange }
+					size={ size }
+					value={ unit }
+				/>
+			) }
 		</Root>
 	);
 }
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 9d3f5c29191bf5..9d369fe1e80605 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -50,6 +50,26 @@ const sizeStyles = ( { size } ) => {
 	return css( style );
 };
 
+const paddingStyles = ( { disableUnits } ) => {
+	const value = disableUnits ? 3 : 20;
+
+	return css`
+		${rtl( { paddingRight: value } )()};
+	`;
+};
+
+const arrowStyles = ( { disableUnits } ) => {
+	if ( disableUnits ) return '';
+
+	return css`
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	`;
+};
+
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -64,15 +84,11 @@ export const ValueInput = styled( NumberControl )`
 		display: block;
 		width: 100%;
 
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-
-		${rtl( { paddingRight: 20 } )}
 		${fontSizeStyles};
 		${sizeStyles};
+
+		${arrowStyles};
+		${paddingStyles};
 	}
 `;
 
@@ -128,6 +144,8 @@ const unitLabelPaddingStyles = ( { size } ) => {
 
 export const UnitLabel = styled.div`
 	&&& {
+		pointer-events: none;
+
 		${baseUnitLabelStyles};
 		${unitLabelPaddingStyles};
 	}

From aa5b18bad32add61e4789fcb91cb19c73b8993fd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 12:44:16 -0400
Subject: [PATCH 015/103] Improve NumberControl drag interaction

---
 packages/components/src/box-control/index.js  | 30 ++++++++++++-------
 .../components/src/number-control/index.js    | 12 ++++++--
 .../components/src/number-control/utils.js    | 10 +++++--
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 7796cf50d5a5b6..a2a04612077a08 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -118,17 +118,19 @@ export default function BoxControl( {
 					</FlexBlock>
 				</Flex>
 			) }
-			<BoxUIControl
-				{ ...inputProps }
-				placeholder={ mixedLabel }
-				values={ values }
-				onSelect={ ( next ) => {
-					handleOnSelect( next );
-					setIcon( next );
-				} }
-				onChange={ updateValues }
-				units={ units }
-			/>
+			<LayoutContainer>
+				<BoxUIControl
+					{ ...inputProps }
+					placeholder={ mixedLabel }
+					values={ values }
+					onSelect={ ( next ) => {
+						handleOnSelect( next );
+						setIcon( next );
+					} }
+					onChange={ updateValues }
+					units={ units }
+				/>
+			</LayoutContainer>
 		</Root>
 	);
 }
@@ -643,6 +645,12 @@ const DropdownIconWrapper = styled.div`
 	margin-right: 8px;
 `;
 
+const LayoutContainer = styled( Flex )`
+	height: 120px;
+	justify-content: center;
+	padding-bottom: 16px;
+`;
+
 const GridUI = styled.div`
 	position: relative;
 	height: 120px;
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 0fa4adfbaeeac1..38c6c6eca3dfd7 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -16,7 +16,13 @@ import { UP, DOWN } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { DRAG_CURSOR, useDragCursor, add, roundClampString } from './utils';
+import {
+	DRAG_CURSOR,
+	useDragCursor,
+	add,
+	subtract,
+	roundClampString,
+} from './utils';
 
 export function NumberControl(
 	{
@@ -96,7 +102,7 @@ export function NumberControl(
 			case UP:
 				event.preventDefault();
 
-				nextValue = nextValue + incrementalValue;
+				nextValue = add( nextValue, incrementalValue );
 				nextValue = roundClampString(
 					nextValue,
 					min,
@@ -111,7 +117,7 @@ export function NumberControl(
 			case DOWN:
 				event.preventDefault();
 
-				nextValue = nextValue - incrementalValue;
+				nextValue = subtract( nextValue, incrementalValue );
 				nextValue = roundClampString(
 					nextValue,
 					min,
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index ccffb649edfb0b..fdcbc079dcba71 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -24,6 +24,7 @@ export function useDragCursor( isDragging ) {
 
 function getValue( value ) {
 	const number = Number( value );
+
 	return isNaN( number ) ? 0 : number;
 }
 
@@ -31,14 +32,19 @@ export function add( a, b ) {
 	return getValue( a ) + getValue( b );
 }
 
+export function subtract( a, b ) {
+	return getValue( a ) - getValue( b );
+}
+
 export function roundClamp(
 	value = 0,
 	min = Infinity,
 	max = Infinity,
 	step = 1
 ) {
-	const clampedValue = clamp( value, min, max );
-	const rounded = Math.ceil( clampedValue / step ) * step;
+	const clampedValue = clamp( getValue( value ), min, max );
+	const stepValue = getValue( step );
+	const rounded = Math.round( clampedValue / stepValue ) * stepValue;
 
 	return rounded;
 }

From 7687799869c3a38930df2d5e37284f621022bf8a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 16:12:05 -0400
Subject: [PATCH 016/103] Create InputControl primitive. Add floating labels.
 Refactor BoxControl

---
 packages/components/src/box-control/index.js  | 640 +-----------------
 .../src/box-control/input-controls.js         | 138 ++++
 .../box-control/styles/box-control-styles.js  |  54 ++
 .../src/box-control/unit-control.js           |  23 +
 packages/components/src/box-control/utils.js  |  50 --
 .../components/src/input-control/index.js     | 139 ++++
 .../src/input-control/stories/index.js        |  49 ++
 .../styles/input-control-styles.js            | 240 +++++++
 .../components/src/number-control/index.js    |   9 +-
 .../src/number-control/stories/index.js       |   3 +-
 packages/components/src/unit-control/index.js |  24 +-
 .../src/unit-control/stories/index.js         |   3 +-
 .../styles/unit-control-styles.js             |  39 --
 packages/components/src/utils/style-mixins.js |   2 +-
 14 files changed, 672 insertions(+), 741 deletions(-)
 create mode 100644 packages/components/src/box-control/input-controls.js
 create mode 100644 packages/components/src/box-control/styles/box-control-styles.js
 create mode 100644 packages/components/src/box-control/unit-control.js
 create mode 100644 packages/components/src/input-control/index.js
 create mode 100644 packages/components/src/input-control/stories/index.js
 create mode 100644 packages/components/src/input-control/styles/input-control-styles.js

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index a2a04612077a08..e0d485459902bd 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -2,55 +2,33 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-// import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
-import styled from '@emotion/styled';
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { Icon, chevronDown } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-// import BaseButtonGroup from '../button-group';
-import DropdownMenu from '../dropdown-menu';
-import BoxControlIcon from './icon';
 import Visualizer from './visualizer';
-import Tooltip from '../tooltip';
-import BaseUnitControl from '../unit-control';
-import { Flex, FlexBlock, FlexItem } from '../flex';
-import {
-	DEFAULT_VALUES,
-	TYPE_PROPS,
-	parseValues,
-	parseType,
-	getValues,
-} from './utils';
+import { FlexItem } from '../flex';
+import InputControls from './input-controls';
+import { DEFAULT_VALUES, parseValues } from './utils';
+import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
 const defaultInputProps = {
 	min: 0,
 };
 
-const BoxControlComponent = {
-	all: BoxAllControl,
-	pairs: BoxPairsControl,
-	custom: BoxCustomControl,
-};
-
 export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
-	onSelect = noop,
 	label = __( 'Box Control' ),
 	values: valuesProp = DEFAULT_VALUES,
 	// Disable units for now
 	units = false,
 } ) {
-	const [ type, setType ] = useState( parseType( valuesProp ) );
 	const [ values, setValues ] = useState( parseValues( valuesProp ) );
-	const [ icon, setIcon ] = useState( parseType( valuesProp ) );
-	const ControlComponent = BoxControlComponent[ type ];
 
 	const updateValues = ( nextValues ) => {
 		const mergedValues = { ...values, ...nextValues };
@@ -58,75 +36,15 @@ export default function BoxControl( {
 		onChange( mergedValues );
 	};
 
-	const handleOnSelect = ( next ) => {
-		let nextSelect = [ next ];
-
-		switch ( next ) {
-			case 'all':
-				nextSelect = [ 'top', 'right', 'bottom', 'left' ];
-				break;
-			case 'vertical':
-				nextSelect = [ 'top', 'bottom' ];
-				break;
-			case 'horizontal':
-				nextSelect = [ 'right', 'left' ];
-				break;
-			case 'pairs':
-				nextSelect = [ 'top', 'bottom' ];
-				break;
-			case 'custom':
-				nextSelect = [ 'top' ];
-				break;
-		}
-
-		onSelect( nextSelect );
-	};
-
-	const mixedLabel = __( 'Mixed' );
-
 	return (
 		<Root>
 			<Header>
 				<FlexItem>{ label }</FlexItem>
 			</Header>
-			{ false && (
-				<Flex align="top" gap={ 1 }>
-					<FlexItem>
-						<BoxTypeDropdown
-							icon={ icon }
-							label={ label }
-							onChange={ ( next ) => {
-								setType( next );
-								handleOnSelect( next );
-							} }
-							onSelect={ setIcon }
-							type={ type }
-						/>
-					</FlexItem>
-					<FlexBlock>
-						<ControlComponent
-							{ ...inputProps }
-							placeholder={ mixedLabel }
-							values={ values }
-							onSelect={ ( next ) => {
-								handleOnSelect( next );
-								setIcon( next );
-							} }
-							onChange={ updateValues }
-							units={ units }
-						/>
-					</FlexBlock>
-				</Flex>
-			) }
 			<LayoutContainer>
-				<BoxUIControl
+				<InputControls
 					{ ...inputProps }
-					placeholder={ mixedLabel }
 					values={ values }
-					onSelect={ ( next ) => {
-						handleOnSelect( next );
-						setIcon( next );
-					} }
 					onChange={ updateValues }
 					units={ units }
 				/>
@@ -135,552 +53,4 @@ export default function BoxControl( {
 	);
 }
 
-function BoxUIControl( { onChange = noop, values, ...props } ) {
-	const {
-		top: [ top, unit ],
-		right: [ right ],
-		bottom: [ bottom ],
-		left: [ left ],
-	} = values;
-
-	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
-	const isMixed = ! allValues.every( ( v ) => v === top );
-
-	const createHandleOnChange = ( side ) => ( next ) => {
-		onChange( { ...values, [ side ]: [ next, unit ] } );
-	};
-
-	const baseStyles = {
-		position: 'absolute',
-		zIndex: 1,
-		maxWidth: 50,
-	};
-
-	return (
-		<GridUI>
-			<GridIndicator
-				style={ {
-					left: '50%',
-					top: '50%',
-					transform: 'translate(0, -30px)',
-				} }
-			/>
-			<GridIndicator
-				style={ {
-					left: '50%',
-					bottom: '50%',
-					transform: 'translate(0, 30px)',
-				} }
-			/>
-			<GridIndicator
-				style={ {
-					left: '50%',
-					top: '50%',
-					transform: 'rotate(-90deg) translate(7px, -38px)',
-				} }
-			/>
-			<GridIndicator
-				style={ {
-					right: '50%',
-					top: '50%',
-					transform: 'rotate(-90deg) translate(7px, 38px)',
-				} }
-			/>
-
-			<UnitControl
-				{ ...props }
-				disableUnits
-				value={ top }
-				onChange={ createHandleOnChange( 'top' ) }
-				placeholder="Top"
-				label="Top"
-				size="small"
-				style={ {
-					...baseStyles,
-					left: '50%',
-					top: 0,
-					transform: 'translateX(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				disableUnits
-				value={ right }
-				onChange={ createHandleOnChange( 'right' ) }
-				placeholder="Right"
-				label="Right"
-				size="small"
-				style={ {
-					...baseStyles,
-					right: 0,
-					top: '50%',
-					transform: 'translateY(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				disableUnits
-				value={ bottom }
-				onChange={ createHandleOnChange( 'bottom' ) }
-				placeholder="Bottom"
-				label="Bottom"
-				size="small"
-				style={ {
-					...baseStyles,
-					left: '50%',
-					bottom: 0,
-					transform: 'translateX(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				disableUnits
-				value={ left }
-				onChange={ createHandleOnChange( 'left' ) }
-				placeholder="Left"
-				label="Left"
-				size="small"
-				style={ {
-					...baseStyles,
-					position: 'absolute',
-					left: 0,
-					top: '50%',
-					transform: 'translateY(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				disableUnits
-				value={ isMixed ? '' : top }
-				onChange={ ( next ) => {
-					onChange( {
-						top: [ next, unit ],
-						right: [ next, unit ],
-						bottom: [ next, unit ],
-						left: [ next, unit ],
-					} );
-				} }
-				placeholder="All"
-				label="All"
-				size="small"
-				style={ {
-					...baseStyles,
-					left: '50%',
-					top: '50%',
-					transform: 'translate(-50%, -50%)',
-				} }
-			/>
-		</GridUI>
-	);
-}
-
-function BoxAllControl( {
-	placeholder,
-	onSelect = noop,
-	onChange = noop,
-	values,
-	...props
-} ) {
-	const [ value, unit ] = values.top;
-	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
-	const isMixed = ! allValues.every( ( v ) => v === value );
-
-	const placeholderLabel = typeof value === 'number' ? placeholder : null;
-
-	return (
-		<ControlContainer>
-			<FlexBlock>
-				<UnitControl
-					{ ...props }
-					label={ __( 'All Sides' ) }
-					value={ isMixed ? '' : value }
-					placeholder={ placeholderLabel }
-					unit={ unit }
-					onFocus={ () => onSelect( 'all' ) }
-					onChange={ ( next ) => {
-						onChange( {
-							top: [ next, unit ],
-							right: [ next, unit ],
-							bottom: [ next, unit ],
-							left: [ next, unit ],
-						} );
-					} }
-					onUnitChange={ ( next ) => {
-						onChange( {
-							top: [ value, next ],
-							right: [ value, next ],
-							bottom: [ value, next ],
-							left: [ value, next ],
-						} );
-					} }
-				/>
-			</FlexBlock>
-		</ControlContainer>
-	);
-}
-
-function BoxPairsControl( {
-	placeholder,
-	onChange = noop,
-	onSelect = noop,
-	values,
-	...props
-} ) {
-	const [ vertical, verticalUnit ] = values.top;
-	const [ horizontal, horizontalUnit ] = values.left;
-
-	const isVerticalMixed = ! getValues( values, 'top', 'bottom' ).every(
-		( v ) => v === vertical
-	);
-	const isHorizontalMixed = ! getValues( values, 'left', 'right' ).every(
-		( v ) => v === horizontal
-	);
-
-	const verticalPlaceholder =
-		typeof vertical === 'number' ? placeholder : null;
-	const horizontalPlaceholder =
-		typeof horizontal === 'number' ? placeholder : null;
-
-	const labels = {
-		vertical: __( 'Top/Bottom' ),
-		horizontal: __( 'Left/Right' ),
-	};
-
-	const handleOnSelect = ( next ) => {
-		onSelect( next );
-	};
-
-	return (
-		<ControlContainer>
-			<UnitControl
-				{ ...props }
-				label={ labels.vertical }
-				placeholder={ verticalPlaceholder }
-				onFocus={ () => handleOnSelect( 'vertical' ) }
-				onChange={ ( next ) => {
-					onChange( {
-						top: [ next, verticalUnit ],
-						bottom: [ next, verticalUnit ],
-					} );
-				} }
-				onUnitChange={ ( next ) => {
-					onChange( {
-						top: [ vertical, next ],
-						bottom: [ vertical, next ],
-					} );
-				} }
-				value={ isVerticalMixed ? '' : vertical }
-				unit={ verticalUnit }
-			/>
-			<UnitControl
-				{ ...props }
-				label={ labels.horizontal }
-				placeholder={ horizontalPlaceholder }
-				onFocus={ () => handleOnSelect( 'horizontal' ) }
-				onChange={ ( next ) => {
-					onChange( {
-						left: [ next, horizontalUnit ],
-						right: [ next, horizontalUnit ],
-					} );
-				} }
-				onUnitChange={ ( next ) => {
-					onChange( {
-						left: [ horizontal, next ],
-						right: [ horizontal, next ],
-					} );
-				} }
-				value={ isHorizontalMixed ? '' : horizontal }
-				unit={ horizontalUnit }
-			/>
-		</ControlContainer>
-	);
-}
-
-function BoxCustomControl( {
-	onSelect = noop,
-	onChange = noop,
-	values,
-	...props
-} ) {
-	const unitControlProps = useCustomUnitControlProps( {
-		values,
-		onChange,
-	} );
-
-	const labels = {
-		top: __( 'Top' ),
-		right: __( 'Right' ),
-		bottom: __( 'Bottom' ),
-		left: __( 'Left' ),
-	};
-
-	const handleOnSelect = ( next ) => {
-		onSelect( next );
-	};
-
-	return (
-		<div>
-			<ControlContainer style={ { marginBottom: 2 } }>
-				<FlexItem>
-					<UnitControl
-						{ ...unitControlProps.top }
-						{ ...props }
-						label={ labels.top }
-						onFocus={ () => handleOnSelect( 'top' ) }
-						placeholder=""
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						{ ...unitControlProps.right }
-						{ ...props }
-						label={ labels.right }
-						onFocus={ () => handleOnSelect( 'right' ) }
-						placeholder=""
-					/>
-				</FlexItem>
-			</ControlContainer>
-			<ControlContainer isReversed>
-				<FlexItem>
-					<UnitControl
-						{ ...unitControlProps.bottom }
-						{ ...props }
-						label={ labels.bottom }
-						onFocus={ () => handleOnSelect( 'bottom' ) }
-						placeholder=""
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						{ ...unitControlProps.left }
-						{ ...props }
-						label={ labels.left }
-						onFocus={ () => handleOnSelect( 'left' ) }
-						placeholder=""
-					/>
-				</FlexItem>
-			</ControlContainer>
-		</div>
-	);
-}
-
-function ControlContainer( { children, ...props } ) {
-	return (
-		<Flex align="top" justify="left" gap={ 0.5 } { ...props }>
-			{ children }
-		</Flex>
-	);
-}
-
-function useCustomUnitControlProps( { values, onChange = noop } ) {
-	const valueKeys = Object.keys( values );
-	const props = {};
-
-	valueKeys.forEach( ( key ) => {
-		const [ value, unit ] = values[ key ];
-
-		const handleOnChange = ( next ) => {
-			onChange( { [ key ]: [ next, unit ] } );
-		};
-
-		const handleOnUnitChange = ( next ) => {
-			onChange( { [ key ]: [ value, next ] } );
-		};
-
-		props[ key ] = {
-			value,
-			unit,
-			onChange: handleOnChange,
-			onUnitChange: handleOnUnitChange,
-		};
-	} );
-
-	return props;
-}
-
-function BoxTypeDropdown( { onChange = noop, onSelect = noop, icon, type } ) {
-	const icons = {
-		all: <BoxControlIcon sides={ TYPE_PROPS.all.sides } />,
-		pairs: <BoxControlIcon sides={ TYPE_PROPS.pairs.sides } />,
-		custom: <BoxControlIcon sides={ TYPE_PROPS.custom.sides } />,
-		vertical: <BoxControlIcon sides={ [ 'top', 'bottom' ] } />,
-		horizontal: <BoxControlIcon sides={ [ 'left', 'right' ] } />,
-		top: <BoxControlIcon sides={ [ 'top' ] } />,
-		right: <BoxControlIcon sides={ [ 'right' ] } />,
-		bottom: <BoxControlIcon sides={ [ 'bottom' ] } />,
-		left: <BoxControlIcon sides={ [ 'left' ] } />,
-	};
-
-	const handleOnChange = ( next ) => {
-		onChange( next );
-		onSelect( next );
-	};
-
-	const options = [
-		{
-			title: TYPE_PROPS.all.label,
-			value: 'all',
-			icon: <DropdownIconWrapper>{ icons.all }</DropdownIconWrapper>,
-			onClick: () => handleOnChange( 'all' ),
-			isActive: type === 'all',
-		},
-		{
-			title: TYPE_PROPS.pairs.label,
-			value: 'pairs',
-			icon: <DropdownIconWrapper>{ icons.pairs }</DropdownIconWrapper>,
-			onClick: () => handleOnChange( 'pairs' ),
-			isActive: type === 'pairs',
-		},
-		{
-			title: TYPE_PROPS.custom.label,
-			value: 'custom',
-			icon: <DropdownIconWrapper>{ icons.custom }</DropdownIconWrapper>,
-			onClick: () => handleOnChange( 'custom' ),
-			isActive: type === 'custom',
-		},
-	];
-
-	const dropdownIcon = (
-		<DropdownButton gap={ 0 }>
-			{ icons[ icon ] }
-			<Icon icon={ chevronDown } size={ 16 } />
-		</DropdownButton>
-	);
-
-	const toggleProps = {
-		children: dropdownIcon,
-		isSmall: true,
-		style: {
-			height: 30,
-			lineHeight: 28,
-		},
-	};
-
-	return (
-		<DropdownMenu
-			controls={ options }
-			icon={ null }
-			popoverProps={ { position: 'bottom' } }
-			toggleProps={ toggleProps }
-		/>
-	);
-}
-
-// function BoxTypeControl( {
-// 	label = 'Box Control',
-// 	onChange = noop,
-// 	type = 'all',
-// } ) {
-// 	const radio = useRadioState( { state: type } );
-
-// 	useEffect( () => {
-// 		onChange( radio.state );
-// 	}, [ radio.state ] );
-
-// 	return (
-// 		<RadioGroup { ...radio } as={ ButtonGroup } aria-label={ label }>
-// 			{ types.map( ( value ) => {
-// 				const valueProps = TYPE_PROPS[ value ];
-// 				const isSelected = radio.state === value;
-
-// 				return (
-// 					<Tooltip key={ value } text={ valueProps.label }>
-// 						<Radio
-// 							{ ...radio }
-// 							as={ Button }
-// 							isPrimary={ isSelected }
-// 							value={ value }
-// 						>
-// 							<BoxControlIcon sides={ valueProps.sides } />
-// 						</Radio>
-// 					</Tooltip>
-// 				);
-// 			} ) }
-// 		</RadioGroup>
-// 	);
-// }
-
-function UnitControl( { onChange, label, ...props } ) {
-	const handleOnChange = ( nextValue ) => {
-		const value = parseFloat( nextValue );
-		onChange( isNaN( value ) ? nextValue : value );
-	};
-
-	return (
-		<Tooltip text={ label }>
-			<UnitControlWrapper aria-label={ label }>
-				<BaseUnitControl
-					isResetValueOnUnitChange={ false }
-					onChange={ handleOnChange }
-					{ ...props }
-				/>
-			</UnitControlWrapper>
-		</Tooltip>
-	);
-}
-
-const Root = styled.div`
-	max-width: 280px;
-`;
-
-const Header = styled( Flex )`
-	margin-bottom: 8px;
-`;
-
-const UnitControlWrapper = styled.div`
-	box-sizing: border-box;
-	max-width: 75px;
-`;
-
-// const ButtonGroup = styled( BaseButtonGroup )`
-// 	display: flex;
-// 	margin: 0;
-// `;
-
-const DropdownButton = styled( Flex )`
-	margin: 0 -4px;
-`;
-
-const DropdownIconWrapper = styled.div`
-	margin-right: 8px;
-`;
-
-const LayoutContainer = styled( Flex )`
-	height: 120px;
-	justify-content: center;
-	padding-bottom: 16px;
-`;
-
-const GridUI = styled.div`
-	position: relative;
-	height: 120px;
-	width: 200px;
-`;
-
-const GridIndicator = styled.div`
-	height: 14px;
-	border-left: 1px dashed dodgerblue;
-	width: 0;
-	position: absolute;
-
-	&::before {
-		content: '';
-		position: absolute;
-		width: 7px;
-		height: 0;
-		border-top: 1px dashed dodgerblue;
-		top: 0;
-		left: -4px;
-	}
-	&::after {
-		content: '';
-		position: absolute;
-		width: 7px;
-		height: 0;
-		border-top: 1px dashed dodgerblue;
-		bottom: 0;
-		left: -4px;
-	}
-`;
-
 BoxControl.__Visualizer = Visualizer;
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
new file mode 100644
index 00000000000000..d7bcd6cd49cf8c
--- /dev/null
+++ b/packages/components/src/box-control/input-controls.js
@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import UnitControl from './unit-control';
+import { getValues } from './utils';
+import { Layout, LayoutBox, SideIndicator } from './styles/box-control-styles';
+import { useRtl } from '../utils/style-mixins';
+
+export default function BoxInputControls( {
+	onChange = noop,
+	values,
+	...props
+} ) {
+	const {
+		top: [ top, unit ],
+		right: [ right ],
+		bottom: [ bottom ],
+		left: [ left ],
+	} = values;
+
+	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
+	const isMixed = ! allValues.every( ( v ) => v === top );
+	const isRtl = useRtl();
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		onChange( { ...values, [ side ]: [ next, unit ] } );
+	};
+
+	const baseStyles = {
+		position: 'absolute',
+		zIndex: 1,
+		maxWidth: 60,
+	};
+
+	return (
+		<Layout>
+			<SideIndicator
+				style={ {
+					left: '50%',
+					top: '50%',
+					transform: 'translate(0, -30px)',
+				} }
+			/>
+			<SideIndicator
+				style={ {
+					left: '50%',
+					top: '0%',
+					height: '75%',
+					transform: 'rotate(-90deg) translate(-15px, 0px)',
+				} }
+			/>
+			<LayoutBox />
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ top }
+				onChange={ createHandleOnChange( 'top' ) }
+				label="Top"
+				size="small"
+				style={ {
+					...baseStyles,
+					left: '50%',
+					top: -5,
+					transform: 'translateX(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ right }
+				onChange={ createHandleOnChange( 'right' ) }
+				label="Right"
+				size="small"
+				style={ {
+					...baseStyles,
+					[ isRtl ? 'left' : 'right' ]: 0,
+					top: '50%',
+					transform: 'translateY(calc(-50% - 3px))',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ bottom }
+				onChange={ createHandleOnChange( 'bottom' ) }
+				label="Bottom"
+				size="small"
+				style={ {
+					...baseStyles,
+					left: '50%',
+					bottom: 0,
+					transform: 'translateX(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ left }
+				onChange={ createHandleOnChange( 'left' ) }
+				label="Left"
+				size="small"
+				style={ {
+					...baseStyles,
+					position: 'absolute',
+					[ isRtl ? 'right' : 'left' ]: 0,
+					top: '50%',
+					transform: 'translateY(calc(-50% - 3px))',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disableUnits
+				value={ isMixed ? '' : top }
+				onChange={ ( next ) => {
+					onChange( {
+						top: [ next, unit ],
+						right: [ next, unit ],
+						bottom: [ next, unit ],
+						left: [ next, unit ],
+					} );
+				} }
+				label="All"
+				size="small"
+				style={ {
+					...baseStyles,
+					left: '50%',
+					top: '50%',
+					transform: 'translate(-50%, calc(-50% - 3px))',
+				} }
+			/>
+		</Layout>
+	);
+}
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
new file mode 100644
index 00000000000000..0737c61f2034e5
--- /dev/null
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../../flex';
+import { color } from '../../utils/style-mixins';
+
+export const Root = styled.div`
+	max-width: 280px;
+`;
+
+export const Header = styled( Flex )`
+	margin-bottom: 8px;
+`;
+
+export const UnitControlWrapper = styled.div`
+	box-sizing: border-box;
+	max-width: 75px;
+`;
+
+export const LayoutContainer = styled( Flex )`
+	height: 120px;
+	justify-content: center;
+	padding-bottom: 16px;
+`;
+
+export const Layout = styled.div`
+	box-sizing: border-box;
+	position: relative;
+	height: 120px;
+	width: 200px;
+`;
+
+export const LayoutBox = styled.div`
+	position: absolute;
+	box-sizing: border-box;
+	top: 12px;
+	bottom: 12px;
+	left: 30px;
+	right: 30px;
+	pointer-events: none;
+	border: 1px solid ${color( 'ui.borderLight' )};
+`;
+
+export const SideIndicator = styled.div`
+	height: 50%;
+	border-left: 1px dashed ${color( 'ui.borderLight' )};
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+`;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
new file mode 100644
index 00000000000000..c15371c01d24dd
--- /dev/null
+++ b/packages/components/src/box-control/unit-control.js
@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import BaseUnitControl from '../unit-control';
+import { UnitControlWrapper } from './styles/box-control-styles';
+
+export default function BoxUnitControl( { onChange, label, ...props } ) {
+	const handleOnChange = ( nextValue ) => {
+		const value = parseFloat( nextValue );
+		onChange( isNaN( value ) ? nextValue : value );
+	};
+
+	return (
+		<UnitControlWrapper aria-label={ label }>
+			<BaseUnitControl
+				label={ label }
+				isResetValueOnUnitChange={ false }
+				onChange={ handleOnChange }
+				{ ...props }
+			/>
+		</UnitControlWrapper>
+	);
+}
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 5c09be501f12f2..b1b57574b6a870 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -1,25 +1,5 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 export const TYPES = [ 'all', 'pairs', 'custom' ];
 
-export const TYPE_PROPS = {
-	all: {
-		sides: [ 'all' ],
-		label: __( 'All sides' ),
-	},
-	pairs: {
-		sides: [ 'top', 'bottom' ],
-		label: __( 'Pair of sides' ),
-	},
-	custom: {
-		sides: [ 'top' ],
-		label: __( 'Individual sides' ),
-	},
-};
-
 export const DEFAULT_VALUES = {
 	top: [ 0, 'px' ],
 	right: [ 0, 'px' ],
@@ -27,36 +7,6 @@ export const DEFAULT_VALUES = {
 	left: [ 0, 'px' ],
 };
 
-export const parseType = ( values = {} ) => {
-	const {
-		top: [ top ],
-		bottom: [ bottom ],
-		left: [ left ],
-		right: [ right ],
-	} = parseValues( values );
-
-	const isAll = [ top, bottom, left, right ].every(
-		( value ) => value === top
-	);
-
-	if ( isAll ) {
-		return 'all';
-	}
-
-	const isVerticalMatch = [ top, bottom ].every( ( value ) => value === top );
-	const isHorizontalMatch = [ left, right ].every(
-		( value ) => value === left
-	);
-
-	const isPairs = isVerticalMatch && isHorizontalMatch;
-
-	if ( isPairs ) {
-		return 'pairs';
-	}
-
-	return 'custom';
-};
-
 export function parseValues( values = {} ) {
 	const nextValueProps = {};
 
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
new file mode 100644
index 00000000000000..f0c6a8b7105424
--- /dev/null
+++ b/packages/components/src/input-control/index.js
@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import {
+	Container,
+	Fieldset,
+	Input,
+	Label,
+	Legend,
+	LegendText,
+	Root,
+} from './styles/input-control-styles';
+
+function useControlledState( initialState ) {
+	const [ state, setState ] = useState( initialState );
+	const stateRef = useRef( initialState );
+
+	useEffect( () => {
+		if ( initialState !== stateRef.current ) {
+			setState( initialState );
+			stateRef.current = initialState;
+		}
+	}, [ initialState ] );
+
+	return [ state, setState ];
+}
+
+function useUniqueId( idProp ) {
+	const instanceId = useInstanceId( InputControl );
+	const id = `inspector-input-control-${ instanceId }`;
+
+	return idProp || id;
+}
+
+function isEmpty( value ) {
+	const isNullish = typeof value === 'undefined' || value === null;
+	const isEmptyString = value === '';
+
+	return isNullish || isEmptyString;
+}
+
+export function InputControl(
+	{
+		children,
+		className,
+		onBlur = noop,
+		onChange = noop,
+		onFocus = noop,
+		id: idProp,
+		isFloatingLabel = true,
+		label,
+		size = 'default',
+		value: valueProp,
+		...props
+	},
+	ref
+) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const [ value, setValue ] = useControlledState( valueProp );
+	const id = useUniqueId( idProp );
+	const classes = classNames( 'component-input-control', className );
+
+	const handleOnBlur = ( event ) => {
+		onBlur( event );
+		setIsFocused( false );
+	};
+
+	const handleOnFocus = ( event ) => {
+		onFocus( event );
+		setIsFocused( true );
+	};
+
+	const handleOnChange = ( event ) => {
+		const nextValue = event.target.value;
+
+		onChange( nextValue, { event } );
+		setValue( nextValue );
+	};
+
+	const isFilled = ! isEmpty( value );
+	const isFloating = isFloatingLabel ? isFilled || isFocused : false;
+	const isFloatingLabelSet = isFloatingLabel && label;
+
+	return (
+		<Root isFloatingLabel={ isFloatingLabelSet }>
+			{ label && (
+				<Label
+					htmlFor={ id }
+					isFloatingLabel={ isFloatingLabel }
+					isFilled={ isFilled }
+					isFloating={ isFloating }
+					size={ size }
+				>
+					{ label }
+				</Label>
+			) }
+			<Container isFocused={ isFocused }>
+				<Input
+					{ ...props }
+					className={ classes }
+					id={ id }
+					isFilled={ isFilled }
+					isFloating={ isFloating }
+					isFloatingLabel={ isFloatingLabel }
+					onBlur={ handleOnBlur }
+					onChange={ handleOnChange }
+					onFocus={ handleOnFocus }
+					ref={ ref }
+					size={ size }
+					value={ value }
+				/>
+				<Fieldset
+					isFloatingLabel={ isFloatingLabelSet }
+					isFocused={ isFocused }
+				>
+					{ isFloatingLabelSet && (
+						<Legend isFloating={ isFloating }>
+							<LegendText>{ label }</LegendText>
+						</Legend>
+					) }
+				</Fieldset>
+				{ children }
+			</Container>
+		</Root>
+	);
+}
+
+export default forwardRef( InputControl );
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
new file mode 100644
index 00000000000000..18959aab149c74
--- /dev/null
+++ b/packages/components/src/input-control/stories/index.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { boolean, select, text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InputControl from '../';
+
+export default {
+	title: 'Components/InputControl',
+	component: InputControl,
+};
+
+function Example() {
+	const [ value, setValue ] = useState( '' );
+
+	const props = {
+		isFloatingLabel: boolean( 'isFloatingLabel', false ),
+		label: text( 'label', 'Value' ),
+		placeholder: text( 'placeholder', 'Placeholder' ),
+		size: select(
+			'size',
+			{
+				default: 'default',
+				small: 'small',
+			},
+			'default'
+		),
+	};
+
+	return (
+		<InputControl
+			{ ...props }
+			value={ value }
+			onChange={ ( v ) => setValue( v ) }
+		/>
+	);
+}
+
+export const _default = () => {
+	return <Example />;
+};
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
new file mode 100644
index 00000000000000..7954b6fd694448
--- /dev/null
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -0,0 +1,240 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { color, rtl, reduceMotion } from '../../utils/style-mixins';
+
+const rootFloatLabelStyles = ( { isFloatingLabel } ) => {
+	const paddingTop = isFloatingLabel ? 5 : 0;
+	return css( { paddingTop } );
+};
+
+export const Root = styled.div`
+	box-sizing: border-box;
+	position: relative;
+	border-radius: 2px;
+	${rootFloatLabelStyles};
+`;
+
+const containerBorder = ( { isFocused } ) => {
+	const borderRadius = isFocused ? 3 : 2;
+
+	return css( { borderRadius } );
+};
+
+export const Container = styled.div`
+	box-sizing: border-box;
+	position: relative;
+	${containerBorder};
+`;
+
+const fontSizeStyles = ( { size } ) => {
+	const sizes = {
+		default: '13px',
+		small: '11px',
+	};
+
+	const fontSize = sizes[ size ];
+	const fontSizeMobile = '16px';
+
+	if ( ! fontSize ) return '';
+
+	return css`
+		font-size: ${fontSizeMobile};
+
+		@media ( min-width: 600px ) {
+			font-size: ${fontSize};
+		}
+	`;
+};
+
+const sizeStyles = ( { size } ) => {
+	const sizes = {
+		default: {
+			height: 30,
+			lineHeight: 30,
+			minHeight: 30,
+		},
+		small: {
+			height: 24,
+			lineHeight: 24,
+			minHeight: 24,
+		},
+	};
+
+	const style = sizes[ size ] || sizes.default;
+
+	return css( style );
+};
+
+const placeholderStyles = ( { isFilled, isFloating, isFloatingLabel } ) => {
+	let opacity = 1;
+
+	if ( isFloatingLabel ) {
+		if ( ! isFilled && ! isFloating ) {
+			opacity = 0;
+		}
+	}
+
+	return css`
+		&::placeholder {
+			opacity: ${opacity};
+		}
+	`;
+};
+
+// TODO: Resolve need to use &&& to increase specificity
+// https://github.com/WordPress/gutenberg/issues/18483
+
+export const Input = styled.input`
+	&&& {
+		box-sizing: border-box;
+		border: none !important;
+		box-shadow: none !important;
+		display: block;
+		outline: none;
+		padding-left: 8px !important;
+		padding-right: 8px !important;
+		width: 100%;
+
+		${fontSizeStyles};
+		${sizeStyles};
+
+		${placeholderStyles};
+	}
+`;
+
+const laberColor = ( { isFloatingLabel, isFilled, isFloating } ) => {
+	const isPlaceholder = isFloatingLabel && ! isFilled;
+	const textColor =
+		isPlaceholder || isFloating ? color( 'lightGray.900' ) : 'currentColor';
+
+	return css( { color: textColor } );
+};
+
+const labelFontSize = ( { size } ) => {
+	const sizes = {
+		default: '13px',
+		small: '11px',
+	};
+	const fontSize = sizes[ size ];
+
+	return css( { fontSize } );
+};
+
+const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
+	const paddingBottom = isFloatingLabel ? 0 : 4;
+	const position = isFloatingLabel ? 'absolute' : null;
+	const pointerEvents = isFloating ? null : 'none';
+
+	const marginTop = isFloating ? 0 : 2;
+	const offset = size === 'small' ? '-2px' : '-5px';
+
+	let transform = isFloating
+		? `translate( 0, calc(-100% + ${ offset }) ) scale( 0.75 )`
+		: 'translate( 0, -50%) scale(1)';
+
+	if ( ! isFloatingLabel ) {
+		transform = null;
+	}
+
+	const transition = isFloatingLabel ? 'transform 50ms linear' : null;
+
+	return css(
+		{
+			marginTop,
+			paddingBottom,
+			position,
+			pointerEvents,
+			transition,
+			transform,
+		},
+		rtl( { marginLeft: 8 } )(),
+		rtl(
+			{ transformOrigin: 'top left' },
+			{ transformOrigin: 'top right' }
+		)()
+	);
+};
+
+export const Label = styled.label`
+	box-sizing: border-box;
+	display: block;
+	top: 50%;
+	transition: transform 50ms linear;
+	z-index: 1;
+
+	${laberColor};
+	${labelFontSize};
+	${labelPosition};
+	${reduceMotion( 'transition' )};
+
+	${rtl( { left: 0 } )}
+`;
+
+const fieldsetTopStyles = ( { isFloatingLabel } ) => {
+	const top = isFloatingLabel ? -5 : 0;
+	return css( { top } );
+};
+
+const fieldsetFocusedStyles = ( { isFocused } ) => {
+	const borderColor = isFocused
+		? color( 'ui.borderFocus' )
+		: color( 'ui.border' );
+
+	const borderWidth = isFocused ? 2 : 1;
+
+	return css( { borderColor, borderWidth } );
+};
+
+export const Fieldset = styled.fieldset`
+	box-sizing: border-box;
+	border-color: black;
+	border-radius: inherit;
+	border-style: solid;
+	border-width: 1px;
+	bottom: 0;
+	left: 0;
+	margin: 0;
+	padding: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+
+	${fieldsetFocusedStyles};
+	${fieldsetTopStyles};
+	${rtl( { paddingLeft: 2 } )}
+`;
+
+const legendWidth = ( { isFloating } ) => {
+	const maxWidth = isFloating ? 1000 : 0.01;
+	return css( {
+		maxWidth,
+	} );
+};
+
+export const Legend = styled.legend`
+	box-sizing: border-box;
+	width: auto;
+	height: 11px;
+	display: block;
+	padding: 0;
+	font-size: 0.75em;
+	transition: max-width 50ms linear;
+	visibility: hidden;
+
+	${legendWidth};
+	${reduceMotion( 'transition' )};
+`;
+
+export const LegendText = styled.span`
+	box-sizing: border-box;
+	display: inline-block;
+	padding-left: 4px;
+	padding-right: 4px;
+`;
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 38c6c6eca3dfd7..f2433e22ec4f0d 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -16,6 +16,7 @@ import { UP, DOWN } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
+import InputControl from '../input-control';
 import {
 	DRAG_CURSOR,
 	useDragCursor,
@@ -27,6 +28,7 @@ import {
 export function NumberControl(
 	{
 		className,
+		label,
 		dragAxis = 'y',
 		dragThreshold = 10,
 		isDragEnabled = true,
@@ -131,8 +133,8 @@ export function NumberControl(
 		}
 	};
 
-	const handleOnChange = ( event ) => {
-		onChange( event.target.value, { event } );
+	const handleOnChange = ( value, { event } ) => {
+		onChange( value, { event } );
 	};
 
 	const classes = classNames( 'component-number-control', className );
@@ -148,6 +150,7 @@ export function NumberControl(
 			{ ...props }
 			{ ...dragGestureProps() }
 			className={ classes }
+			label={ label }
 			isDragging={ isDragging }
 			ref={ ref }
 			onChange={ handleOnChange }
@@ -173,7 +176,7 @@ const dragStyles = ( { isDragging } ) => {
 	`;
 };
 
-const Input = styled.input`
+const Input = styled( InputControl )`
 	${dragStyles};
 `;
 
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
index 859afe27fc867c..c7b0589568b7fa 100644
--- a/packages/components/src/number-control/stories/index.js
+++ b/packages/components/src/number-control/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { boolean, number } from '@storybook/addon-knobs';
+import { boolean, number, text } from '@storybook/addon-knobs';
 
 /**
  * WordPress dependencies
@@ -22,6 +22,7 @@ function Example() {
 	const [ value, setValue ] = useState( '' );
 
 	const props = {
+		label: text( 'label', 'Number' ),
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		shiftStep: number( 'shiftStep', 10 ),
 		step: number( 'step', 1 ),
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index b82c55745c059c..dbf15476dfc5d3 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -52,21 +52,23 @@ function UnitControl(
 				{ ...props }
 				disableUnits={ disableUnits }
 				className="component-unit-control__input"
+				label={ label }
 				value={ value }
 				onChange={ onChange }
 				size={ size }
 				type="number"
-			/>
-			{ ! disableUnits && (
-				<UnitSelectControl
-					className="component-unit-control__select"
-					isTabbable={ isUnitSelectTabbable }
-					options={ units }
-					onChange={ handleOnUnitChange }
-					size={ size }
-					value={ unit }
-				/>
-			) }
+			>
+				{ ! disableUnits && (
+					<UnitSelectControl
+						className="component-unit-control__select"
+						isTabbable={ isUnitSelectTabbable }
+						options={ units }
+						onChange={ handleOnUnitChange }
+						size={ size }
+						value={ unit }
+					/>
+				) }
+			</ValueInput>
 		</Root>
 	);
 }
diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index 2aab99180fd39c..f95f7641ab0389 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { boolean, number, select } from '@storybook/addon-knobs';
+import { boolean, number, select, text } from '@storybook/addon-knobs';
 import styled from '@emotion/styled';
 
 /**
@@ -26,6 +26,7 @@ function Example() {
 	const props = {
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		isUnitSelectTabbable: boolean( 'isUnitSelectTabbable', true ),
+		label: text( 'label', 'Value' ),
 		shiftStep: number( 'shiftStep', 10 ),
 		max: number( 'max', 100 ),
 		min: number( 'min', 0 ),
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 9d369fe1e80605..71870b0961416a 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -14,42 +14,6 @@ export const Root = styled.div`
 	position: relative;
 `;
 
-const fontSizeStyles = ( { size } ) => {
-	const sizes = {
-		default: null,
-		small: '11px',
-	};
-
-	const fontSize = sizes[ size ];
-
-	if ( ! fontSize ) return '';
-
-	return css`
-		@media ( min-width: 600px ) {
-			font-size: ${fontSize};
-		}
-	`;
-};
-
-const sizeStyles = ( { size } ) => {
-	const sizes = {
-		default: {
-			height: 30,
-			lineHeight: 30,
-			minHeight: 30,
-		},
-		small: {
-			height: 24,
-			lineHeight: 24,
-			minHeight: 24,
-		},
-	};
-
-	const style = sizes[ size ] || sizes.default;
-
-	return css( style );
-};
-
 const paddingStyles = ( { disableUnits } ) => {
 	const value = disableUnits ? 3 : 20;
 
@@ -84,9 +48,6 @@ export const ValueInput = styled( NumberControl )`
 		display: block;
 		width: 100%;
 
-		${fontSizeStyles};
-		${sizeStyles};
-
 		${arrowStyles};
 		${paddingStyles};
 	}
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index 26344df68a9d95..0ce36cca9384a4 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,3 +1,3 @@
 export { color, rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
-export { rtl } from './rtl';
+export { rtl, useRtl } from './rtl';

From 21efbac1e642931bcf9a88dd560296803ee585e1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 16:20:25 -0400
Subject: [PATCH 017/103] Adjust UI for BoxControl + InputControl labels

---
 .../components/src/box-control/styles/box-control-styles.js  | 2 +-
 .../src/input-control/styles/input-control-styles.js         | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 0737c61f2034e5..81af7db0f76bf7 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -9,7 +9,7 @@ import { Flex } from '../../flex';
 import { color } from '../../utils/style-mixins';
 
 export const Root = styled.div`
-	max-width: 280px;
+	max-width: 300px;
 `;
 
 export const Header = styled( Flex )`
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 7954b6fd694448..fb89a259e154c0 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -117,14 +117,15 @@ const laberColor = ( { isFloatingLabel, isFilled, isFloating } ) => {
 	return css( { color: textColor } );
 };
 
-const labelFontSize = ( { size } ) => {
+const labelFontSize = ( { isFloatingLabel, size } ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
 	};
 	const fontSize = sizes[ size ];
+	const lineHeight = isFloatingLabel ? 1 : null;
 
-	return css( { fontSize } );
+	return css( { fontSize, lineHeight } );
 };
 
 const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {

From cd8c007504b1f695d7c0c341e87abd3f678fe158 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 16:59:03 -0400
Subject: [PATCH 018/103] Fix tests

---
 packages/components/src/index.js              |  1 +
 .../components/src/input-control/index.js     | 24 +-----
 .../components/src/input-control/utils.js     | 25 +++++++
 .../src/number-control/test/index.js          | 74 ++++++++++++++-----
 .../components/src/number-control/utils.js    |  7 +-
 packages/components/src/unit-control/index.js |  2 +-
 6 files changed, 87 insertions(+), 46 deletions(-)
 create mode 100644 packages/components/src/input-control/utils.js

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 4410c5e4b2256f..a99e2f7d1e0f7a 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -59,6 +59,7 @@ export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
 export { default as Icon } from './icon';
 export { default as IconButton } from './button/deprecated';
+export { default as __experimentalInputControl } from './input-control';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index f0c6a8b7105424..cd1c65b3202f44 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -8,7 +8,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -21,20 +21,7 @@ import {
 	LegendText,
 	Root,
 } from './styles/input-control-styles';
-
-function useControlledState( initialState ) {
-	const [ state, setState ] = useState( initialState );
-	const stateRef = useRef( initialState );
-
-	useEffect( () => {
-		if ( initialState !== stateRef.current ) {
-			setState( initialState );
-			stateRef.current = initialState;
-		}
-	}, [ initialState ] );
-
-	return [ state, setState ];
-}
+import { useControlledState, isEmpty } from './utils';
 
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( InputControl );
@@ -43,13 +30,6 @@ function useUniqueId( idProp ) {
 	return idProp || id;
 }
 
-function isEmpty( value ) {
-	const isNullish = typeof value === 'undefined' || value === null;
-	const isEmptyString = value === '';
-
-	return isNullish || isEmptyString;
-}
-
 export function InputControl(
 	{
 		children,
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
new file mode 100644
index 00000000000000..db2f75f5f7f3db
--- /dev/null
+++ b/packages/components/src/input-control/utils.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+
+export function useControlledState( initialState ) {
+	const [ state, setState ] = useState( initialState );
+	const stateRef = useRef( initialState );
+
+	useEffect( () => {
+		if ( initialState !== stateRef.current ) {
+			setState( initialState );
+			stateRef.current = initialState;
+		}
+	}, [ initialState ] );
+
+	return [ state, setState ];
+}
+
+export function isEmpty( value ) {
+	const isNullish = typeof value === 'undefined' || value === null;
+	const isEmptyString = value === '';
+
+	return isNullish || isEmptyString;
+}
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index c946ba12aeb048..182ae932507fcd 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -81,7 +81,10 @@ describe( 'NumberControl', () => {
 			const input = getInput();
 
 			input.value = 10;
-			Simulate.change( input );
+
+			act( () => {
+				Simulate.change( input );
+			} );
 
 			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( '10' );
 		} );
@@ -99,7 +102,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP } );
+			} );
 
 			expect( spy ).toHaveBeenCalled();
 		} );
@@ -111,7 +116,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP } );
+			} );
 
 			expect( input.value ).toBe( '6' );
 		} );
@@ -123,21 +130,28 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP } );
+			} );
 
 			expect( input.value ).toBe( '-4' );
 		} );
 
 		it( 'should increment by shiftStep on key UP + shift press', () => {
 			act( () => {
-				render( <StatefulNumberControl value={ 5 } />, container );
+				render(
+					<StatefulNumberControl value={ 5 } shiftStep={ 10 } />,
+					container
+				);
 			} );
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			} );
 
-			expect( input.value ).toBe( '15' );
+			expect( input.value ).toBe( '20' );
 		} );
 
 		it( 'should increment by custom shiftStep on key UP + shift press', () => {
@@ -150,9 +164,11 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			} );
 
-			expect( input.value ).toBe( '105' );
+			expect( input.value ).toBe( '100' );
 		} );
 
 		it( 'should increment but be limited by max on shiftStep', () => {
@@ -169,7 +185,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			} );
 
 			expect( input.value ).toBe( '99' );
 		} );
@@ -188,7 +206,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
+			} );
 
 			expect( input.value ).toBe( '6' );
 		} );
@@ -206,7 +226,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN } );
+			} );
 
 			expect( spy ).toHaveBeenCalled();
 		} );
@@ -218,7 +240,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN } );
+			} );
 
 			expect( input.value ).toBe( '4' );
 		} );
@@ -230,7 +254,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN } );
+			} );
 
 			expect( input.value ).toBe( '-6' );
 		} );
@@ -242,9 +268,11 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			} );
 
-			expect( input.value ).toBe( '-5' );
+			expect( input.value ).toBe( '0' );
 		} );
 
 		it( 'should decrement by custom shiftStep on key DOWN + shift press', () => {
@@ -257,9 +285,11 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			} );
 
-			expect( input.value ).toBe( '-95' );
+			expect( input.value ).toBe( '-100' );
 		} );
 
 		it( 'should decrement but be limited by min on shiftStep', () => {
@@ -276,7 +306,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			} );
 
 			expect( input.value ).toBe( '4' );
 		} );
@@ -295,7 +327,9 @@ describe( 'NumberControl', () => {
 
 			const input = getInput();
 
-			Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			act( () => {
+				Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
+			} );
 
 			expect( input.value ).toBe( '4' );
 		} );
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index fdcbc079dcba71..be839f1ec3f2d6 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -42,11 +42,12 @@ export function roundClamp(
 	max = Infinity,
 	step = 1
 ) {
-	const clampedValue = clamp( getValue( value ), min, max );
+	const baseValue = getValue( value );
 	const stepValue = getValue( step );
-	const rounded = Math.round( clampedValue / stepValue ) * stepValue;
+	const rounded = Math.round( baseValue / stepValue ) * stepValue;
+	const clampedValue = clamp( rounded, min, max );
 
-	return rounded;
+	return clampedValue;
 }
 
 export function roundClampString( ...args ) {
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index dbf15476dfc5d3..a614919a888aff 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -38,7 +38,7 @@ function UnitControl(
 		const { data } = changeProps;
 		onUnitChange( unitValue, changeProps );
 
-		if ( isResetValueOnUnitChange && ! data.default === undefined ) {
+		if ( isResetValueOnUnitChange && data.default !== undefined ) {
 			onChange( data.default, changeProps );
 		}
 	};

From 0acb9eec3aec2412a5d7b0220fa323addb9155c0 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 19:33:09 -0400
Subject: [PATCH 019/103] Increase CSS scope. Minor label UI adjustments.

---
 .../components/src/input-control/index.js     |   2 +-
 .../styles/input-control-styles.js            | 105 ++++++++++--------
 2 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index cd1c65b3202f44..cd53d6f0d941ef 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -105,7 +105,7 @@ export function InputControl(
 					isFocused={ isFocused }
 				>
 					{ isFloatingLabelSet && (
-						<Legend isFloating={ isFloating }>
+						<Legend isFloating={ isFloating } size={ size }>
 							<LegendText>{ label }</LegendText>
 						</Legend>
 					) }
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index fb89a259e154c0..18835ffe9dada9 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -9,6 +9,8 @@ import styled from '@emotion/styled';
  */
 import { color, rtl, reduceMotion } from '../../utils/style-mixins';
 
+const FLOATING_LABEL_TRANSITION_SPEED = '60ms';
+
 const rootFloatLabelStyles = ( { isFloatingLabel } ) => {
 	const paddingTop = isFloatingLabel ? 5 : 0;
 	return css( { paddingTop } );
@@ -133,8 +135,8 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 	const position = isFloatingLabel ? 'absolute' : null;
 	const pointerEvents = isFloating ? null : 'none';
 
-	const marginTop = isFloating ? 0 : 2;
-	const offset = size === 'small' ? '-2px' : '-5px';
+	const marginTop = isFloating ? 0 : 1;
+	const offset = size === 'small' ? '-3px' : '-5px';
 
 	let transform = isFloating
 		? `translate( 0, calc(-100% + ${ offset }) ) scale( 0.75 )`
@@ -144,7 +146,9 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 		transform = null;
 	}
 
-	const transition = isFloatingLabel ? 'transform 50ms linear' : null;
+	const transition = isFloatingLabel
+		? `transform ${ FLOATING_LABEL_TRANSITION_SPEED } linear`
+		: null;
 
 	return css(
 		{
@@ -164,18 +168,21 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 };
 
 export const Label = styled.label`
-	box-sizing: border-box;
-	display: block;
-	top: 50%;
-	transition: transform 50ms linear;
-	z-index: 1;
+	&&& {
+		box-sizing: border-box;
+		display: block;
+		margin: 0;
+		top: 50%;
+		transition: transform ${FLOATING_LABEL_TRANSITION_SPEED} linear;
+		z-index: 1;
 
-	${laberColor};
-	${labelFontSize};
-	${labelPosition};
-	${reduceMotion( 'transition' )};
+		${laberColor};
+		${labelFontSize};
+		${labelPosition};
+		${reduceMotion( 'transition' )};
 
-	${rtl( { left: 0 } )}
+		${rtl( { left: 0 } )}
+	}
 `;
 
 const fieldsetTopStyles = ( { isFloatingLabel } ) => {
@@ -189,53 +196,63 @@ const fieldsetFocusedStyles = ( { isFocused } ) => {
 		: color( 'ui.border' );
 
 	const borderWidth = isFocused ? 2 : 1;
+	const borderStyle = 'solid';
 
-	return css( { borderColor, borderWidth } );
+	return css( { borderColor, borderStyle, borderWidth } );
 };
 
 export const Fieldset = styled.fieldset`
-	box-sizing: border-box;
-	border-color: black;
-	border-radius: inherit;
-	border-style: solid;
-	border-width: 1px;
-	bottom: 0;
-	left: 0;
-	margin: 0;
-	padding: 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-
-	${fieldsetFocusedStyles};
-	${fieldsetTopStyles};
-	${rtl( { paddingLeft: 2 } )}
+	&&& {
+		box-sizing: border-box;
+		border-radius: inherit;
+		bottom: 0;
+		left: 0;
+		margin: 0;
+		padding: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+
+		${fieldsetFocusedStyles};
+		${fieldsetTopStyles};
+		${rtl( { paddingLeft: 2 } )}
+	}
 `;
 
-const legendWidth = ( { isFloating } ) => {
+const legendSize = ( { isFloating, size } ) => {
 	const maxWidth = isFloating ? 1000 : 0.01;
+	const sizes = {
+		default: 9.75,
+		small: 8.25,
+	};
+
+	const fontSize = sizes[ size ];
+
 	return css( {
+		fontSize,
 		maxWidth,
 	} );
 };
 
 export const Legend = styled.legend`
-	box-sizing: border-box;
-	width: auto;
-	height: 11px;
-	display: block;
-	padding: 0;
-	font-size: 0.75em;
-	transition: max-width 50ms linear;
-	visibility: hidden;
-
-	${legendWidth};
-	${reduceMotion( 'transition' )};
+	&&& {
+		box-sizing: border-box;
+		display: block;
+		height: 11px;
+		line-height: 11px;
+		margin: 0;
+		padding: 0;
+		transition: max-width ${FLOATING_LABEL_TRANSITION_SPEED} linear;
+		visibility: hidden;
+		width: auto;
+
+		${legendSize};
+		${reduceMotion( 'transition' )};
+	}
 `;
 
 export const LegendText = styled.span`
 	box-sizing: border-box;
 	display: inline-block;
-	padding-left: 4px;
-	padding-right: 4px;
+	${rtl( { paddingLeft: 4, paddingRight: 5 } )}
 `;

From ebbf0312d5467df94f3969a7c4aeebc014ff4b15 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 8 Apr 2020 22:35:44 -0400
Subject: [PATCH 020/103] Refine UI for BoxControl

---
 packages/components/src/box-control/index.js  | 16 ++++++++---
 .../src/box-control/input-controls.js         | 26 +++++++-----------
 .../box-control/styles/box-control-styles.js  | 27 ++++++++++++++-----
 .../components/src/box-control/visualizer.js  |  2 +-
 .../components/src/input-control/index.js     |  7 ++++-
 .../styles/input-control-styles.js            | 13 +++++++--
 .../components/src/utils/colors-values.js     |  1 +
 7 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index e0d485459902bd..4709dbfd1294bf 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -5,14 +5,15 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import Visualizer from './visualizer';
-import { FlexItem } from '../flex';
 import InputControls from './input-controls';
+import Text from '../text';
 import { DEFAULT_VALUES, parseValues } from './utils';
 import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
@@ -20,7 +21,14 @@ const defaultInputProps = {
 	min: 0,
 };
 
+function useUniqueId( idProp ) {
+	const instanceId = useInstanceId( BoxControl );
+	const id = `inspector-box-control-${ instanceId }`;
+
+	return idProp || id;
+}
 export default function BoxControl( {
+	idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
@@ -29,6 +37,8 @@ export default function BoxControl( {
 	units = false,
 } ) {
 	const [ values, setValues ] = useState( parseValues( valuesProp ) );
+	const id = useUniqueId( idProp );
+	const headingId = `${ id }-heading`;
 
 	const updateValues = ( nextValues ) => {
 		const mergedValues = { ...values, ...nextValues };
@@ -37,9 +47,9 @@ export default function BoxControl( {
 	};
 
 	return (
-		<Root>
+		<Root id={ id } role="region" aria-labelledby={ headingId }>
 			<Header>
-				<FlexItem>{ label }</FlexItem>
+				<Text id={ headingId }>{ label }</Text>
 			</Header>
 			<LayoutContainer>
 				<InputControls
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index d7bcd6cd49cf8c..31c750d5c23dab 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -8,7 +8,12 @@ import { noop } from 'lodash';
  */
 import UnitControl from './unit-control';
 import { getValues } from './utils';
-import { Layout, LayoutBox, SideIndicator } from './styles/box-control-styles';
+import {
+	Layout,
+	LayoutBox,
+	SideIndicatorX,
+	SideIndicatorY,
+} from './styles/box-control-styles';
 import { useRtl } from '../utils/style-mixins';
 
 export default function BoxInputControls( {
@@ -39,22 +44,9 @@ export default function BoxInputControls( {
 
 	return (
 		<Layout>
-			<SideIndicator
-				style={ {
-					left: '50%',
-					top: '50%',
-					transform: 'translate(0, -30px)',
-				} }
-			/>
-			<SideIndicator
-				style={ {
-					left: '50%',
-					top: '0%',
-					height: '75%',
-					transform: 'rotate(-90deg) translate(-15px, 0px)',
-				} }
-			/>
-			<LayoutBox />
+			<SideIndicatorX aria-hidden="true" />
+			<SideIndicatorY aria-hidden="true" />
+			<LayoutBox aria-hidden="true" />
 			<UnitControl
 				{ ...props }
 				disableUnits
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 81af7db0f76bf7..97fe78e69a85e4 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -10,10 +10,13 @@ import { color } from '../../utils/style-mixins';
 
 export const Root = styled.div`
 	max-width: 300px;
+	padding-bottom: 12px;
+	width: 100%;
 `;
 
 export const Header = styled( Flex )`
-	margin-bottom: 8px;
+	color: ${color( 'ui.label' )};
+	padding-bottom: 8px;
 `;
 
 export const UnitControlWrapper = styled.div`
@@ -24,14 +27,13 @@ export const UnitControlWrapper = styled.div`
 export const LayoutContainer = styled( Flex )`
 	height: 120px;
 	justify-content: center;
-	padding-bottom: 16px;
 `;
 
 export const Layout = styled.div`
 	box-sizing: border-box;
 	position: relative;
 	height: 120px;
-	width: 200px;
+	width: 100%;
 `;
 
 export const LayoutBox = styled.div`
@@ -46,9 +48,22 @@ export const LayoutBox = styled.div`
 `;
 
 export const SideIndicator = styled.div`
-	height: 50%;
-	border-left: 1px dashed ${color( 'ui.borderLight' )};
-	width: 0;
+	box-sizing: border-box;
 	position: absolute;
 	pointer-events: none;
 `;
+
+export const SideIndicatorX = styled( SideIndicator )`
+	border-top: 1px dashed ${color( 'ui.borderLight' )};
+	top: 50%;
+	left: 0;
+	width: 100%;
+`;
+
+export const SideIndicatorY = styled( SideIndicator )`
+	border-left: 1px dashed ${color( 'ui.borderLight' )};
+	top: 50%;
+	left: 50%;
+	transform: translate( 0, calc( -50% - 3px ) );
+	height: 50%;
+`;
diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index 4d1096e3aac5fc..f2b0a177de2608 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -22,7 +22,7 @@ export default function BoxControlVisualizer( {
 	const values = parseValues( valuesProp );
 
 	return (
-		<Container { ...props }>
+		<Container { ...props } aria-hidden="true">
 			<Sides values={ values } />
 			{ children }
 		</Container>
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index cd53d6f0d941ef..5f9c651777c85b 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -101,11 +101,16 @@ export function InputControl(
 					value={ value }
 				/>
 				<Fieldset
+					aria-hidden="true"
 					isFloatingLabel={ isFloatingLabelSet }
 					isFocused={ isFocused }
 				>
 					{ isFloatingLabelSet && (
-						<Legend isFloating={ isFloating } size={ size }>
+						<Legend
+							aria-hidden="true"
+							isFloating={ isFloating }
+							size={ size }
+						>
 							<LegendText>{ label }</LegendText>
 						</Legend>
 					) }
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 18835ffe9dada9..0cbde82bd087da 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -7,6 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
+import Text from '../../text';
 import { color, rtl, reduceMotion } from '../../utils/style-mixins';
 
 const FLOATING_LABEL_TRANSITION_SPEED = '60ms';
@@ -167,11 +168,13 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 	);
 };
 
-export const Label = styled.label`
+const BaseLabel = styled( Text )`
 	&&& {
 		box-sizing: border-box;
 		display: block;
 		margin: 0;
+		padding: 0;
+		pointer-events: none;
 		top: 50%;
 		transition: transform ${FLOATING_LABEL_TRANSITION_SPEED} linear;
 		z-index: 1;
@@ -185,6 +188,8 @@ export const Label = styled.label`
 	}
 `;
 
+export const Label = ( props ) => <BaseLabel { ...props } as="label" />;
+
 const fieldsetTopStyles = ( { isFloatingLabel } ) => {
 	const top = isFloatingLabel ? -5 : 0;
 	return css( { top } );
@@ -251,8 +256,12 @@ export const Legend = styled.legend`
 	}
 `;
 
-export const LegendText = styled.span`
+const BaseLegendText = styled( Text )`
 	box-sizing: border-box;
 	display: inline-block;
 	${rtl( { paddingLeft: 4, paddingRight: 5 } )}
 `;
+
+export const LegendText = ( props ) => (
+	<BaseLegendText { ...props } as="span" />
+);
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 38d6a6f5030164..7f869e7781145a 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -140,6 +140,7 @@ export const UI = {
 	border: BASE.black,
 	borderFocus: BLUE.medium.focus,
 	borderLight: LIGHT_GRAY[ 600 ],
+	label: DARK_GRAY[ 500 ],
 };
 
 export const COLORS = {

From 85979dd8c8a15ba64edb71446411f51e2283f894 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Apr 2020 09:25:29 -0400
Subject: [PATCH 021/103] Hook up inline style rendering with padding attribute
 values

---
 packages/block-editor/src/hooks/padding.js  | 17 +++++++++++++----
 packages/block-editor/src/hooks/style.js    |  7 ++++++-
 packages/block-library/src/cover/style.scss |  8 ++++----
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index a59f55644dd49d..9a10324e4f080a 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -36,10 +36,12 @@ export function PaddingEdit( props ) {
 
 		const newStyle = {
 			...style,
-			paddingTop: `${ top[ 0 ] }${ top[ 1 ] }`,
-			paddingRight: `${ right[ 0 ] }${ right[ 1 ] }`,
-			paddingBottom: `${ bottom[ 0 ] }${ bottom[ 1 ] }`,
-			paddingLeft: `${ left[ 0 ] }${ left[ 1 ] }`,
+			padding: {
+				top: `${ top[ 0 ] }${ top[ 1 ] }`,
+				right: `${ right[ 0 ] }${ right[ 1 ] }`,
+				bottom: `${ bottom[ 0 ] }${ bottom[ 1 ] }`,
+				left: `${ left[ 0 ] }${ left[ 1 ] }`,
+			},
 		};
 
 		setAttributes( {
@@ -59,3 +61,10 @@ export function PaddingEdit( props ) {
 		native: null,
 	} );
 }
+
+export const paddingStyleMappings = {
+	'--wp--padding-top': [ 'padding', 'top' ],
+	'--wp--padding-right': [ 'padding', 'right' ],
+	'--wp--padding-bottom': [ 'padding', 'bottom' ],
+	'--wp--padding-left': [ 'padding', 'left' ],
+};
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index a86180cb195d4e..906815ea49a8ae 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -20,7 +20,11 @@ import InspectorControls from '../components/inspector-controls';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
 import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
-import { PADDING_SUPPORT_KEY, PaddingEdit } from './padding';
+import {
+	PADDING_SUPPORT_KEY,
+	PaddingEdit,
+	paddingStyleMappings,
+} from './padding';
 
 const styleSupportKeys = [
 	COLOR_SUPPORT_KEY,
@@ -45,6 +49,7 @@ const hasStyleSupport = ( blockType ) =>
  */
 export function getInlineStyles( styles = {} ) {
 	const mappings = {
+		...paddingStyleMappings,
 		lineHeight: [ 'typography', 'lineHeight' ],
 		fontSize: [ 'typography', 'fontSize' ],
 		background: [ 'color', 'gradient' ],
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 0469ed6ee3663c..3f95bfd4729ff2 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,10 +1,10 @@
 :root {
 	.wp-block-cover-image,
 	.wp-block-cover {
-		padding-top: var(--wp--padding-top);
-		padding-right: var(--wp--padding-right);
-		padding-bottom: var(--wp--padding-bottom);
-		padding-left: var(--wp--padding-left);
+		padding-top: var(--wp--padding-top, 1em);
+		padding-right: var(--wp--padding-right, 1em);
+		padding-bottom: var(--wp--padding-bottom, 1em);
+		padding-left: var(--wp--padding-left, 1em);
 	}
 }
 

From 2f14a64db3b288fd04c1eb94ebe9e816f07d39ba Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Apr 2020 09:34:54 -0400
Subject: [PATCH 022/103] Adjust tab order for BoxControl inputs to match
 visual order

---
 .../src/box-control/input-controls.js         | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 31c750d5c23dab..73469268f513cb 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -64,13 +64,14 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				disableUnits
-				value={ right }
-				onChange={ createHandleOnChange( 'right' ) }
-				label="Right"
+				value={ left }
+				onChange={ createHandleOnChange( 'left' ) }
+				label="Left"
 				size="small"
 				style={ {
 					...baseStyles,
-					[ isRtl ? 'left' : 'right' ]: 0,
+					position: 'absolute',
+					[ isRtl ? 'right' : 'left' ]: 0,
 					top: '50%',
 					transform: 'translateY(calc(-50% - 3px))',
 				} }
@@ -78,28 +79,34 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				disableUnits
-				value={ bottom }
-				onChange={ createHandleOnChange( 'bottom' ) }
-				label="Bottom"
+				value={ isMixed ? '' : top }
+				onChange={ ( next ) => {
+					onChange( {
+						top: [ next, unit ],
+						right: [ next, unit ],
+						bottom: [ next, unit ],
+						left: [ next, unit ],
+					} );
+				} }
+				label="All"
 				size="small"
 				style={ {
 					...baseStyles,
 					left: '50%',
-					bottom: 0,
-					transform: 'translateX(-50%)',
+					top: '50%',
+					transform: 'translate(-50%, calc(-50% - 3px))',
 				} }
 			/>
 			<UnitControl
 				{ ...props }
 				disableUnits
-				value={ left }
-				onChange={ createHandleOnChange( 'left' ) }
-				label="Left"
+				value={ right }
+				onChange={ createHandleOnChange( 'right' ) }
+				label="Right"
 				size="small"
 				style={ {
 					...baseStyles,
-					position: 'absolute',
-					[ isRtl ? 'right' : 'left' ]: 0,
+					[ isRtl ? 'left' : 'right' ]: 0,
 					top: '50%',
 					transform: 'translateY(calc(-50% - 3px))',
 				} }
@@ -107,22 +114,15 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				disableUnits
-				value={ isMixed ? '' : top }
-				onChange={ ( next ) => {
-					onChange( {
-						top: [ next, unit ],
-						right: [ next, unit ],
-						bottom: [ next, unit ],
-						left: [ next, unit ],
-					} );
-				} }
-				label="All"
+				value={ bottom }
+				onChange={ createHandleOnChange( 'bottom' ) }
+				label="Bottom"
 				size="small"
 				style={ {
 					...baseStyles,
 					left: '50%',
-					top: '50%',
-					transform: 'translate(-50%, calc(-50% - 3px))',
+					bottom: 0,
+					transform: 'translateX(-50%)',
 				} }
 			/>
 		</Layout>

From 1352863132012ccc4569ce919b6db3f759b283ab Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Apr 2020 14:35:16 -0400
Subject: [PATCH 023/103] Remove padding attribute declaration

---
 packages/block-library/src/cover/block.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 46d8e0fefddd56..630bb1aeed8430 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -43,9 +43,6 @@
 		},
 		"contentPosition": {
 			"type": "string"
-		},
-		"padding": {
-			"type": "object"
 		}
 	}
 }

From 995666286202b9d0b7f6f41f434bbfeb957a7a09 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 15 Apr 2020 12:42:13 -0400
Subject: [PATCH 024/103] Improve dragging experience

---
 .../src/box-control/input-controls.js         |  9 +-
 .../components/src/number-control/index.js    | 88 ++++++++++++-------
 .../components/src/number-control/utils.js    | 29 +++++-
 3 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 73469268f513cb..15cee1de1f66b3 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -49,8 +49,8 @@ export default function BoxInputControls( {
 			<LayoutBox aria-hidden="true" />
 			<UnitControl
 				{ ...props }
-				disableUnits
 				value={ top }
+				dragDirection="s"
 				onChange={ createHandleOnChange( 'top' ) }
 				label="Top"
 				size="small"
@@ -63,8 +63,8 @@ export default function BoxInputControls( {
 			/>
 			<UnitControl
 				{ ...props }
-				disableUnits
 				value={ left }
+				dragDirection="e"
 				onChange={ createHandleOnChange( 'left' ) }
 				label="Left"
 				size="small"
@@ -78,7 +78,6 @@ export default function BoxInputControls( {
 			/>
 			<UnitControl
 				{ ...props }
-				disableUnits
 				value={ isMixed ? '' : top }
 				onChange={ ( next ) => {
 					onChange( {
@@ -99,8 +98,8 @@ export default function BoxInputControls( {
 			/>
 			<UnitControl
 				{ ...props }
-				disableUnits
 				value={ right }
+				dragDirection="w"
 				onChange={ createHandleOnChange( 'right' ) }
 				label="Right"
 				size="small"
@@ -113,8 +112,8 @@ export default function BoxInputControls( {
 			/>
 			<UnitControl
 				{ ...props }
-				disableUnits
 				value={ bottom }
+				dragDirection="n"
 				onChange={ createHandleOnChange( 'bottom' ) }
 				label="Bottom"
 				size="small"
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index f2433e22ec4f0d..5e722dd7ece148 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -17,20 +17,14 @@ import { UP, DOWN } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import InputControl from '../input-control';
-import {
-	DRAG_CURSOR,
-	useDragCursor,
-	add,
-	subtract,
-	roundClampString,
-} from './utils';
+import { useDragCursor, add, subtract, roundClampString } from './utils';
 
 export function NumberControl(
 	{
 		className,
 		label,
-		dragAxis = 'y',
-		dragThreshold = 10,
+		dragDirection = 'n',
+		dragThreshold = 0,
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		max = Infinity,
@@ -39,7 +33,6 @@ export function NumberControl(
 		onKeyDown = noop,
 		shiftStep = 10,
 		step = 1,
-		style: styleProp,
 		value: valueProp,
 		...props
 	},
@@ -48,24 +41,48 @@ export function NumberControl(
 	const [ isDragging, setIsDragging ] = useState( false );
 	const baseValue = clamp( 0, min, max );
 
-	useDragCursor( isDragging );
+	const dragCursor = useDragCursor( isDragging, dragDirection );
 
 	const dragGestureProps = useDrag(
 		( { dragging, delta, event, shiftKey } ) => {
 			if ( ! isDragEnabled ) return;
 			if ( ! dragging ) {
+				window.getSelection().removeAllRanges();
 				setIsDragging( false );
 				return;
 			}
 
 			event.stopPropagation();
 
-			const [ , y ] = delta;
+			const [ x, y ] = delta;
 			const modifier = shiftKey ? shiftStep : 1;
-			const distance = y * modifier * -1;
+			let directionModifier;
+			let directionBaseValue;
+
+			switch ( dragDirection ) {
+				case 'n':
+					directionBaseValue = y;
+					directionModifier = -1;
+					break;
+				case 'e':
+					directionBaseValue = x;
+					directionModifier = 1;
+					break;
+				case 's':
+					directionBaseValue = y;
+					directionModifier = 1;
+					break;
+				case 'w':
+					directionBaseValue = x;
+					directionModifier = -1;
+					break;
+			}
+
+			const distance = directionBaseValue * modifier * directionModifier;
+			let nextValue;
 
 			if ( distance !== 0 ) {
-				const nextValue = roundClampString(
+				nextValue = roundClampString(
 					add( valueProp, distance ),
 					min,
 					max,
@@ -79,7 +96,6 @@ export function NumberControl(
 			}
 		},
 		{
-			axis: dragAxis,
 			threshold: dragThreshold,
 			enabled: isDragEnabled,
 		}
@@ -138,11 +154,6 @@ export function NumberControl(
 	};
 
 	const classes = classNames( 'component-number-control', className );
-	const style = {
-		...styleProp,
-		cursor: isDragging ? DRAG_CURSOR : styleProp?.cursor,
-		userSelect: isDragging ? 'none' : styleProp?.userSelect,
-	};
 
 	return (
 		<Input
@@ -150,29 +161,46 @@ export function NumberControl(
 			{ ...props }
 			{ ...dragGestureProps() }
 			className={ classes }
+			dragCursor={ dragCursor }
 			label={ label }
 			isDragging={ isDragging }
 			ref={ ref }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
-			style={ style }
 			type="number"
 			value={ valueProp }
 		/>
 	);
 }
 
-const dragStyles = ( { isDragging } ) => {
-	if ( ! isDragging ) return '';
+const dragStyles = ( { isDragging, dragCursor } ) => {
+	let defaultArrowStyles = '';
+	let activeDragCursorStyles = '';
 
-	return css`
-		user-select: none;
+	if ( isDragging ) {
+		defaultArrowStyles = css`
+			cursor: ${dragCursor};
+			user-select: none;
 
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			-webkit-appearance: none !important;
-			margin: 0 !important;
-		}
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none !important;
+				margin: 0 !important;
+			}
+		`;
+	}
+
+	if ( dragCursor ) {
+		activeDragCursorStyles = css`
+			&:active {
+				cursor: ${dragCursor};
+			}
+		`;
+	}
+
+	return css`
+		${defaultArrowStyles};
+		${activeDragCursorStyles};
 	`;
 };
 
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index be839f1ec3f2d6..82836bbf84f132 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -8,18 +8,41 @@ import { clamp } from 'lodash';
  */
 import { useEffect } from '@wordpress/element';
 
-export const DRAG_CURSOR = 'ns-resize';
+export function getDragCursor( dragDirection ) {
+	let dragCursor = 'n-resize';
+
+	switch ( dragDirection ) {
+		case 'n':
+			dragCursor = 'n-resize';
+			break;
+		case 'e':
+			dragCursor = 'e-resize';
+			break;
+		case 's':
+			dragCursor = 's-resize';
+			break;
+		case 'w':
+			dragCursor = 'w-resize';
+			break;
+	}
+
+	return dragCursor;
+}
+
+export function useDragCursor( isDragging, dragDirection ) {
+	const dragCursor = getDragCursor( dragDirection );
 
-export function useDragCursor( isDragging ) {
 	useEffect( () => {
 		if ( isDragging ) {
-			document.documentElement.style.cursor = DRAG_CURSOR;
+			document.documentElement.style.cursor = dragCursor;
 			document.documentElement.style.pointerEvents = 'none';
 		} else {
 			document.documentElement.style.cursor = null;
 			document.documentElement.style.pointerEvents = null;
 		}
 	}, [ isDragging ] );
+
+	return dragCursor;
 }
 
 function getValue( value ) {

From 508124b63aacd0be7dcd1879c514f60cb929a3b8 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 15 Apr 2020 13:18:48 -0400
Subject: [PATCH 025/103] Add alt pair change support. Improve null value
 rendering.

---
 .../src/box-control/input-controls.js         | 31 +++++++++++++++--
 .../src/box-control/unit-control.js           | 11 +++----
 .../components/src/input-control/index.js     |  4 +--
 .../components/src/input-control/utils.js     |  5 +++
 .../components/src/number-control/index.js    | 33 ++++++++++++++-----
 5 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 15cee1de1f66b3..8263ef4e5883f3 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -32,8 +32,35 @@ export default function BoxInputControls( {
 	const isMixed = ! allValues.every( ( v ) => v === top );
 	const isRtl = useRtl();
 
-	const createHandleOnChange = ( side ) => ( next ) => {
-		onChange( { ...values, [ side ]: [ next, unit ] } );
+	const createHandleOnChange = ( side ) => ( next, { event } ) => {
+		const { altKey } = event;
+		const nextValues = values;
+		const nextValue = [ next, unit ];
+
+		nextValues[ side ] = nextValue;
+
+		/**
+		 * Supports changing pair sides. For example, holding the ALT key
+		 * when changing the TOP will also update BOTTOM.
+		 */
+		if ( altKey ) {
+			switch ( side ) {
+				case 'top':
+					nextValues.bottom = nextValue;
+					break;
+				case 'bottom':
+					nextValues.top = nextValue;
+					break;
+				case 'left':
+					nextValues.right = nextValue;
+					break;
+				case 'right':
+					nextValues.left = nextValue;
+					break;
+			}
+		}
+
+		onChange( nextValues );
 	};
 
 	const baseStyles = {
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index c15371c01d24dd..f392662c51e860 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -4,18 +4,17 @@
 import BaseUnitControl from '../unit-control';
 import { UnitControlWrapper } from './styles/box-control-styles';
 
-export default function BoxUnitControl( { onChange, label, ...props } ) {
-	const handleOnChange = ( nextValue ) => {
-		const value = parseFloat( nextValue );
-		onChange( isNaN( value ) ? nextValue : value );
-	};
+export default function BoxUnitControl( { label, value, ...props } ) {
+	const isEmpty = value === '' || value === undefined;
 
 	return (
 		<UnitControlWrapper aria-label={ label }>
 			<BaseUnitControl
+				disableUnits={ isEmpty }
+				hideHTMLArrows
 				label={ label }
 				isResetValueOnUnitChange={ false }
-				onChange={ handleOnChange }
+				value={ value }
 				{ ...props }
 			/>
 		</UnitControlWrapper>
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 5f9c651777c85b..caedc0bdec6b46 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -21,7 +21,7 @@ import {
 	LegendText,
 	Root,
 } from './styles/input-control-styles';
-import { useControlledState, isEmpty } from './utils';
+import { useValueState, isEmpty } from './utils';
 
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( InputControl );
@@ -47,7 +47,7 @@ export function InputControl(
 	ref
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const [ value, setValue ] = useControlledState( valueProp );
+	const [ value, setValue ] = useValueState( valueProp );
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'component-input-control', className );
 
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index db2f75f5f7f3db..f6e32bacb925df 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -17,6 +17,11 @@ export function useControlledState( initialState ) {
 	return [ state, setState ];
 }
 
+export function useValueState( initialValue ) {
+	const value = isEmpty( initialValue ) ? '' : initialValue;
+	return useControlledState( value );
+}
+
 export function isEmpty( value ) {
 	const isNullish = typeof value === 'undefined' || value === null;
 	const isEmptyString = value === '';
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 5e722dd7ece148..e4bd03cc0fc937 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -24,7 +24,8 @@ export function NumberControl(
 		className,
 		label,
 		dragDirection = 'n',
-		dragThreshold = 0,
+		dragThreshold = 10,
+		hideHTMLArrows = false,
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		max = Infinity,
@@ -47,7 +48,6 @@ export function NumberControl(
 		( { dragging, delta, event, shiftKey } ) => {
 			if ( ! isDragEnabled ) return;
 			if ( ! dragging ) {
-				window.getSelection().removeAllRanges();
 				setIsDragging( false );
 				return;
 			}
@@ -88,7 +88,7 @@ export function NumberControl(
 					max,
 					modifier
 				);
-				onChange( nextValue, { event } );
+				handleOnChange( nextValue, { event } );
 			}
 
 			if ( ! isDragging ) {
@@ -128,7 +128,7 @@ export function NumberControl(
 					incrementalValue
 				);
 
-				onChange( nextValue, { event } );
+				handleOnChange( nextValue, { event } );
 
 				break;
 
@@ -143,14 +143,17 @@ export function NumberControl(
 					incrementalValue
 				);
 
-				onChange( nextValue, { event } );
+				handleOnChange( nextValue, { event } );
 
 				break;
 		}
 	};
 
 	const handleOnChange = ( value, { event } ) => {
-		onChange( value, { event } );
+		const parsedValue = parseFloat( value );
+		const nextValue = isNaN( parsedValue ) ? nextValue : parsedValue;
+
+		onChange( nextValue, { event } );
 	};
 
 	const classes = classNames( 'component-number-control', className );
@@ -162,11 +165,12 @@ export function NumberControl(
 			{ ...dragGestureProps() }
 			className={ classes }
 			dragCursor={ dragCursor }
-			label={ label }
+			hideHTMLArrows={ hideHTMLArrows }
 			isDragging={ isDragging }
-			ref={ ref }
+			label={ label }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
+			ref={ ref }
 			type="number"
 			value={ valueProp }
 		/>
@@ -204,8 +208,21 @@ const dragStyles = ( { isDragging, dragCursor } ) => {
 	`;
 };
 
+const htmlArrowStyles = ( { hideHTMLArrows } ) => {
+	if ( ! hideHTMLArrows ) return ``;
+
+	return css`
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none !important;
+			margin: 0 !important;
+		}
+	`;
+};
+
 const Input = styled( InputControl )`
 	${dragStyles};
+	${htmlArrowStyles};
 `;
 
 export default forwardRef( NumberControl );

From 6c8e05d83b3455641ee84e408cac2ce6945e3c0c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 15 Apr 2020 13:20:00 -0400
Subject: [PATCH 026/103] Remove unused BoxControl Icon

---
 packages/components/src/box-control/icon.js   | 97 -------------------
 .../src/box-control/stories/index.js          |  7 +-
 2 files changed, 1 insertion(+), 103 deletions(-)
 delete mode 100644 packages/components/src/box-control/icon.js

diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
deleted file mode 100644
index b3baed2810e039..00000000000000
--- a/packages/components/src/box-control/icon.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-
-const BASE_ICON_SIZE = 24;
-
-export default function BoxControlIcon( { size = 24, sides = [ 'all' ] } ) {
-	const top = getSide( sides, 'top' );
-	const right = getSide( sides, 'right' );
-	const bottom = getSide( sides, 'bottom' );
-	const left = getSide( sides, 'left' );
-
-	// Simulates SVG Icon scaling
-	const scale = size / BASE_ICON_SIZE;
-
-	return (
-		<Root style={ { transform: `scale(${ scale })` } }>
-			<Viewbox>
-				<TopStroke isFocused={ top } />
-				<RightStroke isFocused={ right } />
-				<BottomStroke isFocused={ bottom } />
-				<LeftStroke isFocused={ left } />
-			</Viewbox>
-		</Root>
-	);
-}
-
-function getSide( sides, value ) {
-	const match = value.toLowerCase();
-
-	return sides.find( ( side ) => {
-		const sideValue = side.toLowerCase();
-		return [ 'all', match ].includes( sideValue );
-	} );
-}
-
-const Root = styled.span`
-	box-sizing: border-box;
-	display: block;
-	width: 24px;
-	height: 24px;
-	position: relative;
-	padding: 4px;
-`;
-
-const Viewbox = styled.span`
-	box-sizing: border-box;
-	display: block;
-	position: relative;
-	width: 100%;
-	height: 100%;
-`;
-
-const strokeFocus = ( { isFocused } ) => {
-	return css( {
-		backgroundColor: 'currentColor',
-		opacity: isFocused ? 1 : 0.3,
-	} );
-};
-
-const Stroke = styled.span`
-	box-sizing: border-box;
-	display: block;
-	pointer-events: none;
-	position: absolute;
-	${strokeFocus};
-`;
-
-const VerticalStroke = styled( Stroke )`
-	bottom: 3px;
-	top: 3px;
-	width: 2px;
-`;
-
-const HorizontalStroke = styled( Stroke )`
-	height: 2px;
-	left: 3px;
-	right: 3px;
-`;
-
-const TopStroke = styled( HorizontalStroke )`
-	top: 0;
-`;
-
-const RightStroke = styled( VerticalStroke )`
-	right: 0;
-`;
-
-const BottomStroke = styled( HorizontalStroke )`
-	bottom: 0;
-`;
-
-const LeftStroke = styled( VerticalStroke )`
-	left: 0;
-`;
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index bda9725e01eea3..188042ae287e3f 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -11,7 +11,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import BoxControl from '../';
-import BoxControlIcon from '../icon';
 import BoxControlVisualizer from '../visualizer';
 import { Flex, FlexBlock } from '../../flex';
 
@@ -21,10 +20,6 @@ export const _default = () => {
 	return <BoxControl />;
 };
 
-export const icon = () => {
-	return <BoxControlIcon />;
-};
-
 function DemoExample() {
 	const [ values, setValues ] = useState( {
 		top: [ 10 ],
@@ -57,7 +52,7 @@ function DemoExample() {
 	);
 }
 
-export const demo = () => {
+export const visualizer = () => {
 	return <DemoExample />;
 };
 

From 6dd9a2d45fcaca2eb86bb908e1fe319c798272ad Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 15 Apr 2020 13:26:44 -0400
Subject: [PATCH 027/103] Improve RTL interactions

---
 packages/components/src/box-control/visualizer.js |  6 +++---
 packages/components/src/number-control/index.js   |  6 ++++--
 packages/components/src/number-control/utils.js   | 10 ++++++++--
 packages/components/src/utils/style-mixins.js     |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index f2b0a177de2608..e87e7c4a559f95 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -11,7 +11,7 @@ import { useRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { color } from '../utils/style-mixins';
+import { color, rtl } from '../utils/style-mixins';
 import { DEFAULT_VALUES, parseValues } from './utils';
 
 export default function BoxControlVisualizer( {
@@ -132,7 +132,7 @@ const TopView = styled( Side )`
 const RightView = styled( Side )`
 	top: 0;
 	bottom: 0;
-	right: 0;
+	${rtl( { right: 0 } )};
 `;
 
 const BottomView = styled( Side )`
@@ -144,5 +144,5 @@ const BottomView = styled( Side )`
 const LeftView = styled( Side )`
 	top: 0;
 	bottom: 0;
-	left: 0;
+	${rtl( { left: 0 } )};
 `;
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index e4bd03cc0fc937..e95d8c9f4b8781 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -18,6 +18,7 @@ import { UP, DOWN } from '@wordpress/keycodes';
  */
 import InputControl from '../input-control';
 import { useDragCursor, add, subtract, roundClampString } from './utils';
+import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
 	{
@@ -41,6 +42,7 @@ export function NumberControl(
 ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const baseValue = clamp( 0, min, max );
+	const isRtl = useRtl();
 
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
@@ -66,7 +68,7 @@ export function NumberControl(
 					break;
 				case 'e':
 					directionBaseValue = x;
-					directionModifier = 1;
+					directionModifier = isRtl ? -1 : 1;
 					break;
 				case 's':
 					directionBaseValue = y;
@@ -74,7 +76,7 @@ export function NumberControl(
 					break;
 				case 'w':
 					directionBaseValue = x;
-					directionModifier = -1;
+					directionModifier = isRtl ? 1 : -1;
 					break;
 			}
 
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index 82836bbf84f132..f34282c2cf4574 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -8,7 +8,13 @@ import { clamp } from 'lodash';
  */
 import { useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { getRtl } from '../utils/style-mixins';
+
 export function getDragCursor( dragDirection ) {
+	const isRtl = getRtl();
 	let dragCursor = 'n-resize';
 
 	switch ( dragDirection ) {
@@ -16,13 +22,13 @@ export function getDragCursor( dragDirection ) {
 			dragCursor = 'n-resize';
 			break;
 		case 'e':
-			dragCursor = 'e-resize';
+			dragCursor = isRtl ? 'w-resize' : 'e-resize';
 			break;
 		case 's':
 			dragCursor = 's-resize';
 			break;
 		case 'w':
-			dragCursor = 'w-resize';
+			dragCursor = isRtl ? 'e-resize' : 'w-resize';
 			break;
 	}
 
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index 0ce36cca9384a4..b24f56847f5216 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,3 +1,3 @@
 export { color, rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
-export { rtl, useRtl } from './rtl';
+export { rtl, getRtl, useRtl } from './rtl';

From 58a3968220405dc5c7bc7918977156295f9dc6cd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 17 Apr 2020 09:53:48 -0400
Subject: [PATCH 028/103] Fix onChange type for NumberControl

---
 packages/components/src/number-control/index.js    | 4 +++-
 packages/components/src/unit-control/test/index.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index e95d8c9f4b8781..3bc987a498c722 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -153,7 +153,9 @@ export function NumberControl(
 
 	const handleOnChange = ( value, { event } ) => {
 		const parsedValue = parseFloat( value );
-		const nextValue = isNaN( parsedValue ) ? nextValue : parsedValue;
+		const nextValue = isNaN( parsedValue )
+			? nextValue
+			: parsedValue.toString();
 
 		onChange( nextValue, { event } );
 	};
diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index 32bad94884076d..17aa62b773bca1 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/packages/components/src/unit-control/test/index.js
@@ -86,7 +86,7 @@ describe( 'UnitControl', () => {
 				Simulate.change( input, { target: { value: 62 } } );
 			} );
 
-			expect( state ).toBe( 62 );
+			expect( state ).toBe( '62' );
 		} );
 
 		it( 'should increment value on UP press', () => {

From 33dadc6de192588e07aff93904f9cc382aabb4c6 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 20 Apr 2020 12:39:33 -0400
Subject: [PATCH 029/103] Fix NumberControl onChange type

---
 packages/components/src/number-control/index.js      | 4 +---
 packages/components/src/number-control/test/index.js | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 3bc987a498c722..e95d8c9f4b8781 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -153,9 +153,7 @@ export function NumberControl(
 
 	const handleOnChange = ( value, { event } ) => {
 		const parsedValue = parseFloat( value );
-		const nextValue = isNaN( parsedValue )
-			? nextValue
-			: parsedValue.toString();
+		const nextValue = isNaN( parsedValue ) ? nextValue : parsedValue;
 
 		onChange( nextValue, { event } );
 	};
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index 182ae932507fcd..900c7b61391b42 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -86,7 +86,7 @@ describe( 'NumberControl', () => {
 				Simulate.change( input );
 			} );
 
-			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( '10' );
+			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 10 );
 		} );
 	} );
 

From 2780a8f1d1b4ab9a93fc19887c192acc9b0624b4 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 20 Apr 2020 15:34:25 -0400
Subject: [PATCH 030/103] Add Prefix to InputControl

---
 .../components/src/box-control/input-controls.js  | 15 ++++++++++-----
 .../src/box-control/styles/box-control-styles.js  | 13 ++++++++++++-
 .../components/src/box-control/unit-control.js    |  1 +
 packages/components/src/input-control/index.js    | 15 ++++++++++++---
 .../input-control/styles/input-control-styles.js  |  9 +++++++++
 5 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 8263ef4e5883f3..5efdeb79a7ed99 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -13,6 +13,7 @@ import {
 	LayoutBox,
 	SideIndicatorX,
 	SideIndicatorY,
+	Prefix,
 } from './styles/box-control-styles';
 import { useRtl } from '../utils/style-mixins';
 
@@ -66,7 +67,7 @@ export default function BoxInputControls( {
 	const baseStyles = {
 		position: 'absolute',
 		zIndex: 1,
-		maxWidth: 60,
+		maxWidth: 70,
 	};
 
 	return (
@@ -80,11 +81,11 @@ export default function BoxInputControls( {
 				dragDirection="s"
 				onChange={ createHandleOnChange( 'top' ) }
 				label="Top"
+				prefix={ <Prefix>↑</Prefix> }
 				size="small"
 				style={ {
 					...baseStyles,
 					left: '50%',
-					top: -5,
 					transform: 'translateX(-50%)',
 				} }
 			/>
@@ -94,13 +95,14 @@ export default function BoxInputControls( {
 				dragDirection="e"
 				onChange={ createHandleOnChange( 'left' ) }
 				label="Left"
+				prefix={ <Prefix>←</Prefix> }
 				size="small"
 				style={ {
 					...baseStyles,
 					position: 'absolute',
 					[ isRtl ? 'right' : 'left' ]: 0,
 					top: '50%',
-					transform: 'translateY(calc(-50% - 3px))',
+					transform: 'translateY(-50%)',
 				} }
 			/>
 			<UnitControl
@@ -115,12 +117,13 @@ export default function BoxInputControls( {
 					} );
 				} }
 				label="All"
+				prefix={ <Prefix>⁘</Prefix> }
 				size="small"
 				style={ {
 					...baseStyles,
 					left: '50%',
 					top: '50%',
-					transform: 'translate(-50%, calc(-50% - 3px))',
+					transform: 'translate(-50%, -50%)',
 				} }
 			/>
 			<UnitControl
@@ -129,12 +132,13 @@ export default function BoxInputControls( {
 				dragDirection="w"
 				onChange={ createHandleOnChange( 'right' ) }
 				label="Right"
+				prefix={ <Prefix>→</Prefix> }
 				size="small"
 				style={ {
 					...baseStyles,
 					[ isRtl ? 'left' : 'right' ]: 0,
 					top: '50%',
-					transform: 'translateY(calc(-50% - 3px))',
+					transform: 'translateY(-50%)',
 				} }
 			/>
 			<UnitControl
@@ -143,6 +147,7 @@ export default function BoxInputControls( {
 				dragDirection="n"
 				onChange={ createHandleOnChange( 'bottom' ) }
 				label="Bottom"
+				prefix={ <Prefix>↓</Prefix> }
 				size="small"
 				style={ {
 					...baseStyles,
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 97fe78e69a85e4..de5d46786a866a 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -64,6 +64,17 @@ export const SideIndicatorY = styled( SideIndicator )`
 	border-left: 1px dashed ${color( 'ui.borderLight' )};
 	top: 50%;
 	left: 50%;
-	transform: translate( 0, calc( -50% - 3px ) );
+	transform: translate( 0, -50% );
 	height: 50%;
 `;
+
+export const Prefix = styled.div`
+	box-sizing: border-box;
+	color: ${color( 'ui.label' )};
+	font-size: 12px;
+	line-height: 1;
+	margin-right: -8px;
+	text-align: center;
+	width: 20px;
+	user-select: none;
+`;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index f392662c51e860..ba1bee8725a1ef 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -11,6 +11,7 @@ export default function BoxUnitControl( { label, value, ...props } ) {
 		<UnitControlWrapper aria-label={ label }>
 			<BaseUnitControl
 				disableUnits={ isEmpty }
+				hideLabelFromVision
 				hideHTMLArrows
 				label={ label }
 				isResetValueOnUnitChange={ false }
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index caedc0bdec6b46..bd268c2e448fee 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -12,6 +12,7 @@ import { useState, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import VisuallyHidden from '../visually-hidden';
 import {
 	Container,
 	Fieldset,
@@ -19,6 +20,7 @@ import {
 	Label,
 	Legend,
 	LegendText,
+	Prefix,
 	Root,
 } from './styles/input-control-styles';
 import { useValueState, isEmpty } from './utils';
@@ -37,7 +39,9 @@ export function InputControl(
 		onBlur = noop,
 		onChange = noop,
 		onFocus = noop,
+		hideLabelFromVision = false,
 		id: idProp,
+		prefix,
 		isFloatingLabel = true,
 		label,
 		size = 'default',
@@ -70,12 +74,16 @@ export function InputControl(
 
 	const isFilled = ! isEmpty( value );
 	const isFloating = isFloatingLabel ? isFilled || isFocused : false;
-	const isFloatingLabelSet = isFloatingLabel && label;
+	const isFloatingLabelSet =
+		! hideLabelFromVision && isFloatingLabel && label;
+
+	const LabelComponent = hideLabelFromVision ? VisuallyHidden : Label;
 
 	return (
 		<Root isFloatingLabel={ isFloatingLabelSet }>
 			{ label && (
-				<Label
+				<LabelComponent
+					as="label"
 					htmlFor={ id }
 					isFloatingLabel={ isFloatingLabel }
 					isFilled={ isFilled }
@@ -83,9 +91,10 @@ export function InputControl(
 					size={ size }
 				>
 					{ label }
-				</Label>
+				</LabelComponent>
 			) }
 			<Container isFocused={ isFocused }>
+				{ prefix && <Prefix>{ prefix }</Prefix> }
 				<Input
 					{ ...props }
 					className={ classes }
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 0cbde82bd087da..4aa8c2e7ad5072 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -31,7 +31,10 @@ const containerBorder = ( { isFocused } ) => {
 };
 
 export const Container = styled.div`
+	align-items: center;
+	background-color: ${color( 'white' )};
 	box-sizing: border-box;
+	display: flex;
 	position: relative;
 	${containerBorder};
 `;
@@ -96,6 +99,7 @@ const placeholderStyles = ( { isFilled, isFloating, isFloatingLabel } ) => {
 
 export const Input = styled.input`
 	&&& {
+		background-color: transparent;
 		box-sizing: border-box;
 		border: none !important;
 		box-shadow: none !important;
@@ -265,3 +269,8 @@ const BaseLegendText = styled( Text )`
 export const LegendText = ( props ) => (
 	<BaseLegendText { ...props } as="span" />
 );
+
+export const Prefix = styled.span`
+	box-sizing: border-box;
+	display: block;
+`;

From 789cfd95474e09c9cf4fbfd9caab67e43e587120 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 21 Apr 2020 10:48:58 -0400
Subject: [PATCH 031/103] Refine labels for BoxControl inputs

---
 .../src/box-control/input-controls.js         |  2 +-
 .../box-control/styles/box-control-styles.js  |  6 +-
 .../src/box-control/unit-control.js           |  3 -
 .../components/src/input-control/index.js     | 84 +++++++++++--------
 .../styles/input-control-styles.js            |  9 +-
 packages/components/src/unit-control/index.js | 25 +++---
 .../styles/unit-control-styles.js             |  4 -
 7 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 5efdeb79a7ed99..77b1b56dddbe3c 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -67,7 +67,7 @@ export default function BoxInputControls( {
 	const baseStyles = {
 		position: 'absolute',
 		zIndex: 1,
-		maxWidth: 70,
+		maxWidth: 60,
 	};
 
 	return (
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index de5d46786a866a..09df8667cf1be4 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -44,7 +44,7 @@ export const LayoutBox = styled.div`
 	left: 30px;
 	right: 30px;
 	pointer-events: none;
-	border: 1px solid ${color( 'ui.borderLight' )};
+	border: 1px dashed ${color( 'ui.borderLight' )};
 `;
 
 export const SideIndicator = styled.div`
@@ -54,14 +54,14 @@ export const SideIndicator = styled.div`
 `;
 
 export const SideIndicatorX = styled( SideIndicator )`
-	border-top: 1px dashed ${color( 'ui.borderLight' )};
+	border-top: 1px solid ${color( 'ui.borderLight' )};
 	top: 50%;
 	left: 0;
 	width: 100%;
 `;
 
 export const SideIndicatorY = styled( SideIndicator )`
-	border-left: 1px dashed ${color( 'ui.borderLight' )};
+	border-left: 1px solid ${color( 'ui.borderLight' )};
 	top: 50%;
 	left: 50%;
 	transform: translate( 0, -50% );
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index ba1bee8725a1ef..96290d04830f9b 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -5,12 +5,9 @@ import BaseUnitControl from '../unit-control';
 import { UnitControlWrapper } from './styles/box-control-styles';
 
 export default function BoxUnitControl( { label, value, ...props } ) {
-	const isEmpty = value === '' || value === undefined;
-
 	return (
 		<UnitControlWrapper aria-label={ label }>
 			<BaseUnitControl
-				disableUnits={ isEmpty }
 				hideLabelFromVision
 				hideHTMLArrows
 				label={ label }
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index bd268c2e448fee..2b41918b71bd1c 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -12,6 +12,7 @@ import { useState, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import BaseTooltip from '../tooltip';
 import VisuallyHidden from '../visually-hidden';
 import {
 	Container,
@@ -20,8 +21,8 @@ import {
 	Label,
 	Legend,
 	LegendText,
-	Prefix,
 	Root,
+	Suffix,
 } from './styles/input-control-styles';
 import { useValueState, isEmpty } from './utils';
 
@@ -41,7 +42,7 @@ export function InputControl(
 		onFocus = noop,
 		hideLabelFromVision = false,
 		id: idProp,
-		prefix,
+		suffix,
 		isFloatingLabel = true,
 		label,
 		size = 'default',
@@ -93,41 +94,54 @@ export function InputControl(
 					{ label }
 				</LabelComponent>
 			) }
-			<Container isFocused={ isFocused }>
-				{ prefix && <Prefix>{ prefix }</Prefix> }
-				<Input
-					{ ...props }
-					className={ classes }
-					id={ id }
-					isFilled={ isFilled }
-					isFloating={ isFloating }
-					isFloatingLabel={ isFloatingLabel }
-					onBlur={ handleOnBlur }
-					onChange={ handleOnChange }
-					onFocus={ handleOnFocus }
-					ref={ ref }
-					size={ size }
-					value={ value }
-				/>
-				<Fieldset
-					aria-hidden="true"
-					isFloatingLabel={ isFloatingLabelSet }
-					isFocused={ isFocused }
-				>
-					{ isFloatingLabelSet && (
-						<Legend
-							aria-hidden="true"
-							isFloating={ isFloating }
-							size={ size }
-						>
-							<LegendText>{ label }</LegendText>
-						</Legend>
-					) }
-				</Fieldset>
-				{ children }
-			</Container>
+			<Tooltip
+				hideLabelFromVision={ hideLabelFromVision }
+				label={ label }
+			>
+				<Container isFocused={ isFocused }>
+					<Input
+						{ ...props }
+						className={ classes }
+						id={ id }
+						isFilled={ isFilled }
+						isFloating={ isFloating }
+						isFloatingLabel={ isFloatingLabel }
+						onBlur={ handleOnBlur }
+						onChange={ handleOnChange }
+						onFocus={ handleOnFocus }
+						ref={ ref }
+						size={ size }
+						value={ value }
+					/>
+					{ suffix && <Suffix>{ suffix }</Suffix> }
+					<Fieldset
+						aria-hidden="true"
+						isFloatingLabel={ isFloatingLabelSet }
+						isFocused={ isFocused }
+					>
+						{ isFloatingLabelSet && (
+							<Legend
+								aria-hidden="true"
+								isFloating={ isFloating }
+								size={ size }
+							>
+								<LegendText>{ label }</LegendText>
+							</Legend>
+						) }
+					</Fieldset>
+					{ children }
+				</Container>
+			</Tooltip>
 		</Root>
 	);
 }
 
+function Tooltip( { children, hideLabelFromVision, label } ) {
+	if ( label && hideLabelFromVision ) {
+		return <BaseTooltip text={ label }>{ children }</BaseTooltip>;
+	}
+
+	return children;
+}
+
 export default forwardRef( InputControl );
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 4aa8c2e7ad5072..382a79c75c107d 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -101,12 +101,13 @@ export const Input = styled.input`
 	&&& {
 		background-color: transparent;
 		box-sizing: border-box;
-		border: none !important;
+		border: none;
 		box-shadow: none !important;
+		color: ${color( 'black' )};
 		display: block;
 		outline: none;
-		padding-left: 8px !important;
-		padding-right: 8px !important;
+		padding-left: 8px;
+		padding-right: 8px;
 		width: 100%;
 
 		${fontSizeStyles};
@@ -270,7 +271,7 @@ export const LegendText = ( props ) => (
 	<BaseLegendText { ...props } as="span" />
 );
 
-export const Prefix = styled.span`
+export const Suffix = styled.span`
 	box-sizing: border-box;
 	display: block;
 `;
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index a614919a888aff..999ce6a85b121d 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -45,6 +45,17 @@ function UnitControl(
 
 	const classes = classnames( 'component-unit-control', className );
 
+	const inputSuffix = ! disableUnits ? (
+		<UnitSelectControl
+			className="component-unit-control__select"
+			isTabbable={ isUnitSelectTabbable }
+			options={ units }
+			onChange={ handleOnUnitChange }
+			size={ size }
+			value={ unit }
+		/>
+	) : null;
+
 	return (
 		<Root className={ classes } ref={ ref } style={ style }>
 			<ValueInput
@@ -56,19 +67,9 @@ function UnitControl(
 				value={ value }
 				onChange={ onChange }
 				size={ size }
+				suffix={ inputSuffix }
 				type="number"
-			>
-				{ ! disableUnits && (
-					<UnitSelectControl
-						className="component-unit-control__select"
-						isTabbable={ isUnitSelectTabbable }
-						options={ units }
-						onChange={ handleOnUnitChange }
-						size={ size }
-						value={ unit }
-					/>
-				) }
-			</ValueInput>
+			></ValueInput>
 		</Root>
 	);
 }
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 71870b0961416a..2981db458dc8c4 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -41,10 +41,6 @@ export const ValueInput = styled( NumberControl )`
 	&&& {
 		appearance: none;
 		-moz-appearance: textfield;
-		box-sizing: border-box;
-		border: 1px solid ${color( 'ui.border' )};
-		border-radius: 2px;
-		padding: 3px 8px;
 		display: block;
 		width: 100%;
 

From 23e252dd08c812d15c11947b20798af1175317d7 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 21 Apr 2020 10:50:10 -0400
Subject: [PATCH 032/103] Adjust BoxControl Y indicator hieght

---
 .../components/src/box-control/styles/box-control-styles.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 09df8667cf1be4..7bc48d91b5e2a2 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -65,7 +65,7 @@ export const SideIndicatorY = styled( SideIndicator )`
 	top: 50%;
 	left: 50%;
 	transform: translate( 0, -50% );
-	height: 50%;
+	height: 100%;
 `;
 
 export const Prefix = styled.div`

From 0a490f05357ea1ccdaa67122b64e1883415c56e6 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 21 Apr 2020 11:12:17 -0400
Subject: [PATCH 033/103] Refactor BoxControl inputs + update tests

---
 .../src/box-control/input-controls.js         | 56 ++++++-------------
 .../box-control/styles/box-control-styles.js  | 24 +++-----
 .../src/box-control/unit-control.js           | 11 +++-
 packages/components/src/box-control/utils.js  | 18 +++++-
 .../components/src/input-control/index.js     | 37 +++++++++---
 .../src/number-control/test/index.js          |  6 +-
 .../components/src/unit-control/test/index.js | 10 ++--
 7 files changed, 88 insertions(+), 74 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 77b1b56dddbe3c..ed99a57a5546eb 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -7,13 +7,12 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { getValues } from './utils';
+import { LABELS, getValues } from './utils';
 import {
 	Layout,
 	LayoutBox,
 	SideIndicatorX,
 	SideIndicatorY,
-	Prefix,
 } from './styles/box-control-styles';
 import { useRtl } from '../utils/style-mixins';
 
@@ -29,9 +28,11 @@ export default function BoxInputControls( {
 		left: [ left ],
 	} = values;
 
+	const isRtl = useRtl();
+
 	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
 	const isMixed = ! allValues.every( ( v ) => v === top );
-	const isRtl = useRtl();
+	const allValue = isMixed ? '' : top;
 
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
 		const { altKey } = event;
@@ -40,6 +41,13 @@ export default function BoxInputControls( {
 
 		nextValues[ side ] = nextValue;
 
+		if ( side === 'all' ) {
+			nextValues.top = nextValue;
+			nextValues.bottom = nextValue;
+			nextValues.left = nextValue;
+			nextValues.right = nextValue;
+		}
+
 		/**
 		 * Supports changing pair sides. For example, holding the ALT key
 		 * when changing the TOP will also update BOTTOM.
@@ -64,12 +72,6 @@ export default function BoxInputControls( {
 		onChange( nextValues );
 	};
 
-	const baseStyles = {
-		position: 'absolute',
-		zIndex: 1,
-		maxWidth: 60,
-	};
-
 	return (
 		<Layout>
 			<SideIndicatorX aria-hidden="true" />
@@ -80,11 +82,8 @@ export default function BoxInputControls( {
 				value={ top }
 				dragDirection="s"
 				onChange={ createHandleOnChange( 'top' ) }
-				label="Top"
-				prefix={ <Prefix>↑</Prefix> }
-				size="small"
+				label={ LABELS.top }
 				style={ {
-					...baseStyles,
 					left: '50%',
 					transform: 'translateX(-50%)',
 				} }
@@ -94,11 +93,8 @@ export default function BoxInputControls( {
 				value={ left }
 				dragDirection="e"
 				onChange={ createHandleOnChange( 'left' ) }
-				label="Left"
-				prefix={ <Prefix>←</Prefix> }
-				size="small"
+				label={ LABELS.Left }
 				style={ {
-					...baseStyles,
 					position: 'absolute',
 					[ isRtl ? 'right' : 'left' ]: 0,
 					top: '50%',
@@ -107,20 +103,10 @@ export default function BoxInputControls( {
 			/>
 			<UnitControl
 				{ ...props }
-				value={ isMixed ? '' : top }
-				onChange={ ( next ) => {
-					onChange( {
-						top: [ next, unit ],
-						right: [ next, unit ],
-						bottom: [ next, unit ],
-						left: [ next, unit ],
-					} );
-				} }
-				label="All"
-				prefix={ <Prefix>⁘</Prefix> }
-				size="small"
+				value={ allValue }
+				onChange={ createHandleOnChange( 'all' ) }
+				label={ LABELS.all }
 				style={ {
-					...baseStyles,
 					left: '50%',
 					top: '50%',
 					transform: 'translate(-50%, -50%)',
@@ -131,11 +117,8 @@ export default function BoxInputControls( {
 				value={ right }
 				dragDirection="w"
 				onChange={ createHandleOnChange( 'right' ) }
-				label="Right"
-				prefix={ <Prefix>→</Prefix> }
-				size="small"
+				label={ LABELS.right }
 				style={ {
-					...baseStyles,
 					[ isRtl ? 'left' : 'right' ]: 0,
 					top: '50%',
 					transform: 'translateY(-50%)',
@@ -146,11 +129,8 @@ export default function BoxInputControls( {
 				value={ bottom }
 				dragDirection="n"
 				onChange={ createHandleOnChange( 'bottom' ) }
-				label="Bottom"
-				prefix={ <Prefix>↓</Prefix> }
-				size="small"
+				label={ LABELS.bottom }
 				style={ {
-					...baseStyles,
 					left: '50%',
 					bottom: 0,
 					transform: 'translateX(-50%)',
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 7bc48d91b5e2a2..79cdd3f202a37e 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -9,6 +9,7 @@ import { Flex } from '../../flex';
 import { color } from '../../utils/style-mixins';
 
 export const Root = styled.div`
+	box-sizing: border-box;
 	max-width: 300px;
 	padding-bottom: 12px;
 	width: 100%;
@@ -37,20 +38,20 @@ export const Layout = styled.div`
 `;
 
 export const LayoutBox = styled.div`
-	position: absolute;
-	box-sizing: border-box;
-	top: 12px;
+	border: 1px dashed ${color( 'ui.borderLight' )};
 	bottom: 12px;
+	box-sizing: border-box;
 	left: 30px;
-	right: 30px;
 	pointer-events: none;
-	border: 1px dashed ${color( 'ui.borderLight' )};
+	position: absolute;
+	right: 30px;
+	top: 12px;
 `;
 
 export const SideIndicator = styled.div`
 	box-sizing: border-box;
-	position: absolute;
 	pointer-events: none;
+	position: absolute;
 `;
 
 export const SideIndicatorX = styled( SideIndicator )`
@@ -67,14 +68,3 @@ export const SideIndicatorY = styled( SideIndicator )`
 	transform: translate( 0, -50% );
 	height: 100%;
 `;
-
-export const Prefix = styled.div`
-	box-sizing: border-box;
-	color: ${color( 'ui.label' )};
-	font-size: 12px;
-	line-height: 1;
-	margin-right: -8px;
-	text-align: center;
-	width: 20px;
-	user-select: none;
-`;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 96290d04830f9b..014304a142c7f4 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -4,7 +4,14 @@
 import BaseUnitControl from '../unit-control';
 import { UnitControlWrapper } from './styles/box-control-styles';
 
-export default function BoxUnitControl( { label, value, ...props } ) {
+export default function BoxUnitControl( { label, style, value, ...props } ) {
+	const styles = {
+		position: 'absolute',
+		zIndex: 1,
+		maxWidth: 60,
+		...style,
+	};
+
 	return (
 		<UnitControlWrapper aria-label={ label }>
 			<BaseUnitControl
@@ -12,6 +19,8 @@ export default function BoxUnitControl( { label, value, ...props } ) {
 				hideHTMLArrows
 				label={ label }
 				isResetValueOnUnitChange={ false }
+				size="small"
+				style={ styles }
 				value={ value }
 				{ ...props }
 			/>
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index b1b57574b6a870..a864fdd4c667cf 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -1,4 +1,15 @@
-export const TYPES = [ 'all', 'pairs', 'custom' ];
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const LABELS = {
+	all: __( 'All' ),
+	top: __( 'Top' ),
+	bottom: __( 'Bottom' ),
+	left: __( 'Left' ),
+	right: __( 'Right' ),
+};
 
 export const DEFAULT_VALUES = {
 	top: [ 0, 'px' ],
@@ -10,7 +21,7 @@ export const DEFAULT_VALUES = {
 export function parseValues( values = {} ) {
 	const nextValueProps = {};
 
-	Object.keys( DEFAULT_VALUES ).forEach( ( key ) => {
+	for ( const key in DEFAULT_VALUES ) {
 		const defaultValue = DEFAULT_VALUES[ key ];
 		const prop = values[ key ] || [];
 
@@ -18,13 +29,14 @@ export function parseValues( values = {} ) {
 			prop?.[ 0 ] || defaultValue[ 0 ],
 			prop?.[ 1 ] || defaultValue[ 1 ],
 		];
-	} );
+	}
 
 	return nextValueProps;
 }
 
 export function getValues( values, ...args ) {
 	const nextValues = [];
+
 	args.forEach( ( key ) => {
 		nextValues.push( values[ key ][ 0 ] );
 	} );
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 2b41918b71bd1c..d554729e56c191 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -18,7 +18,7 @@ import {
 	Container,
 	Fieldset,
 	Input,
-	Label,
+	Label as BaseLabel,
 	Legend,
 	LegendText,
 	Root,
@@ -46,6 +46,7 @@ export function InputControl(
 		isFloatingLabel = true,
 		label,
 		size = 'default',
+		tooltipPosition = 'top',
 		value: valueProp,
 		...props
 	},
@@ -78,25 +79,25 @@ export function InputControl(
 	const isFloatingLabelSet =
 		! hideLabelFromVision && isFloatingLabel && label;
 
-	const LabelComponent = hideLabelFromVision ? VisuallyHidden : Label;
-
 	return (
 		<Root isFloatingLabel={ isFloatingLabelSet }>
 			{ label && (
-				<LabelComponent
+				<Label
 					as="label"
+					hideLabelFromVision={ hideLabelFromVision }
 					htmlFor={ id }
-					isFloatingLabel={ isFloatingLabel }
 					isFilled={ isFilled }
 					isFloating={ isFloating }
+					isFloatingLabel={ isFloatingLabel }
 					size={ size }
 				>
 					{ label }
-				</LabelComponent>
+				</Label>
 			) }
 			<Tooltip
 				hideLabelFromVision={ hideLabelFromVision }
 				label={ label }
+				position={ tooltipPosition }
 			>
 				<Container isFocused={ isFocused }>
 					<Input
@@ -136,9 +137,29 @@ export function InputControl(
 	);
 }
 
-function Tooltip( { children, hideLabelFromVision, label } ) {
+function Label( { children, hideLabelFromVision, htmlFor, ...props } ) {
+	if ( hideLabelFromVision ) {
+		return (
+			<VisuallyHidden as="label" htmlFor={ htmlFor }>
+				{ children }
+			</VisuallyHidden>
+		);
+	}
+
+	return (
+		<BaseLabel htmlFor={ htmlFor } { ...props }>
+			{ children }
+		</BaseLabel>
+	);
+}
+
+function Tooltip( { children, hideLabelFromVision, label, ...props } ) {
 	if ( label && hideLabelFromVision ) {
-		return <BaseTooltip text={ label }>{ children }</BaseTooltip>;
+		return (
+			<BaseTooltip text={ label } { ...props }>
+				{ children }
+			</BaseTooltip>
+		);
 	}
 
 	return children;
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index 900c7b61391b42..96b18575f31f91 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -69,7 +69,7 @@ describe( 'NumberControl', () => {
 	} );
 
 	describe( 'onChange handling', () => {
-		it( 'should provide onChange callback with string value', () => {
+		it( 'should provide onChange callback with number value', () => {
 			const spy = jest.fn();
 			act( () => {
 				render(
@@ -86,7 +86,9 @@ describe( 'NumberControl', () => {
 				Simulate.change( input );
 			} );
 
-			expect( spy.mock.calls[ 0 ][ 0 ] ).toBe( 10 );
+			const changeValue = spy.mock.calls[ 0 ][ 0 ];
+
+			expect( changeValue ).toBe( 10 );
 		} );
 	} );
 
diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index 17aa62b773bca1..42a3ba0da5ebad 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/packages/components/src/unit-control/test/index.js
@@ -86,7 +86,7 @@ describe( 'UnitControl', () => {
 				Simulate.change( input, { target: { value: 62 } } );
 			} );
 
-			expect( state ).toBe( '62' );
+			expect( state ).toBe( 62 );
 		} );
 
 		it( 'should increment value on UP press', () => {
@@ -106,7 +106,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: UP } );
 			} );
 
-			expect( state ).toBe( '51' );
+			expect( state ).toBe( 51 );
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', () => {
@@ -126,7 +126,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
 			} );
 
-			expect( state ).toBe( '60' );
+			expect( state ).toBe( 60 );
 		} );
 
 		it( 'should decrement value on DOWN press', () => {
@@ -146,7 +146,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: DOWN } );
 			} );
 
-			expect( state ).toBe( '49' );
+			expect( state ).toBe( 49 );
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', () => {
@@ -166,7 +166,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
 			} );
 
-			expect( state ).toBe( '40' );
+			expect( state ).toBe( 40 );
 		} );
 	} );
 

From 3e48e86c27acca4ea268d0e496b2465fb790df9c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 21 Apr 2020 13:16:27 -0400
Subject: [PATCH 034/103] Fix left tooltip label for BoxControl

---
 packages/components/src/box-control/input-controls.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index ed99a57a5546eb..48ce4a8f0e3965 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -93,7 +93,7 @@ export default function BoxInputControls( {
 				value={ left }
 				dragDirection="e"
 				onChange={ createHandleOnChange( 'left' ) }
-				label={ LABELS.Left }
+				label={ LABELS.left }
 				style={ {
 					position: 'absolute',
 					[ isRtl ? 'right' : 'left' ]: 0,

From b9ecc2bbb69bc4a4ae0dddc87442df6ffd38c2e1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 21 Apr 2020 13:27:22 -0400
Subject: [PATCH 035/103] Refactor number-control styles

---
 .../components/src/number-control/index.js    | 52 +----------------
 .../styles/number-control-styles.js           | 57 +++++++++++++++++++
 2 files changed, 58 insertions(+), 51 deletions(-)
 create mode 100644 packages/components/src/number-control/styles/number-control-styles.js

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index e95d8c9f4b8781..2b1d42312c2f00 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -4,8 +4,6 @@
 import { clamp, noop } from 'lodash';
 import classNames from 'classnames';
 import { useDrag } from 'react-use-gesture';
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
 
 /**
  * WordPress dependencies
@@ -16,7 +14,7 @@ import { UP, DOWN } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import InputControl from '../input-control';
+import { Input } from './styles/number-control-styles';
 import { useDragCursor, add, subtract, roundClampString } from './utils';
 import { useRtl } from '../utils/style-mixins';
 
@@ -179,52 +177,4 @@ export function NumberControl(
 	);
 }
 
-const dragStyles = ( { isDragging, dragCursor } ) => {
-	let defaultArrowStyles = '';
-	let activeDragCursorStyles = '';
-
-	if ( isDragging ) {
-		defaultArrowStyles = css`
-			cursor: ${dragCursor};
-			user-select: none;
-
-			&::-webkit-outer-spin-button,
-			&::-webkit-inner-spin-button {
-				-webkit-appearance: none !important;
-				margin: 0 !important;
-			}
-		`;
-	}
-
-	if ( dragCursor ) {
-		activeDragCursorStyles = css`
-			&:active {
-				cursor: ${dragCursor};
-			}
-		`;
-	}
-
-	return css`
-		${defaultArrowStyles};
-		${activeDragCursorStyles};
-	`;
-};
-
-const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-	if ( ! hideHTMLArrows ) return ``;
-
-	return css`
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			-webkit-appearance: none !important;
-			margin: 0 !important;
-		}
-	`;
-};
-
-const Input = styled( InputControl )`
-	${dragStyles};
-	${htmlArrowStyles};
-`;
-
 export default forwardRef( NumberControl );
diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js
new file mode 100644
index 00000000000000..f0644a5de998cb
--- /dev/null
+++ b/packages/components/src/number-control/styles/number-control-styles.js
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import InputControl from '../../input-control';
+
+const dragStyles = ( { isDragging, dragCursor } ) => {
+	let defaultArrowStyles = '';
+	let activeDragCursorStyles = '';
+
+	if ( isDragging ) {
+		defaultArrowStyles = css`
+			cursor: ${dragCursor};
+			user-select: none;
+
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none !important;
+				margin: 0 !important;
+			}
+		`;
+	}
+
+	if ( dragCursor ) {
+		activeDragCursorStyles = css`
+			&:active {
+				cursor: ${dragCursor};
+			}
+		`;
+	}
+
+	return css`
+		${defaultArrowStyles};
+		${activeDragCursorStyles};
+	`;
+};
+
+const htmlArrowStyles = ( { hideHTMLArrows } ) => {
+	if ( ! hideHTMLArrows ) return ``;
+
+	return css`
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none !important;
+			margin: 0 !important;
+		}
+	`;
+};
+
+export const Input = styled( InputControl )`
+	${dragStyles};
+	${htmlArrowStyles};
+`;

From bd522f65f4adc3f53a68e5e0bcc85ba662c47884 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 21 Apr 2020 14:49:29 -0400
Subject: [PATCH 036/103] Adding isPressToSubmit to unit-control

---
 packages/components/src/unit-control/index.js | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 999ce6a85b121d..6e3fcfdce7e4e5 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { UP, DOWN, LEFT, RIGHT, ENTER } from '@wordpress/keycodes';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -15,25 +16,64 @@ import { forwardRef } from '@wordpress/element';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import { CSS_UNITS } from './utils';
+import { useValueState, isEmpty } from '../input-control/utils';
 
 function UnitControl(
 	{
 		className,
 		disableUnits = false,
-		isUnitSelectTabbable = true,
+		isPressEnterToChange = true,
 		isResetValueOnUnitChange = true,
+		isUnitSelectTabbable = true,
 		label,
+		onBlur = noop,
 		onChange = noop,
+		onKeyDown = noop,
 		onUnitChange = noop,
 		size = 'default',
 		style,
 		unit = 'px',
 		units = CSS_UNITS,
-		value,
+		value: valueProp,
 		...props
 	},
 	ref
 ) {
+	const [ value, setValue ] = useValueState( valueProp );
+
+	const handleOnBlur = ( event ) => {
+		onBlur( event );
+		if ( isPressEnterToChange && ! isEmpty( value ) ) {
+			onChange( value, { event } );
+		}
+	};
+
+	const handleOnKeyDown = ( event ) => {
+		onKeyDown( event );
+
+		if ( isPressEnterToChange && event.keyCode === ENTER ) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			onChange( value, { event } );
+		}
+	};
+
+	const handleOnChange = ( nextValue, changeProps ) => {
+		const { event } = changeProps;
+		setValue( nextValue );
+
+		if ( ! isPressEnterToChange || event.type === 'mousemove' ) {
+			onChange( nextValue, changeProps );
+		} else if (
+			[ UP, DOWN, LEFT, RIGHT ].some(
+				( keyCode ) => keyCode === changeProps.event.keyCode
+			)
+		) {
+			onChange( nextValue, changeProps );
+		}
+	};
+
 	const handleOnUnitChange = ( unitValue, changeProps ) => {
 		const { data } = changeProps;
 		onUnitChange( unitValue, changeProps );
@@ -65,7 +105,9 @@ function UnitControl(
 				className="component-unit-control__input"
 				label={ label }
 				value={ value }
-				onChange={ onChange }
+				onBlur={ handleOnBlur }
+				onChange={ handleOnChange }
+				onKeyDown={ handleOnKeyDown }
 				size={ size }
 				suffix={ inputSuffix }
 				type="number"

From 73f8215ce7806b696fa31d2c0c54735381c73e4a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 22 Apr 2020 10:50:51 -0400
Subject: [PATCH 037/103] Improve press enter to change mechanic for
 NumberControl.

Refactors Input/Number/Unit control components to add classNames and streamline logic flow.
---
 packages/block-library/src/cover/edit.js      |  1 +
 packages/components/src/box-control/index.js  |  9 +--
 .../src/box-control/input-controls.js         | 15 +++-
 .../src/box-control/stories/index.js          |  8 +-
 .../src/box-control/unit-control.js           |  1 +
 packages/components/src/box-control/utils.js  | 10 +++
 .../components/src/input-control/index.js     | 26 +++++--
 .../components/src/input-control/utils.js     | 16 ++--
 .../components/src/number-control/index.js    | 73 +++++++++++++++----
 .../components/src/number-control/utils.js    | 16 ++--
 packages/components/src/unit-control/index.js | 49 +------------
 .../styles/unit-control-styles.js             | 16 ++--
 packages/components/src/unit-control/utils.js | 14 ++++
 13 files changed, 153 insertions(+), 101 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 9366e39625e14c..6369384546af6e 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -117,6 +117,7 @@ function CoverHeightInput( {
 		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
 			<UnitControl
 				id={ inputId }
+				isResetValueOnUnitChange
 				min={ min }
 				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 4709dbfd1294bf..245722eba980c4 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -41,9 +41,8 @@ export default function BoxControl( {
 	const headingId = `${ id }-heading`;
 
 	const updateValues = ( nextValues ) => {
-		const mergedValues = { ...values, ...nextValues };
-		setValues( mergedValues );
-		onChange( mergedValues );
+		setValues( nextValues );
+		onChange( nextValues );
 	};
 
 	return (
@@ -51,12 +50,12 @@ export default function BoxControl( {
 			<Header>
 				<Text id={ headingId }>{ label }</Text>
 			</Header>
-			<LayoutContainer>
+			<LayoutContainer className="component-box-control__input-controls-wrapper">
 				<InputControls
 					{ ...inputProps }
-					values={ values }
 					onChange={ updateValues }
 					units={ units }
+					values={ values }
 				/>
 			</LayoutContainer>
 		</Root>
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 48ce4a8f0e3965..f8465595dac001 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -36,16 +36,18 @@ export default function BoxInputControls( {
 
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
 		const { altKey } = event;
-		const nextValues = values;
-		const nextValue = [ next, unit ];
+		const nextValues = { ...values };
 
-		nextValues[ side ] = nextValue;
+		const nextSide = side === 'all' ? 'top' : side;
+		const nextValue = [ next, values[ nextSide ][ 1 ] ];
 
 		if ( side === 'all' ) {
 			nextValues.top = nextValue;
 			nextValues.bottom = nextValue;
 			nextValues.left = nextValue;
 			nextValues.right = nextValue;
+		} else {
+			nextValues[ side ] = nextValue;
 		}
 
 		/**
@@ -73,13 +75,14 @@ export default function BoxInputControls( {
 	};
 
 	return (
-		<Layout>
+		<Layout className="component-box-control__input-controls">
 			<SideIndicatorX aria-hidden="true" />
 			<SideIndicatorY aria-hidden="true" />
 			<LayoutBox aria-hidden="true" />
 			<UnitControl
 				{ ...props }
 				value={ top }
+				unit={ values.top[ 1 ] }
 				dragDirection="s"
 				onChange={ createHandleOnChange( 'top' ) }
 				label={ LABELS.top }
@@ -91,6 +94,7 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ left }
+				unit={ values.left[ 1 ] }
 				dragDirection="e"
 				onChange={ createHandleOnChange( 'left' ) }
 				label={ LABELS.left }
@@ -104,6 +108,7 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ allValue }
+				unit={ unit }
 				onChange={ createHandleOnChange( 'all' ) }
 				label={ LABELS.all }
 				style={ {
@@ -115,6 +120,7 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ right }
+				unit={ values.right[ 1 ] }
 				dragDirection="w"
 				onChange={ createHandleOnChange( 'right' ) }
 				label={ LABELS.right }
@@ -127,6 +133,7 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ bottom }
+				unit={ values.bottom[ 1 ] }
 				dragDirection="n"
 				onChange={ createHandleOnChange( 'bottom' ) }
 				label={ LABELS.bottom }
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index 188042ae287e3f..11991506f188b0 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -22,10 +22,10 @@ export const _default = () => {
 
 function DemoExample() {
 	const [ values, setValues ] = useState( {
-		top: [ 10 ],
-		right: [ 10 ],
-		bottom: [ 10 ],
-		left: [ 10 ],
+		top: [ 10, 'px' ],
+		right: [ 10, 'px' ],
+		bottom: [ 10, 'px' ],
+		left: [ 10, 'px' ],
 	} );
 
 	return (
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 014304a142c7f4..21424d94432253 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -15,6 +15,7 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 	return (
 		<UnitControlWrapper aria-label={ label }>
 			<BaseUnitControl
+				className="component-box-control__unit-control"
 				hideLabelFromVision
 				hideHTMLArrows
 				label={ label }
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index a864fdd4c667cf..edec28bec663ea 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -43,3 +43,13 @@ export function getValues( values, ...args ) {
 
 	return nextValues;
 }
+
+export function getUnits( values, ...args ) {
+	const nextValues = [];
+
+	args.forEach( ( key ) => {
+		nextValues.push( values[ key ][ 1 ] );
+	} );
+
+	return nextValues;
+}
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index d554729e56c191..e4b8a6b7a4fbff 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -24,7 +24,7 @@ import {
 	Root,
 	Suffix,
 } from './styles/input-control-styles';
-import { useValueState, isEmpty } from './utils';
+import { useValueState, isValueEmpty } from './utils';
 
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( InputControl );
@@ -74,16 +74,17 @@ export function InputControl(
 		setValue( nextValue );
 	};
 
-	const isFilled = ! isEmpty( value );
+	const isFilled = ! isValueEmpty( value );
 	const isFloating = isFloatingLabel ? isFilled || isFocused : false;
 	const isFloatingLabelSet =
 		! hideLabelFromVision && isFloatingLabel && label;
 
 	return (
-		<Root isFloatingLabel={ isFloatingLabelSet }>
+		<Root className={ classes } isFloatingLabel={ isFloatingLabelSet }>
 			{ label && (
 				<Label
 					as="label"
+					className="component-input-control__label"
 					hideLabelFromVision={ hideLabelFromVision }
 					htmlFor={ id }
 					isFilled={ isFilled }
@@ -99,10 +100,13 @@ export function InputControl(
 				label={ label }
 				position={ tooltipPosition }
 			>
-				<Container isFocused={ isFocused }>
+				<Container
+					className="component-input-control__container"
+					isFocused={ isFocused }
+				>
 					<Input
 						{ ...props }
-						className={ classes }
+						className="component-input-control__input"
 						id={ id }
 						isFilled={ isFilled }
 						isFloating={ isFloating }
@@ -114,19 +118,27 @@ export function InputControl(
 						size={ size }
 						value={ value }
 					/>
-					{ suffix && <Suffix>{ suffix }</Suffix> }
+					{ suffix && (
+						<Suffix className="component-input-control__suffix">
+							{ suffix }
+						</Suffix>
+					) }
 					<Fieldset
 						aria-hidden="true"
+						className="component-input-control__fieldset"
 						isFloatingLabel={ isFloatingLabelSet }
 						isFocused={ isFocused }
 					>
 						{ isFloatingLabelSet && (
 							<Legend
 								aria-hidden="true"
+								className="component-input-control__fieldset-label"
 								isFloating={ isFloating }
 								size={ size }
 							>
-								<LegendText>{ label }</LegendText>
+								<LegendText className="component-input-control__fieldset-text">
+									{ label }
+								</LegendText>
 							</Legend>
 						) }
 					</Fieldset>
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index f6e32bacb925df..74b5ef903d14f2 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -3,6 +3,13 @@
  */
 import { useEffect, useRef, useState } from '@wordpress/element';
 
+export function isValueEmpty( value ) {
+	const isNullish = typeof value === 'undefined' || value === null;
+	const isEmptyString = value === '';
+
+	return isNullish || isEmptyString;
+}
+
 export function useControlledState( initialState ) {
 	const [ state, setState ] = useState( initialState );
 	const stateRef = useRef( initialState );
@@ -18,13 +25,6 @@ export function useControlledState( initialState ) {
 }
 
 export function useValueState( initialValue ) {
-	const value = isEmpty( initialValue ) ? '' : initialValue;
+	const value = isValueEmpty( initialValue ) ? '' : initialValue;
 	return useControlledState( value );
 }
-
-export function isEmpty( value ) {
-	const isNullish = typeof value === 'undefined' || value === null;
-	const isEmptyString = value === '';
-
-	return isNullish || isEmptyString;
-}
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 2b1d42312c2f00..fd5ee977ddaaf8 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -9,13 +9,20 @@ import { useDrag } from 'react-use-gesture';
  * WordPress dependencies
  */
 import { forwardRef, useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
+import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { Input } from './styles/number-control-styles';
-import { useDragCursor, add, subtract, roundClampString } from './utils';
+import {
+	add,
+	getValue,
+	roundClampString,
+	subtract,
+	useDragCursor,
+} from './utils';
+import { isValueEmpty, useValueState } from '../input-control/utils';
 import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
@@ -26,9 +33,12 @@ export function NumberControl(
 		dragThreshold = 10,
 		hideHTMLArrows = false,
 		isDragEnabled = true,
+		isPressEnterToChange = true,
 		isShiftStepEnabled = true,
 		max = Infinity,
 		min = -Infinity,
+		onBlur = noop,
+		onBeforeChange = ( value ) => value,
 		onChange = noop,
 		onKeyDown = noop,
 		shiftStep = 10,
@@ -38,6 +48,7 @@ export function NumberControl(
 	},
 	ref
 ) {
+	const [ value, setValue ] = useValueState( valueProp );
 	const [ isDragging, setIsDragging ] = useState( false );
 	const baseValue = clamp( 0, min, max );
 	const isRtl = useRtl();
@@ -56,6 +67,7 @@ export function NumberControl(
 
 			const [ x, y ] = delta;
 			const modifier = shiftKey ? shiftStep : 1;
+			const _forceUpdate = true;
 			let directionModifier;
 			let directionBaseValue;
 
@@ -88,7 +100,8 @@ export function NumberControl(
 					max,
 					modifier
 				);
-				handleOnChange( nextValue, { event } );
+
+				handleOnChange( nextValue, { event }, _forceUpdate );
 			}
 
 			if ( ! isDragging ) {
@@ -101,17 +114,38 @@ export function NumberControl(
 		}
 	);
 
+	const handleOnBlur = ( event ) => {
+		const _forceUpdate = true;
+		onBlur( event );
+
+		if ( isPressEnterToChange && ! isValueEmpty( value ) ) {
+			handleOnChange( value, { event }, _forceUpdate );
+		}
+	};
+
+	const handleOnChange = ( next, changeProps, _forceUpdate = false ) => {
+		const baseNextValue = getValue( next );
+		setValue( baseNextValue );
+
+		if ( ! isPressEnterToChange || _forceUpdate ) {
+			const nextValue = onBeforeChange( baseNextValue, changeProps );
+			if ( nextValue === false ) return;
+
+			onChange( nextValue, changeProps );
+		}
+	};
+
 	const handleOnKeyDown = ( event ) => {
 		onKeyDown( event );
-		const { value } = event.target;
+		const { value: currentValue } = event.target;
 
-		const isEmpty = value === '';
+		const _forceUpdate = true;
 		const enableShift = event.shiftKey && isShiftStepEnabled;
 
 		const incrementalValue = enableShift
 			? parseFloat( shiftStep )
 			: parseFloat( step );
-		let nextValue = isEmpty ? baseValue : value;
+		let nextValue = isValueEmpty( currentValue ) ? baseValue : currentValue;
 
 		// Convert to a number to use math
 		nextValue = parseFloat( nextValue );
@@ -128,7 +162,7 @@ export function NumberControl(
 					incrementalValue
 				);
 
-				handleOnChange( nextValue, { event } );
+				handleOnChange( nextValue, { event }, _forceUpdate );
 
 				break;
 
@@ -143,17 +177,25 @@ export function NumberControl(
 					incrementalValue
 				);
 
-				handleOnChange( nextValue, { event } );
+				handleOnChange( nextValue, { event }, _forceUpdate );
 
 				break;
-		}
-	};
 
-	const handleOnChange = ( value, { event } ) => {
-		const parsedValue = parseFloat( value );
-		const nextValue = isNaN( parsedValue ) ? nextValue : parsedValue;
+			case ENTER:
+				if ( isPressEnterToChange ) {
+					event.preventDefault();
+
+					nextValue = roundClampString(
+						nextValue,
+						min,
+						max,
+						incrementalValue
+					);
 
-		onChange( nextValue, { event } );
+					handleOnChange( nextValue, { event }, _forceUpdate );
+				}
+				break;
+		}
 	};
 
 	const classes = classNames( 'component-number-control', className );
@@ -161,6 +203,7 @@ export function NumberControl(
 	return (
 		<Input
 			inputMode="numeric"
+			type="number"
 			{ ...props }
 			{ ...dragGestureProps() }
 			className={ classes }
@@ -168,10 +211,10 @@ export function NumberControl(
 			hideHTMLArrows={ hideHTMLArrows }
 			isDragging={ isDragging }
 			label={ label }
+			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
 			ref={ ref }
-			type="number"
 			value={ valueProp }
 		/>
 	);
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index f34282c2cf4574..5a3cc0c0762301 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -51,18 +51,24 @@ export function useDragCursor( isDragging, dragDirection ) {
 	return dragCursor;
 }
 
-function getValue( value ) {
+function getNumberValue( value ) {
 	const number = Number( value );
 
 	return isNaN( number ) ? 0 : number;
 }
 
+export function getValue( value ) {
+	const parsedValue = parseFloat( value );
+
+	return isNaN( parsedValue ) ? value : parsedValue;
+}
+
 export function add( a, b ) {
-	return getValue( a ) + getValue( b );
+	return getNumberValue( a ) + getNumberValue( b );
 }
 
 export function subtract( a, b ) {
-	return getValue( a ) - getValue( b );
+	return getNumberValue( a ) - getNumberValue( b );
 }
 
 export function roundClamp(
@@ -71,8 +77,8 @@ export function roundClamp(
 	max = Infinity,
 	step = 1
 ) {
-	const baseValue = getValue( value );
-	const stepValue = getValue( step );
+	const baseValue = getNumberValue( value );
+	const stepValue = getNumberValue( step );
 	const rounded = Math.round( baseValue / stepValue ) * stepValue;
 	const clampedValue = clamp( rounded, min, max );
 
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 6e3fcfdce7e4e5..9b5253bd2ac258 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { UP, DOWN, LEFT, RIGHT, ENTER } from '@wordpress/keycodes';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -16,64 +15,25 @@ import { forwardRef } from '@wordpress/element';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import { CSS_UNITS } from './utils';
-import { useValueState, isEmpty } from '../input-control/utils';
 
 function UnitControl(
 	{
 		className,
 		disableUnits = false,
-		isPressEnterToChange = true,
-		isResetValueOnUnitChange = true,
+		isResetValueOnUnitChange = false,
 		isUnitSelectTabbable = true,
 		label,
-		onBlur = noop,
 		onChange = noop,
-		onKeyDown = noop,
 		onUnitChange = noop,
 		size = 'default',
 		style,
 		unit = 'px',
 		units = CSS_UNITS,
-		value: valueProp,
+		value,
 		...props
 	},
 	ref
 ) {
-	const [ value, setValue ] = useValueState( valueProp );
-
-	const handleOnBlur = ( event ) => {
-		onBlur( event );
-		if ( isPressEnterToChange && ! isEmpty( value ) ) {
-			onChange( value, { event } );
-		}
-	};
-
-	const handleOnKeyDown = ( event ) => {
-		onKeyDown( event );
-
-		if ( isPressEnterToChange && event.keyCode === ENTER ) {
-			event.preventDefault();
-			event.stopPropagation();
-
-			onChange( value, { event } );
-		}
-	};
-
-	const handleOnChange = ( nextValue, changeProps ) => {
-		const { event } = changeProps;
-		setValue( nextValue );
-
-		if ( ! isPressEnterToChange || event.type === 'mousemove' ) {
-			onChange( nextValue, changeProps );
-		} else if (
-			[ UP, DOWN, LEFT, RIGHT ].some(
-				( keyCode ) => keyCode === changeProps.event.keyCode
-			)
-		) {
-			onChange( nextValue, changeProps );
-		}
-	};
-
 	const handleOnUnitChange = ( unitValue, changeProps ) => {
 		const { data } = changeProps;
 		onUnitChange( unitValue, changeProps );
@@ -105,12 +65,9 @@ function UnitControl(
 				className="component-unit-control__input"
 				label={ label }
 				value={ value }
-				onBlur={ handleOnBlur }
-				onChange={ handleOnChange }
-				onKeyDown={ handleOnKeyDown }
+				onChange={ onChange }
 				size={ size }
 				suffix={ inputSuffix }
-				type="number"
 			></ValueInput>
 		</Root>
 	);
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 2981db458dc8c4..1f523e559aacc0 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -39,13 +39,15 @@ const arrowStyles = ( { disableUnits } ) => {
 
 export const ValueInput = styled( NumberControl )`
 	&&& {
-		appearance: none;
-		-moz-appearance: textfield;
-		display: block;
-		width: 100%;
-
-		${arrowStyles};
-		${paddingStyles};
+		input {
+			appearance: none;
+			-moz-appearance: textfield;
+			display: block;
+			width: 100%;
+
+			${arrowStyles};
+			${paddingStyles};
+		}
 	}
 `;
 
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index aa886479f27d2a..4aacfef652f504 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -6,3 +6,17 @@ export const CSS_UNITS = [
 	{ value: 'vw', label: 'vw', default: 10 },
 	{ value: 'vh', label: 'vh', default: 10 },
 ];
+
+export const DEFAULT_UNIT = CSS_UNITS[ 0 ];
+
+export function parseUnit( initialValue ) {
+	const output = [ 0, '' ];
+
+	const value = String( initialValue );
+	const num = parseFloat( value, 10 );
+
+	output[ 0 ] = num;
+	output[ 1 ] = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ] || '';
+
+	return output;
+}

From 3b2b4dc0f8cb896c8151f395d576359b4dbea993 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 22 Apr 2020 15:26:54 -0400
Subject: [PATCH 038/103] Introduce unit parsing

---
 packages/components/src/box-control/index.js  |  7 ++--
 .../src/box-control/input-controls.js         | 33 +++++----------
 .../src/box-control/stories/index.js          |  8 ++--
 .../src/box-control/unit-control.js           |  2 +-
 packages/components/src/box-control/utils.js  | 28 +------------
 .../components/src/box-control/visualizer.js  | 14 +++----
 .../components/src/number-control/index.js    | 11 ++---
 packages/components/src/unit-control/index.js | 41 ++++++++++++++-----
 packages/components/src/unit-control/utils.js |  5 ++-
 9 files changed, 62 insertions(+), 87 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 245722eba980c4..9fd31dddcd1673 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 import Visualizer from './visualizer';
 import InputControls from './input-controls';
 import Text from '../text';
-import { DEFAULT_VALUES, parseValues } from './utils';
+import { DEFAULT_VALUES } from './utils';
 import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
 const defaultInputProps = {
@@ -33,10 +33,9 @@ export default function BoxControl( {
 	onChange = noop,
 	label = __( 'Box Control' ),
 	values: valuesProp = DEFAULT_VALUES,
-	// Disable units for now
-	units = false,
+	units,
 } ) {
-	const [ values, setValues ] = useState( parseValues( valuesProp ) );
+	const [ values, setValues ] = useState( valuesProp );
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
 
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index f8465595dac001..1f672d8c82974a 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -21,12 +21,7 @@ export default function BoxInputControls( {
 	values,
 	...props
 } ) {
-	const {
-		top: [ top, unit ],
-		right: [ right ],
-		bottom: [ bottom ],
-		left: [ left ],
-	} = values;
+	const { top, right, bottom, left } = values;
 
 	const isRtl = useRtl();
 
@@ -38,16 +33,13 @@ export default function BoxInputControls( {
 		const { altKey } = event;
 		const nextValues = { ...values };
 
-		const nextSide = side === 'all' ? 'top' : side;
-		const nextValue = [ next, values[ nextSide ][ 1 ] ];
-
 		if ( side === 'all' ) {
-			nextValues.top = nextValue;
-			nextValues.bottom = nextValue;
-			nextValues.left = nextValue;
-			nextValues.right = nextValue;
+			nextValues.top = next;
+			nextValues.bottom = next;
+			nextValues.left = next;
+			nextValues.right = next;
 		} else {
-			nextValues[ side ] = nextValue;
+			nextValues[ side ] = next;
 		}
 
 		/**
@@ -57,16 +49,16 @@ export default function BoxInputControls( {
 		if ( altKey ) {
 			switch ( side ) {
 				case 'top':
-					nextValues.bottom = nextValue;
+					nextValues.bottom = next;
 					break;
 				case 'bottom':
-					nextValues.top = nextValue;
+					nextValues.top = next;
 					break;
 				case 'left':
-					nextValues.right = nextValue;
+					nextValues.right = next;
 					break;
 				case 'right':
-					nextValues.left = nextValue;
+					nextValues.left = next;
 					break;
 			}
 		}
@@ -82,7 +74,6 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ top }
-				unit={ values.top[ 1 ] }
 				dragDirection="s"
 				onChange={ createHandleOnChange( 'top' ) }
 				label={ LABELS.top }
@@ -94,7 +85,6 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ left }
-				unit={ values.left[ 1 ] }
 				dragDirection="e"
 				onChange={ createHandleOnChange( 'left' ) }
 				label={ LABELS.left }
@@ -108,7 +98,6 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ allValue }
-				unit={ unit }
 				onChange={ createHandleOnChange( 'all' ) }
 				label={ LABELS.all }
 				style={ {
@@ -120,7 +109,6 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ right }
-				unit={ values.right[ 1 ] }
 				dragDirection="w"
 				onChange={ createHandleOnChange( 'right' ) }
 				label={ LABELS.right }
@@ -133,7 +121,6 @@ export default function BoxInputControls( {
 			<UnitControl
 				{ ...props }
 				value={ bottom }
-				unit={ values.bottom[ 1 ] }
 				dragDirection="n"
 				onChange={ createHandleOnChange( 'bottom' ) }
 				label={ LABELS.bottom }
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index 11991506f188b0..47e8520eeb9fb9 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -22,10 +22,10 @@ export const _default = () => {
 
 function DemoExample() {
 	const [ values, setValues ] = useState( {
-		top: [ 10, 'px' ],
-		right: [ 10, 'px' ],
-		bottom: [ 10, 'px' ],
-		left: [ 10, 'px' ],
+		top: '10px',
+		right: '10px',
+		bottom: '10px',
+		left: '10px',
 	} );
 
 	return (
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 21424d94432253..64ce6e27d7eb20 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -8,7 +8,7 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 	const styles = {
 		position: 'absolute',
 		zIndex: 1,
-		maxWidth: 60,
+		maxWidth: 70,
 		...style,
 	};
 
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index edec28bec663ea..7578157a5bb03b 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -18,37 +18,11 @@ export const DEFAULT_VALUES = {
 	left: [ 0, 'px' ],
 };
 
-export function parseValues( values = {} ) {
-	const nextValueProps = {};
-
-	for ( const key in DEFAULT_VALUES ) {
-		const defaultValue = DEFAULT_VALUES[ key ];
-		const prop = values[ key ] || [];
-
-		nextValueProps[ key ] = [
-			prop?.[ 0 ] || defaultValue[ 0 ],
-			prop?.[ 1 ] || defaultValue[ 1 ],
-		];
-	}
-
-	return nextValueProps;
-}
-
 export function getValues( values, ...args ) {
 	const nextValues = [];
 
 	args.forEach( ( key ) => {
-		nextValues.push( values[ key ][ 0 ] );
-	} );
-
-	return nextValues;
-}
-
-export function getUnits( values, ...args ) {
-	const nextValues = [];
-
-	args.forEach( ( key ) => {
-		nextValues.push( values[ key ][ 1 ] );
+		nextValues.push( values[ key ] );
 	} );
 
 	return nextValues;
diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index e87e7c4a559f95..02e38ca63db319 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -12,18 +12,16 @@ import { useRef, useEffect, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { color, rtl } from '../utils/style-mixins';
-import { DEFAULT_VALUES, parseValues } from './utils';
+import { DEFAULT_VALUES } from './utils';
 
 export default function BoxControlVisualizer( {
 	children,
 	values: valuesProp = DEFAULT_VALUES,
 	...props
 } ) {
-	const values = parseValues( valuesProp );
-
 	return (
 		<Container { ...props } aria-hidden="true">
-			<Sides values={ values } />
+			<Sides values={ valuesProp } />
 			{ children }
 		</Container>
 	);
@@ -43,28 +41,28 @@ function Sides( { values } ) {
 }
 
 function Top( { value } ) {
-	const [ height ] = value;
+	const height = value;
 	const animationProps = useSideAnimation( height );
 
 	return <TopView { ...animationProps } style={ { height } } />;
 }
 
 function Right( { value } ) {
-	const [ width ] = value;
+	const width = value;
 	const animationProps = useSideAnimation( width );
 
 	return <RightView { ...animationProps } style={ { width } } />;
 }
 
 function Bottom( { value } ) {
-	const [ height ] = value;
+	const height = value;
 	const animationProps = useSideAnimation( height );
 
 	return <BottomView { ...animationProps } style={ { height } } />;
 }
 
 function Left( { value } ) {
-	const [ width ] = value;
+	const width = value;
 	const animationProps = useSideAnimation( width );
 
 	return <LeftView { ...animationProps } style={ { width } } />;
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index fd5ee977ddaaf8..f9e9ac959e39a4 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -38,7 +38,6 @@ export function NumberControl(
 		max = Infinity,
 		min = -Infinity,
 		onBlur = noop,
-		onBeforeChange = ( value ) => value,
 		onChange = noop,
 		onKeyDown = noop,
 		shiftStep = 10,
@@ -124,14 +123,11 @@ export function NumberControl(
 	};
 
 	const handleOnChange = ( next, changeProps, _forceUpdate = false ) => {
-		const baseNextValue = getValue( next );
-		setValue( baseNextValue );
+		const nextValue = getValue( next );
 
 		if ( ! isPressEnterToChange || _forceUpdate ) {
-			const nextValue = onBeforeChange( baseNextValue, changeProps );
-			if ( nextValue === false ) return;
-
 			onChange( nextValue, changeProps );
+			setValue( nextValue );
 		}
 	};
 
@@ -194,6 +190,7 @@ export function NumberControl(
 
 					handleOnChange( nextValue, { event }, _forceUpdate );
 				}
+
 				break;
 		}
 	};
@@ -215,7 +212,7 @@ export function NumberControl(
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
 			ref={ ref }
-			value={ valueProp }
+			value={ value }
 		/>
 	);
 }
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 9b5253bd2ac258..82be6141a8a0e8 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -14,33 +14,51 @@ import { forwardRef } from '@wordpress/element';
  */
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS } from './utils';
+import { CSS_UNITS, parseUnit } from './utils';
+import { useValueState } from '../input-control/utils';
 
 function UnitControl(
 	{
 		className,
 		disableUnits = false,
 		isResetValueOnUnitChange = false,
-		isUnitSelectTabbable = true,
+		isUnitSelectTabbable = false,
 		label,
 		onChange = noop,
-		onUnitChange = noop,
 		size = 'default',
 		style,
-		unit = 'px',
 		units = CSS_UNITS,
-		value,
+		value: valueProp,
 		...props
 	},
 	ref
 ) {
-	const handleOnUnitChange = ( unitValue, changeProps ) => {
+	const [ valueState, setValueState ] = useValueState( valueProp );
+	const [ value, unit ] = parseUnit( valueState );
+
+	const handleOnChange = ( next, changeProps ) => {
+		const { event } = changeProps;
+		const [ parsedValue, parsedUnit ] = parseUnit( event.target.value );
+
+		const baseValue = parsedUnit ? parsedValue : next;
+		const baseUnit = parsedUnit || unit;
+
+		const nextValue = `${ baseValue }${ baseUnit }`;
+
+		setValueState( nextValue );
+		onChange( nextValue, changeProps );
+	};
+
+	const handleOnUnitChange = ( next, changeProps ) => {
 		const { data } = changeProps;
-		onUnitChange( unitValue, changeProps );
+
+		let nextValue = `${ value }${ next }`;
 
 		if ( isResetValueOnUnitChange && data.default !== undefined ) {
-			onChange( data.default, changeProps );
+			nextValue = `${ data.default }${ next }`;
 		}
+
+		onChange( nextValue, changeProps );
 	};
 
 	const classes = classnames( 'component-unit-control', className );
@@ -61,13 +79,14 @@ function UnitControl(
 			<ValueInput
 				aria-label={ label }
 				{ ...props }
-				disableUnits={ disableUnits }
 				className="component-unit-control__input"
+				disableUnits={ disableUnits }
 				label={ label }
-				value={ value }
-				onChange={ onChange }
+				onChange={ handleOnChange }
 				size={ size }
 				suffix={ inputSuffix }
+				type="text"
+				value={ value }
 			></ValueInput>
 		</Root>
 	);
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 4aacfef652f504..7681fb7af2609b 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -14,9 +14,10 @@ export function parseUnit( initialValue ) {
 
 	const value = String( initialValue );
 	const num = parseFloat( value, 10 );
+	const unit = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
 
-	output[ 0 ] = num;
-	output[ 1 ] = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ] || '';
+	output[ 0 ] = isNaN( num ) ? '' : num;
+	output[ 1 ] = unit !== 'undefined' ? unit : '';
 
 	return output;
 }

From 51d42d9c215b239e8a3304d5d5474fe42b1f0c9d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 22 Apr 2020 16:17:37 -0400
Subject: [PATCH 039/103] Stabilized value/unit parsing

---
 .../src/box-control/input-controls.js         |  5 +-
 .../src/box-control/unit-control.js           |  1 +
 packages/components/src/box-control/utils.js  | 18 +++++---
 .../components/src/input-control/index.js     |  4 +-
 .../styles/input-control-styles.js            |  3 +-
 .../components/src/input-control/utils.js     |  1 +
 .../components/src/number-control/index.js    |  2 +
 packages/components/src/unit-control/index.js | 27 ++++++++---
 .../src/unit-control/stories/index.js         |  6 +--
 .../src/unit-control/unit-select-control.js   |  6 +--
 packages/components/src/unit-control/utils.js | 46 +++++++++++++++++--
 11 files changed, 90 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 1f672d8c82974a..dada4c476aa76a 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, getValues } from './utils';
+import { LABELS, isValuesMixed } from './utils';
 import {
 	Layout,
 	LayoutBox,
@@ -24,9 +24,8 @@ export default function BoxInputControls( {
 	const { top, right, bottom, left } = values;
 
 	const isRtl = useRtl();
+	const isMixed = isValuesMixed( values );
 
-	const allValues = getValues( values, 'top', 'right', 'bottom', 'left' );
-	const isMixed = ! allValues.every( ( v ) => v === top );
 	const allValue = isMixed ? '' : top;
 
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 64ce6e27d7eb20..e4a6fec968b06c 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -20,6 +20,7 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 				hideHTMLArrows
 				label={ label }
 				isResetValueOnUnitChange={ false }
+				placeholder={ 0 }
 				size="small"
 				style={ styles }
 				value={ value }
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 7578157a5bb03b..74367ee95590c9 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -12,18 +12,24 @@ export const LABELS = {
 };
 
 export const DEFAULT_VALUES = {
-	top: [ 0, 'px' ],
-	right: [ 0, 'px' ],
-	bottom: [ 0, 'px' ],
-	left: [ 0, 'px' ],
+	top: '0px',
+	right: '0px',
+	bottom: '0px',
+	left: '0px',
 };
 
+export function isValuesMixed( values ) {
+	const vals = Object.values( values );
+
+	return ! vals.every( ( v ) => v === vals[ 0 ] );
+}
+
 export function getValues( values, ...args ) {
 	const nextValues = [];
 
-	args.forEach( ( key ) => {
+	for ( const key in args ) {
 		nextValues.push( values[ key ] );
-	} );
+	}
 
 	return nextValues;
 }
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index e4b8a6b7a4fbff..ad16a05b79ab26 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -43,7 +43,7 @@ export function InputControl(
 		hideLabelFromVision = false,
 		id: idProp,
 		suffix,
-		isFloatingLabel = true,
+		isFloatingLabel = false,
 		label,
 		size = 'default',
 		tooltipPosition = 'top',
@@ -110,7 +110,7 @@ export function InputControl(
 						id={ id }
 						isFilled={ isFilled }
 						isFloating={ isFloating }
-						isFloatingLabel={ isFloatingLabel }
+						isFloatingLabel={ isFloatingLabelSet }
 						onBlur={ handleOnBlur }
 						onChange={ handleOnChange }
 						onFocus={ handleOnFocus }
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 382a79c75c107d..166be0772a0c0d 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -142,6 +142,7 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 	const pointerEvents = isFloating ? null : 'none';
 
 	const marginTop = isFloating ? 0 : 1;
+	const marginLeft = isFloatingLabel ? 8 : 0;
 	const offset = size === 'small' ? '-3px' : '-5px';
 
 	let transform = isFloating
@@ -165,7 +166,7 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 			transition,
 			transform,
 		},
-		rtl( { marginLeft: 8 } )(),
+		rtl( { marginLeft } )(),
 		rtl(
 			{ transformOrigin: 'top left' },
 			{ transformOrigin: 'top right' }
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index 74b5ef903d14f2..b995399cfbc2aa 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -26,5 +26,6 @@ export function useControlledState( initialState ) {
 
 export function useValueState( initialValue ) {
 	const value = isValueEmpty( initialValue ) ? '' : initialValue;
+
 	return useControlledState( value );
 }
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index f9e9ac959e39a4..3ad12d794b0918 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -128,6 +128,8 @@ export function NumberControl(
 		if ( ! isPressEnterToChange || _forceUpdate ) {
 			onChange( nextValue, changeProps );
 			setValue( nextValue );
+		} else {
+			setValue( next );
 		}
 	};
 
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 82be6141a8a0e8..16421920b82d36 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -14,31 +14,40 @@ import { forwardRef } from '@wordpress/element';
  */
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, parseUnit } from './utils';
-import { useValueState } from '../input-control/utils';
+import { CSS_UNITS, parseUnit, useUnitValueState } from './utils';
 
 function UnitControl(
 	{
+		autoComplete = 'off',
 		className,
 		disableUnits = false,
 		isResetValueOnUnitChange = false,
 		isUnitSelectTabbable = false,
 		label,
 		onChange = noop,
+		onUnitChange = noop,
 		size = 'default',
 		style,
+		type = 'text',
+		unit: unitProp,
 		units = CSS_UNITS,
 		value: valueProp,
 		...props
 	},
 	ref
 ) {
-	const [ valueState, setValueState ] = useValueState( valueProp );
-	const [ value, unit ] = parseUnit( valueState );
+	const [ valueState, setValueState ] = useUnitValueState(
+		valueProp,
+		unitProp
+	);
+	const [ value, unit ] = parseUnit( valueState, units );
 
 	const handleOnChange = ( next, changeProps ) => {
 		const { event } = changeProps;
-		const [ parsedValue, parsedUnit ] = parseUnit( event.target.value );
+		const [ parsedValue, parsedUnit ] = parseUnit(
+			event.target.value,
+			units
+		);
 
 		const baseValue = parsedUnit ? parsedValue : next;
 		const baseUnit = parsedUnit || unit;
@@ -47,6 +56,10 @@ function UnitControl(
 
 		setValueState( nextValue );
 		onChange( nextValue, changeProps );
+
+		if ( unit !== baseUnit ) {
+			onUnitChange( baseUnit, changeProps );
+		}
 	};
 
 	const handleOnUnitChange = ( next, changeProps ) => {
@@ -59,6 +72,7 @@ function UnitControl(
 		}
 
 		onChange( nextValue, changeProps );
+		onUnitChange( next, changeProps );
 	};
 
 	const classes = classnames( 'component-unit-control', className );
@@ -79,13 +93,14 @@ function UnitControl(
 			<ValueInput
 				aria-label={ label }
 				{ ...props }
+				autoComplete={ autoComplete }
 				className="component-unit-control__input"
 				disableUnits={ disableUnits }
 				label={ label }
 				onChange={ handleOnChange }
 				size={ size }
 				suffix={ inputSuffix }
-				type="text"
+				type={ type }
 				value={ value }
 			></ValueInput>
 		</Root>
diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index f95f7641ab0389..02547ec946ca9f 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -20,10 +20,10 @@ export default {
 };
 
 function Example() {
-	const [ value, setValue ] = useState( '10' );
-	const [ unit, setUnit ] = useState( 'px' );
+	const [ value, setValue ] = useState( '10px' );
 
 	const props = {
+		disableUnits: boolean( 'disableUnits', false ),
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		isUnitSelectTabbable: boolean( 'isUnitSelectTabbable', true ),
 		label: text( 'label', 'Value' ),
@@ -47,8 +47,6 @@ function Example() {
 				{ ...props }
 				value={ value }
 				onChange={ ( v ) => setValue( v ) }
-				unit={ unit }
-				onUnitChange={ ( v ) => setUnit( v ) }
 			/>
 		</ControlWrapperView>
 	);
diff --git a/packages/components/src/unit-control/unit-select-control.js b/packages/components/src/unit-control/unit-select-control.js
index 6844b5c959963a..20066c5e96a70e 100644
--- a/packages/components/src/unit-control/unit-select-control.js
+++ b/packages/components/src/unit-control/unit-select-control.js
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { noop, isEmpty } from 'lodash';
+import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
-import { CSS_UNITS } from './utils';
+import { CSS_UNITS, hasUnits } from './utils';
 
 /**
  * Renders a `select` if there are multiple units.
@@ -23,7 +23,7 @@ export default function UnitSelectControl( {
 	value = 'px',
 	...props
 } ) {
-	if ( isEmpty( options ) || options.length === 1 || options === false ) {
+	if ( ! hasUnits( options ) ) {
 		return <UnitLabel size={ size }>{ value }</UnitLabel>;
 	}
 
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 7681fb7af2609b..64a7b59c9d879b 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { useValueState } from '../input-control/utils';
+
 export const CSS_UNITS = [
 	{ value: 'px', label: 'px', default: 0 },
 	{ value: '%', label: '%', default: 10 },
@@ -9,15 +19,43 @@ export const CSS_UNITS = [
 
 export const DEFAULT_UNIT = CSS_UNITS[ 0 ];
 
-export function parseUnit( initialValue ) {
-	const output = [ 0, '' ];
+/**
+ * Custom hook to handle legacy value + unit handling.
+ * This component use to manage both incoming value and units separately.
+ *
+ * Moving forward, ideally the value should be a string that contains both
+ * the value and unit, example: '10px'
+ *
+ * @param {number|string} value Value
+ * @param {string} unit Unit value
+ */
+export function useUnitValueState( value, unit ) {
+	const initialValue = unit ? `${ value }${ unit }` : value;
 
+	return useValueState( initialValue );
+}
+
+export function hasUnits( units ) {
+	return ! isEmpty( units ) && units.length > 1 && units !== false;
+}
+
+export function parseUnit( initialValue, units = CSS_UNITS ) {
+	const output = [ 0, '' ];
 	const value = String( initialValue );
+
 	const num = parseFloat( value, 10 );
-	const unit = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
+	const unitMatch = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
+
+	let unit = unitMatch !== 'undefined' ? unitMatch : '';
+	unit = unit.toLowerCase();
+
+	if ( hasUnits( units ) ) {
+		const match = units.find( ( item ) => item.value === unit );
+		unit = match ? match.value : unit;
+	}
 
 	output[ 0 ] = isNaN( num ) ? '' : num;
-	output[ 1 ] = unit !== 'undefined' ? unit : '';
+	output[ 1 ] = unit;
 
 	return output;
 }

From 27fd53991d7e8ef3e8a9a1ae3e59dc6c51bdd7c6 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 22 Apr 2020 16:39:01 -0400
Subject: [PATCH 040/103] Add unit support to Cover block padding.

Also refine interactions
---
 packages/block-editor/src/hooks/padding.js          |  9 +--------
 packages/components/src/box-control/index.js        |  7 +++----
 packages/components/src/box-control/unit-control.js |  1 -
 packages/components/src/box-control/utils.js        |  8 ++++++++
 packages/components/src/unit-control/index.js       | 13 ++++++-------
 packages/components/src/unit-control/utils.js       |  2 +-
 6 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index 9a10324e4f080a..c25d30db6bfb03 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -32,16 +32,9 @@ export function PaddingEdit( props ) {
 	}
 
 	const onChange = ( next ) => {
-		const { top, right, bottom, left } = next;
-
 		const newStyle = {
 			...style,
-			padding: {
-				top: `${ top[ 0 ] }${ top[ 1 ] }`,
-				right: `${ right[ 0 ] }${ right[ 1 ] }`,
-				bottom: `${ bottom[ 0 ] }${ bottom[ 1 ] }`,
-				left: `${ left[ 0 ] }${ left[ 1 ] }`,
-			},
+			padding: next,
 		};
 
 		setAttributes( {
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 9fd31dddcd1673..7514f8636fc38b 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -6,7 +6,6 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -14,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import Visualizer from './visualizer';
 import InputControls from './input-controls';
 import Text from '../text';
-import { DEFAULT_VALUES } from './utils';
+import { useBoxControlState } from './utils';
 import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
 const defaultInputProps = {
@@ -32,10 +31,10 @@ export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
-	values: valuesProp = DEFAULT_VALUES,
+	values: valuesProp,
 	units,
 } ) {
-	const [ values, setValues ] = useState( valuesProp );
+	const [ values, setValues ] = useBoxControlState( valuesProp );
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
 
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index e4a6fec968b06c..5f23b69188ff99 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -21,7 +21,6 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 				label={ label }
 				isResetValueOnUnitChange={ false }
 				placeholder={ 0 }
-				size="small"
 				style={ styles }
 				value={ value }
 				{ ...props }
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 74367ee95590c9..7189fc3a536ad1 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 export const LABELS = {
 	all: __( 'All' ),
@@ -18,6 +19,13 @@ export const DEFAULT_VALUES = {
 	left: '0px',
 };
 
+export function useBoxControlState( values = {} ) {
+	return useState( {
+		...DEFAULT_VALUES,
+		...values,
+	} );
+}
+
 export function isValuesMixed( values ) {
 	const vals = Object.values( values );
 
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 16421920b82d36..bd6f4b2ef75254 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -14,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, parseUnit, useUnitValueState } from './utils';
+import { CSS_UNITS, DEFAULT_UNIT, parseUnit, useUnitValueState } from './utils';
 
 function UnitControl(
 	{
@@ -44,13 +44,12 @@ function UnitControl(
 
 	const handleOnChange = ( next, changeProps ) => {
 		const { event } = changeProps;
-		const [ parsedValue, parsedUnit ] = parseUnit(
-			event.target.value,
-			units
-		);
+		const inputValue = event.target.value;
 
-		const baseValue = parsedUnit ? parsedValue : next;
-		const baseUnit = parsedUnit || unit;
+		const [ parsedValue, parsedUnit ] = parseUnit( inputValue, units );
+
+		const baseValue = next === value ? parsedValue : next;
+		const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
 
 		const nextValue = `${ baseValue }${ baseUnit }`;
 
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 64a7b59c9d879b..b4ee51967a54a3 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -51,7 +51,7 @@ export function parseUnit( initialValue, units = CSS_UNITS ) {
 
 	if ( hasUnits( units ) ) {
 		const match = units.find( ( item ) => item.value === unit );
-		unit = match ? match.value : unit;
+		unit = match?.value;
 	}
 
 	output[ 0 ] = isNaN( num ) ? '' : num;

From 31ef9763d9d8bc5c9018627b500599a7f3d31319 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 22 Apr 2020 17:22:55 -0400
Subject: [PATCH 041/103] Hook up custom units via add_theme_support with
 Padding controls

---
 .../src/components/unit-control/index.js      | 49 ++++++++++++-------
 packages/block-editor/src/hooks/padding.js    |  4 ++
 .../src/box-control/unit-control.js           |  1 +
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js
index eb1bf24eb44fee..7f80dd203b4a28 100644
--- a/packages/block-editor/src/components/unit-control/index.js
+++ b/packages/block-editor/src/components/unit-control/index.js
@@ -11,6 +11,36 @@ import useEditorFeature from '../use-editor-feature';
 const { __defaultUnits } = BaseUnitControl;
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
+	const units = useCustomUnits( unitsProp );
+
+	return <BaseUnitControl units={ units } { ...props } />;
+}
+
+// Hoisting statics from the BaseUnitControl
+UnitControl.__defaultUnits = __defaultUnits;
+
+/**
+ * Filters available units based on values defined by settings.
+ *
+ * @param {Array} settings Collection of preferred units.
+ * @param {Array} units Collection of available units.
+ *
+ * @return {Array} Filtered units based on settings.
+ */
+function filterUnitsWithSettings( settings = [], units = [] ) {
+	return units.filter( ( unit ) => {
+		return settings.includes( unit.value );
+	} );
+}
+
+/**
+ * Custom hook to retrieve and consolidate units setting from add_theme_support().
+ *
+ * @param {Array} unitsProp Collection of available units.
+ *
+ * @return {Array} Filtered units based on settings.
+ */
+export function useCustomUnits( unitsProp ) {
 	const settings = useEditorFeature( '__experimentalDisableCustomUnits' );
 	const isDisabled = !! settings;
 
@@ -32,22 +62,5 @@ export default function UnitControl( { units: unitsProp, ...props } ) {
 		units = isDisabled ? false : unitsProp;
 	}
 
-	return <BaseUnitControl units={ units } { ...props } />;
-}
-
-// Hoisting statics from the BaseUnitControl
-UnitControl.__defaultUnits = __defaultUnits;
-
-/**
- * Filters available units based on values defined by settings.
- *
- * @param {Array} settings Collection of preferred units.
- * @param {Array} units Collection of available units.
- *
- * @return {Array} Filtered units based on settings.
- */
-function filterUnitsWithSettings( settings = [], units = [] ) {
-	return units.filter( ( unit ) => {
-		return settings.includes( unit.value );
-	} );
+	return units;
 }
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index c25d30db6bfb03..9d5b43eaa9cb65 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -10,6 +10,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
  * Internal dependencies
  */
 import { cleanEmptyObject } from './utils';
+import { useCustomUnits } from '../components/unit-control';
 
 export const PADDING_SUPPORT_KEY = '__experimentalPadding';
 
@@ -27,6 +28,8 @@ export function PaddingEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const units = useCustomUnits();
+
 	if ( ! hasBlockSupport( blockName, PADDING_SUPPORT_KEY ) ) {
 		return null;
 	}
@@ -49,6 +52,7 @@ export function PaddingEdit( props ) {
 				values={ padding }
 				onChange={ onChange }
 				label={ __( 'Padding' ) }
+				units={ units }
 			/>
 		),
 		native: null,
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 5f23b69188ff99..e4a6fec968b06c 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -21,6 +21,7 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 				label={ label }
 				isResetValueOnUnitChange={ false }
 				placeholder={ 0 }
+				size="small"
 				style={ styles }
 				value={ value }
 				{ ...props }

From b447ee67eebdd71d38bf23a6e20e92f09a98a7b7 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 09:57:20 -0400
Subject: [PATCH 042/103] Use floating labels for BoxControl inputs.

Also add disabled styles to InputControl
---
 .../components/src/box-control/input-controls.js    |  2 ++
 .../src/box-control/styles/box-control-styles.js    |  2 +-
 packages/components/src/box-control/unit-control.js |  5 +++--
 packages/components/src/input-control/index.js      |  2 ++
 .../components/src/input-control/stories/index.js   |  1 +
 .../input-control/styles/input-control-styles.js    | 13 ++++++++++++-
 .../src/unit-control/styles/unit-control-styles.js  |  2 +-
 packages/components/src/utils/colors-values.js      |  1 +
 8 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index dada4c476aa76a..77fb91deae2b44 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -77,6 +77,7 @@ export default function BoxInputControls( {
 				onChange={ createHandleOnChange( 'top' ) }
 				label={ LABELS.top }
 				style={ {
+					marginTop: -5,
 					left: '50%',
 					transform: 'translateX(-50%)',
 				} }
@@ -125,6 +126,7 @@ export default function BoxInputControls( {
 				label={ LABELS.bottom }
 				style={ {
 					left: '50%',
+					marginTop: -5,
 					bottom: 0,
 					transform: 'translateX(-50%)',
 				} }
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 79cdd3f202a37e..5b22ddbb3602aa 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -66,5 +66,5 @@ export const SideIndicatorY = styled( SideIndicator )`
 	top: 50%;
 	left: 50%;
 	transform: translate( 0, -50% );
-	height: 100%;
+	height: 50%;
 `;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index e4a6fec968b06c..ffe37a6b97fcbb 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -6,9 +6,10 @@ import { UnitControlWrapper } from './styles/box-control-styles';
 
 export default function BoxUnitControl( { label, style, value, ...props } ) {
 	const styles = {
+		marginTop: -2,
+		maxWidth: 70,
 		position: 'absolute',
 		zIndex: 1,
-		maxWidth: 70,
 		...style,
 	};
 
@@ -16,8 +17,8 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 		<UnitControlWrapper aria-label={ label }>
 			<BaseUnitControl
 				className="component-box-control__unit-control"
-				hideLabelFromVision
 				hideHTMLArrows
+				isFloatingLabel
 				label={ label }
 				isResetValueOnUnitChange={ false }
 				placeholder={ 0 }
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index ad16a05b79ab26..16b10e81ae27a2 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -37,6 +37,7 @@ export function InputControl(
 	{
 		children,
 		className,
+		disabled,
 		onBlur = noop,
 		onChange = noop,
 		onFocus = noop,
@@ -107,6 +108,7 @@ export function InputControl(
 					<Input
 						{ ...props }
 						className="component-input-control__input"
+						disabled={ disabled }
 						id={ id }
 						isFilled={ isFilled }
 						isFloating={ isFloating }
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
index 18959aab149c74..2fd63141128ca5 100644
--- a/packages/components/src/input-control/stories/index.js
+++ b/packages/components/src/input-control/stories/index.js
@@ -22,6 +22,7 @@ function Example() {
 	const [ value, setValue ] = useState( '' );
 
 	const props = {
+		disabled: boolean( 'disabled', false ),
 		isFloatingLabel: boolean( 'isFloatingLabel', false ),
 		label: text( 'label', 'Value' ),
 		placeholder: text( 'placeholder', 'Placeholder' ),
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 166be0772a0c0d..cf87219d5b586e 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -39,6 +39,14 @@ export const Container = styled.div`
 	${containerBorder};
 `;
 
+const disabledStyles = ( { disabled } ) => {
+	if ( ! disabled ) return '';
+
+	return css( {
+		color: color( 'ui.textDisabled' ),
+	} );
+};
+
 const fontSizeStyles = ( { size } ) => {
 	const sizes = {
 		default: '13px',
@@ -110,6 +118,7 @@ export const Input = styled.input`
 		padding-right: 8px;
 		width: 100%;
 
+		${disabledStyles};
 		${fontSizeStyles};
 		${sizeStyles};
 
@@ -120,7 +129,9 @@ export const Input = styled.input`
 const laberColor = ( { isFloatingLabel, isFilled, isFloating } ) => {
 	const isPlaceholder = isFloatingLabel && ! isFilled;
 	const textColor =
-		isPlaceholder || isFloating ? color( 'lightGray.900' ) : 'currentColor';
+		isPlaceholder || isFloating
+			? color( 'ui.textDisabled' )
+			: 'currentColor';
 
 	return css( { color: textColor } );
 };
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 1f523e559aacc0..f37c30d45664ba 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -15,7 +15,7 @@ export const Root = styled.div`
 `;
 
 const paddingStyles = ( { disableUnits } ) => {
-	const value = disableUnits ? 3 : 20;
+	const value = disableUnits ? 3 : 28;
 
 	return css`
 		${rtl( { paddingRight: value } )()};
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 7f869e7781145a..4321a0cf6552f6 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -141,6 +141,7 @@ export const UI = {
 	borderFocus: BLUE.medium.focus,
 	borderLight: LIGHT_GRAY[ 600 ],
 	label: DARK_GRAY[ 500 ],
+	textDisabled: DARK_GRAY[ 150 ],
 };
 
 export const COLORS = {

From aba89732bb30b224ff3b4e6983f3bf2d93983e48 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 10:33:33 -0400
Subject: [PATCH 043/103] Remove tooltip from InputControl. Refactor + update
 docs.

---
 .../components/src/input-control/README.md    |  89 ++++++++++++++
 .../components/src/input-control/index.js     | 111 ++++++++----------
 .../src/input-control/stories/index.js        |   7 +-
 .../src/input-control/test/index.js           |   0
 .../components/src/input-control/utils.js     |  36 +++---
 5 files changed, 161 insertions(+), 82 deletions(-)
 create mode 100644 packages/components/src/input-control/README.md
 create mode 100644 packages/components/src/input-control/test/index.js

diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
new file mode 100644
index 00000000000000..f9cb20632fe564
--- /dev/null
+++ b/packages/components/src/input-control/README.md
@@ -0,0 +1,89 @@
+# InputControl
+
+InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace [TextControl](../text-control).
+
+## Development guidelines
+
+### Usage
+
+Render a user interface to input the name of an additional css class.
+
+```js
+import { __experimentalInputControl as InputControl } from '@wordpress/components';
+import { useState } from '@wordpress/compose';
+
+const Example = () => {
+	const [value, setValue] = useState('')
+
+	return <InputControl value={value} onChange={(nextValue) => setValue(nextValue)} />
+
+) );
+```
+
+### Props
+
+#### disabled
+
+If true, the `input` will be disabled.
+
+-   Type: `Boolean`
+-   Required: No
+
+#### isFloatingLabel
+
+If true, the `label` will render with a floating interaction.
+
+-   Type: `Boolean`
+-   Required: No
+
+#### hideLabelFromVision
+
+If true, the label will only be visible to screen readers.
+
+-   Type: `Boolean`
+-   Required: No
+
+#### label
+
+If this property is added, a label will be generated using label property as the content.
+
+-   Type: `String`
+-   Required: No
+
+#### onChange
+
+A function that receives the value of the input.
+
+-   Type: `function`
+-   Required: Yes
+
+#### size
+
+Adjusts the size of the input.
+Sizes include: `default`, `small`
+
+-   Type: `String`
+-   Required: No
+-   Default: `default`
+
+#### suffix
+
+Renders an element on the right side of the input.
+
+-   Type: `React.ReactNode`
+-   Required: No
+
+#### type
+
+Type of the input element to render. Defaults to "text".
+
+-   Type: `String`
+-   Required: No
+-   Default: "text"
+
+#### value
+
+The current value of the input.
+
+-   Type: `String | Number`
+-   Required: Yes
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 16b10e81ae27a2..4630f006316984 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -12,7 +12,6 @@ import { useState, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import BaseTooltip from '../tooltip';
 import VisuallyHidden from '../visually-hidden';
 import {
 	Container,
@@ -38,16 +37,15 @@ export function InputControl(
 		children,
 		className,
 		disabled,
-		onBlur = noop,
-		onChange = noop,
-		onFocus = noop,
 		hideLabelFromVision = false,
 		id: idProp,
-		suffix,
 		isFloatingLabel = false,
 		label,
+		onBlur = noop,
+		onChange = noop,
+		onFocus = noop,
 		size = 'default',
-		tooltipPosition = 'top',
+		suffix,
 		value: valueProp,
 		...props
 	},
@@ -55,6 +53,7 @@ export function InputControl(
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const [ value, setValue ] = useValueState( valueProp );
+
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'component-input-control', className );
 
@@ -96,57 +95,51 @@ export function InputControl(
 					{ label }
 				</Label>
 			) }
-			<Tooltip
-				hideLabelFromVision={ hideLabelFromVision }
-				label={ label }
-				position={ tooltipPosition }
+			<Container
+				className="component-input-control__container"
+				isFocused={ isFocused }
 			>
-				<Container
-					className="component-input-control__container"
+				<Input
+					{ ...props }
+					className="component-input-control__input"
+					disabled={ disabled }
+					id={ id }
+					isFilled={ isFilled }
+					isFloating={ isFloating }
+					isFloatingLabel={ isFloatingLabelSet }
+					onBlur={ handleOnBlur }
+					onChange={ handleOnChange }
+					onFocus={ handleOnFocus }
+					ref={ ref }
+					size={ size }
+					value={ value }
+				/>
+				{ suffix && (
+					<Suffix className="component-input-control__suffix">
+						{ suffix }
+					</Suffix>
+				) }
+				<Fieldset
+					aria-hidden="true"
+					className="component-input-control__fieldset"
+					isFloatingLabel={ isFloatingLabelSet }
 					isFocused={ isFocused }
 				>
-					<Input
-						{ ...props }
-						className="component-input-control__input"
-						disabled={ disabled }
-						id={ id }
-						isFilled={ isFilled }
-						isFloating={ isFloating }
-						isFloatingLabel={ isFloatingLabelSet }
-						onBlur={ handleOnBlur }
-						onChange={ handleOnChange }
-						onFocus={ handleOnFocus }
-						ref={ ref }
-						size={ size }
-						value={ value }
-					/>
-					{ suffix && (
-						<Suffix className="component-input-control__suffix">
-							{ suffix }
-						</Suffix>
+					{ isFloatingLabelSet && (
+						<Legend
+							aria-hidden="true"
+							className="component-input-control__fieldset-label"
+							isFloating={ isFloating }
+							size={ size }
+						>
+							<LegendText className="component-input-control__fieldset-text">
+								{ label }
+							</LegendText>
+						</Legend>
 					) }
-					<Fieldset
-						aria-hidden="true"
-						className="component-input-control__fieldset"
-						isFloatingLabel={ isFloatingLabelSet }
-						isFocused={ isFocused }
-					>
-						{ isFloatingLabelSet && (
-							<Legend
-								aria-hidden="true"
-								className="component-input-control__fieldset-label"
-								isFloating={ isFloating }
-								size={ size }
-							>
-								<LegendText className="component-input-control__fieldset-text">
-									{ label }
-								</LegendText>
-							</Legend>
-						) }
-					</Fieldset>
-					{ children }
-				</Container>
-			</Tooltip>
+				</Fieldset>
+				{ children }
+			</Container>
 		</Root>
 	);
 }
@@ -167,16 +160,4 @@ function Label( { children, hideLabelFromVision, htmlFor, ...props } ) {
 	);
 }
 
-function Tooltip( { children, hideLabelFromVision, label, ...props } ) {
-	if ( label && hideLabelFromVision ) {
-		return (
-			<BaseTooltip text={ label } { ...props }>
-				{ children }
-			</BaseTooltip>
-		);
-	}
-
-	return children;
-}
-
 export default forwardRef( InputControl );
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
index 2fd63141128ca5..47db876b2cf7fc 100644
--- a/packages/components/src/input-control/stories/index.js
+++ b/packages/components/src/input-control/stories/index.js
@@ -23,6 +23,7 @@ function Example() {
 
 	const props = {
 		disabled: boolean( 'disabled', false ),
+		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
 		isFloatingLabel: boolean( 'isFloatingLabel', false ),
 		label: text( 'label', 'Value' ),
 		placeholder: text( 'placeholder', 'Placeholder' ),
@@ -34,13 +35,17 @@ function Example() {
 			},
 			'default'
 		),
+		suffix: text( 'suffix', '' ),
 	};
 
+	const suffixMarkup = props.suffix ? <div>{ props.suffix }</div> : null;
+
 	return (
 		<InputControl
 			{ ...props }
-			value={ value }
 			onChange={ ( v ) => setValue( v ) }
+			suffix={ suffixMarkup }
+			value={ value }
 		/>
 	);
 }
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index b995399cfbc2aa..6cc6bc0ec19eef 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -1,8 +1,14 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useControlledState } from '../utils/hooks';
 
+/**
+ * Determines if a value is empty, null, or undefined.
+ *
+ * @param {any} value The value to check.
+ * @return {boolean} Whether value is empty.
+ */
 export function isValueEmpty( value ) {
 	const isNullish = typeof value === 'undefined' || value === null;
 	const isEmptyString = value === '';
@@ -10,21 +16,19 @@ export function isValueEmpty( value ) {
 	return isNullish || isEmptyString;
 }
 
-export function useControlledState( initialState ) {
-	const [ state, setState ] = useState( initialState );
-	const stateRef = useRef( initialState );
-
-	useEffect( () => {
-		if ( initialState !== stateRef.current ) {
-			setState( initialState );
-			stateRef.current = initialState;
-		}
-	}, [ initialState ] );
-
-	return [ state, setState ];
-}
-
+/**
+ * Custom hook to better handle incoming value and internal state.
+ *
+ * @param {*} initialValue
+ */
 export function useValueState( initialValue ) {
+	/**
+	 * React requires input HTML elements to have a defined value prop
+	 * to be considered "controlled".
+	 *
+	 * For instances were an incoming value may be undefined or null,
+	 * we'll need to transform it to an empty string.
+	 */
 	const value = isValueEmpty( initialValue ) ? '' : initialValue;
 
 	return useControlledState( value );

From 7cecdaf38ad68f226801a0eff92930b8d2eeaf53 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 11:10:26 -0400
Subject: [PATCH 044/103] Add InputControl docs to docs/manifest.json

---
 docs/manifest.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index c9e4d0b8b32d7c..aa7c9ddd8739c9 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -869,6 +869,12 @@
 		"markdown_source": "../packages/components/src/icon/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "InputControl",
+		"slug": "input-control",
+		"markdown_source": "../packages/components/src/input-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "IsolatedEventContainer",
 		"slug": "isolated-event-container",

From 8fb4dea71debed51d892c889d1ff3f73df59878f Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 11:10:51 -0400
Subject: [PATCH 045/103] Fix tests for UnitControl. Adds tests for value/unit
 parsing.

---
 .../src/box-control/unit-control.js           |  1 +
 .../src/input-control/test/index.js           | 51 +++++++++++++
 .../components/src/number-control/index.js    |  2 +-
 .../src/number-control/test/index.js          |  4 +-
 packages/components/src/unit-control/index.js |  4 +-
 .../components/src/unit-control/test/index.js | 72 ++++++++++++++++---
 6 files changed, 118 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index ffe37a6b97fcbb..f3396b577359ee 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -18,6 +18,7 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 			<BaseUnitControl
 				className="component-box-control__unit-control"
 				hideHTMLArrows
+				isPressEnterToChange
 				isFloatingLabel
 				label={ label }
 				isResetValueOnUnitChange={ false }
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index e69de29bb2d1d6..fe1e52a0b8c9a4 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import InputControl from '../';
+
+describe( 'InputControl', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			const result = render( <InputControl /> );
+
+			const input = result.container.querySelector( 'input' );
+
+			expect( input ).toBeTruthy();
+		} );
+
+		it( 'should render with specified type', () => {
+			const result = render( <InputControl type="number" /> );
+
+			const input = result.container.querySelector( '[type="number"]' );
+
+			expect( input ).toBeTruthy();
+		} );
+	} );
+
+	describe( 'Label', () => {
+		it( 'should render label', () => {
+			const result = render(
+				<InputControl label="Hello" value="There" />
+			);
+
+			const input = result.getByText( 'Hello' );
+
+			expect( input ).toBeTruthy();
+		} );
+
+		it( 'should render label, if floating', () => {
+			const result = render(
+				<InputControl isFloatingLabel label="Hello" value="There" />
+			);
+
+			const input = result.getAllByText( 'Hello' );
+
+			expect( input ).toBeTruthy();
+		} );
+	} );
+} );
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 3ad12d794b0918..945de2c10b22c7 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -33,7 +33,7 @@ export function NumberControl(
 		dragThreshold = 10,
 		hideHTMLArrows = false,
 		isDragEnabled = true,
-		isPressEnterToChange = true,
+		isPressEnterToChange = false,
 		isShiftStepEnabled = true,
 		max = Infinity,
 		min = -Infinity,
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index 96b18575f31f91..4813d458ccceb8 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -62,9 +62,9 @@ describe( 'NumberControl', () => {
 				render( <NumberControl className="hello" />, container );
 			} );
 
-			const input = getInput();
+			const input = container.querySelector( '.hello' );
 
-			expect( input.classList.contains( 'hello' ) ).toBe( true );
+			expect( input ).toBeTruthy();
 		} );
 	} );
 
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index bd6f4b2ef75254..39d4533a96fc3a 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -93,7 +93,7 @@ function UnitControl(
 				aria-label={ label }
 				{ ...props }
 				autoComplete={ autoComplete }
-				className="component-unit-control__input"
+				className="component-unit-control__input-control"
 				disableUnits={ disableUnits }
 				label={ label }
 				onChange={ handleOnChange }
@@ -101,7 +101,7 @@ function UnitControl(
 				suffix={ inputSuffix }
 				type={ type }
 				value={ value }
-			></ValueInput>
+			/>
 		</Root>
 	);
 }
diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index 42a3ba0da5ebad..445683b02b9a71 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/packages/components/src/unit-control/test/index.js
@@ -29,9 +29,9 @@ afterEach( () => {
 
 const getComponent = () => container.querySelector( '.component-unit-control' );
 const getInput = () =>
-	container.querySelector( '.component-unit-control__input' );
+	container.querySelector( '.component-unit-control input' );
 const getSelect = () =>
-	container.querySelector( '.component-unit-control__select' );
+	container.querySelector( '.component-unit-control select' );
 
 describe( 'UnitControl', () => {
 	describe( 'Basic rendering', () => {
@@ -86,7 +86,7 @@ describe( 'UnitControl', () => {
 				Simulate.change( input, { target: { value: 62 } } );
 			} );
 
-			expect( state ).toBe( 62 );
+			expect( state ).toBe( '62px' );
 		} );
 
 		it( 'should increment value on UP press', () => {
@@ -106,7 +106,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: UP } );
 			} );
 
-			expect( state ).toBe( 51 );
+			expect( state ).toBe( '51px' );
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', () => {
@@ -126,7 +126,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: UP, shiftKey: true } );
 			} );
 
-			expect( state ).toBe( 60 );
+			expect( state ).toBe( '60px' );
 		} );
 
 		it( 'should decrement value on DOWN press', () => {
@@ -146,7 +146,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: DOWN } );
 			} );
 
-			expect( state ).toBe( 49 );
+			expect( state ).toBe( '49px' );
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', () => {
@@ -166,7 +166,7 @@ describe( 'UnitControl', () => {
 				Simulate.keyDown( input, { keyCode: DOWN, shiftKey: true } );
 			} );
 
-			expect( state ).toBe( 40 );
+			expect( state ).toBe( '40px' );
 		} );
 	} );
 
@@ -222,6 +222,7 @@ describe( 'UnitControl', () => {
 			act( () => {
 				render(
 					<UnitControl
+						isResetValueOnUnitChange
 						units={ units }
 						onChange={ setState }
 						value={ state }
@@ -236,13 +237,13 @@ describe( 'UnitControl', () => {
 				Simulate.change( select, { target: { value: 'vmax' } } );
 			} );
 
-			expect( state ).toBe( 75 );
+			expect( state ).toBe( '75vmax' );
 
 			act( () => {
 				Simulate.change( select, { target: { value: 'pt' } } );
 			} );
 
-			expect( state ).toBe( 25 );
+			expect( state ).toBe( '25pt' );
 		} );
 
 		it( 'should not reset value on unit change, if disabled', () => {
@@ -271,13 +272,62 @@ describe( 'UnitControl', () => {
 				Simulate.change( select, { target: { value: 'vmax' } } );
 			} );
 
-			expect( state ).toBe( 50 );
+			expect( state ).toBe( '50vmax' );
 
 			act( () => {
 				Simulate.change( select, { target: { value: 'pt' } } );
 			} );
 
-			expect( state ).toBe( 50 );
+			expect( state ).toBe( '50pt' );
+		} );
+
+		it( 'should parse unit from input', () => {
+			let state = '10px';
+			let unitState = 'px';
+
+			const setState = ( nextState ) => ( state = nextState );
+			const setUnitState = ( nextState ) => ( unitState = nextState );
+
+			act( () => {
+				render(
+					<UnitControl
+						value={ state }
+						onChange={ setState }
+						onUnitChange={ setUnitState }
+					/>,
+					container
+				);
+			} );
+
+			const input = getInput();
+
+			act( () => {
+				Simulate.change( input, { target: { value: '55 em' } } );
+			} );
+
+			expect( state ).toBe( '55em' );
+			expect( unitState ).toBe( 'em' );
+
+			act( () => {
+				Simulate.change( input, { target: { value: '61   PX' } } );
+			} );
+
+			expect( state ).toBe( '61px' );
+			expect( unitState ).toBe( 'px' );
+
+			act( () => {
+				Simulate.change( input, { target: { value: '-10%' } } );
+			} );
+
+			expect( state ).toBe( '-10%' );
+			expect( unitState ).toBe( '%' );
+
+			act( () => {
+				Simulate.change( input, { target: { value: '15.25rem' } } );
+			} );
+
+			expect( state ).toBe( '15.25rem' );
+			expect( unitState ).toBe( 'rem' );
 		} );
 	} );
 } );

From 8b282df08b02ce49476a452da028aa10d9173d67 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 11:38:14 -0400
Subject: [PATCH 046/103] Update docs for InputControl and NumberControl

---
 .../components/src/input-control/README.md    |  2 +-
 .../components/src/number-control/README.md   | 74 +++++++++++++++++--
 .../components/src/number-control/index.js    | 31 +++++++-
 .../components/src/number-control/utils.js    | 60 +++++++++++++++
 4 files changed, 155 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index f9cb20632fe564..e73aa3ca74692c 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -54,7 +54,7 @@ If this property is added, a label will be generated using label property as the
 
 A function that receives the value of the input.
 
--   Type: `function`
+-   Type: `Function`
 -   Required: Yes
 
 #### size
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 218ae241a63888..aec81fef3645c3 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -8,7 +8,7 @@ NumberControl is an enhanced HTML [`input[type="number]`](https://developer.mozi
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 
 const Example = () => {
-	const [value, setValue] = useState(10);
+	const [ value, setValue ] = useState( 10 );
 
 	return (
 		<NumberControl
@@ -17,13 +17,73 @@ const Example = () => {
 			shiftStep={ 10 }
 			value={ value }
 		/>
-	)
+	);
 };
 ```
 
-## Props
+### Props
 
-Name | Type | Default | Description
---- | --- | --- | ---
-`isShiftStepEnabled` | `boolean` | `true` | Determines if the unit `<select>` is tabbable.
-`shiftStep` | `number` | `10` | Amount to increment by when the `shift` key is held down.
\ No newline at end of file
+#### dragDirection
+
+Determines the drag axis to increment/decrement the value.
+Directions: `n` | `e` | `s` | `w`
+
+-   Type: `String`
+-   Required: No
+-   Default: `n`
+
+#### dragThreshold
+
+If `isDragEnabled` is true, this controls the amount of `px` to have been dragged before the value changes.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `10`
+
+#### hideHTMLArrows
+
+If true, the default `input` HTML arrows will be hidden.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+#### isDragEnabled
+
+If true, enables mouse drag gesture to increment/decrement the number value. Holding `SHIFT` while dragging will increase the value by the `shiftStep`.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+#### isPressEnterToChange
+
+If true, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+#### isShiftStepEnabled
+
+If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the value by the `shiftStep` value.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+#### shiftStep
+
+Amount to increment by when the `SHIFT` key is held down.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `10`
+
+#### step
+
+Amount to increment by when incrementing/decrementing.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `1`
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 945de2c10b22c7..bd9ea1a1a4926a 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -28,15 +28,18 @@ import { useRtl } from '../utils/style-mixins';
 export function NumberControl(
 	{
 		className,
-		label,
 		dragDirection = 'n',
 		dragThreshold = 10,
 		hideHTMLArrows = false,
 		isDragEnabled = true,
 		isPressEnterToChange = false,
 		isShiftStepEnabled = true,
+		label,
 		max = Infinity,
 		min = -Infinity,
+		onDragStart = noop,
+		onDrag = noop,
+		onDragEnd = noop,
 		onBlur = noop,
 		onChange = noop,
 		onKeyDown = noop,
@@ -49,24 +52,35 @@ export function NumberControl(
 ) {
 	const [ value, setValue ] = useValueState( valueProp );
 	const [ isDragging, setIsDragging ] = useState( false );
-	const baseValue = clamp( 0, min, max );
 	const isRtl = useRtl();
-
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
+	const baseValue = clamp( 0, min, max );
+
 	const dragGestureProps = useDrag(
-		( { dragging, delta, event, shiftKey } ) => {
+		( dragProps ) => {
+			const { dragging, delta, event, shiftKey } = dragProps;
+
 			if ( ! isDragEnabled ) return;
+
+			/**
+			 * Quick return if no longer dragging.
+			 * This prevents unnecessary value calculations.
+			 */
 			if ( ! dragging ) {
+				onDragEnd( dragProps );
 				setIsDragging( false );
+
 				return;
 			}
 
 			event.stopPropagation();
+			onDrag( dragProps );
 
 			const [ x, y ] = delta;
 			const modifier = shiftKey ? shiftStep : 1;
 			const _forceUpdate = true;
+
 			let directionModifier;
 			let directionBaseValue;
 
@@ -104,6 +118,7 @@ export function NumberControl(
 			}
 
 			if ( ! isDragging ) {
+				onDragStart( dragProps );
 				setIsDragging( true );
 			}
 		},
@@ -117,12 +132,20 @@ export function NumberControl(
 		const _forceUpdate = true;
 		onBlur( event );
 
+		/**
+		 * If isPressEnterToChange is set, this submits the value to
+		 * the onChange callback.
+		 */
 		if ( isPressEnterToChange && ! isValueEmpty( value ) ) {
 			handleOnChange( value, { event }, _forceUpdate );
 		}
 	};
 
 	const handleOnChange = ( next, changeProps, _forceUpdate = false ) => {
+		/**
+		 * The _forceUpdate parameter is used to better control when
+		 * isPressEnterToChange is set.
+		 */
 		const nextValue = getValue( next );
 
 		if ( ! isPressEnterToChange || _forceUpdate ) {
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index 5a3cc0c0762301..f9c1344a3e014f 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -13,6 +13,12 @@ import { useEffect } from '@wordpress/element';
  */
 import { getRtl } from '../utils/style-mixins';
 
+/**
+ * Gets a CSS cursor value based on a drag direction.
+ *
+ * @param {string} dragDirection The drag direction.
+ * @return {string} The CSS cursor value.
+ */
 export function getDragCursor( dragDirection ) {
 	const isRtl = getRtl();
 	let dragCursor = 'n-resize';
@@ -35,6 +41,14 @@ export function getDragCursor( dragDirection ) {
 	return dragCursor;
 }
 
+/**
+ * Custom hook that renders a drag cursor when dragging.
+ *
+ * @param {boolean} isDragging The dragging state.
+ * @param {string} dragDirection The drag direction.
+ *
+ * @return {string} The CSS cursor value.
+ */
 export function useDragCursor( isDragging, dragDirection ) {
 	const dragCursor = getDragCursor( dragDirection );
 
@@ -51,26 +65,61 @@ export function useDragCursor( isDragging, dragDirection ) {
 	return dragCursor;
 }
 
+/**
+ * Parses and retrieves a number value.
+ *
+ * @param {any} value The incoming value.
+ * @return {number} The parsed number value.
+ */
 function getNumberValue( value ) {
 	const number = Number( value );
 
 	return isNaN( number ) ? 0 : number;
 }
 
+/**
+ * Parses a value to safely store value state.
+ *
+ * @param {any} value The incoming value.
+ * @return {number} The parsed number value.
+ */
 export function getValue( value ) {
 	const parsedValue = parseFloat( value );
 
 	return isNaN( parsedValue ) ? value : parsedValue;
 }
 
+/**
+ * Safely adds 2 values.
+ *
+ * @param {any} a First value.
+ * @param {any} b Second value.
+ * @return {number} The sum of the 2 values.
+ */
 export function add( a, b ) {
 	return getNumberValue( a ) + getNumberValue( b );
 }
 
+/**
+ * Safely subtracts 2 values.
+ *
+ * @param {any} a First value.
+ * @param {any} b Second value.
+ * @return {number} The difference of the 2 values.
+ */
 export function subtract( a, b ) {
 	return getNumberValue( a ) - getNumberValue( b );
 }
 
+/**
+ * Clamps a value based on a min/max range with rounding
+ *
+ * @param {number} value The value.
+ * @param {number} min The minimum range.
+ * @param {number} max The maximum range.
+ * @param {number} step A multiplier for the value.
+ * @return {number} The rounded and clamped value.
+ */
 export function roundClamp(
 	value = 0,
 	min = Infinity,
@@ -85,6 +134,17 @@ export function roundClamp(
 	return clampedValue;
 }
 
+/**
+ * Clamps a value based on a min/max range with rounding.
+ * Returns a string.
+ *
+ * @param {any} args Arguments for roundClamp().
+ * @property {number} value The value.
+ * @property {number} min The minimum range.
+ * @property {number} max The maximum range.
+ * @property {number} step A multiplier for the value.
+ * @return {string} The rounded and clamped value.
+ */
 export function roundClampString( ...args ) {
 	return roundClamp( ...args ).toString();
 }

From e6e45489a915dd8973cd63fe58c6f946018c68cd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 12:12:08 -0400
Subject: [PATCH 047/103] Update docs and code comments for Input, Number, and
 Unit control

---
 .../components/src/input-control/README.md    | 24 +++--
 .../components/src/number-control/README.md   | 18 ++--
 .../components/src/unit-control/README.md     | 98 +++++++++++++++----
 packages/components/src/unit-control/index.js |  1 +
 packages/components/src/unit-control/utils.js | 13 +++
 5 files changed, 111 insertions(+), 43 deletions(-)

diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index e73aa3ca74692c..105137e671713b 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -2,9 +2,7 @@
 
 InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace [TextControl](../text-control).
 
-## Development guidelines
-
-### Usage
+## Usage
 
 Render a user interface to input the name of an additional css class.
 
@@ -20,44 +18,44 @@ const Example = () => {
 ) );
 ```
 
-### Props
+## Props
 
-#### disabled
+### disabled
 
 If true, the `input` will be disabled.
 
 -   Type: `Boolean`
 -   Required: No
 
-#### isFloatingLabel
+### isFloatingLabel
 
 If true, the `label` will render with a floating interaction.
 
 -   Type: `Boolean`
 -   Required: No
 
-#### hideLabelFromVision
+### hideLabelFromVision
 
 If true, the label will only be visible to screen readers.
 
 -   Type: `Boolean`
 -   Required: No
 
-#### label
+### label
 
 If this property is added, a label will be generated using label property as the content.
 
 -   Type: `String`
 -   Required: No
 
-#### onChange
+### onChange
 
 A function that receives the value of the input.
 
 -   Type: `Function`
 -   Required: Yes
 
-#### size
+### size
 
 Adjusts the size of the input.
 Sizes include: `default`, `small`
@@ -66,14 +64,14 @@ Sizes include: `default`, `small`
 -   Required: No
 -   Default: `default`
 
-#### suffix
+### suffix
 
 Renders an element on the right side of the input.
 
 -   Type: `React.ReactNode`
 -   Required: No
 
-#### type
+### type
 
 Type of the input element to render. Defaults to "text".
 
@@ -81,7 +79,7 @@ Type of the input element to render. Defaults to "text".
 -   Required: No
 -   Default: "text"
 
-#### value
+### value
 
 The current value of the input.
 
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index aec81fef3645c3..9a2b77449fc7e1 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -21,9 +21,9 @@ const Example = () => {
 };
 ```
 
-### Props
+## Props
 
-#### dragDirection
+### dragDirection
 
 Determines the drag axis to increment/decrement the value.
 Directions: `n` | `e` | `s` | `w`
@@ -32,7 +32,7 @@ Directions: `n` | `e` | `s` | `w`
 -   Required: No
 -   Default: `n`
 
-#### dragThreshold
+### dragThreshold
 
 If `isDragEnabled` is true, this controls the amount of `px` to have been dragged before the value changes.
 
@@ -40,7 +40,7 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 -   Required: No
 -   Default: `10`
 
-#### hideHTMLArrows
+### hideHTMLArrows
 
 If true, the default `input` HTML arrows will be hidden.
 
@@ -48,7 +48,7 @@ If true, the default `input` HTML arrows will be hidden.
 -   Required: No
 -   Default: `false`
 
-#### isDragEnabled
+### isDragEnabled
 
 If true, enables mouse drag gesture to increment/decrement the number value. Holding `SHIFT` while dragging will increase the value by the `shiftStep`.
 
@@ -56,7 +56,7 @@ If true, enables mouse drag gesture to increment/decrement the number value. Hol
 -   Required: No
 -   Default: `true`
 
-#### isPressEnterToChange
+### isPressEnterToChange
 
 If true, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
 
@@ -64,7 +64,7 @@ If true, the `ENTER` key press is required in order to trigger an `onChange`. If
 -   Required: No
 -   Default: `false`
 
-#### isShiftStepEnabled
+### isShiftStepEnabled
 
 If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the value by the `shiftStep` value.
 
@@ -72,7 +72,7 @@ If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the v
 -   Required: No
 -   Default: `true`
 
-#### shiftStep
+### shiftStep
 
 Amount to increment by when the `SHIFT` key is held down.
 
@@ -80,7 +80,7 @@ Amount to increment by when the `SHIFT` key is held down.
 -   Required: No
 -   Default: `10`
 
-#### step
+### step
 
 Amount to increment by when incrementing/decrementing.
 
diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index 79100d9cfe4fcb..b442a5ef25139f 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -9,29 +9,85 @@ import { __experimentalUnitControl as UnitControl } from '@wordpress/components'
 import { useState } from '@wordpress/element';
 
 const Example = () => {
-	const [value, setValue] = useState(10);
-	const [unit, setUnit] = useState('px');
-
-	return (
-		<UnitControl
-			onChange={ setValue }
-			onUnitChange={ setUnit }
-			unit={ unit }
-			value={ value}
-		/>
-	)
+	const [ value, setValue ] = useState( '10px' );
+
+	return <UnitControl onChange={ setValue } value={ value } />;
 };
 ```
 
 ## Props
 
-Name | Type | Default | Description
---- | --- | --- | ---
-`isUnitSelectTabbable` | `boolean` | `true` | Determines if the unit `<select>` is tabbable.
-`label` | `string` | | Aria label for the control.
-`onChange` | `Function` | `noop` | Callback when the `value` changes.
-`onUnitChange` | `Function` | `noop` | Callback when the `unit` changes.
-`size` | `string` | `default` | Determines the height of the control.
-`unit` | `string` | `px` | Current unit value.
-`units` | `Array<string>` | | Collection of available units.
-`value` | `number` |  | Current number value.
\ No newline at end of file
+### disabledUnits
+
+If true, the unit `<select>` is hidden.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### isUnitSelectTabbable
+
+Determines if the unit `<select>` is tabbable.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+### onChange
+
+Callback when the `value` changes.
+
+-   Type: `Function`
+-   Required: No
+-   Default: `noop`
+
+### onUnitChange
+
+Callback when the `unit` changes.
+
+-   Type: `Function`
+-   Required: No
+-   Default: `noop`
+
+### size
+
+Adjusts the size of the input.
+Sizes include: `default`, `small`
+
+-   Type: `String`
+-   Required: No
+-   Default: `default`
+
+### unit
+
+Deprecated: Current unit value.
+Instead, provide a unit with a value through the `value` prop.
+
+Example:
+
+```jsx
+<UnitControl value="50%" />
+```
+
+-   Type: `String`
+-   Required: No
+
+### units
+
+Collection of available units.
+
+-   Type: `Array<Object>`
+-   Required: No
+
+### value
+
+Current value. To set a unit, provide a unit with a value through the `value` prop.
+
+Example:
+
+```jsx
+<UnitControl value="50%" />
+```
+
+-   Type: `Number`|`String`
+-   Required: No
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 39d4533a96fc3a..279b3e55d73b4f 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -48,6 +48,7 @@ function UnitControl(
 
 		const [ parsedValue, parsedUnit ] = parseUnit( inputValue, units );
 
+		// Evaluates current/next value and units
 		const baseValue = next === value ? parsedValue : next;
 		const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
 
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index b4ee51967a54a3..e414d4c07913be 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -35,10 +35,23 @@ export function useUnitValueState( value, unit ) {
 	return useValueState( initialValue );
 }
 
+/**
+ * Checks if units are defined.
+ *
+ * @param {any} units Units to check.
+ * @return {boolean} Whether units are defined.
+ */
 export function hasUnits( units ) {
 	return ! isEmpty( units ) && units.length > 1 && units !== false;
 }
 
+/**
+ * Parses a number and unit from a value.
+ *
+ * @param {string} initialValue Value to parse
+ * @param {Array<Object>} units Units to derive from.
+ * @return {Array<number, string>} The extracted number and unit.
+ */
 export function parseUnit( initialValue, units = CSS_UNITS ) {
 	const output = [ 0, '' ];
 	const value = String( initialValue );

From 2ebfcbac6b14627786d8f453814a13c10361b60a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 12:49:28 -0400
Subject: [PATCH 048/103] Fix BoxControl rendering

---
 packages/components/src/unit-control/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 279b3e55d73b4f..7427394f74a7af 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -89,15 +89,16 @@ function UnitControl(
 	) : null;
 
 	return (
-		<Root className={ classes } ref={ ref } style={ style }>
+		<Root className="component-unit-control-wrapper" style={ style }>
 			<ValueInput
 				aria-label={ label }
 				{ ...props }
 				autoComplete={ autoComplete }
-				className="component-unit-control__input-control"
+				className={ classes }
 				disableUnits={ disableUnits }
 				label={ label }
 				onChange={ handleOnChange }
+				ref={ ref }
 				size={ size }
 				suffix={ inputSuffix }
 				type={ type }

From da3cb7257e020101fd430aa93e4e8395e677d60d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 12:52:47 -0400
Subject: [PATCH 049/103] Fix block editor hook for padding styles

---
 packages/block-editor/src/hooks/padding.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index 9d5b43eaa9cb65..e31887878d5546 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -24,7 +24,7 @@ export const PADDING_SUPPORT_KEY = '__experimentalPadding';
 export function PaddingEdit( props ) {
 	const {
 		name: blockName,
-		attributes: { padding, style },
+		attributes: { style },
 		setAttributes,
 	} = props;
 
@@ -41,7 +41,6 @@ export function PaddingEdit( props ) {
 		};
 
 		setAttributes( {
-			padding: next,
 			style: cleanEmptyObject( newStyle ),
 		} );
 	};
@@ -49,7 +48,7 @@ export function PaddingEdit( props ) {
 	return Platform.select( {
 		web: (
 			<BoxControl
-				values={ padding }
+				values={ style?.padding }
 				onChange={ onChange }
 				label={ __( 'Padding' ) }
 				units={ units }

From be8dedce1015e8f6f3091303f7550c9a74f06bec Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 13:11:02 -0400
Subject: [PATCH 050/103] Cover: Fix BoxControl visualizer rendering

---
 packages/block-library/src/cover/edit.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 6369384546af6e..1dcbe9513aff45 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -248,7 +248,7 @@ function CoverEdit( {
 		hasParallax,
 		minHeight,
 		minHeightUnit,
-		padding,
+		style: styleAttribute,
 		url,
 	} = attributes;
 	const {
@@ -475,7 +475,7 @@ function CoverEdit( {
 	return (
 		<>
 			{ controls }
-			<BoxControlVisualizer values={ padding }>
+			<BoxControlVisualizer values={ styleAttribute?.padding }>
 				<ResizableCover
 					className={ classnames(
 						'block-library-cover__resize-container',

From 2a497b9ffe5119872706df665cfdf7a9ec0a3ca4 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 14:48:11 -0400
Subject: [PATCH 051/103] Fix classNames for Input, Number, and Unit controls.
 Improve value/unit consolidation

---
 .../src/box-control/input-controls.js         |  6 ++---
 packages/components/src/box-control/utils.js  | 26 +++++++++++++++++++
 .../components/src/input-control/index.js     | 16 ++++++------
 .../components/src/number-control/index.js    |  3 ++-
 packages/components/src/unit-control/index.js |  6 ++---
 .../components/src/unit-control/test/index.js |  7 ++---
 .../src/unit-control/unit-select-control.js   |  2 +-
 7 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 77fb91deae2b44..d9394311f9f1ed 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, isValuesMixed } from './utils';
+import { LABELS, getAllValue } from './utils';
 import {
 	Layout,
 	LayoutBox,
@@ -24,9 +24,7 @@ export default function BoxInputControls( {
 	const { top, right, bottom, left } = values;
 
 	const isRtl = useRtl();
-	const isMixed = isValuesMixed( values );
-
-	const allValue = isMixed ? '' : top;
+	const allValue = getAllValue( values );
 
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
 		const { altKey } = event;
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 7189fc3a536ad1..76b494822280a6 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -4,6 +4,11 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { parseUnit } from '../unit-control/utils';
+
 export const LABELS = {
 	all: __( 'All' ),
 	top: __( 'Top' ),
@@ -41,3 +46,24 @@ export function getValues( values, ...args ) {
 
 	return nextValues;
 }
+
+export function getAllValue( values = {} ) {
+	const parsedValues = Object.keys( values ).reduce( ( acc, key ) => {
+		const value = values[ key ];
+		return [ ...acc, parseUnit( value ) ];
+	}, [] );
+
+	const allValues = parsedValues.map( ( value ) => value[ 0 ] );
+	const allUnits = parsedValues.map( ( value ) => value[ 1 ] );
+
+	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
+		? allValues[ 0 ]
+		: '';
+	const unit = allUnits.every( ( v ) => v === allUnits[ 0 ] )
+		? allUnits[ 0 ]
+		: '';
+
+	const allValue = `${ value }${ unit }`;
+
+	return allValue;
+}
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 4630f006316984..bcb5531fc2f16c 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -55,7 +55,7 @@ export function InputControl(
 	const [ value, setValue ] = useValueState( valueProp );
 
 	const id = useUniqueId( idProp );
-	const classes = classNames( 'component-input-control', className );
+	const classes = classNames( 'components-input-control', className );
 
 	const handleOnBlur = ( event ) => {
 		onBlur( event );
@@ -84,7 +84,7 @@ export function InputControl(
 			{ label && (
 				<Label
 					as="label"
-					className="component-input-control__label"
+					className="components-input-control__label"
 					hideLabelFromVision={ hideLabelFromVision }
 					htmlFor={ id }
 					isFilled={ isFilled }
@@ -96,12 +96,12 @@ export function InputControl(
 				</Label>
 			) }
 			<Container
-				className="component-input-control__container"
+				className="components-input-control__container"
 				isFocused={ isFocused }
 			>
 				<Input
 					{ ...props }
-					className="component-input-control__input"
+					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }
 					isFilled={ isFilled }
@@ -115,24 +115,24 @@ export function InputControl(
 					value={ value }
 				/>
 				{ suffix && (
-					<Suffix className="component-input-control__suffix">
+					<Suffix className="components-input-control__suffix">
 						{ suffix }
 					</Suffix>
 				) }
 				<Fieldset
 					aria-hidden="true"
-					className="component-input-control__fieldset"
+					className="components-input-control__fieldset"
 					isFloatingLabel={ isFloatingLabelSet }
 					isFocused={ isFocused }
 				>
 					{ isFloatingLabelSet && (
 						<Legend
 							aria-hidden="true"
-							className="component-input-control__fieldset-label"
+							className="components-input-control__fieldset-label"
 							isFloating={ isFloating }
 							size={ size }
 						>
-							<LegendText className="component-input-control__fieldset-text">
+							<LegendText className="components-input-control__fieldset-text">
 								{ label }
 							</LegendText>
 						</Legend>
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index bd9ea1a1a4926a..cf30962f9dcb92 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -220,7 +220,7 @@ export function NumberControl(
 		}
 	};
 
-	const classes = classNames( 'component-number-control', className );
+	const classes = classNames( 'components-number-control', className );
 
 	return (
 		<Input
@@ -232,6 +232,7 @@ export function NumberControl(
 			dragCursor={ dragCursor }
 			hideHTMLArrows={ hideHTMLArrows }
 			isDragging={ isDragging }
+			isPressEnterToChange={ isPressEnterToChange }
 			label={ label }
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 7427394f74a7af..5a9ccf9fa7dc88 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -75,11 +75,11 @@ function UnitControl(
 		onUnitChange( next, changeProps );
 	};
 
-	const classes = classnames( 'component-unit-control', className );
+	const classes = classnames( 'components-unit-control', className );
 
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
-			className="component-unit-control__select"
+			className="components-unit-control__select"
 			isTabbable={ isUnitSelectTabbable }
 			options={ units }
 			onChange={ handleOnUnitChange }
@@ -89,7 +89,7 @@ function UnitControl(
 	) : null;
 
 	return (
-		<Root className="component-unit-control-wrapper" style={ style }>
+		<Root className="components-unit-control-wrapper" style={ style }>
 			<ValueInput
 				aria-label={ label }
 				{ ...props }
diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index 445683b02b9a71..d7bd74ebd50fd0 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/packages/components/src/unit-control/test/index.js
@@ -27,11 +27,12 @@ afterEach( () => {
 	container = null;
 } );
 
-const getComponent = () => container.querySelector( '.component-unit-control' );
+const getComponent = () =>
+	container.querySelector( '.components-unit-control' );
 const getInput = () =>
-	container.querySelector( '.component-unit-control input' );
+	container.querySelector( '.components-unit-control input' );
 const getSelect = () =>
-	container.querySelector( '.component-unit-control select' );
+	container.querySelector( '.components-unit-control select' );
 
 describe( 'UnitControl', () => {
 	describe( 'Basic rendering', () => {
diff --git a/packages/components/src/unit-control/unit-select-control.js b/packages/components/src/unit-control/unit-select-control.js
index 20066c5e96a70e..931cda4d32e9a2 100644
--- a/packages/components/src/unit-control/unit-select-control.js
+++ b/packages/components/src/unit-control/unit-select-control.js
@@ -34,7 +34,7 @@ export default function UnitSelectControl( {
 		onChange( unitValue, { event, data } );
 	};
 
-	const classes = classnames( 'component-unit-control__select', className );
+	const classes = classnames( 'components-unit-control__select', className );
 
 	return (
 		<UnitSelect

From 6713a08cfaf5d33e1ec26e700aaf273e2034deb3 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 14:52:23 -0400
Subject: [PATCH 052/103] Improve blur onChange when isPressEnterToChange is
 set

---
 packages/components/src/number-control/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index cf30962f9dcb92..b01f5b6c9c03ef 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -52,6 +52,7 @@ export function NumberControl(
 ) {
 	const [ value, setValue ] = useValueState( valueProp );
 	const [ isDragging, setIsDragging ] = useState( false );
+	const [ isDirty, setIsDirty ] = useState( false );
 	const isRtl = useRtl();
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
@@ -136,7 +137,7 @@ export function NumberControl(
 		 * If isPressEnterToChange is set, this submits the value to
 		 * the onChange callback.
 		 */
-		if ( isPressEnterToChange && ! isValueEmpty( value ) ) {
+		if ( isPressEnterToChange && ! isValueEmpty( value ) && isDirty ) {
 			handleOnChange( value, { event }, _forceUpdate );
 		}
 	};
@@ -149,9 +150,11 @@ export function NumberControl(
 		const nextValue = getValue( next );
 
 		if ( ! isPressEnterToChange || _forceUpdate ) {
+			setIsDirty( false );
 			onChange( nextValue, changeProps );
 			setValue( nextValue );
 		} else {
+			setIsDirty( true );
 			setValue( next );
 		}
 	};

From 1856cc140749c0e24fce385ccce0e86f28666d8a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 15:21:30 -0400
Subject: [PATCH 053/103] Refactor press enter to change interaction between
 InputControl and NumberControl

---
 packages/components/src/box-control/utils.js  | 50 ++++++++-------
 .../components/src/input-control/README.md    |  9 +++
 .../components/src/input-control/index.js     | 44 +++++++++++--
 .../components/src/number-control/README.md   |  9 ---
 .../components/src/number-control/index.js    | 62 +++----------------
 5 files changed, 87 insertions(+), 87 deletions(-)

diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 76b494822280a6..2ccc05983ab095 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -24,6 +24,12 @@ export const DEFAULT_VALUES = {
 	left: '0px',
 };
 
+/**
+ * Custom hook that merges default values with values prop to use as state.
+ *
+ * @param {Object} values Box values.
+ * @return {Array<Object, Function>} Hook state and setter.
+ */
 export function useBoxControlState( values = {} ) {
 	return useState( {
 		...DEFAULT_VALUES,
@@ -31,27 +37,31 @@ export function useBoxControlState( values = {} ) {
 	} );
 }
 
-export function isValuesMixed( values ) {
-	const vals = Object.values( values );
-
-	return ! vals.every( ( v ) => v === vals[ 0 ] );
-}
-
-export function getValues( values, ...args ) {
-	const nextValues = [];
-
-	for ( const key in args ) {
-		nextValues.push( values[ key ] );
-	}
-
-	return nextValues;
+/**
+ * Gets an items with the most occurance within an array
+ * https://stackoverflow.com/a/20762713
+ *
+ * @param {Array<any>} arr Array of items to check.
+ * @return {any} The item with the most occurances.
+ */
+function mode( arr ) {
+	return arr
+		.sort(
+			( a, b ) =>
+				arr.filter( ( v ) => v === a ).length -
+				arr.filter( ( v ) => v === b ).length
+		)
+		.pop();
 }
 
+/**
+ * Gets the 'all' input value and unit from values data.
+ *
+ * @param {Object} values Box values.
+ * @return {string} A value + unit for the 'all' input.
+ */
 export function getAllValue( values = {} ) {
-	const parsedValues = Object.keys( values ).reduce( ( acc, key ) => {
-		const value = values[ key ];
-		return [ ...acc, parseUnit( value ) ];
-	}, [] );
+	const parsedValues = Object.values( values ).map( parseUnit );
 
 	const allValues = parsedValues.map( ( value ) => value[ 0 ] );
 	const allUnits = parsedValues.map( ( value ) => value[ 1 ] );
@@ -59,9 +69,7 @@ export function getAllValue( values = {} ) {
 	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
 		? allValues[ 0 ]
 		: '';
-	const unit = allUnits.every( ( v ) => v === allUnits[ 0 ] )
-		? allUnits[ 0 ]
-		: '';
+	const unit = mode( allUnits );
 
 	const allValue = `${ value }${ unit }`;
 
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 105137e671713b..18031d77b558c8 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -26,6 +26,15 @@ If true, the `input` will be disabled.
 
 -   Type: `Boolean`
 -   Required: No
+-   Default: `false`
+
+### isPressEnterToChange
+
+If true, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
 
 ### isFloatingLabel
 
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index bcb5531fc2f16c..62a68bfbc2d4d8 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -9,6 +9,8 @@ import classNames from 'classnames';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, forwardRef } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+
 /**
  * Internal dependencies
  */
@@ -36,30 +38,44 @@ export function InputControl(
 	{
 		children,
 		className,
-		disabled,
+		disabled = false,
 		hideLabelFromVision = false,
 		id: idProp,
+		isPressEnterToChange = false,
 		isFloatingLabel = false,
 		label,
 		onBlur = noop,
 		onChange = noop,
 		onFocus = noop,
+		onKeyDown = noop,
 		size = 'default',
 		suffix,
+		transformValueOnChange = ( value ) => value,
 		value: valueProp,
 		...props
 	},
 	ref
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
+	const [ isDirty, setIsDirty ] = useState( false );
 	const [ value, setValue ] = useValueState( valueProp );
 
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
 	const handleOnBlur = ( event ) => {
+		const _forceUpdate = true;
+
 		onBlur( event );
 		setIsFocused( false );
+
+		/**
+		 * If isPressEnterToChange is set, this submits the value to
+		 * the onChange callback.
+		 */
+		if ( isPressEnterToChange && ! isValueEmpty( value ) && isDirty ) {
+			handleOnChange( event, _forceUpdate );
+		}
 	};
 
 	const handleOnFocus = ( event ) => {
@@ -67,11 +83,30 @@ export function InputControl(
 		setIsFocused( true );
 	};
 
-	const handleOnChange = ( event ) => {
+	const handleOnChange = ( event, _forceUpdate ) => {
 		const nextValue = event.target.value;
 
-		onChange( nextValue, { event } );
-		setValue( nextValue );
+		if ( ! isPressEnterToChange || _forceUpdate ) {
+			const transformedValue = transformValueOnChange( nextValue );
+			setValue( transformedValue );
+
+			onChange( nextValue, { event } );
+
+			setIsDirty( false );
+		} else {
+			setValue( nextValue );
+			setIsDirty( true );
+		}
+	};
+
+	const handleOnKeyDown = ( event ) => {
+		const _forceUpdate = true;
+		onKeyDown( event );
+
+		if ( isPressEnterToChange && event.keyCode === ENTER ) {
+			event.preventDefault();
+			handleOnChange( event, _forceUpdate );
+		}
 	};
 
 	const isFilled = ! isValueEmpty( value );
@@ -110,6 +145,7 @@ export function InputControl(
 					onBlur={ handleOnBlur }
 					onChange={ handleOnChange }
 					onFocus={ handleOnFocus }
+					onKeyDown={ handleOnKeyDown }
 					ref={ ref }
 					size={ size }
 					value={ value }
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 9a2b77449fc7e1..744e69ea12e230 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -54,15 +54,6 @@ If true, enables mouse drag gesture to increment/decrement the number value. Hol
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `true`
-
-### isPressEnterToChange
-
-If true, the `ENTER` key press is required in order to trigger an `onChange`. If enabled, a change is also triggered when tabbing away (`onBlur`).
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
 
 ### isShiftStepEnabled
 
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index b01f5b6c9c03ef..7b3f873ae660e0 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -9,7 +9,7 @@ import { useDrag } from 'react-use-gesture';
  * WordPress dependencies
  */
 import { forwardRef, useState } from '@wordpress/element';
-import { UP, DOWN, ENTER } from '@wordpress/keycodes';
+import { UP, DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -32,16 +32,14 @@ export function NumberControl(
 		dragThreshold = 10,
 		hideHTMLArrows = false,
 		isDragEnabled = true,
-		isPressEnterToChange = false,
 		isShiftStepEnabled = true,
 		label,
 		max = Infinity,
 		min = -Infinity,
-		onDragStart = noop,
+		onChange = noop,
 		onDrag = noop,
 		onDragEnd = noop,
-		onBlur = noop,
-		onChange = noop,
+		onDragStart = noop,
 		onKeyDown = noop,
 		shiftStep = 10,
 		step = 1,
@@ -52,7 +50,6 @@ export function NumberControl(
 ) {
 	const [ value, setValue ] = useValueState( valueProp );
 	const [ isDragging, setIsDragging ] = useState( false );
-	const [ isDirty, setIsDirty ] = useState( false );
 	const isRtl = useRtl();
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
@@ -129,41 +126,17 @@ export function NumberControl(
 		}
 	);
 
-	const handleOnBlur = ( event ) => {
-		const _forceUpdate = true;
-		onBlur( event );
-
-		/**
-		 * If isPressEnterToChange is set, this submits the value to
-		 * the onChange callback.
-		 */
-		if ( isPressEnterToChange && ! isValueEmpty( value ) && isDirty ) {
-			handleOnChange( value, { event }, _forceUpdate );
-		}
-	};
-
-	const handleOnChange = ( next, changeProps, _forceUpdate = false ) => {
-		/**
-		 * The _forceUpdate parameter is used to better control when
-		 * isPressEnterToChange is set.
-		 */
+	const handleOnChange = ( next, changeProps ) => {
 		const nextValue = getValue( next );
 
-		if ( ! isPressEnterToChange || _forceUpdate ) {
-			setIsDirty( false );
-			onChange( nextValue, changeProps );
-			setValue( nextValue );
-		} else {
-			setIsDirty( true );
-			setValue( next );
-		}
+		onChange( nextValue, changeProps );
+		setValue( nextValue );
 	};
 
 	const handleOnKeyDown = ( event ) => {
 		onKeyDown( event );
 		const { value: currentValue } = event.target;
 
-		const _forceUpdate = true;
 		const enableShift = event.shiftKey && isShiftStepEnabled;
 
 		const incrementalValue = enableShift
@@ -186,7 +159,7 @@ export function NumberControl(
 					incrementalValue
 				);
 
-				handleOnChange( nextValue, { event }, _forceUpdate );
+				handleOnChange( nextValue, { event } );
 
 				break;
 
@@ -201,23 +174,7 @@ export function NumberControl(
 					incrementalValue
 				);
 
-				handleOnChange( nextValue, { event }, _forceUpdate );
-
-				break;
-
-			case ENTER:
-				if ( isPressEnterToChange ) {
-					event.preventDefault();
-
-					nextValue = roundClampString(
-						nextValue,
-						min,
-						max,
-						incrementalValue
-					);
-
-					handleOnChange( nextValue, { event }, _forceUpdate );
-				}
+				handleOnChange( nextValue, { event } );
 
 				break;
 		}
@@ -235,11 +192,10 @@ export function NumberControl(
 			dragCursor={ dragCursor }
 			hideHTMLArrows={ hideHTMLArrows }
 			isDragging={ isDragging }
-			isPressEnterToChange={ isPressEnterToChange }
 			label={ label }
-			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
+			transformValueOnChange={ getValue }
 			ref={ ref }
 			value={ value }
 		/>

From 5c4e7b29c3daf6ed357e45e178584a5b53d2c158 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 23 Apr 2020 15:57:25 -0400
Subject: [PATCH 054/103] Add Linked adjustment for BoxControl

---
 packages/components/src/box-control/index.js  |  26 +++-
 .../src/box-control/input-controls.js         | 140 +++++++++---------
 .../src/box-control/linked-button.js          |  33 +++++
 packages/components/src/button/style.scss     |   1 +
 packages/components/src/flex/flex.js          |   8 +-
 .../components/src/input-control/index.js     |   2 +
 .../styles/input-control-styles.js            |  19 ++-
 packages/components/src/unit-control/index.js |   3 +
 .../styles/unit-control-styles.js             |  10 +-
 .../components/src/utils/colors-values.js     |   2 +
 10 files changed, 170 insertions(+), 74 deletions(-)
 create mode 100644 packages/components/src/box-control/linked-button.js

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 7514f8636fc38b..f0c46d6264133c 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -6,13 +6,16 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Visualizer from './visualizer';
+import { Flex } from '../flex';
 import InputControls from './input-controls';
 import Text from '../text';
+import LinkedButton from './linked-button';
+import Visualizer from './visualizer';
 import { useBoxControlState } from './utils';
 import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
@@ -35,6 +38,7 @@ export default function BoxControl( {
 	units,
 } ) {
 	const [ values, setValues ] = useBoxControlState( valuesProp );
+	const [ isLinked, setIsLinked ] = useState( true );
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
 
@@ -43,15 +47,31 @@ export default function BoxControl( {
 		onChange( nextValues );
 	};
 
+	const toggleLinked = () => setIsLinked( ! isLinked );
+
 	return (
 		<Root id={ id } role="region" aria-labelledby={ headingId }>
-			<Header>
-				<Text id={ headingId }>{ label }</Text>
+			<Header className="component-box-control__header">
+				<Flex.Item>
+					<Text
+						id={ headingId }
+						className="component-box-control__label"
+					>
+						{ label }
+					</Text>
+				</Flex.Item>
+				<Flex.Item>
+					<LinkedButton
+						onClick={ toggleLinked }
+						isLinked={ isLinked }
+					/>
+				</Flex.Item>
 			</Header>
 			<LayoutContainer className="component-box-control__input-controls-wrapper">
 				<InputControls
 					{ ...inputProps }
 					onChange={ updateValues }
+					isLinked={ isLinked }
 					units={ units }
 					values={ values }
 				/>
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index d9394311f9f1ed..58acb77d5adc4a 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -17,6 +17,7 @@ import {
 import { useRtl } from '../utils/style-mixins';
 
 export default function BoxInputControls( {
+	isLinked = true,
 	onChange = noop,
 	values,
 	...props
@@ -64,71 +65,78 @@ export default function BoxInputControls( {
 	};
 
 	return (
-		<Layout className="component-box-control__input-controls">
-			<SideIndicatorX aria-hidden="true" />
-			<SideIndicatorY aria-hidden="true" />
-			<LayoutBox aria-hidden="true" />
-			<UnitControl
-				{ ...props }
-				value={ top }
-				dragDirection="s"
-				onChange={ createHandleOnChange( 'top' ) }
-				label={ LABELS.top }
-				style={ {
-					marginTop: -5,
-					left: '50%',
-					transform: 'translateX(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				value={ left }
-				dragDirection="e"
-				onChange={ createHandleOnChange( 'left' ) }
-				label={ LABELS.left }
-				style={ {
-					position: 'absolute',
-					[ isRtl ? 'right' : 'left' ]: 0,
-					top: '50%',
-					transform: 'translateY(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				value={ allValue }
-				onChange={ createHandleOnChange( 'all' ) }
-				label={ LABELS.all }
-				style={ {
-					left: '50%',
-					top: '50%',
-					transform: 'translate(-50%, -50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				value={ right }
-				dragDirection="w"
-				onChange={ createHandleOnChange( 'right' ) }
-				label={ LABELS.right }
-				style={ {
-					[ isRtl ? 'left' : 'right' ]: 0,
-					top: '50%',
-					transform: 'translateY(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				value={ bottom }
-				dragDirection="n"
-				onChange={ createHandleOnChange( 'bottom' ) }
-				label={ LABELS.bottom }
-				style={ {
-					left: '50%',
-					marginTop: -5,
-					bottom: 0,
-					transform: 'translateX(-50%)',
-				} }
-			/>
-		</Layout>
+		<>
+			<Layout className="component-box-control__input-controls">
+				<SideIndicatorX aria-hidden="true" />
+				<SideIndicatorY aria-hidden="true" />
+				<LayoutBox aria-hidden="true" />
+				<UnitControl
+					{ ...props }
+					disabled={ isLinked }
+					value={ top }
+					dragDirection="s"
+					onChange={ createHandleOnChange( 'top' ) }
+					label={ LABELS.top }
+					style={ {
+						marginTop: -5,
+						left: '50%',
+						transform: 'translateX(-50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					disabled={ isLinked }
+					value={ left }
+					dragDirection="e"
+					onChange={ createHandleOnChange( 'left' ) }
+					label={ LABELS.left }
+					style={ {
+						position: 'absolute',
+						[ isRtl ? 'right' : 'left' ]: 0,
+						top: '50%',
+						transform: 'translateY(-50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					disabled={ ! isLinked }
+					value={ allValue }
+					onChange={ createHandleOnChange( 'all' ) }
+					label={ LABELS.all }
+					style={ {
+						left: '50%',
+						top: '50%',
+						transform: 'translate(-50%, -50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					disabled={ isLinked }
+					value={ right }
+					dragDirection="w"
+					onChange={ createHandleOnChange( 'right' ) }
+					label={ LABELS.right }
+					style={ {
+						[ isRtl ? 'left' : 'right' ]: 0,
+						top: '50%',
+						transform: 'translateY(-50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					disabled={ isLinked }
+					value={ bottom }
+					dragDirection="n"
+					onChange={ createHandleOnChange( 'bottom' ) }
+					label={ LABELS.bottom }
+					style={ {
+						left: '50%',
+						marginTop: -5,
+						bottom: 0,
+						transform: 'translateX(-50%)',
+					} }
+				/>
+			</Layout>
+		</>
 	);
 }
diff --git a/packages/components/src/box-control/linked-button.js b/packages/components/src/box-control/linked-button.js
new file mode 100644
index 00000000000000..ced8fe5169a857
--- /dev/null
+++ b/packages/components/src/box-control/linked-button.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import Tooltip from '../tooltip';
+
+export default function LinkedButton( { isLinked, ...props } ) {
+	const linkedTooltipText = isLinked
+		? __( 'Unlink Sides' )
+		: __( 'Link Sides' );
+
+	return (
+		<Tooltip text={ linkedTooltipText }>
+			<span>
+				<Button
+					{ ...props }
+					className="component-box-control__linked-button"
+					isPrimary={ isLinked }
+					isSecondary={ ! isLinked }
+					isSmall
+					icon={ isLinked ? link : linkOff }
+					iconSize={ 16 }
+				/>
+			</span>
+		</Tooltip>
+	);
+}
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 559d207972bb91..3f259cc9a1b549 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -233,6 +233,7 @@
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
+			padding: 0 8px;
 			width: 24px;
 		}
 	}
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex.js
index a601b207be81c0..f07ed15b90cc26 100644
--- a/packages/components/src/flex/flex.js
+++ b/packages/components/src/flex/flex.js
@@ -12,6 +12,8 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { Flex as BaseFlex } from './styles/flex-styles';
+import Block from './block';
+import Item from './item';
 
 function Flex(
 	{
@@ -39,4 +41,8 @@ function Flex(
 	);
 }
 
-export default forwardRef( Flex );
+const ForwardedComponent = forwardRef( Flex );
+ForwardedComponent.Block = Block;
+ForwardedComponent.Item = Item;
+
+export default ForwardedComponent;
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 62a68bfbc2d4d8..463ede06cf9bd0 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -132,6 +132,7 @@ export function InputControl(
 			) }
 			<Container
 				className="components-input-control__container"
+				disabled={ disabled }
 				isFocused={ isFocused }
 			>
 				<Input
@@ -158,6 +159,7 @@ export function InputControl(
 				<Fieldset
 					aria-hidden="true"
 					className="components-input-control__fieldset"
+					disabled={ disabled }
 					isFloatingLabel={ isFloatingLabelSet }
 					isFocused={ isFocused }
 				>
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index cf87219d5b586e..b030086ce6d952 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -30,13 +30,22 @@ const containerBorder = ( { isFocused } ) => {
 	return css( { borderRadius } );
 };
 
+const containerDisabledStyle = ( { disabled } ) => {
+	const backgroundColor = disabled
+		? color( 'ui.backgroundDisabled' )
+		: color( 'ui.background' );
+
+	return css( { backgroundColor } );
+};
+
 export const Container = styled.div`
 	align-items: center;
-	background-color: ${color( 'white' )};
 	box-sizing: border-box;
 	display: flex;
 	position: relative;
+
 	${containerBorder};
+	${containerDisabledStyle};
 `;
 
 const disabledStyles = ( { disabled } ) => {
@@ -212,11 +221,15 @@ const fieldsetTopStyles = ( { isFloatingLabel } ) => {
 	return css( { top } );
 };
 
-const fieldsetFocusedStyles = ( { isFocused } ) => {
-	const borderColor = isFocused
+const fieldsetFocusedStyles = ( { disabled, isFocused } ) => {
+	let borderColor = isFocused
 		? color( 'ui.borderFocus' )
 		: color( 'ui.border' );
 
+	if ( disabled ) {
+		borderColor = 'ui.borderDisabled';
+	}
+
 	const borderWidth = isFocused ? 2 : 1;
 	const borderStyle = 'solid';
 
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 5a9ccf9fa7dc88..f52958938cd035 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -20,6 +20,7 @@ function UnitControl(
 	{
 		autoComplete = 'off',
 		className,
+		disabled = false,
 		disableUnits = false,
 		isResetValueOnUnitChange = false,
 		isUnitSelectTabbable = false,
@@ -80,6 +81,7 @@ function UnitControl(
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
 			className="components-unit-control__select"
+			disabled={ disabled }
 			isTabbable={ isUnitSelectTabbable }
 			options={ units }
 			onChange={ handleOnUnitChange }
@@ -96,6 +98,7 @@ function UnitControl(
 				autoComplete={ autoComplete }
 				className={ classes }
 				disableUnits={ disableUnits }
+				disabled={ disabled }
 				label={ label }
 				onChange={ handleOnChange }
 				ref={ ref }
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index f37c30d45664ba..636a4685454c4b 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -71,7 +71,7 @@ const unitSizeStyles = ( { size } ) => {
 const baseUnitLabelStyles = ( props ) => {
 	return css`
 		appearance: none;
-		background: ${color( 'ui.background' )};
+		background: transparent;
 		border-radius: 2px;
 		border: none;
 		box-sizing: border-box;
@@ -125,5 +125,13 @@ export const UnitSelect = styled.select`
 			outline: 2px solid transparent;
 			outline-offset: 0;
 		}
+
+		&:disabled {
+			cursor: initial;
+
+			&:hover {
+				background-color: transparent;
+			}
+		}
 	}
 `;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 4321a0cf6552f6..f765d119bbfe03 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -136,9 +136,11 @@ export const ALERT = {
 // Namespaced values for raw colors hex codes
 export const UI = {
 	background: BASE.white,
+	backgroundDisabled: LIGHT_GRAY[ 200 ],
 	brand: BLUE.wordpress[ 700 ],
 	border: BASE.black,
 	borderFocus: BLUE.medium.focus,
+	borderDisabled: DARK_GRAY[ 700 ],
 	borderLight: LIGHT_GRAY[ 600 ],
 	label: DARK_GRAY[ 500 ],
 	textDisabled: DARK_GRAY[ 150 ],

From 16de5ae4c29d73a31796a1121794016506904dd4 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 11:28:54 -0400
Subject: [PATCH 055/103] Refactor and improve render performance of
 InputControl

---
 .../components/src/input-control/backdrop.js  |  36 +++++
 .../components/src/input-control/index.js     | 136 +++++-------------
 .../src/input-control/input-field.js          | 104 ++++++++++++++
 .../components/src/input-control/label.js     |  28 ++++
 4 files changed, 200 insertions(+), 104 deletions(-)
 create mode 100644 packages/components/src/input-control/backdrop.js
 create mode 100644 packages/components/src/input-control/input-field.js
 create mode 100644 packages/components/src/input-control/label.js

diff --git a/packages/components/src/input-control/backdrop.js b/packages/components/src/input-control/backdrop.js
new file mode 100644
index 00000000000000..67c21a0b5dc5c8
--- /dev/null
+++ b/packages/components/src/input-control/backdrop.js
@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { Fieldset, Legend, LegendText } from './styles/input-control-styles';
+
+export default function Backdrop( {
+	disabled = false,
+	isFloating = false,
+	isFloatingLabel = false,
+	isFocused,
+	label,
+	size = 'default',
+} ) {
+	return (
+		<Fieldset
+			aria-hidden="true"
+			className="components-input-control__backdrop"
+			disabled={ disabled }
+			isFloatingLabel={ isFloatingLabel }
+			isFocused={ isFocused }
+		>
+			{ isFloatingLabel && (
+				<Legend
+					aria-hidden="true"
+					className="components-input-control__backdrop-label"
+					isFloating={ isFloating }
+					size={ size }
+				>
+					<LegendText className="components-input-control__backdrop-text">
+						{ label }
+					</LegendText>
+				</Legend>
+			) }
+		</Fieldset>
+	);
+}
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 463ede06cf9bd0..cf7718f76698e8 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -9,23 +9,15 @@ import classNames from 'classnames';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, forwardRef } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import VisuallyHidden from '../visually-hidden';
-import {
-	Container,
-	Fieldset,
-	Input,
-	Label as BaseLabel,
-	Legend,
-	LegendText,
-	Root,
-	Suffix,
-} from './styles/input-control-styles';
-import { useValueState, isValueEmpty } from './utils';
+import Backdrop from './backdrop';
+import InputField from './input-field';
+import Label from './label';
+import { Container, Root, Suffix } from './styles/input-control-styles';
+import { isValueEmpty } from './utils';
 
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( InputControl );
@@ -50,32 +42,21 @@ export function InputControl(
 		onKeyDown = noop,
 		size = 'default',
 		suffix,
-		transformValueOnChange = ( value ) => value,
-		value: valueProp,
+		transformValueOnChange = ( v ) => v,
+		value,
 		...props
 	},
 	ref
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const [ isDirty, setIsDirty ] = useState( false );
-	const [ value, setValue ] = useValueState( valueProp );
+	const [ isFilled, setIsFilled ] = useState( ! isValueEmpty( value ) );
 
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
 	const handleOnBlur = ( event ) => {
-		const _forceUpdate = true;
-
 		onBlur( event );
 		setIsFocused( false );
-
-		/**
-		 * If isPressEnterToChange is set, this submits the value to
-		 * the onChange callback.
-		 */
-		if ( isPressEnterToChange && ! isValueEmpty( value ) && isDirty ) {
-			handleOnChange( event, _forceUpdate );
-		}
 	};
 
 	const handleOnFocus = ( event ) => {
@@ -83,72 +64,45 @@ export function InputControl(
 		setIsFocused( true );
 	};
 
-	const handleOnChange = ( event, _forceUpdate ) => {
-		const nextValue = event.target.value;
-
-		if ( ! isPressEnterToChange || _forceUpdate ) {
-			const transformedValue = transformValueOnChange( nextValue );
-			setValue( transformedValue );
-
-			onChange( nextValue, { event } );
-
-			setIsDirty( false );
-		} else {
-			setValue( nextValue );
-			setIsDirty( true );
-		}
-	};
-
-	const handleOnKeyDown = ( event ) => {
-		const _forceUpdate = true;
-		onKeyDown( event );
-
-		if ( isPressEnterToChange && event.keyCode === ENTER ) {
-			event.preventDefault();
-			handleOnChange( event, _forceUpdate );
-		}
-	};
-
-	const isFilled = ! isValueEmpty( value );
 	const isFloating = isFloatingLabel ? isFilled || isFocused : false;
 	const isFloatingLabelSet =
 		! hideLabelFromVision && isFloatingLabel && label;
 
 	return (
 		<Root className={ classes } isFloatingLabel={ isFloatingLabelSet }>
-			{ label && (
-				<Label
-					as="label"
-					className="components-input-control__label"
-					hideLabelFromVision={ hideLabelFromVision }
-					htmlFor={ id }
-					isFilled={ isFilled }
-					isFloating={ isFloating }
-					isFloatingLabel={ isFloatingLabel }
-					size={ size }
-				>
-					{ label }
-				</Label>
-			) }
+			<Label
+				className="components-input-control__label"
+				hideLabelFromVision={ hideLabelFromVision }
+				htmlFor={ id }
+				isFilled={ isFilled }
+				isFloating={ isFloating }
+				isFloatingLabel={ isFloatingLabel }
+				size={ size }
+			>
+				{ label }
+			</Label>
 			<Container
 				className="components-input-control__container"
 				disabled={ disabled }
 				isFocused={ isFocused }
 			>
-				<Input
+				<InputField
 					{ ...props }
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }
-					isFilled={ isFilled }
 					isFloating={ isFloating }
-					isFloatingLabel={ isFloatingLabelSet }
+					isFloatingLabelSet={ isFloatingLabelSet }
+					isPressEnterToChange={ isPressEnterToChange }
 					onBlur={ handleOnBlur }
-					onChange={ handleOnChange }
+					onChange={ onChange }
 					onFocus={ handleOnFocus }
-					onKeyDown={ handleOnKeyDown }
+					onKeyDown={ onKeyDown }
+					onUpdateValue={ setIsFilled }
 					ref={ ref }
+					setIsFocused={ setIsFocused }
 					size={ size }
+					transformValueOnChange={ transformValueOnChange }
 					value={ value }
 				/>
 				{ suffix && (
@@ -156,46 +110,20 @@ export function InputControl(
 						{ suffix }
 					</Suffix>
 				) }
-				<Fieldset
+				<Backdrop
 					aria-hidden="true"
 					className="components-input-control__fieldset"
 					disabled={ disabled }
+					isFloating={ isFloating }
 					isFloatingLabel={ isFloatingLabelSet }
 					isFocused={ isFocused }
-				>
-					{ isFloatingLabelSet && (
-						<Legend
-							aria-hidden="true"
-							className="components-input-control__fieldset-label"
-							isFloating={ isFloating }
-							size={ size }
-						>
-							<LegendText className="components-input-control__fieldset-text">
-								{ label }
-							</LegendText>
-						</Legend>
-					) }
-				</Fieldset>
+					label={ label }
+					size={ size }
+				/>
 				{ children }
 			</Container>
 		</Root>
 	);
 }
 
-function Label( { children, hideLabelFromVision, htmlFor, ...props } ) {
-	if ( hideLabelFromVision ) {
-		return (
-			<VisuallyHidden as="label" htmlFor={ htmlFor }>
-				{ children }
-			</VisuallyHidden>
-		);
-	}
-
-	return (
-		<BaseLabel htmlFor={ htmlFor } { ...props }>
-			{ children }
-		</BaseLabel>
-	);
-}
-
 export default forwardRef( InputControl );
diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
new file mode 100644
index 00000000000000..604f27d267f60f
--- /dev/null
+++ b/packages/components/src/input-control/input-field.js
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, forwardRef } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+/**
+ * Internal dependencies
+ */
+import { useValueState, isValueEmpty } from './utils';
+import { Input } from './styles/input-control-styles';
+
+function InputField(
+	{
+		disabled,
+		id,
+		isPressEnterToChange,
+		isFloating,
+		isFloatingLabelSet,
+		onBlur = noop,
+		onChange = noop,
+		onFocus = noop,
+		onKeyDown = noop,
+		onUpdateValue,
+		size = 'default',
+		transformValueOnChange = ( value ) => value,
+		value: valueProp,
+		...props
+	},
+	ref
+) {
+	const [ isDirty, setIsDirty ] = useState( false );
+	const [ value, setValue ] = useValueState( valueProp );
+
+	const handleOnBlur = ( event ) => {
+		const _forceUpdate = true;
+
+		onBlur( event );
+
+		/**
+		 * If isPressEnterToChange is set, this submits the value to
+		 * the onChange callback.
+		 */
+		if ( isPressEnterToChange && ! isValueEmpty( value ) && isDirty ) {
+			handleOnChange( event, _forceUpdate );
+		}
+	};
+
+	const handleOnFocus = ( event ) => {
+		onFocus( event );
+	};
+
+	const handleOnChange = ( event, _forceUpdate ) => {
+		const nextValue = event.target.value;
+
+		if ( ! isPressEnterToChange || _forceUpdate ) {
+			const transformedValue = transformValueOnChange( nextValue );
+			setValue( transformedValue );
+
+			onChange( nextValue, { event } );
+			setIsDirty( false );
+		} else {
+			setValue( nextValue );
+			setIsDirty( true );
+		}
+		onUpdateValue( ! isValueEmpty( nextValue ) );
+	};
+
+	const handleOnKeyDown = ( event ) => {
+		const _forceUpdate = true;
+		onKeyDown( event );
+
+		if ( isPressEnterToChange && event.keyCode === ENTER ) {
+			event.preventDefault();
+			handleOnChange( event, _forceUpdate );
+		}
+	};
+
+	return (
+		<Input
+			{ ...props }
+			className="components-input-control__input"
+			disabled={ disabled }
+			id={ id }
+			isFloating={ isFloating }
+			isFloatingLabel={ isFloatingLabelSet }
+			onBlur={ handleOnBlur }
+			onChange={ handleOnChange }
+			onFocus={ handleOnFocus }
+			onKeyDown={ handleOnKeyDown }
+			ref={ ref }
+			size={ size }
+			value={ value }
+		/>
+	);
+}
+
+const ForwardedComponent = forwardRef( InputField );
+
+export default ForwardedComponent;
diff --git a/packages/components/src/input-control/label.js b/packages/components/src/input-control/label.js
new file mode 100644
index 00000000000000..c02dd57f9f770f
--- /dev/null
+++ b/packages/components/src/input-control/label.js
@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import VisuallyHidden from '../visually-hidden';
+import { Label as BaseLabel } from './styles/input-control-styles';
+
+export default function Label( {
+	children,
+	hideLabelFromVision,
+	htmlFor,
+	...props
+} ) {
+	if ( ! children ) return null;
+
+	if ( hideLabelFromVision ) {
+		return (
+			<VisuallyHidden as="label" htmlFor={ htmlFor }>
+				{ children }
+			</VisuallyHidden>
+		);
+	}
+
+	return (
+		<BaseLabel htmlFor={ htmlFor } { ...props }>
+			{ children }
+		</BaseLabel>
+	);
+}

From 23cbeafc464c464cc7bdf0faf3754eb1092454e4 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 11:29:28 -0400
Subject: [PATCH 056/103] Remove defaultUnits static prop

---
 packages/block-editor/src/components/unit-control/index.js | 5 -----
 packages/components/src/unit-control/index.js              | 1 -
 2 files changed, 6 deletions(-)

diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js
index 7f80dd203b4a28..14e2204d55f4da 100644
--- a/packages/block-editor/src/components/unit-control/index.js
+++ b/packages/block-editor/src/components/unit-control/index.js
@@ -8,17 +8,12 @@ import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/compone
  */
 import useEditorFeature from '../use-editor-feature';
 
-const { __defaultUnits } = BaseUnitControl;
-
 export default function UnitControl( { units: unitsProp, ...props } ) {
 	const units = useCustomUnits( unitsProp );
 
 	return <BaseUnitControl units={ units } { ...props } />;
 }
 
-// Hoisting statics from the BaseUnitControl
-UnitControl.__defaultUnits = __defaultUnits;
-
 /**
  * Filters available units based on values defined by settings.
  *
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index f52958938cd035..ca2030b701cfdc 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -112,6 +112,5 @@ function UnitControl(
 }
 
 const ForwardedUnitControl = forwardRef( UnitControl );
-ForwardedUnitControl.__defaultUnits = CSS_UNITS;
 
 export default ForwardedUnitControl;

From 03ea8178b50ed437d6af74013430f80c9115a5d8 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 13:05:33 -0400
Subject: [PATCH 057/103] Improves performance and refactors BoxControlVisual
 styles

---
 packages/components/src/box-control/index.js  |  11 +-
 .../src/box-control/input-controls.js         | 168 ++++++++++--------
 .../styles/box-control-visualizer-styles.js   |  55 ++++++
 .../components/src/box-control/visualizer.js  |  64 ++-----
 .../components/src/input-control/backdrop.js  |  10 +-
 .../styles/input-control-styles.js            |   4 +-
 packages/components/src/unit-control/index.js |   2 +-
 7 files changed, 173 insertions(+), 141 deletions(-)
 create mode 100644 packages/components/src/box-control/styles/box-control-visualizer-styles.js

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index f0c46d6264133c..76da5c48ae5e16 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -16,7 +16,6 @@ import InputControls from './input-controls';
 import Text from '../text';
 import LinkedButton from './linked-button';
 import Visualizer from './visualizer';
-import { useBoxControlState } from './utils';
 import { Root, Header, LayoutContainer } from './styles/box-control-styles';
 
 const defaultInputProps = {
@@ -34,19 +33,13 @@ export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
-	values: valuesProp,
+	values,
 	units,
 } ) {
-	const [ values, setValues ] = useBoxControlState( valuesProp );
 	const [ isLinked, setIsLinked ] = useState( true );
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
 
-	const updateValues = ( nextValues ) => {
-		setValues( nextValues );
-		onChange( nextValues );
-	};
-
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
 	return (
@@ -70,7 +63,7 @@ export default function BoxControl( {
 			<LayoutContainer className="component-box-control__input-controls-wrapper">
 				<InputControls
 					{ ...inputProps }
-					onChange={ updateValues }
+					onChange={ onChange }
 					isLinked={ isLinked }
 					units={ units }
 					values={ values }
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 58acb77d5adc4a..2dc405955e2627 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -3,11 +3,16 @@
  */
 import { noop } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, getAllValue } from './utils';
+import { LABELS, getAllValue, useBoxControlState } from './utils';
 import {
 	Layout,
 	LayoutBox,
@@ -19,9 +24,16 @@ import { useRtl } from '../utils/style-mixins';
 export default function BoxInputControls( {
 	isLinked = true,
 	onChange = noop,
-	values,
+	values: valuesProp,
 	...props
 } ) {
+	const [ values, setValues ] = useBoxControlState( valuesProp );
+
+	const handleOnChange = ( nextValues ) => {
+		setValues( nextValues );
+		onChange( nextValues );
+	};
+
 	const { top, right, bottom, left } = values;
 
 	const isRtl = useRtl();
@@ -61,82 +73,86 @@ export default function BoxInputControls( {
 			}
 		}
 
-		onChange( nextValues );
+		handleOnChange( nextValues );
 	};
 
 	return (
-		<>
-			<Layout className="component-box-control__input-controls">
-				<SideIndicatorX aria-hidden="true" />
-				<SideIndicatorY aria-hidden="true" />
-				<LayoutBox aria-hidden="true" />
-				<UnitControl
-					{ ...props }
-					disabled={ isLinked }
-					value={ top }
-					dragDirection="s"
-					onChange={ createHandleOnChange( 'top' ) }
-					label={ LABELS.top }
-					style={ {
-						marginTop: -5,
-						left: '50%',
-						transform: 'translateX(-50%)',
-					} }
-				/>
-				<UnitControl
-					{ ...props }
-					disabled={ isLinked }
-					value={ left }
-					dragDirection="e"
-					onChange={ createHandleOnChange( 'left' ) }
-					label={ LABELS.left }
-					style={ {
-						position: 'absolute',
-						[ isRtl ? 'right' : 'left' ]: 0,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					} }
-				/>
-				<UnitControl
-					{ ...props }
-					disabled={ ! isLinked }
-					value={ allValue }
-					onChange={ createHandleOnChange( 'all' ) }
-					label={ LABELS.all }
-					style={ {
-						left: '50%',
-						top: '50%',
-						transform: 'translate(-50%, -50%)',
-					} }
-				/>
-				<UnitControl
-					{ ...props }
-					disabled={ isLinked }
-					value={ right }
-					dragDirection="w"
-					onChange={ createHandleOnChange( 'right' ) }
-					label={ LABELS.right }
-					style={ {
-						[ isRtl ? 'left' : 'right' ]: 0,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					} }
-				/>
-				<UnitControl
-					{ ...props }
-					disabled={ isLinked }
-					value={ bottom }
-					dragDirection="n"
-					onChange={ createHandleOnChange( 'bottom' ) }
-					label={ LABELS.bottom }
-					style={ {
-						left: '50%',
-						marginTop: -5,
-						bottom: 0,
-						transform: 'translateX(-50%)',
-					} }
-				/>
-			</Layout>
-		</>
+		<Layout className="component-box-control__input-controls">
+			<LayoutBoxUI />
+			<UnitControl
+				{ ...props }
+				disabled={ isLinked }
+				value={ top }
+				dragDirection="s"
+				onChange={ createHandleOnChange( 'top' ) }
+				label={ LABELS.top }
+				style={ {
+					marginTop: -5,
+					left: '50%',
+					transform: 'translateX(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disabled={ isLinked }
+				value={ left }
+				dragDirection="e"
+				onChange={ createHandleOnChange( 'left' ) }
+				label={ LABELS.left }
+				style={ {
+					position: 'absolute',
+					[ isRtl ? 'right' : 'left' ]: 0,
+					top: '50%',
+					transform: 'translateY(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disabled={ ! isLinked }
+				value={ allValue }
+				onChange={ createHandleOnChange( 'all' ) }
+				label={ LABELS.all }
+				style={ {
+					left: '50%',
+					top: '50%',
+					transform: 'translate(-50%, -50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disabled={ isLinked }
+				value={ right }
+				dragDirection="w"
+				onChange={ createHandleOnChange( 'right' ) }
+				label={ LABELS.right }
+				style={ {
+					[ isRtl ? 'left' : 'right' ]: 0,
+					top: '50%',
+					transform: 'translateY(-50%)',
+				} }
+			/>
+			<UnitControl
+				{ ...props }
+				disabled={ isLinked }
+				value={ bottom }
+				dragDirection="n"
+				onChange={ createHandleOnChange( 'bottom' ) }
+				label={ LABELS.bottom }
+				style={ {
+					left: '50%',
+					marginTop: -5,
+					bottom: 0,
+					transform: 'translateX(-50%)',
+				} }
+			/>
+		</Layout>
 	);
 }
+
+const LayoutBoxUI = memo( () => (
+	<>
+		<SideIndicatorX aria-hidden="true" />
+		<SideIndicatorY aria-hidden="true" />
+		<LayoutBox aria-hidden="true" />
+	</>
+) );
diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
new file mode 100644
index 00000000000000..e6693ef9916808
--- /dev/null
+++ b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { color, rtl } from '../../utils/style-mixins';
+
+export const Container = styled.div`
+	box-sizing: border-box;
+	position: relative;
+`;
+
+export const Side = styled.div`
+	box-sizing: border-box;
+	background: ${color( 'ui.brand' )};
+	filter: brightness( 1 );
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+	transition: opacity 120ms linear;
+	z-index: 1;
+
+	${( { isActive } ) =>
+		isActive &&
+		`
+		opacity: 0.3;
+	`}
+`;
+
+export const TopView = styled( Side )`
+	top: 0;
+	left: 0;
+	right: 0;
+`;
+
+export const RightView = styled( Side )`
+	top: 0;
+	bottom: 0;
+	${rtl( { right: 0 } )};
+`;
+
+export const BottomView = styled( Side )`
+	bottom: 0;
+	left: 0;
+	right: 0;
+`;
+
+export const LeftView = styled( Side )`
+	top: 0;
+	bottom: 0;
+	${rtl( { left: 0 } )};
+`;
diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index 02e38ca63db319..4213c79d57d388 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
@@ -11,7 +6,13 @@ import { useRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { color, rtl } from '../utils/style-mixins';
+import {
+	Container,
+	TopView,
+	RightView,
+	BottomView,
+	LeftView,
+} from './styles/box-control-visualizer-styles';
 import { DEFAULT_VALUES } from './utils';
 
 export default function BoxControlVisualizer( {
@@ -68,6 +69,11 @@ function Left( { value } ) {
 	return <LeftView { ...animationProps } style={ { width } } />;
 }
 
+/**
+ * Custom hook that renders the "flash" animation whenever the value changes.
+ *
+ * @param {string} value Value of (box) side.
+ */
 function useSideAnimation( value ) {
 	const [ isActive, setIsActive ] = useState( false );
 	const valueRef = useRef( value );
@@ -98,49 +104,3 @@ function useSideAnimation( value ) {
 		isActive,
 	};
 }
-
-const Container = styled.div`
-	box-sizing: border-box;
-	position: relative;
-`;
-
-const Side = styled.div`
-	box-sizing: border-box;
-	background: ${color( 'ui.brand' )};
-	filter: brightness( 1 );
-	opacity: 0;
-	position: absolute;
-	pointer-events: none;
-	transition: opacity 120ms linear;
-	z-index: 1;
-
-	${( { isActive } ) =>
-		isActive &&
-		`
-		opacity: 0.3;
-	`}
-`;
-
-const TopView = styled( Side )`
-	top: 0;
-	left: 0;
-	right: 0;
-`;
-
-const RightView = styled( Side )`
-	top: 0;
-	bottom: 0;
-	${rtl( { right: 0 } )};
-`;
-
-const BottomView = styled( Side )`
-	bottom: 0;
-	left: 0;
-	right: 0;
-`;
-
-const LeftView = styled( Side )`
-	top: 0;
-	bottom: 0;
-	${rtl( { left: 0 } )};
-`;
diff --git a/packages/components/src/input-control/backdrop.js b/packages/components/src/input-control/backdrop.js
index 67c21a0b5dc5c8..fbd08f633cafcc 100644
--- a/packages/components/src/input-control/backdrop.js
+++ b/packages/components/src/input-control/backdrop.js
@@ -1,9 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { Fieldset, Legend, LegendText } from './styles/input-control-styles';
 
-export default function Backdrop( {
+function Backdrop( {
 	disabled = false,
 	isFloating = false,
 	isFloatingLabel = false,
@@ -34,3 +38,7 @@ export default function Backdrop( {
 		</Fieldset>
 	);
 }
+
+const MemoizedBackdrop = memo( Backdrop );
+
+export default MemoizedBackdrop;
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index b030086ce6d952..42cf87e39d2e1a 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -80,12 +80,12 @@ const sizeStyles = ( { size } ) => {
 	const sizes = {
 		default: {
 			height: 30,
-			lineHeight: 30,
+			lineHeight: 1,
 			minHeight: 30,
 		},
 		small: {
 			height: 24,
-			lineHeight: 24,
+			lineHeight: 1,
 			minHeight: 24,
 		},
 	};
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index ca2030b701cfdc..7d5c50c96cfe7e 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -97,8 +97,8 @@ function UnitControl(
 				{ ...props }
 				autoComplete={ autoComplete }
 				className={ classes }
-				disableUnits={ disableUnits }
 				disabled={ disabled }
+				disableUnits={ disableUnits }
 				label={ label }
 				onChange={ handleOnChange }
 				ref={ ref }

From 48b489d29e9f6a059fd5ac661f06d14893c1deb9 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 13:18:38 -0400
Subject: [PATCH 058/103] Resets input value on blur

---
 .../components/src/input-control/input-field.js    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index 604f27d267f60f..89d791e2506fd2 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -36,6 +36,12 @@ function InputField(
 	const [ isDirty, setIsDirty ] = useState( false );
 	const [ value, setValue ] = useValueState( valueProp );
 
+	const resetValue = () => {
+		setValue( valueProp );
+		setIsDirty( false );
+		onUpdateValue( ! isValueEmpty( valueProp ) );
+	};
+
 	const handleOnBlur = ( event ) => {
 		const _forceUpdate = true;
 
@@ -45,8 +51,12 @@ function InputField(
 		 * If isPressEnterToChange is set, this submits the value to
 		 * the onChange callback.
 		 */
-		if ( isPressEnterToChange && ! isValueEmpty( value ) && isDirty ) {
-			handleOnChange( event, _forceUpdate );
+		if ( isPressEnterToChange && isDirty ) {
+			if ( ! isValueEmpty( value ) ) {
+				handleOnChange( event, _forceUpdate );
+			} else {
+				resetValue();
+			}
 		}
 	};
 

From 623de49949fac46f6a36cbd3cfc889a7a0937e0d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 13:29:59 -0400
Subject: [PATCH 059/103] Fix coupled side update rendering when holding ALT
 key

---
 packages/components/src/box-control/unit-control.js | 1 -
 packages/components/src/input-control/index.js      | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index f3396b577359ee..92e7ad61158663 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -22,7 +22,6 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 				isFloatingLabel
 				label={ label }
 				isResetValueOnUnitChange={ false }
-				placeholder={ 0 }
 				size="small"
 				style={ styles }
 				value={ value }
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index cf7718f76698e8..2878982ce87a19 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -64,7 +64,9 @@ export function InputControl(
 		setIsFocused( true );
 	};
 
-	const isFloating = isFloatingLabel ? isFilled || isFocused : false;
+	const isInputFilled = isFilled || ! isValueEmpty( value );
+
+	const isFloating = isFloatingLabel ? isInputFilled || isFocused : false;
 	const isFloatingLabelSet =
 		! hideLabelFromVision && isFloatingLabel && label;
 

From 853932f4c8c55360ca4f4369cc63e1438a597253 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 13:47:21 -0400
Subject: [PATCH 060/103] Adds README for BoxControl and Flex

---
 packages/components/src/box-control/README.md | 98 +++++++++++++++++++
 packages/components/src/box-control/index.js  |  2 +-
 packages/components/src/flex/README.md        | 69 +++++++++++++
 .../components/src/input-control/README.md    | 14 ++-
 4 files changed, 177 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/src/box-control/README.md
 create mode 100644 packages/components/src/flex/README.md

diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
new file mode 100644
index 00000000000000..b8768a4ccbb402
--- /dev/null
+++ b/packages/components/src/box-control/README.md
@@ -0,0 +1,98 @@
+# BoxControl
+
+BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`.
+
+## Usage
+
+```jsx
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { useState } from '@wordpress/compose';
+
+const Example = () => {
+	const [ values, setValues ] = useState( {
+		top: '50px',
+		left: '10%',
+		right: '10%',
+		bottom: '50px',
+	} );
+
+	return (
+		<BoxControl
+			value={ value }
+			onChange={ ( nextValues ) => setValues( nextValues ) }
+		/>
+	);
+};
+```
+
+### Visualizer
+
+BoxControl provides a companion component that visually renders value changes. Place the component you would like the sides visualized within the companion `<Visualizer>` component.
+
+```jsx
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { useState } from '@wordpress/compose';
+
+import MyComponent from './my-component';
+
+const { Visualizer } = BoxControl;
+
+const Example = () => {
+	const [ values, setValues ] = useState( {
+		top: '50px',
+		left: '10%',
+		right: '10%',
+		bottom: '50px',
+	} );
+
+	return (
+		<>
+			<BoxControl
+				value={ value }
+				onChange={ ( nextValues ) => setValues( nextValues ) }
+			/>
+			<Visualizer>
+				<MyComponent />
+			</Visualizer>
+		</>
+	);
+};
+```
+
+## Props
+
+### inputProps
+
+Props for the internal [InputControl](../input-control) components.
+
+-   Type: `Object`
+-   Required: No
+
+### label
+
+Heading label for BoxControl.
+
+-   Type: `String`
+-   Required: No
+-   Default: `Box Control`
+
+### onChange
+
+A function that receives the values of the inputs.
+
+-   Type: `Function`
+-   Required: Yes
+
+### units
+
+Collection of available units which are compatible with [UnitControl](../unit-control).
+
+-   Type: `Array<Object>`
+-   Required: No
+
+### values
+
+The `top`, `right`, `bottom`, and `left` box dimension values.
+
+-   Type: `Object`
+-   Required: No
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 76da5c48ae5e16..522f8c43c86c79 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -29,7 +29,7 @@ function useUniqueId( idProp ) {
 	return idProp || id;
 }
 export default function BoxControl( {
-	idProp,
+	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
new file mode 100644
index 00000000000000..1fcaf566b9a568
--- /dev/null
+++ b/packages/components/src/flex/README.md
@@ -0,0 +1,69 @@
+# Flex
+
+Flex is a layout-based components, which provides a convenient way to align user-interfaces.
+
+## Usage
+
+```jsx
+import { __experimentalFlex as Flex } from '@wordpress/components';
+import { Icon, wordpress } from '@wordpress/icons';
+
+const Example = () => {
+	return (
+		<Flex>
+			<Flex.Item>
+				<Icon icon={ wordpress } />
+			</Flex.Item>
+			<Flex.Block>
+				<h2>WordPress</h2>
+			</Flex.Block>
+		</Flex>
+	);
+};
+```
+
+## Sub-Components
+
+This component provides a collection of sub-component that can be used to compose various interfaces.
+
+### `Flex.Block`
+
+A layout component that expands to fit the remaining space of `Flex`.
+
+### `Flex.Item`
+
+A layout component to contain items of a fixed width within `Flex`.
+
+## Props
+
+### align
+
+Vertically aligns children components using the CSS [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property.
+
+-   Type: `String`
+-   Required: No
+-   Default: `center`
+
+### gap
+
+Determines the spacing in between children components. The `gap` value is a multiplier to the base value of `4`.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `2`
+
+### isReversed
+
+Reverses the render order of children components.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### justify
+
+Horizontally aligns children components using the CSS [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) property.
+
+-   Type: `String`
+-   Required: No
+-   Default: `space-between`
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 18031d77b558c8..42f3e5907b76b5 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -11,11 +11,15 @@ import { __experimentalInputControl as InputControl } from '@wordpress/component
 import { useState } from '@wordpress/compose';
 
 const Example = () => {
-	const [value, setValue] = useState('')
-
-	return <InputControl value={value} onChange={(nextValue) => setValue(nextValue)} />
-
-) );
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<InputControl
+			value={ value }
+			onChange={ ( nextValue ) => setValue( nextValue ) }
+		/>
+	);
+};
 ```
 
 ## Props

From 8686b4a9430291e27be997d9963c6cf266589a88 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 13:47:34 -0400
Subject: [PATCH 061/103] Update docs manifest

---
 docs/manifest.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index aa7c9ddd8739c9..f7a73ee1004202 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -659,6 +659,12 @@
 		"markdown_source": "../packages/components/src/base-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "BoxControl",
+		"slug": "box-control",
+		"markdown_source": "../packages/components/src/box-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ButtonGroup",
 		"slug": "button-group",
@@ -767,6 +773,12 @@
 		"markdown_source": "../packages/components/src/external-link/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Flex",
+		"slug": "flex",
+		"markdown_source": "../packages/components/src/flex/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "FocalPointPicker",
 		"slug": "focal-point-picker",

From ed203c72816191762de48c307e5cb0e7fc3dc01d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 17:24:55 -0400
Subject: [PATCH 062/103] Update stories for NumberControl and UnitControl.

Also continue cleaning up controls
---
 packages/components/src/number-control/index.js  |  9 +++------
 .../src/number-control/stories/index.js          | 10 ++++++++--
 packages/components/src/unit-control/index.js    | 16 ++++------------
 .../components/src/unit-control/stories/index.js |  6 ++++--
 packages/components/src/unit-control/utils.js    | 13 +++++--------
 5 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 7b3f873ae660e0..95d0b8b52c45a3 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -22,7 +22,7 @@ import {
 	subtract,
 	useDragCursor,
 } from './utils';
-import { isValueEmpty, useValueState } from '../input-control/utils';
+import { isValueEmpty } from '../input-control/utils';
 import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
@@ -48,7 +48,6 @@ export function NumberControl(
 	},
 	ref
 ) {
-	const [ value, setValue ] = useValueState( valueProp );
 	const [ isDragging, setIsDragging ] = useState( false );
 	const isRtl = useRtl();
 	const dragCursor = useDragCursor( isDragging, dragDirection );
@@ -77,7 +76,6 @@ export function NumberControl(
 
 			const [ x, y ] = delta;
 			const modifier = shiftKey ? shiftStep : 1;
-			const _forceUpdate = true;
 
 			let directionModifier;
 			let directionBaseValue;
@@ -112,7 +110,7 @@ export function NumberControl(
 					modifier
 				);
 
-				handleOnChange( nextValue, { event }, _forceUpdate );
+				handleOnChange( nextValue, { event } );
 			}
 
 			if ( ! isDragging ) {
@@ -130,7 +128,6 @@ export function NumberControl(
 		const nextValue = getValue( next );
 
 		onChange( nextValue, changeProps );
-		setValue( nextValue );
 	};
 
 	const handleOnKeyDown = ( event ) => {
@@ -197,7 +194,7 @@ export function NumberControl(
 			onKeyDown={ handleOnKeyDown }
 			transformValueOnChange={ getValue }
 			ref={ ref }
-			value={ value }
+			value={ valueProp }
 		/>
 	);
 }
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
index c7b0589568b7fa..e69fcb42a9b729 100644
--- a/packages/components/src/number-control/stories/index.js
+++ b/packages/components/src/number-control/stories/index.js
@@ -19,11 +19,17 @@ export default {
 };
 
 function Example() {
-	const [ value, setValue ] = useState( '' );
+	const [ value, setValue ] = useState( '0' );
 
 	const props = {
-		label: text( 'label', 'Number' ),
+		disabled: boolean( 'disabled', false ),
+		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
+		isFloatingLabel: boolean( 'isFloatingLabel', false ),
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
+		label: text( 'label', 'Number' ),
+		min: number( 'min', 0 ),
+		max: number( 'max', 100 ),
+		placeholder: text( 'placeholder', 0 ),
 		shiftStep: number( 'shiftStep', 10 ),
 		step: number( 'step', 1 ),
 	};
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 7d5c50c96cfe7e..7fa0d8212db9d9 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -14,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, DEFAULT_UNIT, parseUnit, useUnitValueState } from './utils';
+import { CSS_UNITS, DEFAULT_UNIT, getParsedValue, parseUnit } from './utils';
 
 function UnitControl(
 	{
@@ -37,25 +37,17 @@ function UnitControl(
 	},
 	ref
 ) {
-	const [ valueState, setValueState ] = useUnitValueState(
-		valueProp,
-		unitProp
-	);
-	const [ value, unit ] = parseUnit( valueState, units );
+	const [ value, unit ] = getParsedValue( valueProp, unitProp, units );
 
 	const handleOnChange = ( next, changeProps ) => {
 		const { event } = changeProps;
 		const inputValue = event.target.value;
 
-		const [ parsedValue, parsedUnit ] = parseUnit( inputValue, units );
-
-		// Evaluates current/next value and units
-		const baseValue = next === value ? parsedValue : next;
+		const [ , parsedUnit ] = parseUnit( inputValue, units );
 		const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
 
-		const nextValue = `${ baseValue }${ baseUnit }`;
+		const nextValue = `${ next }${ baseUnit }`;
 
-		setValueState( nextValue );
 		onChange( nextValue, changeProps );
 
 		if ( unit !== baseUnit ) {
diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index 02547ec946ca9f..dceaa36ca2cc3f 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -24,12 +24,14 @@ function Example() {
 
 	const props = {
 		disableUnits: boolean( 'disableUnits', false ),
+		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
+		isFloatingLabel: boolean( 'isFloatingLabel', false ),
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		isUnitSelectTabbable: boolean( 'isUnitSelectTabbable', true ),
 		label: text( 'label', 'Value' ),
-		shiftStep: number( 'shiftStep', 10 ),
-		max: number( 'max', 100 ),
 		min: number( 'min', 0 ),
+		max: number( 'max', 100 ),
+		shiftStep: number( 'shiftStep', 10 ),
 		size: select(
 			'size',
 			{
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index e414d4c07913be..8076333e1827d4 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -3,11 +3,6 @@
  */
 import { isEmpty } from 'lodash';
 
-/**
- * Internal dependencies
- */
-import { useValueState } from '../input-control/utils';
-
 export const CSS_UNITS = [
 	{ value: 'px', label: 'px', default: 0 },
 	{ value: '%', label: '%', default: 10 },
@@ -20,7 +15,7 @@ export const CSS_UNITS = [
 export const DEFAULT_UNIT = CSS_UNITS[ 0 ];
 
 /**
- * Custom hook to handle legacy value + unit handling.
+ * Handles legacy value + unit handling.
  * This component use to manage both incoming value and units separately.
  *
  * Moving forward, ideally the value should be a string that contains both
@@ -28,11 +23,13 @@ export const DEFAULT_UNIT = CSS_UNITS[ 0 ];
  *
  * @param {number|string} value Value
  * @param {string} unit Unit value
+ * @param {Array<Object>} units Units to derive from.
+ * @return {Array<number, string>} The extracted number and unit.
  */
-export function useUnitValueState( value, unit ) {
+export function getParsedValue( value, unit, units ) {
 	const initialValue = unit ? `${ value }${ unit }` : value;
 
-	return useValueState( initialValue );
+	return parseUnit( initialValue, units );
 }
 
 /**

From 15307d5f4b71e3aa8fdac3306226f3f63b137c89 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 24 Apr 2020 17:32:16 -0400
Subject: [PATCH 063/103] Improve unit parsing to handle white space

---
 .../components/src/unit-control/test/index.js    | 16 +++-------------
 packages/components/src/unit-control/utils.js    |  2 +-
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index d7bd74ebd50fd0..391e12707a3317 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/packages/components/src/unit-control/test/index.js
@@ -284,18 +284,12 @@ describe( 'UnitControl', () => {
 
 		it( 'should parse unit from input', () => {
 			let state = '10px';
-			let unitState = 'px';
 
 			const setState = ( nextState ) => ( state = nextState );
-			const setUnitState = ( nextState ) => ( unitState = nextState );
 
 			act( () => {
 				render(
-					<UnitControl
-						value={ state }
-						onChange={ setState }
-						onUnitChange={ setUnitState }
-					/>,
+					<UnitControl value={ state } onChange={ setState } />,
 					container
 				);
 			} );
@@ -307,28 +301,24 @@ describe( 'UnitControl', () => {
 			} );
 
 			expect( state ).toBe( '55em' );
-			expect( unitState ).toBe( 'em' );
 
 			act( () => {
 				Simulate.change( input, { target: { value: '61   PX' } } );
 			} );
 
 			expect( state ).toBe( '61px' );
-			expect( unitState ).toBe( 'px' );
 
 			act( () => {
-				Simulate.change( input, { target: { value: '-10%' } } );
+				Simulate.change( input, { target: { value: '-10  %' } } );
 			} );
 
 			expect( state ).toBe( '-10%' );
-			expect( unitState ).toBe( '%' );
 
 			act( () => {
-				Simulate.change( input, { target: { value: '15.25rem' } } );
+				Simulate.change( input, { target: { value: '15.25 REm ' } } );
 			} );
 
 			expect( state ).toBe( '15.25rem' );
-			expect( unitState ).toBe( 'rem' );
 		} );
 	} );
 } );
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 8076333e1827d4..7c3c245dfd219b 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -51,7 +51,7 @@ export function hasUnits( units ) {
  */
 export function parseUnit( initialValue, units = CSS_UNITS ) {
 	const output = [ 0, '' ];
-	const value = String( initialValue );
+	const value = String( initialValue ).trim();
 
 	const num = parseFloat( value, 10 );
 	const unitMatch = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];

From db86e9c894270e7f5d2c6ea53a52530c9dfb2ad5 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 28 Apr 2020 13:32:30 -0400
Subject: [PATCH 064/103] Adjust all vs individual side controls layout

---
 packages/components/src/box-control/index.js  |  18 +--
 .../src/box-control/input-controls.js         | 153 +++++++++---------
 .../box-control/styles/box-control-styles.js  |  33 +---
 .../src/box-control/unit-control.js           |   6 +-
 packages/components/src/box-control/utils.js  |   1 +
 5 files changed, 91 insertions(+), 120 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 522f8c43c86c79..2f4f6925a9ffe3 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -16,7 +16,7 @@ import InputControls from './input-controls';
 import Text from '../text';
 import LinkedButton from './linked-button';
 import Visualizer from './visualizer';
-import { Root, Header, LayoutContainer } from './styles/box-control-styles';
+import { Root, Header } from './styles/box-control-styles';
 
 const defaultInputProps = {
 	min: 0,
@@ -60,15 +60,13 @@ export default function BoxControl( {
 					/>
 				</Flex.Item>
 			</Header>
-			<LayoutContainer className="component-box-control__input-controls-wrapper">
-				<InputControls
-					{ ...inputProps }
-					onChange={ onChange }
-					isLinked={ isLinked }
-					units={ units }
-					values={ values }
-				/>
-			</LayoutContainer>
+			<InputControls
+				{ ...inputProps }
+				onChange={ onChange }
+				isLinked={ isLinked }
+				units={ units }
+				values={ values }
+			/>
 		</Root>
 	);
 }
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index 2dc405955e2627..b412cf0a2053ed 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -3,21 +3,15 @@
  */
 import { noop } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import UnitControl from './unit-control';
 import { LABELS, getAllValue, useBoxControlState } from './utils';
 import {
+	LayoutContainer,
 	Layout,
 	LayoutBox,
-	SideIndicatorX,
-	SideIndicatorY,
 } from './styles/box-control-styles';
 import { useRtl } from '../utils/style-mixins';
 
@@ -38,6 +32,9 @@ export default function BoxInputControls( {
 
 	const isRtl = useRtl();
 	const allValue = getAllValue( values );
+	const allPlaceholder = isNaN( parseFloat( allValue ) )
+		? LABELS.mixed
+		: null;
 
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
 		const { altKey } = event;
@@ -76,83 +73,79 @@ export default function BoxInputControls( {
 		handleOnChange( nextValues );
 	};
 
-	return (
-		<Layout className="component-box-control__input-controls">
-			<LayoutBoxUI />
-			<UnitControl
-				{ ...props }
-				disabled={ isLinked }
-				value={ top }
-				dragDirection="s"
-				onChange={ createHandleOnChange( 'top' ) }
-				label={ LABELS.top }
-				style={ {
-					marginTop: -5,
-					left: '50%',
-					transform: 'translateX(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				disabled={ isLinked }
-				value={ left }
-				dragDirection="e"
-				onChange={ createHandleOnChange( 'left' ) }
-				label={ LABELS.left }
-				style={ {
-					position: 'absolute',
-					[ isRtl ? 'right' : 'left' ]: 0,
-					top: '50%',
-					transform: 'translateY(-50%)',
-				} }
-			/>
+	/**
+	 * All sides
+	 */
+	if ( isLinked ) {
+		return (
 			<UnitControl
 				{ ...props }
-				disabled={ ! isLinked }
 				value={ allValue }
 				onChange={ createHandleOnChange( 'all' ) }
-				label={ LABELS.all }
-				style={ {
-					left: '50%',
-					top: '50%',
-					transform: 'translate(-50%, -50%)',
-				} }
+				placeholder={ allPlaceholder }
+				style={ { position: 'relative' } }
 			/>
-			<UnitControl
-				{ ...props }
-				disabled={ isLinked }
-				value={ right }
-				dragDirection="w"
-				onChange={ createHandleOnChange( 'right' ) }
-				label={ LABELS.right }
-				style={ {
-					[ isRtl ? 'left' : 'right' ]: 0,
-					top: '50%',
-					transform: 'translateY(-50%)',
-				} }
-			/>
-			<UnitControl
-				{ ...props }
-				disabled={ isLinked }
-				value={ bottom }
-				dragDirection="n"
-				onChange={ createHandleOnChange( 'bottom' ) }
-				label={ LABELS.bottom }
-				style={ {
-					left: '50%',
-					marginTop: -5,
-					bottom: 0,
-					transform: 'translateX(-50%)',
-				} }
-			/>
-		</Layout>
+		);
+	}
+
+	/**
+	 * Individual sides
+	 */
+	return (
+		<LayoutContainer className="component-box-control__input-controls-wrapper">
+			<Layout className="component-box-control__input-controls">
+				<LayoutBox aria-hidden="true" />
+				<UnitControl
+					{ ...props }
+					value={ top }
+					dragDirection="s"
+					onChange={ createHandleOnChange( 'top' ) }
+					label={ LABELS.top }
+					style={ {
+						marginTop: -7,
+						top: 0,
+						left: '50%',
+						transform: 'translateX(-50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					value={ left }
+					dragDirection="e"
+					onChange={ createHandleOnChange( 'left' ) }
+					label={ LABELS.left }
+					style={ {
+						position: 'absolute',
+						[ isRtl ? 'right' : 'left' ]: 0,
+						top: '50%',
+						transform: 'translateY(-50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					value={ right }
+					dragDirection="w"
+					onChange={ createHandleOnChange( 'right' ) }
+					label={ LABELS.right }
+					style={ {
+						[ isRtl ? 'left' : 'right' ]: 0,
+						top: '50%',
+						transform: 'translateY(-50%)',
+					} }
+				/>
+				<UnitControl
+					{ ...props }
+					value={ bottom }
+					dragDirection="n"
+					onChange={ createHandleOnChange( 'bottom' ) }
+					label={ LABELS.bottom }
+					style={ {
+						left: '50%',
+						bottom: -2,
+						transform: 'translateX(-50%)',
+					} }
+				/>
+			</Layout>
+		</LayoutContainer>
 	);
 }
-
-const LayoutBoxUI = memo( () => (
-	<>
-		<SideIndicatorX aria-hidden="true" />
-		<SideIndicatorY aria-hidden="true" />
-		<LayoutBox aria-hidden="true" />
-	</>
-) );
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 5b22ddbb3602aa..13a5234603c8bc 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -22,49 +22,28 @@ export const Header = styled( Flex )`
 
 export const UnitControlWrapper = styled.div`
 	box-sizing: border-box;
-	max-width: 75px;
+	max-width: 80px;
 `;
 
 export const LayoutContainer = styled( Flex )`
-	height: 120px;
+	height: 100px;
 	justify-content: center;
 `;
 
 export const Layout = styled.div`
 	box-sizing: border-box;
 	position: relative;
-	height: 120px;
+	height: 100%;
 	width: 100%;
 `;
 
 export const LayoutBox = styled.div`
-	border: 1px dashed ${color( 'ui.borderLight' )};
+	border: 1px solid ${color( 'ui.borderLight' )};
 	bottom: 12px;
 	box-sizing: border-box;
-	left: 30px;
+	left: 40px;
 	pointer-events: none;
 	position: absolute;
-	right: 30px;
+	right: 40px;
 	top: 12px;
 `;
-
-export const SideIndicator = styled.div`
-	box-sizing: border-box;
-	pointer-events: none;
-	position: absolute;
-`;
-
-export const SideIndicatorX = styled( SideIndicator )`
-	border-top: 1px solid ${color( 'ui.borderLight' )};
-	top: 50%;
-	left: 0;
-	width: 100%;
-`;
-
-export const SideIndicatorY = styled( SideIndicator )`
-	border-left: 1px solid ${color( 'ui.borderLight' )};
-	top: 50%;
-	left: 50%;
-	transform: translate( 0, -50% );
-	height: 50%;
-`;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 92e7ad61158663..695b94bf6f3fe8 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -6,9 +6,10 @@ import { UnitControlWrapper } from './styles/box-control-styles';
 
 export default function BoxUnitControl( { label, style, value, ...props } ) {
 	const styles = {
-		marginTop: -2,
-		maxWidth: 70,
+		marginTop: -3,
+		maxWidth: 80,
 		position: 'absolute',
+		width: '100%',
 		zIndex: 1,
 		...style,
 	};
@@ -22,7 +23,6 @@ export default function BoxUnitControl( { label, style, value, ...props } ) {
 				isFloatingLabel
 				label={ label }
 				isResetValueOnUnitChange={ false }
-				size="small"
 				style={ styles }
 				value={ value }
 				{ ...props }
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 2ccc05983ab095..8e6a6b635be3c2 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -15,6 +15,7 @@ export const LABELS = {
 	bottom: __( 'Bottom' ),
 	left: __( 'Left' ),
 	right: __( 'Right' ),
+	mixed: __( 'Mixed' ),
 };
 
 export const DEFAULT_VALUES = {

From 2556e4d6938d0d1c628969d1be0961b88db931d5 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 28 Apr 2020 17:26:36 -0400
Subject: [PATCH 065/103] Improve value parsing + validation on submit

---
 .../components/src/number-control/index.js    |  7 +++-
 packages/components/src/unit-control/index.js | 41 +++++++++++++++++--
 packages/components/src/unit-control/utils.js | 20 +++++++++
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 95d0b8b52c45a3..988e0645926a0c 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -43,6 +43,7 @@ export function NumberControl(
 		onKeyDown = noop,
 		shiftStep = 10,
 		step = 1,
+		transformValueOnChange = ( v ) => v,
 		value: valueProp,
 		...props
 	},
@@ -177,6 +178,10 @@ export function NumberControl(
 		}
 	};
 
+	const handleTransformValueOnChange = ( value ) => {
+		return transformValueOnChange( getValue( value ) );
+	};
+
 	const classes = classNames( 'components-number-control', className );
 
 	return (
@@ -192,7 +197,7 @@ export function NumberControl(
 			label={ label }
 			onChange={ handleOnChange }
 			onKeyDown={ handleOnKeyDown }
-			transformValueOnChange={ getValue }
+			transformValueOnChange={ handleTransformValueOnChange }
 			ref={ ref }
 			value={ valueProp }
 		/>
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 7fa0d8212db9d9..4a9e4af85dd777 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { ENTER } from '@wordpress/keycodes';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -14,7 +15,13 @@ import { forwardRef } from '@wordpress/element';
  */
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, DEFAULT_UNIT, getParsedValue, parseUnit } from './utils';
+import {
+	CSS_UNITS,
+	DEFAULT_UNIT,
+	getParsedValue,
+	getValidParsedUnit,
+	parseUnit,
+} from './utils';
 
 function UnitControl(
 	{
@@ -41,12 +48,24 @@ function UnitControl(
 
 	const handleOnChange = ( next, changeProps ) => {
 		const { event } = changeProps;
-		const inputValue = event.target.value;
+		const isEnterPress = event?.keyCode === ENTER;
+
+		const valueToParse = isEnterPress ? event.target.value : next;
+
+		/**
+		 * Extracts the parsed value on any type of change.
+		 */
+		const [ parsedValue ] = getValidParsedUnit(
+			valueToParse,
+			units,
+			value
+		);
+		// Unit parsing is only required for ENTER press onChange.
+		const [ , parsedUnit ] = parseUnit( event.target.value, units );
 
-		const [ , parsedUnit ] = parseUnit( inputValue, units );
 		const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
 
-		const nextValue = `${ next }${ baseUnit }`;
+		const nextValue = `${ parsedValue }${ baseUnit }`;
 
 		onChange( nextValue, changeProps );
 
@@ -68,6 +87,19 @@ function UnitControl(
 		onUnitChange( next, changeProps );
 	};
 
+	/**
+	 * Validates and transforms content onChange.
+	 * If the next value isn't a valid value, it will reset to the previous
+	 * value from props.
+	 *
+	 * @param {any} next
+	 */
+	const handleTransformValueOnChange = ( next ) => {
+		const [ parsedValue ] = getValidParsedUnit( next, units, value );
+
+		return parsedValue;
+	};
+
 	const classes = classnames( 'components-unit-control', className );
 
 	const inputSuffix = ! disableUnits ? (
@@ -96,6 +128,7 @@ function UnitControl(
 				ref={ ref }
 				size={ size }
 				suffix={ inputSuffix }
+				transformValueOnChange={ handleTransformValueOnChange }
 				type={ type }
 				value={ value }
 			/>
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 7c3c245dfd219b..1e59f50f652745 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -69,3 +69,23 @@ export function parseUnit( initialValue, units = CSS_UNITS ) {
 
 	return output;
 }
+
+/**
+ * Parses a number and unit from a value. Validates parsed value, using fallback
+ * value if invalid.
+ *
+ * @param {number|string} next The next value.
+ * @param {Array<Object>} units Units to derive from.
+ * @param {number|string} fallback The fallback value.
+ * @return {Array<number, string>} The extracted number and unit.
+ */
+export function getValidParsedUnit( next, units, fallback ) {
+	const [ parsedValue, parsedUnit ] = parseUnit( next, units );
+	let baseValue = parsedValue;
+
+	if ( isNaN( parsedValue ) || parsedValue === '' ) {
+		baseValue = fallback;
+	}
+
+	return [ baseValue, parsedUnit ];
+}

From 09ddc4004a937d2334a279fb2a73f580c614fab3 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 29 Apr 2020 13:46:16 -0400
Subject: [PATCH 066/103] TEMPORARY: Testing inline layout for controls

---
 packages/block-editor/src/hooks/padding.js    | 23 ++++++--
 packages/components/src/box-control/index.js  |  2 +
 .../src/box-control/input-controls.js         | 55 ++++++++++++++++++-
 .../src/box-control/stories/index.js          |  8 +++
 .../box-control/styles/box-control-styles.js  |  2 +-
 .../src/box-control/unit-control.js           | 52 +++++++++++-------
 6 files changed, 113 insertions(+), 29 deletions(-)

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index e31887878d5546..d544d0667375b9 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -47,12 +47,23 @@ export function PaddingEdit( props ) {
 
 	return Platform.select( {
 		web: (
-			<BoxControl
-				values={ style?.padding }
-				onChange={ onChange }
-				label={ __( 'Padding' ) }
-				units={ units }
-			/>
+			<>
+				<BoxControl
+					values={ style?.padding }
+					onChange={ onChange }
+					label={ __( 'Padding' ) }
+					units={ units }
+				/>
+				<br />
+				<br />
+				<BoxControl
+					values={ style?.padding }
+					onChange={ onChange }
+					label={ __( 'Padding' ) }
+					units={ units }
+					isInline
+				/>
+			</>
 		),
 		native: null,
 	} );
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 2f4f6925a9ffe3..3a0f351b4e6e8c 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -31,6 +31,7 @@ function useUniqueId( idProp ) {
 export default function BoxControl( {
 	id: idProp,
 	inputProps = defaultInputProps,
+	isInline = false,
 	onChange = noop,
 	label = __( 'Box Control' ),
 	values,
@@ -64,6 +65,7 @@ export default function BoxControl( {
 				{ ...inputProps }
 				onChange={ onChange }
 				isLinked={ isLinked }
+				isInline={ isInline }
 				units={ units }
 				values={ values }
 			/>
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index b412cf0a2053ed..d5203d0887c16a 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -17,6 +17,7 @@ import { useRtl } from '../utils/style-mixins';
 
 export default function BoxInputControls( {
 	isLinked = true,
+	isInline = false,
 	onChange = noop,
 	values: valuesProp,
 	...props
@@ -88,12 +89,63 @@ export default function BoxInputControls( {
 		);
 	}
 
+	/**
+	 * TODO: REMOVE THIS
+	 * Just for testing inline UI
+	 */
+	if ( isInline ) {
+		return (
+			<LayoutContainer className="component-box-control__input-controls-wrapper">
+				<Layout
+					gap={ 1 }
+					align="top"
+					isInline={ isInline }
+					className="component-box-control__input-controls"
+				>
+					<UnitControl
+						{ ...props }
+						value={ top }
+						isInline={ isInline }
+						onChange={ createHandleOnChange( 'top' ) }
+						label={ LABELS.top }
+					/>
+
+					<UnitControl
+						{ ...props }
+						value={ right }
+						isInline={ isInline }
+						onChange={ createHandleOnChange( 'right' ) }
+						label={ LABELS.right }
+					/>
+					<UnitControl
+						{ ...props }
+						value={ bottom }
+						isInline={ isInline }
+						onChange={ createHandleOnChange( 'bottom' ) }
+						label={ LABELS.bottom }
+					/>
+					<UnitControl
+						{ ...props }
+						value={ left }
+						isInline={ isInline }
+						onChange={ createHandleOnChange( 'left' ) }
+						label={ LABELS.left }
+					/>
+				</Layout>
+			</LayoutContainer>
+		);
+	}
+
 	/**
 	 * Individual sides
 	 */
 	return (
 		<LayoutContainer className="component-box-control__input-controls-wrapper">
-			<Layout className="component-box-control__input-controls">
+			<Layout
+				gap={ 1 }
+				align="top"
+				className="component-box-control__input-controls"
+			>
 				<LayoutBox aria-hidden="true" />
 				<UnitControl
 					{ ...props }
@@ -115,7 +167,6 @@ export default function BoxInputControls( {
 					onChange={ createHandleOnChange( 'left' ) }
 					label={ LABELS.left }
 					style={ {
-						position: 'absolute',
 						[ isRtl ? 'right' : 'left' ]: 0,
 						top: '50%',
 						transform: 'translateY(-50%)',
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index 47e8520eeb9fb9..603384f3fb7413 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -37,6 +37,14 @@ function DemoExample() {
 						values={ values }
 						onChange={ setValues }
 					/>
+					<br />
+					<br />
+					<BoxControl
+						label="Padding"
+						isInline
+						values={ values }
+						onChange={ setValues }
+					/>
 				</Content>
 			</FlexBlock>
 			<FlexBlock>
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 13a5234603c8bc..99af33fa33942b 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -30,7 +30,7 @@ export const LayoutContainer = styled( Flex )`
 	justify-content: center;
 `;
 
-export const Layout = styled.div`
+export const Layout = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
 	height: 100%;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 695b94bf6f3fe8..999cf0288948d2 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -2,31 +2,43 @@
  * Internal dependencies
  */
 import BaseUnitControl from '../unit-control';
+import Tooltip from '../tooltip';
 import { UnitControlWrapper } from './styles/box-control-styles';
 
-export default function BoxUnitControl( { label, style, value, ...props } ) {
-	const styles = {
-		marginTop: -3,
-		maxWidth: 80,
-		position: 'absolute',
-		width: '100%',
-		zIndex: 1,
-		...style,
-	};
+export default function BoxUnitControl( {
+	isInline,
+	label,
+	style,
+	value,
+	...props
+} ) {
+	const styles = isInline
+		? {}
+		: {
+				marginTop: -3,
+				maxWidth: 80,
+				position: 'absolute',
+				width: '100%',
+				zIndex: 1,
+				...style,
+		  };
 
+	const TooltipComponent = isInline ? Tooltip : 'div';
 	return (
 		<UnitControlWrapper aria-label={ label }>
-			<BaseUnitControl
-				className="component-box-control__unit-control"
-				hideHTMLArrows
-				isPressEnterToChange
-				isFloatingLabel
-				label={ label }
-				isResetValueOnUnitChange={ false }
-				style={ styles }
-				value={ value }
-				{ ...props }
-			/>
+			<TooltipComponent text={ label } position="top">
+				<BaseUnitControl
+					className="component-box-control__unit-control"
+					hideHTMLArrows
+					isPressEnterToChange
+					isFloatingLabel
+					label={ ! isInline ? label : null }
+					isResetValueOnUnitChange={ false }
+					style={ styles }
+					value={ value }
+					{ ...props }
+				/>
+			</TooltipComponent>
 		</UnitControlWrapper>
 	);
 }

From 58956c293e7c5594b5df036a204166cbd5328e9e Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 29 Apr 2020 19:03:29 -0400
Subject: [PATCH 067/103] Implement stateReducer for InputControl,
 NumberControl, and UnitControl

---
 .../components/src/input-control/index.js     |   2 +
 .../src/input-control/input-field.js          | 132 +++++++++----
 .../components/src/input-control/state.js     | 162 ++++++++++++++++
 .../styles/input-control-styles.js            |  32 ++++
 .../components/src/input-control/utils.js     |  58 ++++++
 .../components/src/number-control/index.js    | 180 +++++++-----------
 .../styles/number-control-styles.js           |  32 ----
 .../components/src/number-control/utils.js    |  62 ------
 packages/components/src/unit-control/index.js |  79 ++++----
 9 files changed, 459 insertions(+), 280 deletions(-)
 create mode 100644 packages/components/src/input-control/state.js

diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 2878982ce87a19..df8f1b2105e517 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -41,6 +41,7 @@ export function InputControl(
 		onFocus = noop,
 		onKeyDown = noop,
 		size = 'default',
+		stateReducer = ( state ) => state,
 		suffix,
 		transformValueOnChange = ( v ) => v,
 		value,
@@ -104,6 +105,7 @@ export function InputControl(
 					ref={ ref }
 					setIsFocused={ setIsFocused }
 					size={ size }
+					stateReducer={ stateReducer }
 					transformValueOnChange={ transformValueOnChange }
 					value={ value }
 				/>
diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index 89d791e2506fd2..ed2d099c8a8a20 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -2,49 +2,77 @@
  * External dependencies
  */
 import { noop } from 'lodash';
+import { useDrag } from 'react-use-gesture';
 
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
+import { useEffect, useRef, forwardRef } from '@wordpress/element';
+import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { useValueState, isValueEmpty } from './utils';
+import { useDragCursor, isValueEmpty } from './utils';
 import { Input } from './styles/input-control-styles';
+import { useInputControlStateReducer } from './state';
 
 function InputField(
 	{
 		disabled,
+		dragDirection = 'n',
+		dragThreshold = 10,
 		id,
-		isPressEnterToChange,
+		isDragEnabled = false,
+		isPressEnterToChange = false,
 		isFloating,
 		isFloatingLabelSet,
+		onDragStart = noop,
+		onDragEnd = noop,
+		onDrag = noop,
 		onBlur = noop,
 		onChange = noop,
 		onFocus = noop,
 		onKeyDown = noop,
 		onUpdateValue,
 		size = 'default',
-		transformValueOnChange = ( value ) => value,
+		stateReducer = ( state ) => state,
 		value: valueProp,
 		...props
 	},
 	ref
 ) {
-	const [ isDirty, setIsDirty ] = useState( false );
-	const [ value, setValue ] = useValueState( valueProp );
+	const {
+		state,
+		change,
+		drag,
+		dragStart,
+		dragEnd,
+		pressUp,
+		pressDown,
+		pressEnter,
+		reset,
+		submit,
+	} = useInputControlStateReducer( stateReducer, {
+		isDragEnabled,
+		value: valueProp,
+		isPressEnterToChange,
+	} );
 
-	const resetValue = () => {
-		setValue( valueProp );
-		setIsDirty( false );
-		onUpdateValue( ! isValueEmpty( valueProp ) );
-	};
+	const { _event, value, isDragging, isDirty } = state;
 
-	const handleOnBlur = ( event ) => {
-		const _forceUpdate = true;
+	const valueRef = useRef( value );
+	const dragCursor = useDragCursor( isDragging, dragDirection );
+
+	useEffect( () => {
+		if ( value !== valueRef.current && ! isDirty ) {
+			onChange( value, { event: _event } );
+			onUpdateValue( ! isValueEmpty( value ) );
 
+			valueRef.current = value;
+		}
+	}, [ value, isDirty ] );
+
+	const handleOnBlur = ( event ) => {
 		onBlur( event );
 
 		/**
@@ -53,9 +81,9 @@ function InputField(
 		 */
 		if ( isPressEnterToChange && isDirty ) {
 			if ( ! isValueEmpty( value ) ) {
-				handleOnChange( event, _forceUpdate );
+				submit( value, event );
 			} else {
-				resetValue();
+				reset( valueProp );
 			}
 		}
 	};
@@ -64,37 +92,73 @@ function InputField(
 		onFocus( event );
 	};
 
-	const handleOnChange = ( event, _forceUpdate ) => {
-		const nextValue = event.target.value;
-
-		if ( ! isPressEnterToChange || _forceUpdate ) {
-			const transformedValue = transformValueOnChange( nextValue );
-			setValue( transformedValue );
-
-			onChange( nextValue, { event } );
-			setIsDirty( false );
-		} else {
-			setValue( nextValue );
-			setIsDirty( true );
-		}
-		onUpdateValue( ! isValueEmpty( nextValue ) );
+	const handleOnChange = ( event ) => {
+		change( event.target.value, event );
 	};
 
 	const handleOnKeyDown = ( event ) => {
-		const _forceUpdate = true;
+		const { keyCode } = event;
 		onKeyDown( event );
 
-		if ( isPressEnterToChange && event.keyCode === ENTER ) {
-			event.preventDefault();
-			handleOnChange( event, _forceUpdate );
+		switch ( keyCode ) {
+			case UP:
+				pressUp( event );
+				break;
+
+			case DOWN:
+				pressDown( event );
+				break;
+
+			case ENTER:
+				pressEnter( event );
+
+				if ( isPressEnterToChange ) {
+					event.preventDefault();
+					submit( event.target.value, event );
+				}
+				break;
 		}
 	};
 
+	const dragGestureProps = useDrag(
+		( dragProps ) => {
+			const { dragging, event } = dragProps;
+
+			if ( ! isDragEnabled ) return;
+			event.stopPropagation();
+
+			/**
+			 * Quick return if no longer dragging.
+			 * This prevents unnecessary value calculations.
+			 */
+			if ( ! dragging ) {
+				onDragEnd( dragProps );
+				dragEnd( dragProps );
+				return;
+			}
+
+			onDrag( dragProps );
+			drag( dragProps );
+
+			if ( ! isDragging ) {
+				onDragStart( dragProps );
+				dragStart( dragProps );
+			}
+		},
+		{
+			threshold: dragThreshold,
+			enabled: isDragEnabled,
+		}
+	);
+
 	return (
 		<Input
 			{ ...props }
+			{ ...dragGestureProps() }
 			className="components-input-control__input"
 			disabled={ disabled }
+			dragCursor={ dragCursor }
+			isDragging={ isDragging }
 			id={ id }
 			isFloating={ isFloating }
 			isFloatingLabel={ isFloatingLabelSet }
diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
new file mode 100644
index 00000000000000..946b7726a08f90
--- /dev/null
+++ b/packages/components/src/input-control/state.js
@@ -0,0 +1,162 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducer } from '@wordpress/element';
+
+const initialStateReducer = ( state ) => state;
+
+const initialInputControlState = {
+	_event: {},
+	isDragEnabled: false,
+	isDirty: false,
+	isDragging: false,
+	isPressEnterToSubmit: false,
+	initialValue: '',
+	value: '',
+};
+
+const actionTypes = {
+	CHANGE: 'CHANGE',
+	DRAG_END: 'DRAG_END',
+	DRAG_START: 'DRAG_START',
+	DRAG: 'DRAG',
+	PRESS_DOWN: 'PRESS_DOWN',
+	PRESS_ENTER: 'PRESS_ENTER',
+	PRESS_UP: 'PRESS_UP',
+	RESET: 'RESET',
+	SUBMIT: 'SUBMIT',
+};
+
+export const inputControlActionTypes = actionTypes;
+
+function mergeInitialState( initialState = initialInputControlState ) {
+	const { value } = initialState;
+
+	return {
+		...initialInputControlState,
+		...initialState,
+		initialValue: value,
+	};
+}
+
+function inputControlStateReducer( stateReducer = initialStateReducer ) {
+	return ( state, action ) => {
+		let nextState = { ...state };
+		const { type, payload } = action;
+
+		switch ( type ) {
+			/**
+			 * Keyboard events
+			 */
+			case actionTypes.PRESS_UP:
+				nextState.isDirty = false;
+				break;
+
+			case actionTypes.PRESS_DOWN:
+				nextState.isDirty = false;
+				break;
+
+			/**
+			 * Drag events
+			 */
+			case actionTypes.DRAG_START:
+				nextState.isDragging = true;
+				break;
+
+			case actionTypes.DRAG:
+				break;
+
+			case actionTypes.DRAG_END:
+				nextState.isDragging = false;
+				break;
+
+			/**
+			 * Input events
+			 */
+			case actionTypes.CHANGE:
+				nextState.value = payload.value;
+				if ( state.isPressEnterToChange ) {
+					nextState.isDirty = true;
+				}
+				break;
+
+			case actionTypes.SUBMIT:
+				nextState.value = payload.value;
+				nextState.isDirty = false;
+				break;
+
+			case actionTypes.RESET:
+				nextState.value = payload.value || state.initialValue;
+				nextState.isDirty = false;
+				break;
+		}
+
+		if ( payload.event ) {
+			nextState._event = payload.event;
+		}
+
+		/**
+		 * This enables consuming components to adjust the state as needed.
+		 * This technique uses the "stateReducer" design pattern:
+		 * https://kentcdodds.com/blog/the-state-reducer-pattern/
+		 */
+		nextState = stateReducer( nextState, action );
+
+		return nextState;
+	};
+}
+
+export function useInputControlStateReducer(
+	stateReducer = initialStateReducer,
+	initialState = initialInputControlState
+) {
+	const [ state, dispatch ] = useReducer(
+		inputControlStateReducer( stateReducer ),
+		mergeInitialState( initialState )
+	);
+
+	const createChangeEvent = ( type ) => ( nextValue, event ) => {
+		dispatch( {
+			type,
+			payload: { value: nextValue, event: { ...event } },
+		} );
+	};
+
+	const createKeyEvent = ( type ) => ( event ) => {
+		dispatch( { type, payload: { event: { ...event } } } );
+	};
+
+	const createDragEvent = ( type ) => ( dragProps ) => {
+		dispatch( { type, payload: dragProps } );
+	};
+
+	/**
+	 * Actions for the reducer
+	 */
+
+	const change = createChangeEvent( actionTypes.CHANGE );
+	const submit = createChangeEvent( actionTypes.SUBMIT );
+	const reset = createChangeEvent( actionTypes.RESET );
+
+	const dragStart = createDragEvent( actionTypes.DRAG_START );
+	const drag = createDragEvent( actionTypes.DRAG );
+	const dragEnd = createDragEvent( actionTypes.DRAG_END );
+
+	const pressUp = createKeyEvent( actionTypes.PRESS_UP );
+	const pressDown = createKeyEvent( actionTypes.PRESS_DOWN );
+	const pressEnter = createKeyEvent( actionTypes.PRESS_ENTER );
+
+	return {
+		change,
+		dispatch,
+		drag,
+		dragEnd,
+		dragStart,
+		pressDown,
+		pressEnter,
+		pressUp,
+		reset,
+		state,
+		submit,
+	};
+}
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 42cf87e39d2e1a..1c0bb284f6833c 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -111,6 +111,37 @@ const placeholderStyles = ( { isFilled, isFloating, isFloatingLabel } ) => {
 	`;
 };
 
+const dragStyles = ( { isDragging, dragCursor } ) => {
+	let defaultArrowStyles = '';
+	let activeDragCursorStyles = '';
+
+	if ( isDragging ) {
+		defaultArrowStyles = css`
+			cursor: ${dragCursor};
+			user-select: none;
+
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none !important;
+				margin: 0 !important;
+			}
+		`;
+	}
+
+	if ( isDragging && dragCursor ) {
+		activeDragCursorStyles = css`
+			&:active {
+				cursor: ${dragCursor};
+			}
+		`;
+	}
+
+	return css`
+		${defaultArrowStyles};
+		${activeDragCursorStyles};
+	`;
+};
+
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -127,6 +158,7 @@ export const Input = styled.input`
 		padding-right: 8px;
 		width: 100%;
 
+		${dragStyles};
 		${disabledStyles};
 		${fontSizeStyles};
 		${sizeStyles};
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index 6cc6bc0ec19eef..5051fe935b88b9 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -1,7 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { useControlledState } from '../utils/hooks';
+import { getRtl } from '../utils/style-mixins';
+
+/**
+ * Gets a CSS cursor value based on a drag direction.
+ *
+ * @param {string} dragDirection The drag direction.
+ * @return {string} The CSS cursor value.
+ */
+export function getDragCursor( dragDirection ) {
+	const isRtl = getRtl();
+	let dragCursor = 'n-resize';
+
+	switch ( dragDirection ) {
+		case 'n':
+			dragCursor = 'n-resize';
+			break;
+		case 'e':
+			dragCursor = isRtl ? 'w-resize' : 'e-resize';
+			break;
+		case 's':
+			dragCursor = 's-resize';
+			break;
+		case 'w':
+			dragCursor = isRtl ? 'e-resize' : 'w-resize';
+			break;
+	}
+
+	return dragCursor;
+}
+
+/**
+ * Custom hook that renders a drag cursor when dragging.
+ *
+ * @param {boolean} isDragging The dragging state.
+ * @param {string} dragDirection The drag direction.
+ *
+ * @return {string} The CSS cursor value.
+ */
+export function useDragCursor( isDragging, dragDirection ) {
+	const dragCursor = getDragCursor( dragDirection );
+
+	useEffect( () => {
+		if ( isDragging ) {
+			document.documentElement.style.cursor = dragCursor;
+			document.documentElement.style.pointerEvents = 'none';
+		} else {
+			document.documentElement.style.cursor = null;
+			document.documentElement.style.pointerEvents = null;
+		}
+	}, [ isDragging ] );
+
+	return dragCursor;
+}
 
 /**
  * Determines if a value is empty, null, or undefined.
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 988e0645926a0c..6f1fff7bef96f2 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -1,80 +1,92 @@
 /**
  * External dependencies
  */
-import { clamp, noop } from 'lodash';
+import { clamp } from 'lodash';
 import classNames from 'classnames';
-import { useDrag } from 'react-use-gesture';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef, useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { Input } from './styles/number-control-styles';
-import {
-	add,
-	getValue,
-	roundClampString,
-	subtract,
-	useDragCursor,
-} from './utils';
+import { add, getValue, roundClamp, subtract } from './utils';
 import { isValueEmpty } from '../input-control/utils';
+import { inputControlActionTypes } from '../input-control/state';
 import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
 	{
 		className,
 		dragDirection = 'n',
-		dragThreshold = 10,
 		hideHTMLArrows = false,
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
 		max = Infinity,
 		min = -Infinity,
-		onChange = noop,
-		onDrag = noop,
-		onDragEnd = noop,
-		onDragStart = noop,
-		onKeyDown = noop,
 		shiftStep = 10,
+		stateReducer: stateReducerProp = ( state ) => state,
 		step = 1,
-		transformValueOnChange = ( v ) => v,
 		value: valueProp,
 		...props
 	},
 	ref
 ) {
-	const [ isDragging, setIsDragging ] = useState( false );
-	const isRtl = useRtl();
-	const dragCursor = useDragCursor( isDragging, dragDirection );
-
+	const initialValue = getValue( valueProp, min, max );
 	const baseValue = clamp( 0, min, max );
+	const isRtl = useRtl();
 
-	const dragGestureProps = useDrag(
-		( dragProps ) => {
-			const { dragging, delta, event, shiftKey } = dragProps;
+	const classes = classNames( 'components-number-control', className );
 
-			if ( ! isDragEnabled ) return;
+	const stateReducer = ( state, action ) => {
+		const { type, payload } = action;
+		const event = payload?.event;
+
+		const nextState = stateReducerProp( state, action );
+		const currentValue = nextState.value;
+
+		/**
+		 * Handles custom UP and DOWN Keyboard events
+		 */
+		if (
+			type === inputControlActionTypes.PRESS_UP ||
+			type === inputControlActionTypes.PRESS_DOWN
+		) {
+			const enableShift = event.shiftKey && isShiftStepEnabled;
+
+			const incrementalValue = enableShift
+				? parseFloat( shiftStep )
+				: parseFloat( step );
+			let nextValue = isValueEmpty( currentValue )
+				? baseValue
+				: currentValue;
+
+			if ( event?.preventDefault ) {
+				event.preventDefault();
+			}
 
-			/**
-			 * Quick return if no longer dragging.
-			 * This prevents unnecessary value calculations.
-			 */
-			if ( ! dragging ) {
-				onDragEnd( dragProps );
-				setIsDragging( false );
+			if ( action.type === inputControlActionTypes.PRESS_UP ) {
+				nextValue = add( nextValue, incrementalValue );
+			}
 
-				return;
+			if ( action.type === inputControlActionTypes.PRESS_DOWN ) {
+				nextValue = subtract( nextValue, incrementalValue );
 			}
 
-			event.stopPropagation();
-			onDrag( dragProps );
+			nextValue = roundClamp( nextValue, min, max, incrementalValue );
+
+			nextState.value = nextValue;
+		}
 
+		/**
+		 * Handles drag to update events
+		 */
+		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
+			const { delta, shiftKey } = payload;
 			const [ x, y ] = delta;
 			const modifier = shiftKey ? shiftStep : 1;
 
@@ -86,14 +98,17 @@ export function NumberControl(
 					directionBaseValue = y;
 					directionModifier = -1;
 					break;
+
 				case 'e':
 					directionBaseValue = x;
 					directionModifier = isRtl ? -1 : 1;
 					break;
+
 				case 's':
 					directionBaseValue = y;
 					directionModifier = 1;
 					break;
+
 				case 'w':
 					directionBaseValue = x;
 					directionModifier = isRtl ? 1 : -1;
@@ -104,102 +119,45 @@ export function NumberControl(
 			let nextValue;
 
 			if ( distance !== 0 ) {
-				nextValue = roundClampString(
-					add( valueProp, distance ),
+				nextValue = roundClamp(
+					add( currentValue, distance ),
 					min,
 					max,
 					modifier
 				);
 
-				handleOnChange( nextValue, { event } );
+				nextState.value = nextValue;
 			}
-
-			if ( ! isDragging ) {
-				onDragStart( dragProps );
-				setIsDragging( true );
-			}
-		},
-		{
-			threshold: dragThreshold,
-			enabled: isDragEnabled,
 		}
-	);
-
-	const handleOnChange = ( next, changeProps ) => {
-		const nextValue = getValue( next );
-
-		onChange( nextValue, changeProps );
-	};
-
-	const handleOnKeyDown = ( event ) => {
-		onKeyDown( event );
-		const { value: currentValue } = event.target;
-
-		const enableShift = event.shiftKey && isShiftStepEnabled;
 
-		const incrementalValue = enableShift
-			? parseFloat( shiftStep )
-			: parseFloat( step );
-		let nextValue = isValueEmpty( currentValue ) ? baseValue : currentValue;
-
-		// Convert to a number to use math
-		nextValue = parseFloat( nextValue );
-
-		switch ( event.keyCode ) {
-			case UP:
-				event.preventDefault();
-
-				nextValue = add( nextValue, incrementalValue );
-				nextValue = roundClampString(
-					nextValue,
-					min,
-					max,
-					incrementalValue
-				);
-
-				handleOnChange( nextValue, { event } );
-
-				break;
-
-			case DOWN:
-				event.preventDefault();
-
-				nextValue = subtract( nextValue, incrementalValue );
-				nextValue = roundClampString(
-					nextValue,
-					min,
-					max,
-					incrementalValue
-				);
-
-				handleOnChange( nextValue, { event } );
-
-				break;
+		/**
+		 * Handles ENTER key press and submit
+		 */
+		if (
+			( type === inputControlActionTypes.CHANGE &&
+				! nextState.isPressEnterToChange ) ||
+			type === inputControlActionTypes.PRESS_ENTER ||
+			type === inputControlActionTypes.SUBMIT
+		) {
+			nextState.value = roundClamp( currentValue, min, max );
 		}
-	};
 
-	const handleTransformValueOnChange = ( value ) => {
-		return transformValueOnChange( getValue( value ) );
+		return nextState;
 	};
 
-	const classes = classNames( 'components-number-control', className );
-
 	return (
 		<Input
 			inputMode="numeric"
 			type="number"
 			{ ...props }
-			{ ...dragGestureProps() }
 			className={ classes }
-			dragCursor={ dragCursor }
+			dragDirection={ dragDirection }
 			hideHTMLArrows={ hideHTMLArrows }
-			isDragging={ isDragging }
+			isDragEnabled={ isDragEnabled }
 			label={ label }
-			onChange={ handleOnChange }
-			onKeyDown={ handleOnKeyDown }
-			transformValueOnChange={ handleTransformValueOnChange }
+			stateReducer={ stateReducer }
 			ref={ ref }
-			value={ valueProp }
+			value={ initialValue }
 		/>
 	);
 }
diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js
index f0644a5de998cb..fe85c4bb902221 100644
--- a/packages/components/src/number-control/styles/number-control-styles.js
+++ b/packages/components/src/number-control/styles/number-control-styles.js
@@ -8,37 +8,6 @@ import styled from '@emotion/styled';
  */
 import InputControl from '../../input-control';
 
-const dragStyles = ( { isDragging, dragCursor } ) => {
-	let defaultArrowStyles = '';
-	let activeDragCursorStyles = '';
-
-	if ( isDragging ) {
-		defaultArrowStyles = css`
-			cursor: ${dragCursor};
-			user-select: none;
-
-			&::-webkit-outer-spin-button,
-			&::-webkit-inner-spin-button {
-				-webkit-appearance: none !important;
-				margin: 0 !important;
-			}
-		`;
-	}
-
-	if ( dragCursor ) {
-		activeDragCursorStyles = css`
-			&:active {
-				cursor: ${dragCursor};
-			}
-		`;
-	}
-
-	return css`
-		${defaultArrowStyles};
-		${activeDragCursorStyles};
-	`;
-};
-
 const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 	if ( ! hideHTMLArrows ) return ``;
 
@@ -52,6 +21,5 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 };
 
 export const Input = styled( InputControl )`
-	${dragStyles};
 	${htmlArrowStyles};
 `;
diff --git a/packages/components/src/number-control/utils.js b/packages/components/src/number-control/utils.js
index f9c1344a3e014f..5c736ea37ca03b 100644
--- a/packages/components/src/number-control/utils.js
+++ b/packages/components/src/number-control/utils.js
@@ -3,68 +3,6 @@
  */
 import { clamp } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { getRtl } from '../utils/style-mixins';
-
-/**
- * Gets a CSS cursor value based on a drag direction.
- *
- * @param {string} dragDirection The drag direction.
- * @return {string} The CSS cursor value.
- */
-export function getDragCursor( dragDirection ) {
-	const isRtl = getRtl();
-	let dragCursor = 'n-resize';
-
-	switch ( dragDirection ) {
-		case 'n':
-			dragCursor = 'n-resize';
-			break;
-		case 'e':
-			dragCursor = isRtl ? 'w-resize' : 'e-resize';
-			break;
-		case 's':
-			dragCursor = 's-resize';
-			break;
-		case 'w':
-			dragCursor = isRtl ? 'e-resize' : 'w-resize';
-			break;
-	}
-
-	return dragCursor;
-}
-
-/**
- * Custom hook that renders a drag cursor when dragging.
- *
- * @param {boolean} isDragging The dragging state.
- * @param {string} dragDirection The drag direction.
- *
- * @return {string} The CSS cursor value.
- */
-export function useDragCursor( isDragging, dragDirection ) {
-	const dragCursor = getDragCursor( dragDirection );
-
-	useEffect( () => {
-		if ( isDragging ) {
-			document.documentElement.style.cursor = dragCursor;
-			document.documentElement.style.pointerEvents = 'none';
-		} else {
-			document.documentElement.style.cursor = null;
-			document.documentElement.style.pointerEvents = null;
-		}
-	}, [ isDragging ] );
-
-	return dragCursor;
-}
-
 /**
  * Parses and retrieves a number value.
  *
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 4a9e4af85dd777..03f19ff2103d68 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -7,12 +7,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ENTER } from '@wordpress/keycodes';
-import { forwardRef } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { inputControlActionTypes } from '../input-control/state';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import {
@@ -20,7 +20,6 @@ import {
 	DEFAULT_UNIT,
 	getParsedValue,
 	getValidParsedUnit,
-	parseUnit,
 } from './utils';
 
 function UnitControl(
@@ -29,6 +28,7 @@ function UnitControl(
 		className,
 		disabled = false,
 		disableUnits = false,
+		isPressEnterToChange = false,
 		isResetValueOnUnitChange = false,
 		isUnitSelectTabbable = false,
 		label,
@@ -36,7 +36,6 @@ function UnitControl(
 		onUnitChange = noop,
 		size = 'default',
 		style,
-		type = 'text',
 		unit: unitProp,
 		units = CSS_UNITS,
 		value: valueProp,
@@ -44,34 +43,16 @@ function UnitControl(
 	},
 	ref
 ) {
-	const [ value, unit ] = getParsedValue( valueProp, unitProp, units );
+	const [ value, initialUnit ] = getParsedValue( valueProp, unitProp, units );
+	const [ unit, setUnit ] = useState( initialUnit );
 
 	const handleOnChange = ( next, changeProps ) => {
-		const { event } = changeProps;
-		const isEnterPress = event?.keyCode === ENTER;
+		const [ , parsedUnit ] = getParsedValue( next, units );
+		const baseUnit = parsedUnit || unit;
 
-		const valueToParse = isEnterPress ? event.target.value : next;
-
-		/**
-		 * Extracts the parsed value on any type of change.
-		 */
-		const [ parsedValue ] = getValidParsedUnit(
-			valueToParse,
-			units,
-			value
-		);
-		// Unit parsing is only required for ENTER press onChange.
-		const [ , parsedUnit ] = parseUnit( event.target.value, units );
-
-		const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
-
-		const nextValue = `${ parsedValue }${ baseUnit }`;
+		const nextValue = `${ next }${ baseUnit }`;
 
 		onChange( nextValue, changeProps );
-
-		if ( unit !== baseUnit ) {
-			onUnitChange( baseUnit, changeProps );
-		}
 	};
 
 	const handleOnUnitChange = ( next, changeProps ) => {
@@ -79,25 +60,40 @@ function UnitControl(
 
 		let nextValue = `${ value }${ next }`;
 
-		if ( isResetValueOnUnitChange && data.default !== undefined ) {
+		if ( isResetValueOnUnitChange && data?.default !== undefined ) {
 			nextValue = `${ data.default }${ next }`;
 		}
 
 		onChange( nextValue, changeProps );
 		onUnitChange( next, changeProps );
+		setUnit( next );
 	};
 
-	/**
-	 * Validates and transforms content onChange.
-	 * If the next value isn't a valid value, it will reset to the previous
-	 * value from props.
-	 *
-	 * @param {any} next
-	 */
-	const handleTransformValueOnChange = ( next ) => {
-		const [ parsedValue ] = getValidParsedUnit( next, units, value );
-
-		return parsedValue;
+	const stateReducer = ( state, action ) => {
+		const { type, payload } = action;
+		const event = payload?.event;
+
+		const nextState = { ...state };
+
+		if ( type === inputControlActionTypes.SUBMIT ) {
+			const valueToParse = event?.target?.value;
+
+			const [ parsedValue, parsedUnit ] = getValidParsedUnit(
+				valueToParse,
+				units,
+				value
+			);
+
+			const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
+
+			nextState.value = parsedValue;
+
+			if ( unit !== baseUnit ) {
+				handleOnUnitChange( baseUnit, { event } );
+			}
+		}
+
+		return nextState;
 	};
 
 	const classes = classnames( 'components-unit-control', className );
@@ -118,18 +114,19 @@ function UnitControl(
 		<Root className="components-unit-control-wrapper" style={ style }>
 			<ValueInput
 				aria-label={ label }
+				type={ isPressEnterToChange ? 'text' : 'number' }
 				{ ...props }
 				autoComplete={ autoComplete }
 				className={ classes }
 				disabled={ disabled }
 				disableUnits={ disableUnits }
+				isPressEnterToChange={ isPressEnterToChange }
 				label={ label }
 				onChange={ handleOnChange }
 				ref={ ref }
 				size={ size }
 				suffix={ inputSuffix }
-				transformValueOnChange={ handleTransformValueOnChange }
-				type={ type }
+				stateReducer={ stateReducer }
 				value={ value }
 			/>
 		</Root>

From 73332d7abfb570636b2fdf6401973e543103fc09 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 29 Apr 2020 22:15:55 -0400
Subject: [PATCH 068/103] Fixes tests and wraps up stateReducer update

---
 .../components/src/input-control/index.js     |  4 +-
 .../src/input-control/input-field.js          | 52 ++++++++++++++++---
 .../components/src/input-control/state.js     | 36 ++++++++++---
 .../components/src/number-control/index.js    | 11 +++-
 .../src/number-control/test/index.js          |  2 +-
 packages/components/src/unit-control/index.js | 51 ++++++++++++------
 packages/components/src/unit-control/utils.js | 20 +++++--
 7 files changed, 136 insertions(+), 40 deletions(-)

diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index df8f1b2105e517..449fb81589fae1 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -39,11 +39,11 @@ export function InputControl(
 		onBlur = noop,
 		onChange = noop,
 		onFocus = noop,
+		onValidate = noop,
 		onKeyDown = noop,
 		size = 'default',
 		stateReducer = ( state ) => state,
 		suffix,
-		transformValueOnChange = ( v ) => v,
 		value,
 		...props
 	},
@@ -102,11 +102,11 @@ export function InputControl(
 					onFocus={ handleOnFocus }
 					onKeyDown={ onKeyDown }
 					onUpdateValue={ setIsFilled }
+					onValidate={ onValidate }
 					ref={ ref }
 					setIsFocused={ setIsFocused }
 					size={ size }
 					stateReducer={ stateReducer }
-					transformValueOnChange={ transformValueOnChange }
 					value={ value }
 				/>
 				{ suffix && (
diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index ed2d099c8a8a20..3e1b3c1a430bcf 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -23,17 +23,18 @@ function InputField(
 		dragThreshold = 10,
 		id,
 		isDragEnabled = false,
-		isPressEnterToChange = false,
 		isFloating,
 		isFloatingLabelSet,
-		onDragStart = noop,
-		onDragEnd = noop,
-		onDrag = noop,
+		isPressEnterToChange = false,
 		onBlur = noop,
 		onChange = noop,
+		onDrag = noop,
+		onDragEnd = noop,
+		onDragStart = noop,
 		onFocus = noop,
 		onKeyDown = noop,
 		onUpdateValue,
+		onValidate = noop,
 		size = 'default',
 		stateReducer = ( state ) => state,
 		value: valueProp,
@@ -47,11 +48,13 @@ function InputField(
 		drag,
 		dragStart,
 		dragEnd,
+		invalidate,
 		pressUp,
 		pressDown,
 		pressEnter,
 		reset,
 		submit,
+		update,
 	} = useInputControlStateReducer( stateReducer, {
 		isDragEnabled,
 		value: valueProp,
@@ -60,17 +63,38 @@ function InputField(
 
 	const { _event, value, isDragging, isDirty } = state;
 
+	const initialValueRef = useRef( valueProp );
 	const valueRef = useRef( value );
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
 	useEffect( () => {
+		/**
+		 * Handles syncing incoming value changes with internal state.
+		 * This effectively enables a "controlled" state.
+		 * https://reactjs.org/docs/forms.html#controlled-components
+		 */
+		if (
+			valueProp !== initialValueRef.current &&
+			valueProp !== valueRef.current
+		) {
+			update( valueProp );
+			initialValueRef.current = valueProp;
+			valueRef.current = valueProp;
+
+			// Quick return to avoid firing the onChange callback
+			return;
+		}
+
+		/**
+		 * Fires the onChange callback when internal state value changes.
+		 */
 		if ( value !== valueRef.current && ! isDirty ) {
 			onChange( value, { event: _event } );
 			onUpdateValue( ! isValueEmpty( value ) );
 
 			valueRef.current = value;
 		}
-	}, [ value, isDirty ] );
+	}, [ value, isDirty, valueProp ] );
 
 	const handleOnBlur = ( event ) => {
 		onBlur( event );
@@ -81,7 +105,7 @@ function InputField(
 		 */
 		if ( isPressEnterToChange && isDirty ) {
 			if ( ! isValueEmpty( value ) ) {
-				submit( value, event );
+				handleOnSubmit( { target: value }, event );
 			} else {
 				reset( valueProp );
 			}
@@ -93,7 +117,19 @@ function InputField(
 	};
 
 	const handleOnChange = ( event ) => {
-		change( event.target.value, event );
+		const nextValue = event.target.value;
+		change( nextValue, event );
+	};
+
+	const handleOnSubmit = ( event ) => {
+		const nextValue = event.target.value;
+
+		try {
+			onValidate( nextValue, { event } );
+			submit( nextValue, event );
+		} catch ( err ) {
+			invalidate( err, { event } );
+		}
 	};
 
 	const handleOnKeyDown = ( event ) => {
@@ -114,7 +150,7 @@ function InputField(
 
 				if ( isPressEnterToChange ) {
 					event.preventDefault();
-					submit( event.target.value, event );
+					handleOnSubmit( event );
 				}
 				break;
 		}
diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index 946b7726a08f90..1777b78633170e 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -7,24 +7,27 @@ const initialStateReducer = ( state ) => state;
 
 const initialInputControlState = {
 	_event: {},
-	isDragEnabled: false,
+	error: null,
+	initialValue: '',
 	isDirty: false,
+	isDragEnabled: false,
 	isDragging: false,
 	isPressEnterToSubmit: false,
-	initialValue: '',
 	value: '',
 };
 
 const actionTypes = {
 	CHANGE: 'CHANGE',
+	DRAG: 'DRAG',
 	DRAG_END: 'DRAG_END',
 	DRAG_START: 'DRAG_START',
-	DRAG: 'DRAG',
+	INVALIDATE: 'INVALIDATE',
 	PRESS_DOWN: 'PRESS_DOWN',
 	PRESS_ENTER: 'PRESS_ENTER',
 	PRESS_UP: 'PRESS_UP',
 	RESET: 'RESET',
 	SUBMIT: 'SUBMIT',
+	UPDATE: 'UPDATE',
 };
 
 export const inputControlActionTypes = actionTypes;
@@ -63,9 +66,6 @@ function inputControlStateReducer( stateReducer = initialStateReducer ) {
 				nextState.isDragging = true;
 				break;
 
-			case actionTypes.DRAG:
-				break;
-
 			case actionTypes.DRAG_END:
 				nextState.isDragging = false;
 				break;
@@ -74,10 +74,13 @@ function inputControlStateReducer( stateReducer = initialStateReducer ) {
 			 * Input events
 			 */
 			case actionTypes.CHANGE:
+				nextState.error = null;
 				nextState.value = payload.value;
+
 				if ( state.isPressEnterToChange ) {
 					nextState.isDirty = true;
 				}
+
 				break;
 
 			case actionTypes.SUBMIT:
@@ -86,8 +89,23 @@ function inputControlStateReducer( stateReducer = initialStateReducer ) {
 				break;
 
 			case actionTypes.RESET:
-				nextState.value = payload.value || state.initialValue;
+				nextState.error = null;
 				nextState.isDirty = false;
+				nextState.value = payload.value || state.initialValue;
+				break;
+
+			case actionTypes.UPDATE:
+				if ( payload.value !== state.value ) {
+					nextState.value = payload.value;
+					nextState.isDirty = false;
+				}
+				break;
+
+			/**
+			 * Validation
+			 */
+			case actionTypes.INVALIDATE:
+				nextState.error = payload.error;
 				break;
 		}
 
@@ -137,6 +155,8 @@ export function useInputControlStateReducer(
 	const change = createChangeEvent( actionTypes.CHANGE );
 	const submit = createChangeEvent( actionTypes.SUBMIT );
 	const reset = createChangeEvent( actionTypes.RESET );
+	const inValidate = createChangeEvent( actionTypes.INVALIDATE );
+	const update = createChangeEvent( actionTypes.UPDATE );
 
 	const dragStart = createDragEvent( actionTypes.DRAG_START );
 	const drag = createDragEvent( actionTypes.DRAG );
@@ -152,11 +172,13 @@ export function useInputControlStateReducer(
 		drag,
 		dragEnd,
 		dragStart,
+		inValidate,
 		pressDown,
 		pressEnter,
 		pressUp,
 		reset,
 		state,
 		submit,
+		update,
 	};
 }
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 6f1fff7bef96f2..559643955cea81 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -42,6 +42,15 @@ export function NumberControl(
 
 	const classes = classNames( 'components-number-control', className );
 
+	/**
+	 * "Middleware" function that intercepts updates from InputControl.
+	 * This allows us to tap into actions to transform the (next) state for
+	 * InputControl.
+	 *
+	 * @param {Object} state State from InputControl
+	 * @param {Object} action Action triggering state change
+	 * @return {Object} The updated state to apply to InputControl
+	 */
 	const stateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
@@ -134,8 +143,6 @@ export function NumberControl(
 		 * Handles ENTER key press and submit
 		 */
 		if (
-			( type === inputControlActionTypes.CHANGE &&
-				! nextState.isPressEnterToChange ) ||
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.SUBMIT
 		) {
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index 4813d458ccceb8..4e4d2ecf19c0ef 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -88,7 +88,7 @@ describe( 'NumberControl', () => {
 
 			const changeValue = spy.mock.calls[ 0 ][ 0 ];
 
-			expect( changeValue ).toBe( 10 );
+			expect( changeValue ).toBe( '10' );
 		} );
 	} );
 
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 03f19ff2103d68..6c84d72b2c83f6 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -15,12 +15,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import { inputControlActionTypes } from '../input-control/state';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import {
-	CSS_UNITS,
-	DEFAULT_UNIT,
-	getParsedValue,
-	getValidParsedUnit,
-} from './utils';
+import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
 
 function UnitControl(
 	{
@@ -35,6 +30,7 @@ function UnitControl(
 		onChange = noop,
 		onUnitChange = noop,
 		size = 'default',
+		stateReducer: stateReducerProp = ( state ) => state,
 		style,
 		unit: unitProp,
 		units = CSS_UNITS,
@@ -47,10 +43,17 @@ function UnitControl(
 	const [ unit, setUnit ] = useState( initialUnit );
 
 	const handleOnChange = ( next, changeProps ) => {
-		const [ , parsedUnit ] = getParsedValue( next, units );
-		const baseUnit = parsedUnit || unit;
-
-		const nextValue = `${ next }${ baseUnit }`;
+		/**
+		 * Customizing the onChange callback.
+		 * This allows as to broadcast a combined value+unit to onChange.
+		 */
+		const [ parsedValue, parsedUnit ] = getValidParsedUnit(
+			next,
+			units,
+			value,
+			unit
+		);
+		const nextValue = `${ parsedValue }${ parsedUnit }`;
 
 		onChange( nextValue, changeProps );
 	};
@@ -66,30 +69,46 @@ function UnitControl(
 
 		onChange( nextValue, changeProps );
 		onUnitChange( next, changeProps );
+
 		setUnit( next );
 	};
 
+	/**
+	 * "Middleware" function that intercepts updates from InputControl.
+	 * This allows us to tap into actions to transform the (next) state for
+	 * InputControl.
+	 *
+	 * @param {Object} state State from InputControl
+	 * @param {Object} action Action triggering state change
+	 * @return {Object} The updated state to apply to InputControl
+	 */
 	const stateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
 
-		const nextState = { ...state };
+		const nextState = stateReducerProp( state, action );
 
+		/**
+		 * Customizes the submit interaction.
+		 *
+		 * This occurs when pressing ENTER to fire a change.
+		 * By intercepting the state change, we can parse the incoming
+		 * value to determine if the unit needs to be updated.
+		 */
 		if ( type === inputControlActionTypes.SUBMIT ) {
 			const valueToParse = event?.target?.value;
 
 			const [ parsedValue, parsedUnit ] = getValidParsedUnit(
 				valueToParse,
 				units,
-				value
+				value,
+				unit
 			);
 
-			const baseUnit = parsedUnit || unit || DEFAULT_UNIT.value;
-
 			nextState.value = parsedValue;
 
-			if ( unit !== baseUnit ) {
-				handleOnUnitChange( baseUnit, { event } );
+			if ( unit !== parsedUnit ) {
+				handleOnUnitChange( parsedUnit, { event } );
 			}
 		}
 
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 1e59f50f652745..fff6f036ca71a7 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -76,16 +76,28 @@ export function parseUnit( initialValue, units = CSS_UNITS ) {
  *
  * @param {number|string} next The next value.
  * @param {Array<Object>} units Units to derive from.
- * @param {number|string} fallback The fallback value.
+ * @param {number|string} fallbackValue The fallback value.
+ * @param {string} fallbackUnit The fallback value.
  * @return {Array<number, string>} The extracted number and unit.
  */
-export function getValidParsedUnit( next, units, fallback ) {
+export function getValidParsedUnit( next, units, fallbackValue, fallbackUnit ) {
 	const [ parsedValue, parsedUnit ] = parseUnit( next, units );
 	let baseValue = parsedValue;
+	let baseUnit;
 
 	if ( isNaN( parsedValue ) || parsedValue === '' ) {
-		baseValue = fallback;
+		baseValue = fallbackValue;
 	}
 
-	return [ baseValue, parsedUnit ];
+	baseUnit = parsedUnit || fallbackUnit;
+
+	/**
+	 * If no unit is found, attempt to use the first value from the collection
+	 * of units as a default fallback.
+	 */
+	if ( hasUnits( units ) && ! baseUnit ) {
+		baseUnit = units[ 0 ]?.value;
+	}
+
+	return [ baseValue, baseUnit ];
 }

From b5e923b6a604006753a75e45eab98321c374c865 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 08:48:37 -0400
Subject: [PATCH 069/103] Persist events from Input Control reducer. Add
 comments.

Add number-control value parsing tests on ENTER keypress.
---
 .../components/src/input-control/state.js     | 56 +++++++++++++++++--
 .../components/src/number-control/index.js    |  9 ++-
 .../src/number-control/test/index.js          | 43 +++++++++++++-
 packages/components/src/unit-control/index.js |  5 +-
 4 files changed, 101 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index 1777b78633170e..1d2055610e4d28 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -18,9 +18,9 @@ const initialInputControlState = {
 
 const actionTypes = {
 	CHANGE: 'CHANGE',
-	DRAG: 'DRAG',
 	DRAG_END: 'DRAG_END',
 	DRAG_START: 'DRAG_START',
+	DRAG: 'DRAG',
 	INVALIDATE: 'INVALIDATE',
 	PRESS_DOWN: 'PRESS_DOWN',
 	PRESS_ENTER: 'PRESS_ENTER',
@@ -32,6 +32,12 @@ const actionTypes = {
 
 export const inputControlActionTypes = actionTypes;
 
+/**
+ * Prepares initialState for the reducer.
+ *
+ * @param {Object} initialState The initial state.
+ * @return {Object} Prepared initialState for the reducer
+ */
 function mergeInitialState( initialState = initialInputControlState ) {
 	const { value } = initialState;
 
@@ -42,6 +48,16 @@ function mergeInitialState( initialState = initialInputControlState ) {
 	};
 }
 
+/**
+ * Creates a reducer that opens the channel for external state subscription
+ * and modification.
+ *
+ * This technique uses the "stateReducer" design pattern:
+ * https://kentcdodds.com/blog/the-state-reducer-pattern/
+ *
+ * @param {Function} stateReducer A custom reducer that can subscribe and modify state.
+ * @return {Function} The reducer.
+ */
 function inputControlStateReducer( stateReducer = initialStateReducer ) {
 	return ( state, action ) => {
 		let nextState = { ...state };
@@ -124,6 +140,17 @@ function inputControlStateReducer( stateReducer = initialStateReducer ) {
 	};
 }
 
+/**
+ * A custom hook that connects and external stateReducer with an internal
+ * reducer. This hook manages the internal state of InputControl.
+ * However, by connecting an external stateReducer function, other
+ * components can react to actions as well as modify state before it is
+ * applied.
+ *
+ * @param {Function} stateReducer An external state reducer.
+ * @param {Object} initialState The initial state for the reducer.
+ * @return {Object} State, dispatch, and a collection of actions.
+ */
 export function useInputControlStateReducer(
 	stateReducer = initialStateReducer,
 	initialState = initialInputControlState
@@ -134,14 +161,32 @@ export function useInputControlStateReducer(
 	);
 
 	const createChangeEvent = ( type ) => ( nextValue, event ) => {
+		/**
+		 * Persist allows for the (Synthetic) event to be used outside of
+		 * this function call.
+		 * https://reactjs.org/docs/events.html#event-pooling
+		 */
+		if ( event.persist ) {
+			event.persist();
+		}
+
 		dispatch( {
 			type,
-			payload: { value: nextValue, event: { ...event } },
+			payload: { value: nextValue, event },
 		} );
 	};
 
 	const createKeyEvent = ( type ) => ( event ) => {
-		dispatch( { type, payload: { event: { ...event } } } );
+		/**
+		 * Persist allows for the (Synthetic) event to be used outside of
+		 * this function call.
+		 * https://reactjs.org/docs/events.html#event-pooling
+		 */
+		if ( event.persist ) {
+			event.persist();
+		}
+
+		dispatch( { type, payload: { event } } );
 	};
 
 	const createDragEvent = ( type ) => ( dragProps ) => {
@@ -151,11 +196,10 @@ export function useInputControlStateReducer(
 	/**
 	 * Actions for the reducer
 	 */
-
 	const change = createChangeEvent( actionTypes.CHANGE );
-	const submit = createChangeEvent( actionTypes.SUBMIT );
-	const reset = createChangeEvent( actionTypes.RESET );
 	const inValidate = createChangeEvent( actionTypes.INVALIDATE );
+	const reset = createChangeEvent( actionTypes.RESET );
+	const submit = createChangeEvent( actionTypes.SUBMIT );
 	const update = createChangeEvent( actionTypes.UPDATE );
 
 	const dragStart = createDragEvent( actionTypes.DRAG_START );
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 559643955cea81..015554e9a5312f 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -31,6 +31,7 @@ export function NumberControl(
 		shiftStep = 10,
 		stateReducer: stateReducerProp = ( state ) => state,
 		step = 1,
+		type: typeProp = 'number',
 		value: valueProp,
 		...props
 	},
@@ -40,6 +41,7 @@ export function NumberControl(
 	const baseValue = clamp( 0, min, max );
 	const isRtl = useRtl();
 
+	const autoComplete = typeProp === 'number' ? 'off' : null;
 	const classes = classNames( 'components-number-control', className );
 
 	/**
@@ -78,11 +80,11 @@ export function NumberControl(
 				event.preventDefault();
 			}
 
-			if ( action.type === inputControlActionTypes.PRESS_UP ) {
+			if ( type === inputControlActionTypes.PRESS_UP ) {
 				nextValue = add( nextValue, incrementalValue );
 			}
 
-			if ( action.type === inputControlActionTypes.PRESS_DOWN ) {
+			if ( type === inputControlActionTypes.PRESS_DOWN ) {
 				nextValue = subtract( nextValue, incrementalValue );
 			}
 
@@ -154,8 +156,8 @@ export function NumberControl(
 
 	return (
 		<Input
+			autoComplete={ autoComplete }
 			inputMode="numeric"
-			type="number"
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
@@ -164,6 +166,7 @@ export function NumberControl(
 			label={ label }
 			stateReducer={ stateReducer }
 			ref={ ref }
+			type={ typeProp }
 			value={ initialValue }
 		/>
 	);
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index 4e4d2ecf19c0ef..8c006647bd2ff3 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -8,7 +8,7 @@ import { act, Simulate } from 'react-dom/test-utils';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
+import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -92,6 +92,47 @@ describe( 'NumberControl', () => {
 		} );
 	} );
 
+	describe( 'Validation', () => {
+		it( 'should clamp value within range on ENTER keypress', () => {
+			act( () => {
+				render(
+					<NumberControl value={ 5 } min={ 0 } max={ 10 } />,
+					container
+				);
+			} );
+
+			const input = getInput();
+			input.value = -100;
+
+			act( () => {
+				Simulate.change( input );
+				Simulate.keyDown( input, { keyCode: ENTER } );
+			} );
+
+			/**
+			 * This is zero because the value has been adjusted to
+			 * respect the min/max range of the input.
+			 */
+			expect( input.value ).toBe( '0' );
+		} );
+
+		it( 'should parse to number value on ENTER keypress', () => {
+			act( () => {
+				render( <NumberControl value={ 5 } />, container );
+			} );
+
+			const input = getInput();
+			input.value = '10 abc';
+
+			act( () => {
+				Simulate.change( input );
+				Simulate.keyDown( input, { keyCode: ENTER } );
+			} );
+
+			expect( input.value ).toBe( '0' );
+		} );
+	} );
+
 	describe( 'Key UP interactions', () => {
 		it( 'should fire onKeyDown callback', () => {
 			const spy = jest.fn();
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 6c84d72b2c83f6..be749a7522db58 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -42,6 +42,8 @@ function UnitControl(
 	const [ value, initialUnit ] = getParsedValue( valueProp, unitProp, units );
 	const [ unit, setUnit ] = useState( initialUnit );
 
+	const classes = classnames( 'components-unit-control', className );
+
 	const handleOnChange = ( next, changeProps ) => {
 		/**
 		 * Customizing the onChange callback.
@@ -107,6 +109,7 @@ function UnitControl(
 
 			nextState.value = parsedValue;
 
+			// Update unit if the incoming parsed unit is different.
 			if ( unit !== parsedUnit ) {
 				handleOnUnitChange( parsedUnit, { event } );
 			}
@@ -115,8 +118,6 @@ function UnitControl(
 		return nextState;
 	};
 
-	const classes = classnames( 'components-unit-control', className );
-
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
 			className="components-unit-control__select"

From 728b5fd091b9f4bd6afc919e10fab01a0475cbf2 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 08:55:03 -0400
Subject: [PATCH 070/103] Remove unused useControlledState hook

---
 .../components/src/input-control/utils.js     | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index 5051fe935b88b9..de440c1c12947b 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -6,7 +6,6 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useControlledState } from '../utils/hooks';
 import { getRtl } from '../utils/style-mixins';
 
 /**
@@ -73,21 +72,3 @@ export function isValueEmpty( value ) {
 
 	return isNullish || isEmptyString;
 }
-
-/**
- * Custom hook to better handle incoming value and internal state.
- *
- * @param {*} initialValue
- */
-export function useValueState( initialValue ) {
-	/**
-	 * React requires input HTML elements to have a defined value prop
-	 * to be considered "controlled".
-	 *
-	 * For instances were an incoming value may be undefined or null,
-	 * we'll need to transform it to an empty string.
-	 */
-	const value = isValueEmpty( initialValue ) ? '' : initialValue;
-
-	return useControlledState( value );
-}

From c5586e946d69ef02ddf31aa1985d64ec57eb7f19 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 08:55:16 -0400
Subject: [PATCH 071/103] Add default values to InputField props

---
 packages/components/src/input-control/input-field.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index 3e1b3c1a430bcf..fd41bf8693f534 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -18,13 +18,13 @@ import { useInputControlStateReducer } from './state';
 
 function InputField(
 	{
-		disabled,
+		disabled = false,
 		dragDirection = 'n',
 		dragThreshold = 10,
 		id,
 		isDragEnabled = false,
-		isFloating,
-		isFloatingLabelSet,
+		isFloating = false,
+		isFloatingLabelSet = false,
 		isPressEnterToChange = false,
 		onBlur = noop,
 		onChange = noop,

From 67d569087de34a382e7fb838dad68349f9d71d35 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 10:46:38 -0400
Subject: [PATCH 072/103] Improve inline UI for unit controls within BoxControl

Also add reset feature to BoxControl
---
 .../src/box-control/all-input-control.js      |  47 ++++++
 packages/components/src/box-control/icon.js   |  50 +++++++
 packages/components/src/box-control/index.js  |  85 +++++++++--
 .../src/box-control/input-controls.js         | 141 +++---------------
 .../src/box-control/stories/index.js          |   8 -
 .../styles/box-control-icon-styles.js         |  65 ++++++++
 .../box-control/styles/box-control-styles.js  |  47 ++++--
 .../src/box-control/unit-control.js           |  43 +++---
 packages/components/src/box-control/utils.js  |   5 +-
 .../components/src/input-control/index.js     |   6 +-
 .../components/src/input-control/state.js     |   4 +-
 .../styles/input-control-styles.js            |  16 +-
 .../styles/unit-control-styles.js             |  25 ++--
 13 files changed, 343 insertions(+), 199 deletions(-)
 create mode 100644 packages/components/src/box-control/all-input-control.js
 create mode 100644 packages/components/src/box-control/icon.js
 create mode 100644 packages/components/src/box-control/styles/box-control-icon-styles.js

diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js
new file mode 100644
index 00000000000000..6a57cb15935dd6
--- /dev/null
+++ b/packages/components/src/box-control/all-input-control.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import UnitControl from './unit-control';
+import { LABELS, getAllValue } from './utils';
+
+export default function AllInputControl( {
+	onChange = noop,
+	onFocus = noop,
+	values,
+	...props
+} ) {
+	const allValue = getAllValue( values );
+	const isMixed = isNaN( parseFloat( allValue ) );
+	const allPlaceholder = isMixed ? LABELS.mixed : null;
+
+	const handleOnFocus = ( event ) => {
+		onFocus( event, { side: 'all' } );
+	};
+
+	const handleOnChange = ( next ) => {
+		const nextValues = { ...values };
+
+		nextValues.top = next;
+		nextValues.bottom = next;
+		nextValues.left = next;
+		nextValues.right = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<UnitControl
+			{ ...props }
+			disableUnits={ isMixed }
+			isOnly
+			value={ allValue }
+			onChange={ handleOnChange }
+			onFocus={ handleOnFocus }
+			placeholder={ allPlaceholder }
+		/>
+	);
+}
diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
new file mode 100644
index 00000000000000..ed72fe48d6fc47
--- /dev/null
+++ b/packages/components/src/box-control/icon.js
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import {
+	Root,
+	Viewbox,
+	TopStroke,
+	RightStroke,
+	BottomStroke,
+	LeftStroke,
+} from './styles/box-control-icon-styles';
+
+const BASE_ICON_SIZE = 24;
+
+export default function BoxControlIcon( {
+	size = 24,
+	sides = [ 'all' ],
+	...props
+} ) {
+	const top = getSide( sides, 'top' );
+	const right = getSide( sides, 'right' );
+	const bottom = getSide( sides, 'bottom' );
+	const left = getSide( sides, 'left' );
+
+	// Simulates SVG Icon scaling
+	const scale = size / BASE_ICON_SIZE;
+
+	return (
+		<Root style={ { transform: `scale(${ scale })` } } { ...props }>
+			<Viewbox>
+				<TopStroke isFocused={ top } />
+				<RightStroke isFocused={ right } />
+				<BottomStroke isFocused={ bottom } />
+				<LeftStroke isFocused={ left } />
+			</Viewbox>
+		</Root>
+	);
+}
+
+function getSide( sides, value ) {
+	const match = value.toLowerCase();
+
+	return sides.find( ( side ) => {
+		const sideValue = side.toLowerCase();
+		return [ 'all', match ].includes( sideValue );
+	} );
+}
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 3a0f351b4e6e8c..96712d411e25f2 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -6,17 +6,25 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import Button from '../button';
 import { Flex } from '../flex';
+import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
+import BoxControlIcon from './icon';
 import Text from '../text';
 import LinkedButton from './linked-button';
 import Visualizer from './visualizer';
-import { Root, Header } from './styles/box-control-styles';
+import {
+	Root,
+	Header,
+	HeaderControlWrapper,
+} from './styles/box-control-styles';
+import { useControlledState } from '../utils/hooks';
 
 const defaultInputProps = {
 	min: 0,
@@ -31,17 +39,52 @@ function useUniqueId( idProp ) {
 export default function BoxControl( {
 	id: idProp,
 	inputProps = defaultInputProps,
-	isInline = false,
 	onChange = noop,
 	label = __( 'Box Control' ),
-	values,
+	values: valuesProp,
 	units,
 } ) {
 	const [ isLinked, setIsLinked ] = useState( true );
+	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const [ values, setValues ] = useControlledState( valuesProp );
+
+	const initialValuesRef = useRef( valuesProp );
+
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
 
-	const toggleLinked = () => setIsLinked( ! isLinked );
+	const toggleLinked = () => {
+		setIsLinked( ! isLinked );
+		setSide( ! isLinked ? 'all' : 'top' );
+	};
+
+	const handleOnFocus = ( event, { side: nextSide } ) => {
+		setSide( nextSide );
+	};
+
+	const handleOnChange = ( nextValues ) => {
+		onChange( nextValues );
+		setValues( nextValues );
+		setIsDirty( true );
+	};
+
+	const handleOnReset = () => {
+		const initialValues = initialValuesRef.current;
+
+		onChange( initialValues );
+		setValues( initialValues );
+		setIsDirty( false );
+	};
+
+	const inputControlProps = {
+		...inputProps,
+		onChange: handleOnChange,
+		onFocus: handleOnFocus,
+		isLinked,
+		units,
+		values,
+	};
 
 	return (
 		<Root id={ id } role="region" aria-labelledby={ headingId }>
@@ -54,21 +97,35 @@ export default function BoxControl( {
 						{ label }
 					</Text>
 				</Flex.Item>
+				<Flex.Item>
+					<Button
+						className="component-box-control__reset-button"
+						isSecondary
+						isSmall
+						onClick={ handleOnReset }
+						disabled={ ! isDirty }
+					>
+						Reset
+					</Button>
+				</Flex.Item>
+			</Header>
+			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
+				<Flex.Item>
+					<BoxControlIcon sides={ [ side ] } />
+				</Flex.Item>
+				{ isLinked && (
+					<Flex.Block>
+						<AllInputControl { ...inputControlProps } />
+					</Flex.Block>
+				) }
 				<Flex.Item>
 					<LinkedButton
 						onClick={ toggleLinked }
 						isLinked={ isLinked }
 					/>
 				</Flex.Item>
-			</Header>
-			<InputControls
-				{ ...inputProps }
-				onChange={ onChange }
-				isLinked={ isLinked }
-				isInline={ isInline }
-				units={ units }
-				values={ values }
-			/>
+			</HeaderControlWrapper>
+			<InputControls { ...inputControlProps } />
 		</Root>
 	);
 }
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index d5203d0887c16a..f66482e4280cc7 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -7,48 +7,33 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, getAllValue, useBoxControlState } from './utils';
-import {
-	LayoutContainer,
-	Layout,
-	LayoutBox,
-} from './styles/box-control-styles';
-import { useRtl } from '../utils/style-mixins';
+import { LABELS, useBoxControlState } from './utils';
+import { LayoutContainer, Layout } from './styles/box-control-styles';
 
 export default function BoxInputControls( {
 	isLinked = true,
-	isInline = false,
 	onChange = noop,
+	onFocus = noop,
 	values: valuesProp,
 	...props
 } ) {
-	const [ values, setValues ] = useBoxControlState( valuesProp );
+	const values = useBoxControlState( valuesProp );
+
+	const createHandleOnFocus = ( side ) => ( event ) => {
+		onFocus( event, { side } );
+	};
 
 	const handleOnChange = ( nextValues ) => {
-		setValues( nextValues );
 		onChange( nextValues );
 	};
 
 	const { top, right, bottom, left } = values;
 
-	const isRtl = useRtl();
-	const allValue = getAllValue( values );
-	const allPlaceholder = isNaN( parseFloat( allValue ) )
-		? LABELS.mixed
-		: null;
-
 	const createHandleOnChange = ( side ) => ( next, { event } ) => {
 		const { altKey } = event;
 		const nextValues = { ...values };
 
-		if ( side === 'all' ) {
-			nextValues.top = next;
-			nextValues.bottom = next;
-			nextValues.left = next;
-			nextValues.right = next;
-		} else {
-			nextValues[ side ] = next;
-		}
+		nextValues[ side ] = next;
 
 		/**
 		 * Supports changing pair sides. For example, holding the ALT key
@@ -77,124 +62,44 @@ export default function BoxInputControls( {
 	/**
 	 * All sides
 	 */
-	if ( isLinked ) {
-		return (
-			<UnitControl
-				{ ...props }
-				value={ allValue }
-				onChange={ createHandleOnChange( 'all' ) }
-				placeholder={ allPlaceholder }
-				style={ { position: 'relative' } }
-			/>
-		);
-	}
+	if ( isLinked ) return null;
 
-	/**
-	 * TODO: REMOVE THIS
-	 * Just for testing inline UI
-	 */
-	if ( isInline ) {
-		return (
-			<LayoutContainer className="component-box-control__input-controls-wrapper">
-				<Layout
-					gap={ 1 }
-					align="top"
-					isInline={ isInline }
-					className="component-box-control__input-controls"
-				>
-					<UnitControl
-						{ ...props }
-						value={ top }
-						isInline={ isInline }
-						onChange={ createHandleOnChange( 'top' ) }
-						label={ LABELS.top }
-					/>
-
-					<UnitControl
-						{ ...props }
-						value={ right }
-						isInline={ isInline }
-						onChange={ createHandleOnChange( 'right' ) }
-						label={ LABELS.right }
-					/>
-					<UnitControl
-						{ ...props }
-						value={ bottom }
-						isInline={ isInline }
-						onChange={ createHandleOnChange( 'bottom' ) }
-						label={ LABELS.bottom }
-					/>
-					<UnitControl
-						{ ...props }
-						value={ left }
-						isInline={ isInline }
-						onChange={ createHandleOnChange( 'left' ) }
-						label={ LABELS.left }
-					/>
-				</Layout>
-			</LayoutContainer>
-		);
-	}
-
-	/**
-	 * Individual sides
-	 */
 	return (
 		<LayoutContainer className="component-box-control__input-controls-wrapper">
 			<Layout
-				gap={ 1 }
+				gap={ 0 }
 				align="top"
 				className="component-box-control__input-controls"
 			>
-				<LayoutBox aria-hidden="true" />
 				<UnitControl
 					{ ...props }
+					isFirst
 					value={ top }
-					dragDirection="s"
 					onChange={ createHandleOnChange( 'top' ) }
+					onFocus={ createHandleOnFocus( 'top' ) }
 					label={ LABELS.top }
-					style={ {
-						marginTop: -7,
-						top: 0,
-						left: '50%',
-						transform: 'translateX(-50%)',
-					} }
-				/>
-				<UnitControl
-					{ ...props }
-					value={ left }
-					dragDirection="e"
-					onChange={ createHandleOnChange( 'left' ) }
-					label={ LABELS.left }
-					style={ {
-						[ isRtl ? 'right' : 'left' ]: 0,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					} }
 				/>
 				<UnitControl
 					{ ...props }
 					value={ right }
-					dragDirection="w"
 					onChange={ createHandleOnChange( 'right' ) }
+					onFocus={ createHandleOnFocus( 'right' ) }
 					label={ LABELS.right }
-					style={ {
-						[ isRtl ? 'left' : 'right' ]: 0,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					} }
 				/>
 				<UnitControl
 					{ ...props }
 					value={ bottom }
-					dragDirection="n"
 					onChange={ createHandleOnChange( 'bottom' ) }
+					onFocus={ createHandleOnFocus( 'bottom' ) }
 					label={ LABELS.bottom }
-					style={ {
-						left: '50%',
-						bottom: -2,
-						transform: 'translateX(-50%)',
-					} }
+				/>
+				<UnitControl
+					{ ...props }
+					isLast
+					value={ left }
+					onChange={ createHandleOnChange( 'left' ) }
+					onFocus={ createHandleOnFocus( 'left' ) }
+					label={ LABELS.left }
 				/>
 			</Layout>
 		</LayoutContainer>
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index 603384f3fb7413..47e8520eeb9fb9 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -37,14 +37,6 @@ function DemoExample() {
 						values={ values }
 						onChange={ setValues }
 					/>
-					<br />
-					<br />
-					<BoxControl
-						label="Padding"
-						isInline
-						values={ values }
-						onChange={ setValues }
-					/>
 				</Content>
 			</FlexBlock>
 			<FlexBlock>
diff --git a/packages/components/src/box-control/styles/box-control-icon-styles.js b/packages/components/src/box-control/styles/box-control-icon-styles.js
new file mode 100644
index 00000000000000..dae56d7619a96f
--- /dev/null
+++ b/packages/components/src/box-control/styles/box-control-icon-styles.js
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+export const Root = styled.span`
+	box-sizing: border-box;
+	display: block;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	padding: 4px;
+`;
+
+export const Viewbox = styled.span`
+	box-sizing: border-box;
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+`;
+
+const strokeFocus = ( { isFocused } ) => {
+	return css( {
+		backgroundColor: 'currentColor',
+		opacity: isFocused ? 1 : 0.3,
+	} );
+};
+
+const Stroke = styled.span`
+	box-sizing: border-box;
+	display: block;
+	pointer-events: none;
+	position: absolute;
+	${strokeFocus};
+`;
+
+const VerticalStroke = styled( Stroke )`
+	bottom: 3px;
+	top: 3px;
+	width: 2px;
+`;
+
+const HorizontalStroke = styled( Stroke )`
+	height: 2px;
+	left: 3px;
+	right: 3px;
+`;
+
+export const TopStroke = styled( HorizontalStroke )`
+	top: 0;
+`;
+
+export const RightStroke = styled( VerticalStroke )`
+	right: 0;
+`;
+
+export const BottomStroke = styled( HorizontalStroke )`
+	bottom: 0;
+`;
+
+export const LeftStroke = styled( VerticalStroke )`
+	left: 0;
+`;
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 99af33fa33942b..302df5a640cc83 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -1,16 +1,18 @@
 /**
  * External dependencies
  */
+import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
 import { Flex } from '../../flex';
-import { color } from '../../utils/style-mixins';
+import BaseUnitControl from '../../unit-control';
+import { color, rtl } from '../../utils/style-mixins';
 
 export const Root = styled.div`
 	box-sizing: border-box;
-	max-width: 300px;
+	max-width: 235px;
 	padding-bottom: 12px;
 	width: 100%;
 `;
@@ -20,6 +22,10 @@ export const Header = styled( Flex )`
 	padding-bottom: 8px;
 `;
 
+export const HeaderControlWrapper = styled( Flex )`
+	min-height: 30px;
+`;
+
 export const UnitControlWrapper = styled.div`
 	box-sizing: border-box;
 	max-width: 80px;
@@ -28,22 +34,39 @@ export const UnitControlWrapper = styled.div`
 export const LayoutContainer = styled( Flex )`
 	height: 100px;
 	justify-content: center;
+	padding-top: 8px;
 `;
 
 export const Layout = styled( Flex )`
-	box-sizing: border-box;
 	position: relative;
 	height: 100%;
 	width: 100%;
 `;
 
-export const LayoutBox = styled.div`
-	border: 1px solid ${color( 'ui.borderLight' )};
-	bottom: 12px;
-	box-sizing: border-box;
-	left: 40px;
-	pointer-events: none;
-	position: absolute;
-	right: 40px;
-	top: 12px;
+const unitControlBorderRadiusStyles = ( { isFirst, isLast, isOnly } ) => {
+	if ( isFirst ) {
+		return rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();
+	}
+	if ( isLast ) {
+		return rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();
+	}
+	if ( isOnly ) {
+		return css( { borderRadius: 2 } );
+	}
+
+	return css( {
+		borderRadius: 0,
+	} );
+};
+
+const unitControlMarginStyles = ( { isFirst } ) => {
+	const marginLeft = isFirst ? 0 : -1;
+
+	return rtl( { marginLeft } )();
+};
+
+export const UnitControl = styled( BaseUnitControl )`
+	max-width: 60px;
+	${unitControlBorderRadiusStyles};
+	${unitControlMarginStyles};
 `;
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
index 999cf0288948d2..d5842da2168841 100644
--- a/packages/components/src/box-control/unit-control.js
+++ b/packages/components/src/box-control/unit-control.js
@@ -1,44 +1,43 @@
 /**
  * Internal dependencies
  */
-import BaseUnitControl from '../unit-control';
-import Tooltip from '../tooltip';
-import { UnitControlWrapper } from './styles/box-control-styles';
+import BaseTooltip from '../tooltip';
+import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
 
 export default function BoxUnitControl( {
-	isInline,
+	isFirst,
+	isLast,
+	isOnly,
 	label,
-	style,
 	value,
 	...props
 } ) {
-	const styles = isInline
-		? {}
-		: {
-				marginTop: -3,
-				maxWidth: 80,
-				position: 'absolute',
-				width: '100%',
-				zIndex: 1,
-				...style,
-		  };
-
-	const TooltipComponent = isInline ? Tooltip : 'div';
 	return (
 		<UnitControlWrapper aria-label={ label }>
-			<TooltipComponent text={ label } position="top">
-				<BaseUnitControl
+			<Tooltip text={ label }>
+				<UnitControl
 					className="component-box-control__unit-control"
 					hideHTMLArrows
+					isFirst={ isFirst }
+					isLast={ isLast }
+					isOnly={ isOnly }
 					isPressEnterToChange
 					isFloatingLabel
-					label={ ! isInline ? label : null }
 					isResetValueOnUnitChange={ false }
-					style={ styles }
 					value={ value }
 					{ ...props }
 				/>
-			</TooltipComponent>
+			</Tooltip>
 		</UnitControlWrapper>
 	);
 }
+
+function Tooltip( { children, text } ) {
+	if ( ! text ) return children;
+
+	return (
+		<BaseTooltip text={ text } position="top">
+			{ children }
+		</BaseTooltip>
+	);
+}
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 8e6a6b635be3c2..3f82c824aa2d1e 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -32,10 +31,10 @@ export const DEFAULT_VALUES = {
  * @return {Array<Object, Function>} Hook state and setter.
  */
 export function useBoxControlState( values = {} ) {
-	return useState( {
+	return {
 		...DEFAULT_VALUES,
 		...values,
-	} );
+	};
 }
 
 /**
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 449fb81589fae1..94f969f5adadaa 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -72,7 +72,11 @@ export function InputControl(
 		! hideLabelFromVision && isFloatingLabel && label;
 
 	return (
-		<Root className={ classes } isFloatingLabel={ isFloatingLabelSet }>
+		<Root
+			className={ classes }
+			isFloatingLabel={ isFloatingLabelSet }
+			isFocused={ isFocused }
+		>
 			<Label
 				className="components-input-control__label"
 				hideLabelFromVision={ hideLabelFromVision }
diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index 1d2055610e4d28..ec119eec94a663 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -166,7 +166,7 @@ export function useInputControlStateReducer(
 		 * this function call.
 		 * https://reactjs.org/docs/events.html#event-pooling
 		 */
-		if ( event.persist ) {
+		if ( event && event.persist ) {
 			event.persist();
 		}
 
@@ -182,7 +182,7 @@ export function useInputControlStateReducer(
 		 * this function call.
 		 * https://reactjs.org/docs/events.html#event-pooling
 		 */
-		if ( event.persist ) {
+		if ( event && event.persist ) {
 			event.persist();
 		}
 
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 1c0bb284f6833c..486d5071decbea 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -17,19 +17,21 @@ const rootFloatLabelStyles = ( { isFloatingLabel } ) => {
 	return css( { paddingTop } );
 };
 
+const rootFocusedStyles = ( { isFocused } ) => {
+	if ( ! isFocused ) return '';
+
+	return css( { zIndex: 1 } );
+};
+
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
+
 	${rootFloatLabelStyles};
+	${rootFocusedStyles};
 `;
 
-const containerBorder = ( { isFocused } ) => {
-	const borderRadius = isFocused ? 3 : 2;
-
-	return css( { borderRadius } );
-};
-
 const containerDisabledStyle = ( { disabled } ) => {
 	const backgroundColor = disabled
 		? color( 'ui.backgroundDisabled' )
@@ -41,10 +43,10 @@ const containerDisabledStyle = ( { disabled } ) => {
 export const Container = styled.div`
 	align-items: center;
 	box-sizing: border-box;
+	border-radius: inherit;
 	display: flex;
 	position: relative;
 
-	${containerBorder};
 	${containerDisabledStyle};
 `;
 
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 636a4685454c4b..adb31b80ab4e34 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -15,7 +15,7 @@ export const Root = styled.div`
 `;
 
 const paddingStyles = ( { disableUnits } ) => {
-	const value = disableUnits ? 3 : 28;
+	const value = disableUnits ? 3 : 24;
 
 	return css`
 		${rtl( { paddingRight: value } )()};
@@ -54,14 +54,14 @@ export const ValueInput = styled( NumberControl )`
 const unitSizeStyles = ( { size } ) => {
 	const sizes = {
 		default: {
-			top: 5,
-			height: 20,
-			minHeight: 20,
+			top: 1,
+			height: 28,
+			minHeight: 28,
 		},
 		small: {
-			top: 4,
-			height: 16,
-			minHeight: 16,
+			top: 1,
+			height: 22,
+			minHeight: 22,
 		},
 	};
 
@@ -75,20 +75,21 @@ const baseUnitLabelStyles = ( props ) => {
 		border-radius: 2px;
 		border: none;
 		box-sizing: border-box;
-		color: ${color( 'darkGray.500' )};
+		color: ${ color( 'darkGray.500' ) };
 		display: block;
 		font-size: 8px;
 		line-height: 1;
 		letter-spacing: -0.5px;
 		outline: none;
-		padding: 2px 2px;
+		padding: 2px 1px;
 		position: absolute;
 		text-align-last: center;
 		text-transform: uppercase;
-		width: 22px;
+		width: 20px;
 
-		${rtl( { right: 4 } )()}
-		${unitSizeStyles( props )}
+		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
+		${ rtl( { right: 1 } )() }
+		${ unitSizeStyles( props ) }
 	`;
 };
 

From 34e6cd4c3587a6277492006e79216b783639267e Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 13:42:41 -0400
Subject: [PATCH 073/103] Add opt-in flag for Spacing controls. Improves
 control integration with Editor.

---
 lib/client-assets.php                         | 14 +++++++++++
 .../components/spacing-panel-control/index.js | 24 +++++++++++++++++++
 packages/block-editor/src/hooks/padding.js    |  9 -------
 packages/block-editor/src/hooks/style.js      |  9 ++++---
 .../src/box-control/all-input-control.js      |  5 ++--
 packages/components/src/box-control/index.js  | 11 +++++----
 .../src/box-control/input-controls.js         | 12 ++--------
 packages/components/src/box-control/utils.js  | 21 ++++++++++++----
 .../editor/src/components/provider/index.js   |  1 +
 9 files changed, 70 insertions(+), 36 deletions(-)
 create mode 100644 packages/block-editor/src/components/spacing-panel-control/index.js

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 5427ee3abfdf3c..5c86326d039d3d 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -680,6 +680,20 @@ function gutenberg_extend_settings_custom_units( $settings ) {
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );
 
+/**
+ * Extends block editor settings to determine whether to use custom spacing controls.
+ * Currently experimental.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_extend_settings_custom_spacing( $settings ) {
+	$settings['__experimentalEnableCustomSpacing'] = get_theme_support( 'experimental-custom-spacing' );
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_spacing' );
+
 /*
  * Register default patterns if not registered in Core already.
  */
diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js
new file mode 100644
index 00000000000000..c6aa32479fcad9
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-panel-control/index.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../inspector-controls';
+import useEditorFeature from '../use-editor-feature';
+
+export default function SpacingPanelControl( { children, ...props } ) {
+	const isSpacingEnabled = useEditorFeature(
+		'__experimentalEnableCustomSpacing'
+	);
+	if ( ! isSpacingEnabled ) return null;
+
+	return (
+		<InspectorControls { ...props }>
+			<PanelBody title={ __( 'Spacing' ) }>{ children }</PanelBody>
+		</InspectorControls>
+	);
+}
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index d544d0667375b9..cf78087c269afa 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -54,15 +54,6 @@ export function PaddingEdit( props ) {
 					label={ __( 'Padding' ) }
 					units={ units }
 				/>
-				<br />
-				<br />
-				<BoxControl
-					values={ style?.padding }
-					onChange={ onChange }
-					label={ __( 'Padding' ) }
-					units={ units }
-					isInline
-				/>
 			</>
 		),
 		native: null,
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 906815ea49a8ae..c7598089013ed8 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -17,6 +17,7 @@ import { Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
+import SpacingPanelControl from '../components/spacing-panel-control';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
 import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
@@ -168,11 +169,9 @@ export const withBlockControls = createHigherOrderComponent(
 			<ColorEdit key="colors" { ...props } />,
 			<BlockEdit key="edit" { ...props } />,
 			hasPaddingSupport && (
-				<InspectorControls key="spacing">
-					<PanelBody title={ __( 'Spacing' ) }>
-						<PaddingEdit { ...props } />
-					</PanelBody>
-				</InspectorControls>
+				<SpacingPanelControl key="spacing">
+					<PaddingEdit { ...props } />
+				</SpacingPanelControl>
 			),
 		];
 	},
diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js
index 6a57cb15935dd6..8a40dd47e6612d 100644
--- a/packages/components/src/box-control/all-input-control.js
+++ b/packages/components/src/box-control/all-input-control.js
@@ -6,7 +6,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, getAllValue } from './utils';
+import { LABELS, getAllValue, isValuesMixed } from './utils';
 
 export default function AllInputControl( {
 	onChange = noop,
@@ -15,7 +15,8 @@ export default function AllInputControl( {
 	...props
 } ) {
 	const allValue = getAllValue( values );
-	const isMixed = isNaN( parseFloat( allValue ) );
+	const isMixed = isValuesMixed( values );
+
 	const allPlaceholder = isMixed ? LABELS.mixed : null;
 
 	const handleOnFocus = ( event ) => {
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 96712d411e25f2..85e5b7c7e44edc 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -24,7 +24,7 @@ import {
 	Header,
 	HeaderControlWrapper,
 } from './styles/box-control-styles';
-import { useControlledState } from '../utils/hooks';
+import { useBoxControlState, isValuesMixed } from './utils';
 
 const defaultInputProps = {
 	min: 0,
@@ -44,12 +44,13 @@ export default function BoxControl( {
 	values: valuesProp,
 	units,
 } ) {
-	const [ isLinked, setIsLinked ] = useState( true );
+	const [ values, setValues ] = useBoxControlState( valuesProp );
+
 	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
 	const [ isDirty, setIsDirty ] = useState( false );
-	const [ values, setValues ] = useControlledState( valuesProp );
+	const [ isLinked, setIsLinked ] = useState( ! isValuesMixed( values ) );
 
-	const initialValuesRef = useRef( valuesProp );
+	const initialValuesRef = useRef( values );
 
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
@@ -125,7 +126,7 @@ export default function BoxControl( {
 					/>
 				</Flex.Item>
 			</HeaderControlWrapper>
-			<InputControls { ...inputControlProps } />
+			{ ! isLinked && <InputControls { ...inputControlProps } /> }
 		</Root>
 	);
 }
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
index f66482e4280cc7..36242e1e2a0f26 100644
--- a/packages/components/src/box-control/input-controls.js
+++ b/packages/components/src/box-control/input-controls.js
@@ -7,18 +7,15 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, useBoxControlState } from './utils';
+import { LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
 export default function BoxInputControls( {
-	isLinked = true,
 	onChange = noop,
 	onFocus = noop,
-	values: valuesProp,
+	values,
 	...props
 } ) {
-	const values = useBoxControlState( valuesProp );
-
 	const createHandleOnFocus = ( side ) => ( event ) => {
 		onFocus( event, { side } );
 	};
@@ -59,11 +56,6 @@ export default function BoxInputControls( {
 		handleOnChange( nextValues );
 	};
 
-	/**
-	 * All sides
-	 */
-	if ( isLinked ) return null;
-
 	return (
 		<LayoutContainer className="component-box-control__input-controls-wrapper">
 			<Layout
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 3f82c824aa2d1e..3076aa315a0e61 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { parseUnit } from '../unit-control/utils';
+import { useControlledState } from '../utils/hooks';
 
 export const LABELS = {
 	all: __( 'All' ),
@@ -30,11 +31,8 @@ export const DEFAULT_VALUES = {
  * @param {Object} values Box values.
  * @return {Array<Object, Function>} Hook state and setter.
  */
-export function useBoxControlState( values = {} ) {
-	return {
-		...DEFAULT_VALUES,
-		...values,
-	};
+export function useBoxControlState( values = DEFAULT_VALUES ) {
+	return useControlledState( values );
 }
 
 /**
@@ -75,3 +73,16 @@ export function getAllValue( values = {} ) {
 
 	return allValue;
 }
+
+/**
+ * Checks to determine if values are mixed.
+ *
+ * @param {Object} values Box values.
+ * @return {boolean} Whether values are mixed.
+ */
+export function isValuesMixed( values = {} ) {
+	const allValue = getAllValue( values );
+	const isMixed = isNaN( parseFloat( allValue ) );
+
+	return isMixed;
+}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 2868759b6b0d93..51aabf63f7ad1f 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -116,6 +116,7 @@ class EditorProvider extends Component {
 				'__experimentalDisableCustomUnits',
 				'__experimentalDisableCustomLineHeight',
 				'__experimentalDisableDropCap',
+				'__experimentalEnableCustomSpacing',
 				'__experimentalEnableLegacyWidgetBlock',
 				'__experimentalEnableFullSiteEditing',
 				'__experimentalEnableFullSiteEditingDemo',

From a93def35b6d171fa942fdb809f3d5316f3d1008e Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 17:18:30 -0400
Subject: [PATCH 074/103] Rename stateReducer to unstable_stateReducer

This helps indicates that the stateReducer prop + pattern, although working,
should probably be avoided for public use outside of @wordpress/component
components (for now).
---
 packages/components/src/input-control/index.js  | 3 ++-
 packages/components/src/number-control/index.js | 9 +++++----
 packages/components/src/unit-control/index.js   | 9 +++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 94f969f5adadaa..082ef8981d2aef 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -28,6 +28,8 @@ function useUniqueId( idProp ) {
 
 export function InputControl(
 	{
+		// eslint-disable-next-line camelcase
+		unstable_stateReducer: stateReducer = ( state ) => state,
 		children,
 		className,
 		disabled = false,
@@ -42,7 +44,6 @@ export function InputControl(
 		onValidate = noop,
 		onKeyDown = noop,
 		size = 'default',
-		stateReducer = ( state ) => state,
 		suffix,
 		value,
 		...props
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 015554e9a5312f..c80eaab8ed1c50 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -20,6 +20,8 @@ import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
 	{
+		// eslint-disable-next-line camelcase
+		unstable_stateReducer: stateReducer = ( state ) => state,
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
@@ -29,7 +31,6 @@ export function NumberControl(
 		max = Infinity,
 		min = -Infinity,
 		shiftStep = 10,
-		stateReducer: stateReducerProp = ( state ) => state,
 		step = 1,
 		type: typeProp = 'number',
 		value: valueProp,
@@ -53,11 +54,11 @@ export function NumberControl(
 	 * @param {Object} action Action triggering state change
 	 * @return {Object} The updated state to apply to InputControl
 	 */
-	const stateReducer = ( state, action ) => {
+	const customStateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
 
-		const nextState = stateReducerProp( state, action );
+		const nextState = stateReducer( state, action );
 		const currentValue = nextState.value;
 
 		/**
@@ -164,10 +165,10 @@ export function NumberControl(
 			hideHTMLArrows={ hideHTMLArrows }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
-			stateReducer={ stateReducer }
 			ref={ ref }
 			type={ typeProp }
 			value={ initialValue }
+			unstable_stateReducer={ customStateReducer }
 		/>
 	);
 }
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index be749a7522db58..8ab25536ec6b3b 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -19,6 +19,8 @@ import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
 
 function UnitControl(
 	{
+		// eslint-disable-next-line camelcase
+		unstable_stateReducer: stateReducer = ( state ) => state,
 		autoComplete = 'off',
 		className,
 		disabled = false,
@@ -30,7 +32,6 @@ function UnitControl(
 		onChange = noop,
 		onUnitChange = noop,
 		size = 'default',
-		stateReducer: stateReducerProp = ( state ) => state,
 		style,
 		unit: unitProp,
 		units = CSS_UNITS,
@@ -84,11 +85,11 @@ function UnitControl(
 	 * @param {Object} action Action triggering state change
 	 * @return {Object} The updated state to apply to InputControl
 	 */
-	const stateReducer = ( state, action ) => {
+	const customStateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
 
-		const nextState = stateReducerProp( state, action );
+		const nextState = stateReducer( state, action );
 
 		/**
 		 * Customizes the submit interaction.
@@ -146,8 +147,8 @@ function UnitControl(
 				ref={ ref }
 				size={ size }
 				suffix={ inputSuffix }
-				stateReducer={ stateReducer }
 				value={ value }
+				unstable_stateReducer={ customStateReducer }
 			/>
 		</Root>
 	);

From 2d3fe72df676060d10dd8e3417f6d49b0ea08743 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 30 Apr 2020 19:00:31 -0400
Subject: [PATCH 075/103] Remove unnecessary eslint-disable rule

---
 packages/components/src/input-control/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 082ef8981d2aef..764b3aef8adbd6 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -28,7 +28,6 @@ function useUniqueId( idProp ) {
 
 export function InputControl(
 	{
-		// eslint-disable-next-line camelcase
 		unstable_stateReducer: stateReducer = ( state ) => state,
 		children,
 		className,

From 3bc1dceacc600138015aa6ba405d3ddf55ac09d3 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 1 May 2020 15:08:16 -0400
Subject: [PATCH 076/103] TEMP: Disable opt-in flag for spacing control for
 testing purposes.

---
 .../block-editor/src/components/spacing-panel-control/index.js  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js
index c6aa32479fcad9..92ea7a609fccee 100644
--- a/packages/block-editor/src/components/spacing-panel-control/index.js
+++ b/packages/block-editor/src/components/spacing-panel-control/index.js
@@ -14,6 +14,8 @@ export default function SpacingPanelControl( { children, ...props } ) {
 	const isSpacingEnabled = useEditorFeature(
 		'__experimentalEnableCustomSpacing'
 	);
+	// TODO: Renable this guard
+	// This is temporarily disabled for testing purposes.
 	if ( ! isSpacingEnabled ) return null;
 
 	return (

From 0a972d6b0d2e781fa3f6b28af18a96da2c15dc58 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 1 May 2020 17:21:47 -0400
Subject: [PATCH 077/103] Streamline combine stateReducer flow. Improve
 performance with memoziation.

---
 .../src/input-control/input-field.js          |  6 ++-
 .../components/src/input-control/state.js     | 52 +++++++++++++++----
 .../components/src/number-control/index.js    | 19 +++----
 packages/components/src/unit-control/index.js | 14 ++---
 4 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index fd41bf8693f534..6f5406194e9281 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -43,15 +43,17 @@ function InputField(
 	ref
 ) {
 	const {
+		// State
 		state,
+		// Actions
 		change,
 		drag,
-		dragStart,
 		dragEnd,
+		dragStart,
 		invalidate,
-		pressUp,
 		pressDown,
 		pressEnter,
+		pressUp,
 		reset,
 		submit,
 		update,
diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index ec119eec94a663..a0683caeae96f8 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -1,7 +1,11 @@
+/**
+ * External dependencies
+ */
+import memize from 'memize';
 /**
  * WordPress dependencies
  */
-import { useReducer } from '@wordpress/element';
+import { useMemo, useReducer } from '@wordpress/element';
 
 const initialStateReducer = ( state ) => state;
 
@@ -48,6 +52,25 @@ function mergeInitialState( initialState = initialInputControlState ) {
 	};
 }
 
+/**
+ * Combines multiple stateReducers into a single stateReducer, building
+ * the pipeline to control the flow for state and actions.
+ *
+ * @param  {...any} fns State reducers.
+ * @return {Function} The single combined stateReducer.
+ */
+export const combineStateReducers = ( ...fns ) => {
+	const reducers = fns.flat( Infinity );
+
+	return ( ...args ) => {
+		return reducers.reduceRight( ( state, fn ) => {
+			return { ...state, ...fn( ...args ) };
+		}, {} );
+	};
+};
+
+const memoizedCombineStateReducers = memize( combineStateReducers );
+
 /**
  * Creates a reducer that opens the channel for external state subscription
  * and modification.
@@ -55,12 +78,12 @@ function mergeInitialState( initialState = initialInputControlState ) {
  * This technique uses the "stateReducer" design pattern:
  * https://kentcdodds.com/blog/the-state-reducer-pattern/
  *
- * @param {Function} stateReducer A custom reducer that can subscribe and modify state.
+ * @param {Function} combinedStateReducers A custom reducer that can subscribe and modify state.
  * @return {Function} The reducer.
  */
-function inputControlStateReducer( stateReducer = initialStateReducer ) {
+function inputControlStateReducer( combinedStateReducers ) {
 	return ( state, action ) => {
-		let nextState = { ...state };
+		const nextState = { ...state };
 		const { type, payload } = action;
 
 		switch ( type ) {
@@ -130,13 +153,11 @@ function inputControlStateReducer( stateReducer = initialStateReducer ) {
 		}
 
 		/**
-		 * This enables consuming components to adjust the state as needed.
-		 * This technique uses the "stateReducer" design pattern:
-		 * https://kentcdodds.com/blog/the-state-reducer-pattern/
+		 * Send the nextState + action to the combinedReducers via
+		 * this "bridge" mechanism. This allows external stateReducers
+		 * to hook into actions, and modify state if needed.
 		 */
-		nextState = stateReducer( nextState, action );
-
-		return nextState;
+		return combinedStateReducers( nextState, action );
 	};
 }
 
@@ -147,6 +168,9 @@ function inputControlStateReducer( stateReducer = initialStateReducer ) {
  * components can react to actions as well as modify state before it is
  * applied.
  *
+ * This technique uses the "stateReducer" design pattern:
+ * https://kentcdodds.com/blog/the-state-reducer-pattern/
+ *
  * @param {Function} stateReducer An external state reducer.
  * @param {Object} initialState The initial state for the reducer.
  * @return {Object} State, dispatch, and a collection of actions.
@@ -155,8 +179,14 @@ export function useInputControlStateReducer(
 	stateReducer = initialStateReducer,
 	initialState = initialInputControlState
 ) {
+	const combinedReducers = memoizedCombineStateReducers( stateReducer );
+	const reducer = useMemo(
+		() => inputControlStateReducer( combinedReducers ),
+		[]
+	);
+
 	const [ state, dispatch ] = useReducer(
-		inputControlStateReducer( stateReducer ),
+		reducer,
 		mergeInitialState( initialState )
 	);
 
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index c80eaab8ed1c50..23e6977842def8 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -20,7 +20,6 @@ import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
 	{
-		// eslint-disable-next-line camelcase
 		unstable_stateReducer: stateReducer = ( state ) => state,
 		className,
 		dragDirection = 'n',
@@ -54,12 +53,11 @@ export function NumberControl(
 	 * @param {Object} action Action triggering state change
 	 * @return {Object} The updated state to apply to InputControl
 	 */
-	const customStateReducer = ( state, action ) => {
+	const numberControlStateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
 
-		const nextState = stateReducer( state, action );
-		const currentValue = nextState.value;
+		const currentValue = state.value;
 
 		/**
 		 * Handles custom UP and DOWN Keyboard events
@@ -91,7 +89,7 @@ export function NumberControl(
 
 			nextValue = roundClamp( nextValue, min, max, incrementalValue );
 
-			nextState.value = nextValue;
+			state.value = nextValue;
 		}
 
 		/**
@@ -138,7 +136,7 @@ export function NumberControl(
 					modifier
 				);
 
-				nextState.value = nextValue;
+				state.value = nextValue;
 			}
 		}
 
@@ -149,10 +147,10 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.SUBMIT
 		) {
-			nextState.value = roundClamp( currentValue, min, max );
+			state.value = roundClamp( currentValue, min, max );
 		}
 
-		return nextState;
+		return state;
 	};
 
 	return (
@@ -168,7 +166,10 @@ export function NumberControl(
 			ref={ ref }
 			type={ typeProp }
 			value={ initialValue }
-			unstable_stateReducer={ customStateReducer }
+			unstable_stateReducer={ [
+				numberControlStateReducer,
+				stateReducer,
+			] }
 		/>
 	);
 }
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 8ab25536ec6b3b..de27a3b264d328 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -19,7 +19,6 @@ import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
 
 function UnitControl(
 	{
-		// eslint-disable-next-line camelcase
 		unstable_stateReducer: stateReducer = ( state ) => state,
 		autoComplete = 'off',
 		className,
@@ -85,12 +84,10 @@ function UnitControl(
 	 * @param {Object} action Action triggering state change
 	 * @return {Object} The updated state to apply to InputControl
 	 */
-	const customStateReducer = ( state, action ) => {
+	const unitControlStateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
 
-		const nextState = stateReducer( state, action );
-
 		/**
 		 * Customizes the submit interaction.
 		 *
@@ -108,7 +105,7 @@ function UnitControl(
 				unit
 			);
 
-			nextState.value = parsedValue;
+			state.value = parsedValue;
 
 			// Update unit if the incoming parsed unit is different.
 			if ( unit !== parsedUnit ) {
@@ -116,7 +113,7 @@ function UnitControl(
 			}
 		}
 
-		return nextState;
+		return state;
 	};
 
 	const inputSuffix = ! disableUnits ? (
@@ -148,7 +145,10 @@ function UnitControl(
 				size={ size }
 				suffix={ inputSuffix }
 				value={ value }
-				unstable_stateReducer={ customStateReducer }
+				unstable_stateReducer={ [
+					unitControlStateReducer,
+					stateReducer,
+				] }
 			/>
 		</Root>
 	);

From ce8de263ef8b63e7efcec7e1897cc5739fea5caf Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 1 May 2020 17:36:01 -0400
Subject: [PATCH 078/103] Improve dragEnd event triggering in InputControl

---
 packages/components/src/input-control/input-field.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index 6f5406194e9281..c9de0a48c8ce76 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -160,9 +160,10 @@ function InputField(
 
 	const dragGestureProps = useDrag(
 		( dragProps ) => {
-			const { dragging, event } = dragProps;
+			const { distance, dragging, event } = dragProps;
 
 			if ( ! isDragEnabled ) return;
+			if ( ! distance ) return;
 			event.stopPropagation();
 
 			/**

From 7342f4fd00167b01ccf32b6658c61396d298d019 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 1 May 2020 22:48:41 -0400
Subject: [PATCH 079/103] Fix memoization issue for state reducer updates

---
 packages/components/src/input-control/state.js            | 8 ++------
 packages/components/src/number-control/index.js           | 2 ++
 .../src/unit-control/styles/unit-control-styles.js        | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index a0683caeae96f8..da062d18687c36 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -5,7 +5,7 @@ import memize from 'memize';
 /**
  * WordPress dependencies
  */
-import { useMemo, useReducer } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 
 const initialStateReducer = ( state ) => state;
 
@@ -180,13 +180,9 @@ export function useInputControlStateReducer(
 	initialState = initialInputControlState
 ) {
 	const combinedReducers = memoizedCombineStateReducers( stateReducer );
-	const reducer = useMemo(
-		() => inputControlStateReducer( combinedReducers ),
-		[]
-	);
 
 	const [ state, dispatch ] = useReducer(
-		reducer,
+		inputControlStateReducer( combinedReducers ),
 		mergeInitialState( initialState )
 	);
 
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 23e6977842def8..0931b34c63f649 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -163,6 +163,8 @@ export function NumberControl(
 			hideHTMLArrows={ hideHTMLArrows }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
+			max={ max }
+			min={ min }
 			ref={ ref }
 			type={ typeProp }
 			value={ initialValue }
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index adb31b80ab4e34..642cdb9793edb4 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -88,7 +88,7 @@ const baseUnitLabelStyles = ( props ) => {
 		width: 20px;
 
 		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-		${ rtl( { right: 1 } )() }
+		${ rtl( { right: 0 } )() }
 		${ unitSizeStyles( props ) }
 	`;
 };

From 022bd12d5612890f8865597b00fb02ddb68a08cd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 11:22:55 -0400
Subject: [PATCH 080/103] Rename unstable_stateReducer to
 __unstableStateReducer

---
 packages/components/src/input-control/index.js  | 2 +-
 packages/components/src/number-control/index.js | 4 ++--
 packages/components/src/unit-control/index.js   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index 764b3aef8adbd6..d98e9124677894 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -28,7 +28,7 @@ function useUniqueId( idProp ) {
 
 export function InputControl(
 	{
-		unstable_stateReducer: stateReducer = ( state ) => state,
+		__unstableStateReducer: stateReducer = ( state ) => state,
 		children,
 		className,
 		disabled = false,
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 0931b34c63f649..788b502544f4e0 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -20,7 +20,7 @@ import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
 	{
-		unstable_stateReducer: stateReducer = ( state ) => state,
+		__unstableStateReducer: stateReducer = ( state ) => state,
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
@@ -168,7 +168,7 @@ export function NumberControl(
 			ref={ ref }
 			type={ typeProp }
 			value={ initialValue }
-			unstable_stateReducer={ [
+			__unstableStateReducer={ [
 				numberControlStateReducer,
 				stateReducer,
 			] }
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index de27a3b264d328..f7ffca57c40c88 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -19,7 +19,7 @@ import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
 
 function UnitControl(
 	{
-		unstable_stateReducer: stateReducer = ( state ) => state,
+		__unstableStateReducer: stateReducer = ( state ) => state,
 		autoComplete = 'off',
 		className,
 		disabled = false,
@@ -145,7 +145,7 @@ function UnitControl(
 				size={ size }
 				suffix={ inputSuffix }
 				value={ value }
-				unstable_stateReducer={ [
+				__unstableStateReducer={ [
 					unitControlStateReducer,
 					stateReducer,
 				] }

From e646191eed500e0d50d88443a842811334599c62 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 11:53:08 -0400
Subject: [PATCH 081/103] Replace Array.flat with lodash.flattenDeep for IE
 compatibility

---
 packages/components/src/input-control/state.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index da062d18687c36..0b9ab5cc909198 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import memize from 'memize';
+import { flattenDeep } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -60,7 +61,8 @@ function mergeInitialState( initialState = initialInputControlState ) {
  * @return {Function} The single combined stateReducer.
  */
 export const combineStateReducers = ( ...fns ) => {
-	const reducers = fns.flat( Infinity );
+	// Using lodash.flattenDeep until we have an Array.flat polyfill.
+	const reducers = flattenDeep( fns );
 
 	return ( ...args ) => {
 		return reducers.reduceRight( ( state, fn ) => {

From 78379aee3a5362782aa485346c557cce9326ee68 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 11:53:54 -0400
Subject: [PATCH 082/103] Fix reset value mechanic stability for BoxControl

---
 packages/components/src/input-control/input-field.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index c9de0a48c8ce76..0f8d71d0c7b561 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -65,7 +65,6 @@ function InputField(
 
 	const { _event, value, isDragging, isDirty } = state;
 
-	const initialValueRef = useRef( valueProp );
 	const valueRef = useRef( value );
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
@@ -75,12 +74,8 @@ function InputField(
 		 * This effectively enables a "controlled" state.
 		 * https://reactjs.org/docs/forms.html#controlled-components
 		 */
-		if (
-			valueProp !== initialValueRef.current &&
-			valueProp !== valueRef.current
-		) {
+		if ( valueProp !== valueRef.current ) {
 			update( valueProp );
-			initialValueRef.current = valueProp;
 			valueRef.current = valueProp;
 
 			// Quick return to avoid firing the onChange callback

From 96c5de871bdba1ced003da0aa7cb78ec9d62ce51 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 12:09:26 -0400
Subject: [PATCH 083/103] Add value tests for InputControl

---
 .../src/input-control/test/index.js           | 91 ++++++++++++++++---
 1 file changed, 78 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index fe1e52a0b8c9a4..61972949068b61 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -1,51 +1,116 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import InputControl from '../';
+import BaseInputControl from '../';
+
+const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
+	const InputControl = ( props ) => (
+		<BaseInputControl { ...props } data-testid="input" />
+	);
+
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			const result = render( <InputControl /> );
+			render( <InputControl /> );
 
-			const input = result.container.querySelector( 'input' );
+			const input = getInput();
 
 			expect( input ).toBeTruthy();
 		} );
 
 		it( 'should render with specified type', () => {
-			const result = render( <InputControl type="number" /> );
+			render( <InputControl type="number" /> );
 
-			const input = result.container.querySelector( '[type="number"]' );
+			const input = getInput();
 
-			expect( input ).toBeTruthy();
+			expect( input.getAttribute( 'type' ) ).toBe( 'number' );
 		} );
 	} );
 
 	describe( 'Label', () => {
 		it( 'should render label', () => {
-			const result = render(
-				<InputControl label="Hello" value="There" />
-			);
+			render( <InputControl label="Hello" value="There" /> );
 
-			const input = result.getByText( 'Hello' );
+			const input = screen.getByText( 'Hello' );
 
 			expect( input ).toBeTruthy();
 		} );
 
 		it( 'should render label, if floating', () => {
-			const result = render(
+			render(
 				<InputControl isFloatingLabel label="Hello" value="There" />
 			);
 
-			const input = result.getAllByText( 'Hello' );
+			const input = screen.getAllByText( 'Hello' );
 
 			expect( input ).toBeTruthy();
 		} );
 	} );
+
+	describe( 'Value', () => {
+		it( 'should update value onChange', () => {
+			const spy = jest.fn();
+			render( <InputControl value="Hello" onChange={ spy } /> );
+
+			const input = getInput();
+
+			fireEvent.change( input, { target: { value: 'There' } } );
+
+			expect( input.value ).toBe( 'There' );
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should work as a controlled component', () => {
+			const spy = jest.fn();
+			const { rerender } = render(
+				<InputControl value="Original" onChange={ spy } />
+			);
+
+			const input = getInput();
+
+			fireEvent.change( input, { target: { value: 'State' } } );
+
+			// Assuming <InputControl /> is controlled...
+
+			// Updating the value
+			rerender( <InputControl value="New" onChange={ spy } /> );
+
+			expect( input.value ).toBe( 'New' );
+
+			/**
+			 * onChange called only once. onChange is not called when a
+			 * parent component explicitly passed a (new value) change down to
+			 * the <InputControl />.
+			 */
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should change back to initial value prop, if controlled', () => {
+			const spy = jest.fn();
+			const { rerender } = render(
+				<InputControl value="Original" onChange={ spy } />
+			);
+
+			const input = getInput();
+
+			// Assuming <InputControl /> is controlled...
+
+			// Updating the value
+			rerender( <InputControl value="New" onChange={ spy } /> );
+
+			expect( input.value ).toBe( 'New' );
+
+			// Change it back to the original value
+			rerender( <InputControl value="Original" onChange={ spy } /> );
+
+			expect( input.value ).toBe( 'Original' );
+			expect( spy ).toHaveBeenCalledTimes( 0 );
+		} );
+	} );
 } );

From e966e62f57f10bed1653033827c170b116661a3b Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 12:18:04 -0400
Subject: [PATCH 084/103] TEMP: Disable guard for testing

---
 .../src/components/spacing-panel-control/index.js            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js
index 92ea7a609fccee..6acd63174c6497 100644
--- a/packages/block-editor/src/components/spacing-panel-control/index.js
+++ b/packages/block-editor/src/components/spacing-panel-control/index.js
@@ -14,9 +14,10 @@ export default function SpacingPanelControl( { children, ...props } ) {
 	const isSpacingEnabled = useEditorFeature(
 		'__experimentalEnableCustomSpacing'
 	);
-	// TODO: Renable this guard
+	// TODO: Renable the proper guard
 	// This is temporarily disabled for testing purposes.
-	if ( ! isSpacingEnabled ) return null;
+	if ( !! isSpacingEnabled ) return null;
+	// if ( ! isSpacingEnabled ) return null;
 
 	return (
 		<InspectorControls { ...props }>

From c40b7318e1d9cb05d1c2143f80f1968200e64d66 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 12:18:16 -0400
Subject: [PATCH 085/103] Remove fixed height for BoxControl

---
 packages/components/src/box-control/styles/box-control-styles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 302df5a640cc83..efecdb24c1fc0d 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -32,7 +32,6 @@ export const UnitControlWrapper = styled.div`
 `;
 
 export const LayoutContainer = styled( Flex )`
-	height: 100px;
 	justify-content: center;
 	padding-top: 8px;
 `;

From 0831bf17dfadf8061359052ceb3564ec3396cffb Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 12:41:00 -0400
Subject: [PATCH 086/103] Make use of combineStateReducers more explicit for
 InputControl, NumberControl, and UnitControl

---
 packages/components/src/input-control/state.js  |  5 +----
 packages/components/src/number-control/index.js | 11 +++++++----
 packages/components/src/unit-control/index.js   | 11 +++++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index 0b9ab5cc909198..ac4a82f329c44b 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import memize from 'memize';
 import { flattenDeep } from 'lodash';
 /**
  * WordPress dependencies
@@ -71,8 +70,6 @@ export const combineStateReducers = ( ...fns ) => {
 	};
 };
 
-const memoizedCombineStateReducers = memize( combineStateReducers );
-
 /**
  * Creates a reducer that opens the channel for external state subscription
  * and modification.
@@ -181,7 +178,7 @@ export function useInputControlStateReducer(
 	stateReducer = initialStateReducer,
 	initialState = initialInputControlState
 ) {
-	const combinedReducers = memoizedCombineStateReducers( stateReducer );
+	const combinedReducers = combineStateReducers( stateReducer );
 
 	const [ state, dispatch ] = useReducer(
 		inputControlStateReducer( combinedReducers ),
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 788b502544f4e0..37795153f2870a 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -15,7 +15,10 @@ import { forwardRef } from '@wordpress/element';
 import { Input } from './styles/number-control-styles';
 import { add, getValue, roundClamp, subtract } from './utils';
 import { isValueEmpty } from '../input-control/utils';
-import { inputControlActionTypes } from '../input-control/state';
+import {
+	inputControlActionTypes,
+	combineStateReducers,
+} from '../input-control/state';
 import { useRtl } from '../utils/style-mixins';
 
 export function NumberControl(
@@ -168,10 +171,10 @@ export function NumberControl(
 			ref={ ref }
 			type={ typeProp }
 			value={ initialValue }
-			__unstableStateReducer={ [
+			__unstableStateReducer={ combineStateReducers(
 				numberControlStateReducer,
-				stateReducer,
-			] }
+				stateReducer
+			) }
 		/>
 	);
 }
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index f7ffca57c40c88..933b6ee93fcb85 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -12,7 +12,10 @@ import { useState, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { inputControlActionTypes } from '../input-control/state';
+import {
+	inputControlActionTypes,
+	combineStateReducers,
+} from '../input-control/state';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
@@ -145,10 +148,10 @@ function UnitControl(
 				size={ size }
 				suffix={ inputSuffix }
 				value={ value }
-				__unstableStateReducer={ [
+				__unstableStateReducer={ combineStateReducers(
 					unitControlStateReducer,
-					stateReducer,
-				] }
+					stateReducer
+				) }
 			/>
 		</Root>
 	);

From 4c4a24b07f53df4072ce99586ac36b0152aa782d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 12:53:54 -0400
Subject: [PATCH 087/103] Refactor useBoxControlState to simply
 useControlledState with defaults

---
 packages/components/src/box-control/index.js |  7 ++++---
 packages/components/src/box-control/utils.js | 11 -----------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 85e5b7c7e44edc..cb622bf8a01cf2 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -24,7 +24,8 @@ import {
 	Header,
 	HeaderControlWrapper,
 } from './styles/box-control-styles';
-import { useBoxControlState, isValuesMixed } from './utils';
+import { DEFAULT_VALUES, isValuesMixed } from './utils';
+import { useControlledState } from '../utils/hooks';
 
 const defaultInputProps = {
 	min: 0,
@@ -41,10 +42,10 @@ export default function BoxControl( {
 	inputProps = defaultInputProps,
 	onChange = noop,
 	label = __( 'Box Control' ),
-	values: valuesProp,
+	values: valuesProp = DEFAULT_VALUES,
 	units,
 } ) {
-	const [ values, setValues ] = useBoxControlState( valuesProp );
+	const [ values, setValues ] = useControlledState( valuesProp );
 
 	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
 	const [ isDirty, setIsDirty ] = useState( false );
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 3076aa315a0e61..c387122a072d71 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { parseUnit } from '../unit-control/utils';
-import { useControlledState } from '../utils/hooks';
 
 export const LABELS = {
 	all: __( 'All' ),
@@ -25,16 +24,6 @@ export const DEFAULT_VALUES = {
 	left: '0px',
 };
 
-/**
- * Custom hook that merges default values with values prop to use as state.
- *
- * @param {Object} values Box values.
- * @return {Array<Object, Function>} Hook state and setter.
- */
-export function useBoxControlState( values = DEFAULT_VALUES ) {
-	return useControlledState( values );
-}
-
 /**
  * Gets an items with the most occurance within an array
  * https://stackoverflow.com/a/20762713

From 02b51a53dd623a29801f0f16abf3b5e79e9eed05 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 5 May 2020 12:54:56 -0400
Subject: [PATCH 088/103] Simplify side active matching for BoxControl/Icon

---
 packages/components/src/box-control/icon.js  | 19 +++++++------------
 packages/components/src/box-control/index.js |  4 ++--
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
index ed72fe48d6fc47..044c7a13765dfd 100644
--- a/packages/components/src/box-control/icon.js
+++ b/packages/components/src/box-control/icon.js
@@ -17,13 +17,13 @@ const BASE_ICON_SIZE = 24;
 
 export default function BoxControlIcon( {
 	size = 24,
-	sides = [ 'all' ],
+	side = 'all',
 	...props
 } ) {
-	const top = getSide( sides, 'top' );
-	const right = getSide( sides, 'right' );
-	const bottom = getSide( sides, 'bottom' );
-	const left = getSide( sides, 'left' );
+	const top = getSide( side, 'top' );
+	const right = getSide( side, 'right' );
+	const bottom = getSide( side, 'bottom' );
+	const left = getSide( side, 'left' );
 
 	// Simulates SVG Icon scaling
 	const scale = size / BASE_ICON_SIZE;
@@ -40,11 +40,6 @@ export default function BoxControlIcon( {
 	);
 }
 
-function getSide( sides, value ) {
-	const match = value.toLowerCase();
-
-	return sides.find( ( side ) => {
-		const sideValue = side.toLowerCase();
-		return [ 'all', match ].includes( sideValue );
-	} );
+function getSide( side, value ) {
+	return side === 'all' || side === value;
 }
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index cb622bf8a01cf2..3cc62d9d291e71 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -47,9 +47,9 @@ export default function BoxControl( {
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp );
 
-	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
 	const [ isDirty, setIsDirty ] = useState( false );
 	const [ isLinked, setIsLinked ] = useState( ! isValuesMixed( values ) );
+	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
 
 	const initialValuesRef = useRef( values );
 
@@ -113,7 +113,7 @@ export default function BoxControl( {
 			</Header>
 			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
 				<Flex.Item>
-					<BoxControlIcon sides={ [ side ] } />
+					<BoxControlIcon side={ side } />
 				</Flex.Item>
 				{ isLinked && (
 					<Flex.Block>

From ae409976c264b44c59d8754b22b5c24172f0cf88 Mon Sep 17 00:00:00 2001
From: Jon Quach <hello@jonquach.com>
Date: Tue, 5 May 2020 13:04:24 -0400
Subject: [PATCH 089/103] Update
 packages/block-editor/src/components/spacing-panel-control/index.js

Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
---
 .../block-editor/src/components/spacing-panel-control/index.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js
index 6acd63174c6497..8d74dddd069752 100644
--- a/packages/block-editor/src/components/spacing-panel-control/index.js
+++ b/packages/block-editor/src/components/spacing-panel-control/index.js
@@ -16,7 +16,7 @@ export default function SpacingPanelControl( { children, ...props } ) {
 	);
 	// TODO: Renable the proper guard
 	// This is temporarily disabled for testing purposes.
-	if ( !! isSpacingEnabled ) return null;
+	if ( isSpacingEnabled ) return null;
 	// if ( ! isSpacingEnabled ) return null;
 
 	return (

From 0716d216803d684df2d056c878bc9a9fa62f589d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 May 2020 09:48:38 -0400
Subject: [PATCH 090/103] Fix update value on blur

---
 packages/components/src/input-control/input-field.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index 0f8d71d0c7b561..7e4be22e43f733 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -102,7 +102,7 @@ function InputField(
 		 */
 		if ( isPressEnterToChange && isDirty ) {
 			if ( ! isValueEmpty( value ) ) {
-				handleOnSubmit( { target: value }, event );
+				handleOnSubmit( { target: { value } }, event );
 			} else {
 				reset( valueProp );
 			}

From dab5b2164008df9f7d8ad553328ce5df872eb5a4 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 May 2020 10:47:54 -0400
Subject: [PATCH 091/103] Fix tests for UnitControl

---
 .../components/src/unit-control/test/index.js | 64 +++++++++++++++++--
 1 file changed, 58 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
index 391e12707a3317..c6b0431c968474 100644
--- a/packages/components/src/unit-control/test/index.js
+++ b/packages/components/src/unit-control/test/index.js
@@ -281,12 +281,12 @@ describe( 'UnitControl', () => {
 
 			expect( state ).toBe( '50pt' );
 		} );
+	} );
+	describe( 'Unit Parser', () => {
+		let state = '10px';
+		const setState = ( nextState ) => ( state = nextState );
 
 		it( 'should parse unit from input', () => {
-			let state = '10px';
-
-			const setState = ( nextState ) => ( state = nextState );
-
 			act( () => {
 				render(
 					<UnitControl value={ state } onChange={ setState } />,
@@ -301,24 +301,76 @@ describe( 'UnitControl', () => {
 			} );
 
 			expect( state ).toBe( '55em' );
+		} );
+
+		it( 'should parse PX unit from input', () => {
+			act( () => {
+				render(
+					<UnitControl value={ state } onChange={ setState } />,
+					container
+				);
+			} );
+
+			const input = getInput();
 
 			act( () => {
 				Simulate.change( input, { target: { value: '61   PX' } } );
 			} );
 
 			expect( state ).toBe( '61px' );
+		} );
+
+		it( 'should parse EM unit from input', () => {
+			act( () => {
+				render(
+					<UnitControl value={ state } onChange={ setState } />,
+					container
+				);
+			} );
+
+			const input = getInput();
+
+			act( () => {
+				Simulate.change( input, { target: { value: '55 em' } } );
+			} );
+
+			expect( state ).toBe( '55em' );
+		} );
+
+		it( 'should parse % unit from input', () => {
+			act( () => {
+				render(
+					<UnitControl value={ state } onChange={ setState } />,
+					container
+				);
+			} );
+
+			const input = getInput();
 
 			act( () => {
 				Simulate.change( input, { target: { value: '-10  %' } } );
 			} );
 
 			expect( state ).toBe( '-10%' );
+		} );
+
+		it( 'should parse REM unit from input', () => {
+			act( () => {
+				render(
+					<UnitControl value={ state } onChange={ setState } />,
+					container
+				);
+			} );
+
+			const input = getInput();
 
 			act( () => {
-				Simulate.change( input, { target: { value: '15.25 REm ' } } );
+				Simulate.change( input, {
+					target: { value: '123       rEm  ' },
+				} );
 			} );
 
-			expect( state ).toBe( '15.25rem' );
+			expect( state ).toBe( '123rem' );
 		} );
 	} );
 } );

From 609b9c378761fccade6a398b1e0da3ad166bd12d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 May 2020 10:48:07 -0400
Subject: [PATCH 092/103] Memoize input state reducer to prevent unnecessary
 re-renders

...which were spotted during unit tests.
---
 packages/components/src/input-control/state.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index ac4a82f329c44b..431877f643ea85 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -5,7 +5,7 @@ import { flattenDeep } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useReducer } from '@wordpress/element';
+import { useMemo, useReducer } from '@wordpress/element';
 
 const initialStateReducer = ( state ) => state;
 
@@ -179,9 +179,13 @@ export function useInputControlStateReducer(
 	initialState = initialInputControlState
 ) {
 	const combinedReducers = combineStateReducers( stateReducer );
+	const reducer = useMemo(
+		() => inputControlStateReducer( combinedReducers ),
+		[]
+	);
 
 	const [ state, dispatch ] = useReducer(
-		inputControlStateReducer( combinedReducers ),
+		reducer,
 		mergeInitialState( initialState )
 	);
 

From 28186281cba5edd45687d38711ed4ef621317b3d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 13 May 2020 12:58:18 -0400
Subject: [PATCH 093/103] Rename submit -> commit. Fix RTL (from rebase mixup).

---
 packages/components/src/input-control/input-field.js | 12 ++++++------
 packages/components/src/input-control/state.js       | 10 +++++-----
 packages/components/src/input-control/utils.js       |  4 ++--
 packages/components/src/number-control/index.js      |  4 ++--
 packages/components/src/utils/style-mixins.js        |  2 +-
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/input-control/input-field.js b/packages/components/src/input-control/input-field.js
index 7e4be22e43f733..f7bbf4f5fa51e6 100644
--- a/packages/components/src/input-control/input-field.js
+++ b/packages/components/src/input-control/input-field.js
@@ -47,6 +47,7 @@ function InputField(
 		state,
 		// Actions
 		change,
+		commit,
 		drag,
 		dragEnd,
 		dragStart,
@@ -55,7 +56,6 @@ function InputField(
 		pressEnter,
 		pressUp,
 		reset,
-		submit,
 		update,
 	} = useInputControlStateReducer( stateReducer, {
 		isDragEnabled,
@@ -97,12 +97,12 @@ function InputField(
 		onBlur( event );
 
 		/**
-		 * If isPressEnterToChange is set, this submits the value to
+		 * If isPressEnterToChange is set, this commits the value to
 		 * the onChange callback.
 		 */
 		if ( isPressEnterToChange && isDirty ) {
 			if ( ! isValueEmpty( value ) ) {
-				handleOnSubmit( { target: { value } }, event );
+				handleOnCommit( { target: { value } }, event );
 			} else {
 				reset( valueProp );
 			}
@@ -118,12 +118,12 @@ function InputField(
 		change( nextValue, event );
 	};
 
-	const handleOnSubmit = ( event ) => {
+	const handleOnCommit = ( event ) => {
 		const nextValue = event.target.value;
 
 		try {
 			onValidate( nextValue, { event } );
-			submit( nextValue, event );
+			commit( nextValue, event );
 		} catch ( err ) {
 			invalidate( err, { event } );
 		}
@@ -147,7 +147,7 @@ function InputField(
 
 				if ( isPressEnterToChange ) {
 					event.preventDefault();
-					handleOnSubmit( event );
+					handleOnCommit( event );
 				}
 				break;
 		}
diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index 431877f643ea85..9804b9454208de 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -16,12 +16,13 @@ const initialInputControlState = {
 	isDirty: false,
 	isDragEnabled: false,
 	isDragging: false,
-	isPressEnterToSubmit: false,
+	isPressEnterToChange: false,
 	value: '',
 };
 
 const actionTypes = {
 	CHANGE: 'CHANGE',
+	COMMIT: 'COMMIT',
 	DRAG_END: 'DRAG_END',
 	DRAG_START: 'DRAG_START',
 	DRAG: 'DRAG',
@@ -30,7 +31,6 @@ const actionTypes = {
 	PRESS_ENTER: 'PRESS_ENTER',
 	PRESS_UP: 'PRESS_UP',
 	RESET: 'RESET',
-	SUBMIT: 'SUBMIT',
 	UPDATE: 'UPDATE',
 };
 
@@ -121,7 +121,7 @@ function inputControlStateReducer( combinedStateReducers ) {
 
 				break;
 
-			case actionTypes.SUBMIT:
+			case actionTypes.COMMIT:
 				nextState.value = payload.value;
 				nextState.isDirty = false;
 				break;
@@ -228,7 +228,7 @@ export function useInputControlStateReducer(
 	const change = createChangeEvent( actionTypes.CHANGE );
 	const inValidate = createChangeEvent( actionTypes.INVALIDATE );
 	const reset = createChangeEvent( actionTypes.RESET );
-	const submit = createChangeEvent( actionTypes.SUBMIT );
+	const commit = createChangeEvent( actionTypes.COMMIT );
 	const update = createChangeEvent( actionTypes.UPDATE );
 
 	const dragStart = createDragEvent( actionTypes.DRAG_START );
@@ -241,6 +241,7 @@ export function useInputControlStateReducer(
 
 	return {
 		change,
+		commit,
 		dispatch,
 		drag,
 		dragEnd,
@@ -251,7 +252,6 @@ export function useInputControlStateReducer(
 		pressUp,
 		reset,
 		state,
-		submit,
 		update,
 	};
 }
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index de440c1c12947b..ee2c897580e9bf 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -6,7 +6,7 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getRtl } from '../utils/style-mixins';
+import { getRTL } from '../utils/style-mixins';
 
 /**
  * Gets a CSS cursor value based on a drag direction.
@@ -15,7 +15,7 @@ import { getRtl } from '../utils/style-mixins';
  * @return {string} The CSS cursor value.
  */
 export function getDragCursor( dragDirection ) {
-	const isRtl = getRtl();
+	const isRtl = getRTL();
 	let dragCursor = 'n-resize';
 
 	switch ( dragDirection ) {
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 37795153f2870a..226f94ae0c75dd 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -19,7 +19,7 @@ import {
 	inputControlActionTypes,
 	combineStateReducers,
 } from '../input-control/state';
-import { useRtl } from '../utils/style-mixins';
+import { useRTL } from '../utils/style-mixins';
 
 export function NumberControl(
 	{
@@ -42,7 +42,7 @@ export function NumberControl(
 ) {
 	const initialValue = getValue( valueProp, min, max );
 	const baseValue = clamp( 0, min, max );
-	const isRtl = useRtl();
+	const isRtl = useRTL();
 
 	const autoComplete = typeProp === 'number' ? 'off' : null;
 	const classes = classNames( 'components-number-control', className );
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index b24f56847f5216..9480d6fa878f63 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,3 +1,3 @@
 export { color, rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
-export { rtl, getRtl, useRtl } from './rtl';
+export { rtl, getRTL, useRTL } from './rtl';

From 6a376c0314c4a8ff8e748ac731b7c8585d242a13 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 10:12:08 -0400
Subject: [PATCH 094/103] Update InputControl, NumberControl, and UnitControl
 from master

---
 .../components/src/input-control/README.md    |  2 --
 .../components/src/input-control/backdrop.js  |  2 +-
 .../components/src/input-control/index.js     |  1 -
 .../components/src/input-control/state.js     | 36 ++++++++-----------
 .../src/input-control/stories/index.js        |  1 +
 .../styles/input-control-styles.js            | 30 +++++++++++++---
 .../components/src/number-control/index.js    |  4 +--
 .../src/number-control/stories/index.js       |  1 +
 packages/components/src/unit-control/index.js |  9 +++--
 .../src/unit-control/stories/index.js         |  1 +
 .../src/unit-control/unit-select-control.js   |  9 ++++-
 packages/components/src/unit-control/utils.js | 12 +++----
 12 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 42f3e5907b76b5..d184fd1e2ce2f1 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -4,8 +4,6 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ## Usage
 
-Render a user interface to input the name of an additional css class.
-
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
 import { useState } from '@wordpress/compose';
diff --git a/packages/components/src/input-control/backdrop.js b/packages/components/src/input-control/backdrop.js
index fbd08f633cafcc..e376170ee7bfca 100644
--- a/packages/components/src/input-control/backdrop.js
+++ b/packages/components/src/input-control/backdrop.js
@@ -11,7 +11,7 @@ function Backdrop( {
 	disabled = false,
 	isFloating = false,
 	isFloatingLabel = false,
-	isFocused,
+	isFocused = false,
 	label,
 	size = 'default',
 } ) {
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index d98e9124677894..e15128c4c99e70 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -120,7 +120,6 @@ export function InputControl(
 				) }
 				<Backdrop
 					aria-hidden="true"
-					className="components-input-control__fieldset"
 					disabled={ disabled }
 					isFloating={ isFloating }
 					isFloatingLabel={ isFloatingLabelSet }
diff --git a/packages/components/src/input-control/state.js b/packages/components/src/input-control/state.js
index 9804b9454208de..b2cd3cc5225d26 100644
--- a/packages/components/src/input-control/state.js
+++ b/packages/components/src/input-control/state.js
@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
-import { flattenDeep } from 'lodash';
+import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useMemo, useReducer } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 
 const initialStateReducer = ( state ) => state;
 
@@ -53,19 +53,17 @@ function mergeInitialState( initialState = initialInputControlState ) {
 }
 
 /**
- * Combines multiple stateReducers into a single stateReducer, building
+ * Composes multiple stateReducers into a single stateReducer, building
  * the pipeline to control the flow for state and actions.
  *
- * @param  {...any} fns State reducers.
- * @return {Function} The single combined stateReducer.
+ * @param  {...Function} fns State reducers.
+ * @return {Function} The single composed stateReducer.
  */
-export const combineStateReducers = ( ...fns ) => {
-	// Using lodash.flattenDeep until we have an Array.flat polyfill.
-	const reducers = flattenDeep( fns );
-
+export const composeStateReducers = ( ...fns ) => {
 	return ( ...args ) => {
-		return reducers.reduceRight( ( state, fn ) => {
-			return { ...state, ...fn( ...args ) };
+		return fns.reduceRight( ( state, fn ) => {
+			const fnState = fn( ...args );
+			return isEmpty( fnState ) ? state : { ...state, ...fnState };
 		}, {} );
 	};
 };
@@ -77,10 +75,10 @@ export const combineStateReducers = ( ...fns ) => {
  * This technique uses the "stateReducer" design pattern:
  * https://kentcdodds.com/blog/the-state-reducer-pattern/
  *
- * @param {Function} combinedStateReducers A custom reducer that can subscribe and modify state.
+ * @param {Function} composedStateReducers A custom reducer that can subscribe and modify state.
  * @return {Function} The reducer.
  */
-function inputControlStateReducer( combinedStateReducers ) {
+function inputControlStateReducer( composedStateReducers ) {
 	return ( state, action ) => {
 		const nextState = { ...state };
 		const { type, payload } = action;
@@ -152,11 +150,11 @@ function inputControlStateReducer( combinedStateReducers ) {
 		}
 
 		/**
-		 * Send the nextState + action to the combinedReducers via
+		 * Send the nextState + action to the composedReducers via
 		 * this "bridge" mechanism. This allows external stateReducers
 		 * to hook into actions, and modify state if needed.
 		 */
-		return combinedStateReducers( nextState, action );
+		return composedStateReducers( nextState, action );
 	};
 }
 
@@ -178,14 +176,8 @@ export function useInputControlStateReducer(
 	stateReducer = initialStateReducer,
 	initialState = initialInputControlState
 ) {
-	const combinedReducers = combineStateReducers( stateReducer );
-	const reducer = useMemo(
-		() => inputControlStateReducer( combinedReducers ),
-		[]
-	);
-
 	const [ state, dispatch ] = useReducer(
-		reducer,
+		inputControlStateReducer( stateReducer ),
 		mergeInitialState( initialState )
 	);
 
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
index 47db876b2cf7fc..7a3ebd5f4ab432 100644
--- a/packages/components/src/input-control/stories/index.js
+++ b/packages/components/src/input-control/stories/index.js
@@ -25,6 +25,7 @@ function Example() {
 		disabled: boolean( 'disabled', false ),
 		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
 		isFloatingLabel: boolean( 'isFloatingLabel', false ),
+		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
 		label: text( 'label', 'Value' ),
 		placeholder: text( 'placeholder', 'Placeholder' ),
 		size: select(
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 486d5071decbea..ca7c95ebbdd90c 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -110,6 +110,10 @@ const placeholderStyles = ( { isFilled, isFloating, isFloatingLabel } ) => {
 		&::placeholder {
 			opacity: ${opacity};
 		}
+
+		&::-webkit-input-placeholder {
+			line-height: normal;
+		}
 	`;
 };
 
@@ -185,7 +189,7 @@ const labelFontSize = ( { isFloatingLabel, size } ) => {
 		small: '11px',
 	};
 	const fontSize = sizes[ size ];
-	const lineHeight = isFloatingLabel ? 1 : null;
+	const lineHeight = isFloatingLabel ? 1.2 : null;
 
 	return css( { fontSize, lineHeight } );
 };
@@ -195,9 +199,13 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 	const position = isFloatingLabel ? 'absolute' : null;
 	const pointerEvents = isFloating ? null : 'none';
 
-	const marginTop = isFloating ? 0 : 1;
+	const isSmall = size === 'small';
+
+	const offsetTop = isSmall ? 1 : 2;
+	const offset = isSmall ? '-1px' : '-3px';
+
+	const marginTop = isFloating ? 0 : offsetTop;
 	const marginLeft = isFloatingLabel ? 8 : 0;
-	const offset = size === 'small' ? '-3px' : '-5px';
 
 	let transform = isFloating
 		? `translate( 0, calc(-100% + ${ offset }) ) scale( 0.75 )`
@@ -228,20 +236,34 @@ const labelPosition = ( { isFloatingLabel, isFloating, size } ) => {
 	);
 };
 
+const labelTruncation = ( { isFloating } ) => {
+	if ( isFloating ) return '';
+
+	return css`
+		max-width: calc( 100% - 10px );
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	`;
+};
+
 const BaseLabel = styled( Text )`
 	&&& {
 		box-sizing: border-box;
 		display: block;
 		margin: 0;
+		max-width: 100%;
 		padding: 0;
 		pointer-events: none;
 		top: 50%;
-		transition: transform ${FLOATING_LABEL_TRANSITION_SPEED} linear;
+		transition: transform ${FLOATING_LABEL_TRANSITION_SPEED} linear,
+			max-width ${FLOATING_LABEL_TRANSITION_SPEED} linear;
 		z-index: 1;
 
 		${laberColor};
 		${labelFontSize};
 		${labelPosition};
+		${labelTruncation};
 		${reduceMotion( 'transition' )};
 
 		${rtl( { left: 0 } )}
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 226f94ae0c75dd..8efdc52c7ce63a 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -17,7 +17,7 @@ import { add, getValue, roundClamp, subtract } from './utils';
 import { isValueEmpty } from '../input-control/utils';
 import {
 	inputControlActionTypes,
-	combineStateReducers,
+	composeStateReducers,
 } from '../input-control/state';
 import { useRTL } from '../utils/style-mixins';
 
@@ -171,7 +171,7 @@ export function NumberControl(
 			ref={ ref }
 			type={ typeProp }
 			value={ initialValue }
-			__unstableStateReducer={ combineStateReducers(
+			__unstableStateReducer={ composeStateReducers(
 				numberControlStateReducer,
 				stateReducer
 			) }
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
index e69fcb42a9b729..adc84a3933d35c 100644
--- a/packages/components/src/number-control/stories/index.js
+++ b/packages/components/src/number-control/stories/index.js
@@ -25,6 +25,7 @@ function Example() {
 		disabled: boolean( 'disabled', false ),
 		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
 		isFloatingLabel: boolean( 'isFloatingLabel', false ),
+		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		label: text( 'label', 'Number' ),
 		min: number( 'min', 0 ),
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index 933b6ee93fcb85..39137c6c132a7a 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -14,7 +14,7 @@ import { useState, forwardRef } from '@wordpress/element';
  */
 import {
 	inputControlActionTypes,
-	combineStateReducers,
+	composeStateReducers,
 } from '../input-control/state';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
@@ -92,13 +92,13 @@ function UnitControl(
 		const event = payload?.event;
 
 		/**
-		 * Customizes the submit interaction.
+		 * Customizes the commit interaction.
 		 *
 		 * This occurs when pressing ENTER to fire a change.
 		 * By intercepting the state change, we can parse the incoming
 		 * value to determine if the unit needs to be updated.
 		 */
-		if ( type === inputControlActionTypes.SUBMIT ) {
+		if ( type === inputControlActionTypes.COMMIT ) {
 			const valueToParse = event?.target?.value;
 
 			const [ parsedValue, parsedUnit ] = getValidParsedUnit(
@@ -121,7 +121,6 @@ function UnitControl(
 
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
-			className="components-unit-control__select"
 			disabled={ disabled }
 			isTabbable={ isUnitSelectTabbable }
 			options={ units }
@@ -148,7 +147,7 @@ function UnitControl(
 				size={ size }
 				suffix={ inputSuffix }
 				value={ value }
-				__unstableStateReducer={ combineStateReducers(
+				__unstableStateReducer={ composeStateReducers(
 					unitControlStateReducer,
 					stateReducer
 				) }
diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index dceaa36ca2cc3f..ce6b05776064ee 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -26,6 +26,7 @@ function Example() {
 		disableUnits: boolean( 'disableUnits', false ),
 		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
 		isFloatingLabel: boolean( 'isFloatingLabel', false ),
+		isPressEnterToChange: boolean( 'isPressEnterToChange', true ),
 		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
 		isUnitSelectTabbable: boolean( 'isUnitSelectTabbable', true ),
 		label: text( 'label', 'Value' ),
diff --git a/packages/components/src/unit-control/unit-select-control.js b/packages/components/src/unit-control/unit-select-control.js
index 931cda4d32e9a2..a0dc2211e53c78 100644
--- a/packages/components/src/unit-control/unit-select-control.js
+++ b/packages/components/src/unit-control/unit-select-control.js
@@ -24,7 +24,14 @@ export default function UnitSelectControl( {
 	...props
 } ) {
 	if ( ! hasUnits( options ) ) {
-		return <UnitLabel size={ size }>{ value }</UnitLabel>;
+		return (
+			<UnitLabel
+				className="components-unit-control__unit-label"
+				size={ size }
+			>
+				{ value }
+			</UnitLabel>
+		);
 	}
 
 	const handleOnChange = ( event ) => {
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index fff6f036ca71a7..afe41d9bc39bf4 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -50,13 +50,14 @@ export function hasUnits( units ) {
  * @return {Array<number, string>} The extracted number and unit.
  */
 export function parseUnit( initialValue, units = CSS_UNITS ) {
-	const output = [ 0, '' ];
 	const value = String( initialValue ).trim();
 
-	const num = parseFloat( value, 10 );
+	let num = parseFloat( value, 10 );
+	num = isNaN( num ) ? '' : num;
+
 	const unitMatch = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
 
-	let unit = unitMatch !== 'undefined' ? unitMatch : '';
+	let unit = unitMatch !== undefined ? unitMatch : '';
 	unit = unit.toLowerCase();
 
 	if ( hasUnits( units ) ) {
@@ -64,10 +65,7 @@ export function parseUnit( initialValue, units = CSS_UNITS ) {
 		unit = match?.value;
 	}
 
-	output[ 0 ] = isNaN( num ) ? '' : num;
-	output[ 1 ] = unit;
-
-	return output;
+	return [ num, unit ];
 }
 
 /**

From c4ada308bd83b127cae8068087673a3f6e8078e1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 11:50:54 -0400
Subject: [PATCH 095/103] Integrate lightBlockWrapper with new padding controls
 + visualizer

---
 packages/block-editor/src/hooks/padding.js    |   8 +-
 packages/block-library/src/cover/edit.js      | 111 +++++++++---------
 packages/block-library/src/cover/index.js     |   6 +
 .../styles/box-control-visualizer-styles.js   |  16 +++
 .../components/src/box-control/visualizer.js  |   7 +-
 5 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index cf78087c269afa..ce9316309e4231 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -61,8 +61,8 @@ export function PaddingEdit( props ) {
 }
 
 export const paddingStyleMappings = {
-	'--wp--padding-top': [ 'padding', 'top' ],
-	'--wp--padding-right': [ 'padding', 'right' ],
-	'--wp--padding-bottom': [ 'padding', 'bottom' ],
-	'--wp--padding-left': [ 'padding', 'left' ],
+	paddingTop: [ 'padding', 'top' ],
+	paddingRight: [ 'padding', 'right' ],
+	paddingBottom: [ 'padding', 'bottom' ],
+	paddingLeft: [ 'padding', 'left' ],
 };
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 347baa20315793..2a7a081da03e72 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -473,67 +473,62 @@ function CoverEdit( {
 	return (
 		<>
 			{ controls }
-			<BoxControlVisualizer values={ styleAttribute?.padding }>
-				<Block.div
-					className={ classes }
-					data-url={ url }
-					style={ style }
-				>
-					<ResizableCover
-						className="block-library-cover__resize-container"
-						onResizeStart={ () => {
-							setAttributes( { minHeightUnit: 'px' } );
-							toggleSelection( false );
-						} }
-						onResize={ setTemporaryMinHeight }
-						onResizeStop={ ( newMinHeight ) => {
-							toggleSelection( true );
-							setAttributes( { minHeight: newMinHeight } );
-							setTemporaryMinHeight( null );
+			<Block.div className={ classes } data-url={ url } style={ style }>
+				<BoxControlVisualizer values={ styleAttribute?.padding } />
+				<ResizableCover
+					className="block-library-cover__resize-container"
+					onResizeStart={ () => {
+						setAttributes( { minHeightUnit: 'px' } );
+						toggleSelection( false );
+					} }
+					onResize={ setTemporaryMinHeight }
+					onResizeStop={ ( newMinHeight ) => {
+						toggleSelection( true );
+						setAttributes( { minHeight: newMinHeight } );
+						setTemporaryMinHeight( null );
+					} }
+					showHandle={ isSelected }
+				/>
+				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+					// Used only to programmatically check if the image is dark or not
+					<img
+						ref={ isDarkElement }
+						aria-hidden
+						alt=""
+						style={ {
+							display: 'none',
 						} }
-						showHandle={ isSelected }
+						src={ url }
 					/>
-					{ IMAGE_BACKGROUND_TYPE === backgroundType && (
-						// Used only to programmatically check if the image is dark or not
-						<img
-							ref={ isDarkElement }
-							aria-hidden
-							alt=""
-							style={ {
-								display: 'none',
-							} }
-							src={ url }
-						/>
-					) }
-					{ url && gradientValue && dimRatio !== 0 && (
-						<span
-							aria-hidden="true"
-							className={ classnames(
-								'wp-block-cover__gradient-background',
-								gradientClass
-							) }
-							style={ { background: gradientValue } }
-						/>
-					) }
-					{ VIDEO_BACKGROUND_TYPE === backgroundType && (
-						<video
-							ref={ isDarkElement }
-							className="wp-block-cover__video-background"
-							autoPlay
-							muted
-							loop
-							src={ url }
-						/>
-					) }
-					<InnerBlocks
-						__experimentalTagName="div"
-						__experimentalPassedProps={ {
-							className: 'wp-block-cover__inner-container',
-						} }
-						template={ INNER_BLOCKS_TEMPLATE }
+				) }
+				{ url && gradientValue && dimRatio !== 0 && (
+					<span
+						aria-hidden="true"
+						className={ classnames(
+							'wp-block-cover__gradient-background',
+							gradientClass
+						) }
+						style={ { background: gradientValue } }
 					/>
-				</Block.div>
-			</BoxControlVisualizer>
+				) }
+				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+					<video
+						ref={ isDarkElement }
+						className="wp-block-cover__video-background"
+						autoPlay
+						muted
+						loop
+						src={ url }
+					/>
+				) }
+				<InnerBlocks
+					__experimentalTagName="div"
+					__experimentalPassedProps={ {
+						className: 'wp-block-cover__inner-container',
+					} }
+					template={ INNER_BLOCKS_TEMPLATE }
+				/>
+			</Block.div>
 		</>
 	);
 }
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index 9564dd153cbb10..d15f35c8cb80c4 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -23,6 +23,12 @@ export const settings = {
 		'Add an image or video with a text overlay — great for headers.'
 	),
 	icon,
+	supports: {
+		align: true,
+		html: false,
+		lightBlockWrapper: true,
+		__experimentalPadding: true,
+	},
 	example: {
 		attributes: {
 			customOverlayColor: '#065174',
diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
index e6693ef9916808..f1d67edd06731f 100644
--- a/packages/components/src/box-control/styles/box-control-visualizer-styles.js
+++ b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 
 /**
@@ -8,9 +9,24 @@ import styled from '@emotion/styled';
  */
 import { color, rtl } from '../../utils/style-mixins';
 
+const containerPositionStyles = ( { isPositionAbsolute } ) => {
+	if ( ! isPositionAbsolute ) return '';
+
+	return css`
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: 1;
+	`;
+};
+
 export const Container = styled.div`
 	box-sizing: border-box;
 	position: relative;
+	${containerPositionStyles};
 `;
 
 export const Side = styled.div`
diff --git a/packages/components/src/box-control/visualizer.js b/packages/components/src/box-control/visualizer.js
index 4213c79d57d388..5792157777b62f 100644
--- a/packages/components/src/box-control/visualizer.js
+++ b/packages/components/src/box-control/visualizer.js
@@ -20,8 +20,13 @@ export default function BoxControlVisualizer( {
 	values: valuesProp = DEFAULT_VALUES,
 	...props
 } ) {
+	const isPositionAbsolute = ! children;
 	return (
-		<Container { ...props } aria-hidden="true">
+		<Container
+			{ ...props }
+			isPositionAbsolute={ isPositionAbsolute }
+			aria-hidden="true"
+		>
 			<Sides values={ valuesProp } />
 			{ children }
 		</Container>

From 550b7425b8f220437173acdc9d22037e7e67861d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 12:02:27 -0400
Subject: [PATCH 096/103] Move __experimentalPadding config to block.json

---
 packages/block-library/src/cover/block.json | 3 ++-
 packages/block-library/src/cover/index.js   | 6 ------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index c0ef0dcd5eb086..9953285deaa147 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -48,6 +48,7 @@
 	"supports": {
 		"align": true,
 		"html": false,
-		"lightBlockWrapper": true
+		"lightBlockWrapper": true,
+		"__experimentalPadding": true
 	}
 }
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index d15f35c8cb80c4..9564dd153cbb10 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -23,12 +23,6 @@ export const settings = {
 		'Add an image or video with a text overlay — great for headers.'
 	),
 	icon,
-	supports: {
-		align: true,
-		html: false,
-		lightBlockWrapper: true,
-		__experimentalPadding: true,
-	},
 	example: {
 		attributes: {
 			customOverlayColor: '#065174',

From b87de71d6e0506c058511092368ed5df8850d4c7 Mon Sep 17 00:00:00 2001
From: Jon Quach <hello@jonquach.com>
Date: Thu, 21 May 2020 12:08:03 -0400
Subject: [PATCH 097/103] Removing leftover comments

---
 packages/components/src/box-control/icon.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
index 044c7a13765dfd..15249c01e4db13 100644
--- a/packages/components/src/box-control/icon.js
+++ b/packages/components/src/box-control/icon.js
@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 /**
  * Internal dependencies
  */

From 46f48acc95e3bd298d8d23e58847cb4a89f5e82c Mon Sep 17 00:00:00 2001
From: Jon Quach <hello@jonquach.com>
Date: Thu, 21 May 2020 12:41:08 -0400
Subject: [PATCH 098/103] Adjust spacing for import comments

---
 packages/components/src/box-control/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 3cc62d9d291e71..ceb610e44d9b78 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -2,12 +2,14 @@
  * External dependencies
  */
 import { noop } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */

From 1cf533a71941094ffa51a01d24615105304c17a3 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 1 Jun 2020 12:42:46 -0400
Subject: [PATCH 099/103] Fix padding theme setting check

---
 .../components/spacing-panel-control/index.js | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js
index 8d74dddd069752..866e31e0ed9fd0 100644
--- a/packages/block-editor/src/components/spacing-panel-control/index.js
+++ b/packages/block-editor/src/components/spacing-panel-control/index.js
@@ -1,23 +1,27 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../inspector-controls';
-import useEditorFeature from '../use-editor-feature';
 
 export default function SpacingPanelControl( { children, ...props } ) {
-	const isSpacingEnabled = useEditorFeature(
-		'__experimentalEnableCustomSpacing'
-	);
-	// TODO: Renable the proper guard
-	// This is temporarily disabled for testing purposes.
-	if ( isSpacingEnabled ) return null;
-	// if ( ! isSpacingEnabled ) return null;
+	const isSpacingEnabled = useSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		return get( getSettings(), '__experimentalEnableCustomSpacing' );
+	} );
+
+	if ( ! isSpacingEnabled ) return null;
 
 	return (
 		<InspectorControls { ...props }>

From 0d5f6474317eb36aa0240165c500622980564ba8 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 1 Jun 2020 13:00:25 -0400
Subject: [PATCH 100/103] Add sibling usage for BoxControl.Visualizer in
 README.md

---
 packages/components/src/box-control/README.md | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index b8768a4ccbb402..e4105871042dc3 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -59,6 +59,39 @@ const Example = () => {
 };
 ```
 
+Alternatively, the `<Visualizer>` can be nested as a sibling to the component you would like visualized. Using `<Visualizer />` in this manner will require the parent element having a `position` style.
+
+```jsx
+import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { useState } from '@wordpress/compose';
+
+import MyComponent from './my-component';
+
+const { Visualizer } = BoxControl;
+
+const Example = () => {
+	const [ values, setValues ] = useState( {
+		top: '50px',
+		left: '10%',
+		right: '10%',
+		bottom: '50px',
+	} );
+
+	return (
+		<>
+			<BoxControl
+				value={ value }
+				onChange={ ( nextValues ) => setValues( nextValues ) }
+			/>
+			<div style={ { position: 'relative' } }>
+				<Visualizer />
+				<MyComponent />
+			</div>
+		</>
+	);
+};
+```
+
 ## Props
 
 ### inputProps

From f2639060c86d8e42a67a32afaf7988b4c81059f8 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 2 Jun 2020 11:26:50 -0400
Subject: [PATCH 101/103] Add more content + image examples to Flex README.md

---
 packages/components/src/flex/README.md | 31 +++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
index 1fcaf566b9a568..ce6feb80360ab8 100644
--- a/packages/components/src/flex/README.md
+++ b/packages/components/src/flex/README.md
@@ -1,6 +1,6 @@
 # Flex
 
-Flex is a layout-based components, which provides a convenient way to align user-interfaces.
+Flex is a layout-based component, which provides a convenient way to align user-interfaces.
 
 ## Usage
 
@@ -22,6 +22,35 @@ const Example = () => {
 };
 ```
 
+The most common use-case for `<Flex />` would be to automatically align two (or more) child items of varying sizes. By default, `<Flex />` would vertically center align them, and evenly spread the inner content horizontally, starting at the edges.
+
+Child items can be added directly. However, it is recommended that they are wrapped with `<Flex.Item />` (which helps normalize layout styles).
+
+![Flex aligning and distributing 2 items of varying heights](https://make.wordpress.org/design/files/2020/06/flex-2-items.png)
+
+Adding more than 2 child items will spread them across with even gaps in between each item.
+
+![Flex aligning 3 items](https://make.wordpress.org/design/files/2020/06/flex-3-items.png)
+
+### Items and Blocks
+
+`<Flex />` provides 2 child components:
+
+-   `<Flex.Item />`
+-   `<Flex.Block />`
+
+These components can be used in combination to achieve flexible adaptive layouts.
+
+`<Flex.Block />` components will grow their widths to take up the remaining space within the `<Flex />` wrapper.
+
+![Flex item with block](https://make.wordpress.org/design/files/2020/06/flex-item-block.png)
+
+`<Flex />` automatically provides "gap" spacing in-between all child items. This value can be adjusted using the `gap` component prop.
+
+`<Flex.Item />` and `<Flex.Block />` can be used in combination.
+
+![Multiple Flex items with Flex block](https://make.wordpress.org/design/files/2020/06/flex-item-block-item.png)
+
 ## Sub-Components
 
 This component provides a collection of sub-component that can be used to compose various interfaces.

From f3d22fae79edd895a0d3f375ad7416cb55d30c46 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 2 Jun 2020 11:29:10 -0400
Subject: [PATCH 102/103] Remove experimental prefix for Flex

---
 packages/components/src/flex/README.md | 2 +-
 packages/components/src/index.js       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
index ce6feb80360ab8..f7196948d92f31 100644
--- a/packages/components/src/flex/README.md
+++ b/packages/components/src/flex/README.md
@@ -5,7 +5,7 @@ Flex is a layout-based component, which provides a convenient way to align user-
 ## Usage
 
 ```jsx
-import { __experimentalFlex as Flex } from '@wordpress/components';
+import { Flex } from '@wordpress/components';
 import { Icon, wordpress } from '@wordpress/icons';
 
 const Example = () => {
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index f954e45feb80e7..7149a87aa96245 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -44,9 +44,9 @@ export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as ExternalLink } from './external-link';
-export { default as __experimentalFlex } from './flex';
-export { default as __experimentalFlexBlock } from './flex/block';
-export { default as __experimentalFlexItem } from './flex/item';
+export { default as Flex } from './flex';
+export { default as FlexBlock } from './flex/block';
+export { default as FlexItem } from './flex/item';
 export { default as FocalPointPicker } from './focal-point-picker';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';

From dbc99cec1425f0bf5cc94472bdf1fbcc2809da0b Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 2 Jun 2020 13:13:52 -0400
Subject: [PATCH 103/103] Refactor Flex sub-components to be used/exported
 without static attachment

Also lint/format files
---
 packages/components/src/box-control/index.js  | 22 ++++-----
 .../styles/box-control-icon-styles.js         |  2 +-
 .../box-control/styles/box-control-styles.js  |  6 +--
 .../styles/box-control-visualizer-styles.js   | 12 ++---
 packages/components/src/flex/README.md        | 26 +++++-----
 packages/components/src/flex/flex.js          | 48 -------------------
 packages/components/src/flex/index.js         | 45 +++++++++++++++--
 packages/components/src/flex/stories/index.js |  2 +-
 .../components/src/flex/styles/flex-styles.js | 12 ++---
 9 files changed, 82 insertions(+), 93 deletions(-)
 delete mode 100644 packages/components/src/flex/flex.js

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index ceb610e44d9b78..387fd317563f35 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Button from '../button';
-import { Flex } from '../flex';
+import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import BoxControlIcon from './icon';
@@ -93,15 +93,15 @@ export default function BoxControl( {
 	return (
 		<Root id={ id } role="region" aria-labelledby={ headingId }>
 			<Header className="component-box-control__header">
-				<Flex.Item>
+				<FlexItem>
 					<Text
 						id={ headingId }
 						className="component-box-control__label"
 					>
 						{ label }
 					</Text>
-				</Flex.Item>
-				<Flex.Item>
+				</FlexItem>
+				<FlexItem>
 					<Button
 						className="component-box-control__reset-button"
 						isSecondary
@@ -111,23 +111,23 @@ export default function BoxControl( {
 					>
 						Reset
 					</Button>
-				</Flex.Item>
+				</FlexItem>
 			</Header>
 			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
-				<Flex.Item>
+				<FlexItem>
 					<BoxControlIcon side={ side } />
-				</Flex.Item>
+				</FlexItem>
 				{ isLinked && (
-					<Flex.Block>
+					<FlexBlock>
 						<AllInputControl { ...inputControlProps } />
-					</Flex.Block>
+					</FlexBlock>
 				) }
-				<Flex.Item>
+				<FlexItem>
 					<LinkedButton
 						onClick={ toggleLinked }
 						isLinked={ isLinked }
 					/>
-				</Flex.Item>
+				</FlexItem>
 			</HeaderControlWrapper>
 			{ ! isLinked && <InputControls { ...inputControlProps } /> }
 		</Root>
diff --git a/packages/components/src/box-control/styles/box-control-icon-styles.js b/packages/components/src/box-control/styles/box-control-icon-styles.js
index dae56d7619a96f..3443458d262dc0 100644
--- a/packages/components/src/box-control/styles/box-control-icon-styles.js
+++ b/packages/components/src/box-control/styles/box-control-icon-styles.js
@@ -33,7 +33,7 @@ const Stroke = styled.span`
 	display: block;
 	pointer-events: none;
 	position: absolute;
-	${strokeFocus};
+	${ strokeFocus };
 `;
 
 const VerticalStroke = styled( Stroke )`
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index efecdb24c1fc0d..78cf6ceb9a6968 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -18,7 +18,7 @@ export const Root = styled.div`
 `;
 
 export const Header = styled( Flex )`
-	color: ${color( 'ui.label' )};
+	color: ${ color( 'ui.label' ) };
 	padding-bottom: 8px;
 `;
 
@@ -66,6 +66,6 @@ const unitControlMarginStyles = ( { isFirst } ) => {
 
 export const UnitControl = styled( BaseUnitControl )`
 	max-width: 60px;
-	${unitControlBorderRadiusStyles};
-	${unitControlMarginStyles};
+	${ unitControlBorderRadiusStyles };
+	${ unitControlMarginStyles };
 `;
diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
index f1d67edd06731f..0b0e2b614fbfe3 100644
--- a/packages/components/src/box-control/styles/box-control-visualizer-styles.js
+++ b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
@@ -26,12 +26,12 @@ const containerPositionStyles = ( { isPositionAbsolute } ) => {
 export const Container = styled.div`
 	box-sizing: border-box;
 	position: relative;
-	${containerPositionStyles};
+	${ containerPositionStyles };
 `;
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${color( 'ui.brand' )};
+	background: ${ color( 'ui.brand' ) };
 	filter: brightness( 1 );
 	opacity: 0;
 	position: absolute;
@@ -39,11 +39,11 @@ export const Side = styled.div`
 	transition: opacity 120ms linear;
 	z-index: 1;
 
-	${( { isActive } ) =>
+	${ ( { isActive } ) =>
 		isActive &&
 		`
 		opacity: 0.3;
-	`}
+	` }
 `;
 
 export const TopView = styled( Side )`
@@ -55,7 +55,7 @@ export const TopView = styled( Side )`
 export const RightView = styled( Side )`
 	top: 0;
 	bottom: 0;
-	${rtl( { right: 0 } )};
+	${ rtl( { right: 0 } ) };
 `;
 
 export const BottomView = styled( Side )`
@@ -67,5 +67,5 @@ export const BottomView = styled( Side )`
 export const LeftView = styled( Side )`
 	top: 0;
 	bottom: 0;
-	${rtl( { left: 0 } )};
+	${ rtl( { left: 0 } ) };
 `;
diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
index f7196948d92f31..8084352d06a887 100644
--- a/packages/components/src/flex/README.md
+++ b/packages/components/src/flex/README.md
@@ -5,18 +5,18 @@ Flex is a layout-based component, which provides a convenient way to align user-
 ## Usage
 
 ```jsx
-import { Flex } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Icon, wordpress } from '@wordpress/icons';
 
 const Example = () => {
 	return (
 		<Flex>
-			<Flex.Item>
+			<FlexItem>
 				<Icon icon={ wordpress } />
-			</Flex.Item>
-			<Flex.Block>
+			</FlexItem>
+			<FlexBlock>
 				<h2>WordPress</h2>
-			</Flex.Block>
+			</FlexBlock>
 		</Flex>
 	);
 };
@@ -24,7 +24,7 @@ const Example = () => {
 
 The most common use-case for `<Flex />` would be to automatically align two (or more) child items of varying sizes. By default, `<Flex />` would vertically center align them, and evenly spread the inner content horizontally, starting at the edges.
 
-Child items can be added directly. However, it is recommended that they are wrapped with `<Flex.Item />` (which helps normalize layout styles).
+Child items can be added directly. However, it is recommended that they are wrapped with `<FlexItem />` (which helps normalize layout styles).
 
 ![Flex aligning and distributing 2 items of varying heights](https://make.wordpress.org/design/files/2020/06/flex-2-items.png)
 
@@ -34,20 +34,20 @@ Adding more than 2 child items will spread them across with even gaps in between
 
 ### Items and Blocks
 
-`<Flex />` provides 2 child components:
+`<Flex />` provides 2 sub-components:
 
--   `<Flex.Item />`
--   `<Flex.Block />`
+-   `<FlexItem />`
+-   `<FlexBlock />`
 
 These components can be used in combination to achieve flexible adaptive layouts.
 
-`<Flex.Block />` components will grow their widths to take up the remaining space within the `<Flex />` wrapper.
+`<FlexBlock />` components will grow their widths to take up the remaining space within the `<Flex />` wrapper.
 
 ![Flex item with block](https://make.wordpress.org/design/files/2020/06/flex-item-block.png)
 
 `<Flex />` automatically provides "gap" spacing in-between all child items. This value can be adjusted using the `gap` component prop.
 
-`<Flex.Item />` and `<Flex.Block />` can be used in combination.
+`<FlexItem />` and `<FlexBlock />` can be used in combination.
 
 ![Multiple Flex items with Flex block](https://make.wordpress.org/design/files/2020/06/flex-item-block-item.png)
 
@@ -55,11 +55,11 @@ These components can be used in combination to achieve flexible adaptive layouts
 
 This component provides a collection of sub-component that can be used to compose various interfaces.
 
-### `Flex.Block`
+### `FlexBlock`
 
 A layout component that expands to fit the remaining space of `Flex`.
 
-### `Flex.Item`
+### `FlexItem`
 
 A layout component to contain items of a fixed width within `Flex`.
 
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex.js
deleted file mode 100644
index f07ed15b90cc26..00000000000000
--- a/packages/components/src/flex/flex.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Flex as BaseFlex } from './styles/flex-styles';
-import Block from './block';
-import Item from './item';
-
-function Flex(
-	{
-		align = 'center',
-		className,
-		gap = 2,
-		justify = 'space-between',
-		isReversed = false,
-		...props
-	},
-	ref
-) {
-	const classes = classnames( 'components-flex', className );
-
-	return (
-		<BaseFlex
-			{ ...props }
-			align={ align }
-			className={ classes }
-			ref={ ref }
-			gap={ gap }
-			justify={ justify }
-			isReversed={ isReversed }
-		/>
-	);
-}
-
-const ForwardedComponent = forwardRef( Flex );
-ForwardedComponent.Block = Block;
-ForwardedComponent.Item = Item;
-
-export default ForwardedComponent;
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js
index 174da20e5be467..98f188db0254dc 100644
--- a/packages/components/src/flex/index.js
+++ b/packages/components/src/flex/index.js
@@ -1,10 +1,47 @@
-export { default as Flex } from './flex';
-export { default as FlexBlock } from './block';
-export { default as FlexItem } from './item';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Flex from './flex';
+import { Flex as BaseFlex } from './styles/flex-styles';
+
+export { default as FlexBlock } from './block';
+export { default as FlexItem } from './item';
+
+function FlexComponent(
+	{
+		align = 'center',
+		className,
+		gap = 2,
+		justify = 'space-between',
+		isReversed = false,
+		...props
+	},
+	ref
+) {
+	const classes = classnames( 'components-flex', className );
+
+	return (
+		<BaseFlex
+			{ ...props }
+			align={ align }
+			className={ classes }
+			ref={ ref }
+			gap={ gap }
+			justify={ justify }
+			isReversed={ isReversed }
+		/>
+	);
+}
+
+export const Flex = forwardRef( FlexComponent );
 
 export default Flex;
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
index 1408270a11c855..919eb29fd4267e 100644
--- a/packages/components/src/flex/stories/index.js
+++ b/packages/components/src/flex/stories/index.js
@@ -13,7 +13,7 @@ import { arrowLeft } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../../button';
-import Flex from '../flex';
+import Flex from '../index';
 import FlexBlock from '../block';
 import FlexItem from '../item';
 
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
index 50bfbfd087b58d..fddb2c975edec2 100644
--- a/packages/components/src/flex/styles/flex-styles.js
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -40,10 +40,10 @@ const gapStyle = ( { gap, isReversed } ) => {
 
 	return css`
 		> * {
-			${padding}: ${value}px;
+			${ padding }: ${ value }px;
 
 			&:last-child {
-				${padding}: 0;
+				${ padding }: 0;
 			}
 		}
 	`;
@@ -61,10 +61,10 @@ export const Flex = styled.div`
 	box-sizing: border-box;
 	display: flex;
 
-	${alignStyle};
-	${justifyStyle};
-	${gapStyle};
-	${reversedStyles};
+	${ alignStyle };
+	${ justifyStyle };
+	${ gapStyle };
+	${ reversedStyles };
 `;
 
 export const Item = styled.div`