From a41c9a9e32cd20b1ad5c41c32f44bd1adbc14c25 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 29 Aug 2024 23:51:25 +0900
Subject: [PATCH 1/4] InputControl: Tighten padding between input and
 prefix/suffix

---
 packages/components/src/input-control/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index a5a9e054bc37d8..fd0fc0a5c45536 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -100,8 +100,8 @@ export function UnforwardedInputControl(
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
-					paddingInlineStart={ prefix ? space( 2 ) : undefined }
-					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
+					paddingInlineStart={ prefix ? space( 1 ) : undefined }
+					paddingInlineEnd={ suffix ? space( 1 ) : undefined }
 					ref={ ref }
 					size={ size }
 					stateReducer={ stateReducer }

From 38c94c4d4092b34fe84b780dec13da9c2e1a12ef Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 30 Aug 2024 00:13:01 +0900
Subject: [PATCH 2/4] Add changelog

---
 packages/components/CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ce3fd808e7ed89..1b0a6cbb24da5d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -24,6 +24,12 @@
 -   `UnitControl`: Update unit select styles ([#64712](https://github.com/WordPress/gutenberg/pull/64712)).
 -   `InputControl`: Add variants to prefix/suffix wrappers ([#64824](https://github.com/WordPress/gutenberg/pull/64824)).
 -   `Navigator`: remove location history, simplify internal logic ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
+-   Tighten gap between the main control and the prefix/suffix slot for the following components ([#64908](https://github.com/WordPress/gutenberg/pull/64908)).
+    -   `InputControl`
+    -   `NumberControl`
+    -   `SelectControl`
+    -   `TreeSelect`
+    -   `UnitControl`
 -   Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
     -   `AnglePickerControl`
     -   `ColorPicker` (on the inputs)

From 39e1ea011551a2440b62c49a4a29a2edbcc052e0 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 31 Aug 2024 00:03:41 +0900
Subject: [PATCH 3/4] BorderControl: Add back padding

---
 .../border-control/component.tsx              | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 5fe2abce1b4117..e2c96eaa9ffc0d 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -18,6 +18,7 @@ import { contextConnect } from '../../context';
 import { useBorderControl } from './hook';
 
 import type { BorderControlProps, LabelProps } from '../types';
+import { Spacer } from '../../spacer';
 
 const BorderLabel = ( props: LabelProps ) => {
 	const { label, hideLabelFromVision } = props;
@@ -75,22 +76,28 @@ const UnconnectedBorderControl = (
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
 					prefix={
-						<BorderControlDropdown
-							border={ border }
-							colors={ colors }
-							__unstablePopoverProps={ __unstablePopoverProps }
-							disableCustomColors={ disableCustomColors }
-							enableAlpha={ enableAlpha }
-							enableStyle={ enableStyle }
-							isStyleSettable={ isStyleSettable }
-							onChange={ onBorderChange }
-							previousStyleSelection={ previousStyleSelection }
-							showDropdownHeader={ showDropdownHeader }
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							size={ size }
-						/>
+						<Spacer marginRight={ 1 } marginBottom={ 0 }>
+							<BorderControlDropdown
+								border={ border }
+								colors={ colors }
+								__unstablePopoverProps={
+									__unstablePopoverProps
+								}
+								disableCustomColors={ disableCustomColors }
+								enableAlpha={ enableAlpha }
+								enableStyle={ enableStyle }
+								isStyleSettable={ isStyleSettable }
+								onChange={ onBorderChange }
+								previousStyleSelection={
+									previousStyleSelection
+								}
+								showDropdownHeader={ showDropdownHeader }
+								__experimentalIsRenderedInSidebar={
+									__experimentalIsRenderedInSidebar
+								}
+								size={ size }
+							/>
+						</Spacer>
 					}
 					label={ __( 'Border width' ) }
 					hideLabelFromVision

From 885cfb6c9164e5fb156a8e2b600120c2e940b805 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 31 Aug 2024 00:04:08 +0900
Subject: [PATCH 4/4] Add more components to changelog

---
 packages/components/CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1b0a6cbb24da5d..346ba3991d3ea3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -30,6 +30,9 @@
     -   `SelectControl`
     -   `TreeSelect`
     -   `UnitControl`
+    -   Contains internal visual changes from this PR:
+        -   `AnglePickerControl`
+        -   `ColorPicker`
 -   Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
     -   `AnglePickerControl`
     -   `ColorPicker` (on the inputs)