InputControl: Decrease large default padding if has prefix/suffix (#4…

…2166) * InputControl: Decrease padding when prefix/suffix * UnitControl: Remove padding override * UnitControl: Clean up unused type * Tweak story examples for better RTL support * Add changelog * Update snapshot * Add comment * Fix typo Co-authored-by: Aaron Robertshaw <[email protected]> Co-authored-by: Aaron Robertshaw <[email protected]>
WordPress · Jul 14, 2022 · a979537 · a979537
1 parent c240a35
commit a979537
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 18 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -28,6 +28,10 @@
 
 -   `ToggleGroupControl`: Add large size variant ([#42008](https://github.com/WordPress/gutenberg/pull/42008/)).
 
+### Enhancements
+
+-   `InputControl`: Ensure that the padding between a `prefix`/`suffix` and the text input stays at a reasonable 8px, even in larger size variants ([#42166](https://github.com/WordPress/gutenberg/pull/42166)).
+
 ### Internal
 
 -   `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)).

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
@@ -16,6 +16,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
+import { space } from '../ui/utils/space';
 import { useDraft } from './utils';
 
 const noop = () => {};
@@ -85,6 +86,8 @@ export function UnforwardedInputControl(
 				isPressEnterToChange={ isPressEnterToChange }
 				onKeyDown={ onKeyDown }
 				onValidate={ onValidate }
+				paddingInlineStart={ prefix ? space( 2 ) : undefined }
+				paddingInlineEnd={ suffix ? space( 2 ) : undefined }
 				ref={ ref }
 				setIsFocused={ setIsFocused }
 				size={ size }

diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx
@@ -40,13 +40,13 @@ Default.args = {
 export const WithPrefix = Template.bind( {} );
 WithPrefix.args = {
 	...Default.args,
-	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+	prefix: <span style={ { marginInlineStart: 8 } }>@</span>,
 };
 
 export const WithSuffix = Template.bind( {} );
 WithSuffix.args = {
 	...Default.args,
-	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+	suffix: <button style={ { marginInlineEnd: 4 } }>Send</button>,
 };
 
 export const WithSideLabel = Template.bind( {} );

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -110,6 +110,8 @@ type InputProps = {
 	inputSize?: Size;
 	isDragging?: boolean;
 	dragCursor?: CSSProperties[ 'cursor' ];
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -145,6 +147,7 @@ const sizeStyles = ( {
 	inputSize: size,
 	__next36pxDefaultSize,
 }: InputProps ) => {
+	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
 			height: 36,
@@ -184,6 +187,13 @@ const sizeStyles = ( {
 	return css( style );
 };
 
+const customPaddings = ( {
+	paddingInlineStart,
+	paddingInlineEnd,
+}: InputProps ) => {
+	return css( { paddingInlineStart, paddingInlineEnd } );
+};
+
 const dragStyles = ( { isDragging, dragCursor }: InputProps ) => {
 	let defaultArrowStyles: SerializedStyles | undefined;
 	let activeDragCursorStyles: SerializedStyles | undefined;
@@ -235,6 +245,7 @@ export const Input = styled.input< InputProps >`
 		${ disabledStyles }
 		${ fontSizeStyles }
 		${ sizeStyles }
+		${ customPaddings }
 
 		&::-webkit-input-placeholder {
 			line-height: normal;

diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
@@ -102,6 +102,8 @@ export interface InputFieldProps extends BaseProps {
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >
 	) => void;
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
@@ -152,12 +154,17 @@ export interface InputControlProps
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
-		 * `isFocused` and `setIsFocused` are managed internally by the InputControl, but the rest of the props
-		 * for InputField are passed through.
+		 * `isFocused`, `setIsFocused`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
+		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
-			'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused'
+			| 'stateReducer'
+			| 'prefix'
+			| 'isFocused'
+			| 'setIsFocused'
+			| 'paddingInlineStart'
+			| 'paddingInlineEnd'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }

diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -18,22 +18,13 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
-	size: SelectSize;
 };
 
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	if ( disableUnits ) return '';
-
-	return css`
-		${ rtl( { paddingRight: 8 } )() };
-	`;
-};
-
 const arrowStyles = ( { disableUnits }: InputProps ) => {
 	if ( disableUnits ) return '';
 
@@ -58,7 +49,6 @@ export const ValueInput = styled( NumberControl )`
 			width: 100%;
 
 			${ arrowStyles };
-			${ paddingStyles };
 		}
 	}
 `;

diff --git a/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap b/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap
@@ -10,8 +10,8 @@ Snapshot Diff:
     class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33"
   >
     <div
--     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
-+     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Flex"
     >
@@ -22,7 +22,7 @@ Snapshot Diff:
       >
         <input
           autocomplete="off"
-          class="components-input-control__input css-gzm6eu-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+          class="components-input-control__input css-1vhigq9-Input-dragStyles-fontSizeStyles-sizeStyles-customPaddings em5sgkm5"
 -         id="inspector-input-control-1"
 +         id="inspector-input-control-2"
           inputmode="numeric"