From d6b1eb98d57fdd3fc24ffe42a6d5c60de9902309 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 31 Aug 2024 00:39:43 +0900
Subject: [PATCH] InputControl: Tighten gap between input and prefix/suffix
 (#64908)

* InputControl: Tighten padding between input and prefix/suffix

* Add changelog

* BorderControl: Add back padding

* Add more components to changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  9 +++++
 .../border-control/component.tsx              | 39 +++++++++++--------
 .../components/src/input-control/index.tsx    |  4 +-
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 95fcc006b32a1b..80ba60c6604fe5 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -24,6 +24,15 @@
 -   `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`
+    -   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)
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
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 }