diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 95fcc006b32a1..80ba60c6604fe 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 5fe2abce1b411..e2c96eaa9ffc0 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 = ( + + + } label={ __( 'Border width' ) } hideLabelFromVision diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index a5a9e054bc37d..fd0fc0a5c4553 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 }