Components: Decrease standard padding to 12px (WordPress#64708)

* Components: Decrease standard padding to 12px * Fixup * Update snapshots * Add changelog * Fixup Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jasmussen <[email protected]>
bph · Aug 31, 2024 · e1deb69 · e1deb69
1 parent 59bd78f
commit e1deb69
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 55 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,29 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   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)
+    -   `CustomSelectControl`
+    -   `CustomSelectControlV2`
+    -   `DateTimePicker` (on the selects and inputs)
+    -   `DimensionControl`
+    -   `FocalPointPicker` (on the inputs)
+    -   `FontSizePicker` (on the custom inputs)
+    -   `GradientPicker` (on the selects and inputs)
+    -   `InputControl`
+    -   `NumberControl`
+    -   `QueryControls` (on the selects and inputs)
+    -   `RangeControl` (on the inputs)
+    -   `SearchControl`
+    -   `SelectControl`
+    -   `TextControl`
+    -   `TimePicker` (on the inputs)
+    -   `TreeSelect`
+    -   `UnitControl`
+
 ### Internal
 
 -   `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)).

diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
@@ -13,11 +13,10 @@ import { __ } from '@wordpress/i18n';
  */
 import { InputControl } from '../input-control';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 import type { HexInputProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {
@@ -48,14 +47,11 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	return (
 		<InputControl
 			prefix={
-				<Spacer
-					as={ Text }
-					marginLeft={ space( 4 ) }
-					color={ COLORS.theme.accent }
-					lineHeight={ 1 }
-				>
-					#
-				</Spacer>
+				<InputControlPrefixWrapper>
+					<Text color={ COLORS.theme.accent } lineHeight={ 1 }>
+						#
+					</Text>
+				</InputControlPrefixWrapper>
 			}
 			value={ color.toHex().slice( 1 ).toUpperCase() }
 			onChange={ handleChange }

diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
@@ -3,11 +3,10 @@
  */
 import { HStack } from '../h-stack';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { InputWithSliderProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const InputWithSlider = ( {
 	min,
@@ -39,14 +38,11 @@ export const InputWithSlider = ( {
 				value={ value }
 				onChange={ onNumberControlChange }
 				prefix={
-					<Spacer
-						as={ Text }
-						paddingLeft={ space( 4 ) }
-						color={ COLORS.theme.accent }
-						lineHeight={ 1 }
-					>
-						{ abbreviation }
-					</Spacer>
+					<InputControlPrefixWrapper>
+						<Text color={ COLORS.theme.accent } lineHeight={ 1 }>
+							{ abbreviation }
+						</Text>
+					</InputControlPrefixWrapper>
 				}
 				spinControls="none"
 				size="__unstable-large"

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -21,9 +21,9 @@ const ANIMATION_PARAMS = {
 };
 
 const INLINE_PADDING = {
-	compact: 8, // space(2)
-	small: 8, // space(2)
-	default: 16, // space(4)
+	compact: CONFIG.controlPaddingXSmall,
+	small: CONFIG.controlPaddingXSmall,
+	default: CONFIG.controlPaddingX,
 };
 
 const getSelectSize = (

diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -158,7 +158,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-21 {
   margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  padding-right: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -440,7 +440,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-21 {
   margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  padding-right: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -732,7 +732,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-21 {
   margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  padding-right: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -1036,7 +1036,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-21 {
   margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  padding-right: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;

diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
@@ -96,8 +96,8 @@ function InputBase(
 	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
-			InputControlPrefixWrapper: { paddingLeft },
-			InputControlSuffixWrapper: { paddingRight },
+			InputControlPrefixWrapper: { paddingLeft: `${ paddingLeft }px` },
+			InputControlSuffixWrapper: { paddingRight: `${ paddingRight }px` },
 		};
 	}, [ paddingLeft, paddingRight ] );
 

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -14,7 +14,6 @@ import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
-import { space } from '../../utils/space';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -188,29 +187,29 @@ export const getSizeConfig = ( {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		compact: {
 			height: 32,
 			lineHeight: 1,
 			minHeight: 32,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 	};
 

diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
@@ -105,12 +105,12 @@ const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight
 
 export const itemSizes = {
 	small: css`
-		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall };
+		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }px;
 	`,
 	medium: css`
-		padding: ${ paddingY } ${ CONFIG.controlPaddingX };
+		padding: ${ paddingY } ${ CONFIG.controlPaddingX }px;
 	`,
 	large: css`
-		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge };
+		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }px;
 	`,
 };
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -12,7 +12,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -25,7 +25,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -45,7 +45,7 @@ Snapshot Diff:
     >
       <div
 -       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
++       class="components-item css-sbyvbg-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS, rtl } from '../../utils';
+import { COLORS, rtl, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
@@ -108,10 +108,10 @@ const sizePaddings = ( {
 	selectSize = 'default',
 }: SelectProps ) => {
 	const padding = {
-		default: 16,
-		small: 8,
-		compact: 8,
-		'__unstable-large': 16,
+		default: CONFIG.controlPaddingX,
+		small: CONFIG.controlPaddingXSmall,
+		compact: CONFIG.controlPaddingXSmall,
+		'__unstable-large': CONFIG.controlPaddingX,
 	};
 
 	if ( ! __next40pxDefaultSize ) {

diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
@@ -23,7 +23,8 @@
 
 		// Subtract 1px to account for the border, which isn't included on the element
 		// on newer components like InputControl, SelectControl, etc.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
+		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
 	}
 }
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
@@ -5,14 +5,16 @@ import { space } from './space';
 import { COLORS } from './colors-values';
 
 const CONTROL_HEIGHT = '36px';
-const CONTROL_PADDING_X = '12px';
 
 const CONTROL_PROPS = {
 	controlSurfaceColor: COLORS.white,
 	controlTextActiveColor: COLORS.theme.accent,
-	controlPaddingX: CONTROL_PADDING_X,
-	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
-	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
+
+	// These values should be shared with TextControl.
+	controlPaddingX: 12,
+	controlPaddingXSmall: 8,
+	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
+
 	controlBackgroundColor: COLORS.white,
 	controlBoxShadow: 'transparent',
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,