Restore original icon layout

WordPress · Feb 6, 2024 · 9c18f1e · 9c18f1e
1 parent e91440c
commit 9c18f1e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 35 deletions.
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
@@ -19,11 +19,7 @@ import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { SearchControlProps, SuffixItemProps } from './types';
 import type { ForwardedRef } from 'react';
 import { ContextSystemProvider } from '../context';
-import {
-	SearchIconWrapper,
-	StyledInputControl,
-	CloseIconWrapper,
-} from './styles';
+import { StyledInputControl, SuffixItemWrapper } from './styles';
 
 function SuffixItem( {
 	searchRef,
@@ -32,7 +28,7 @@ function SuffixItem( {
 	onClose,
 }: SuffixItemProps ) {
 	if ( ! onClose && ! value ) {
-		return null;
+		return <Icon icon={ search } />;
 	}
 
 	const onReset = () => {
@@ -41,14 +37,12 @@ function SuffixItem( {
 	};
 
 	return (
-		<CloseIconWrapper>
-			<Button
-				size="small"
-				icon={ closeSmall }
-				label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }
-				onClick={ onClose ?? onReset }
-			/>
-		</CloseIconWrapper>
+		<Button
+			size="small"
+			icon={ closeSmall }
+			label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }
+			onClick={ onClose ?? onReset }
+		/>
 	);
 }
 
@@ -109,18 +103,15 @@ function UnforwardedSearchControl(
 				autoComplete="off"
 				placeholder={ placeholder }
 				value={ value || '' }
-				prefix={
-					<SearchIconWrapper>
-						<Icon icon={ search } />
-					</SearchIconWrapper>
-				}
 				suffix={
-					<SuffixItem
-						searchRef={ searchRef }
-						value={ value }
-						onChange={ onChange }
-						onClose={ onClose }
-					/>
+					<SuffixItemWrapper size={ size }>
+						<SuffixItem
+							searchRef={ searchRef }
+							value={ value }
+							onChange={ onChange }
+							onClose={ onClose }
+						/>
+					</SuffixItemWrapper>
 				}
 				{ ...restProps }
 			/>

diff --git a/packages/components/src/search-control/styles.ts b/packages/components/src/search-control/styles.ts
@@ -9,25 +9,23 @@ import styled from '@emotion/styled';
 import { space } from '../utils/space';
 import InputControl from '../input-control';
 import { COLORS } from '../utils';
+import type { SearchControlProps } from './types';
 
-const INLINE_PADDING_SPACE = 1;
+const inlinePadding = ( {
+	size,
+}: Required< Pick< SearchControlProps, 'size' > > ) => {
+	return space( size === 'compact' ? 1 : 2 );
+};
 
-export const SearchIconWrapper = styled.div`
+export const SuffixItemWrapper = styled.div`
 	display: flex;
-	margin-inline-end: ${ space( INLINE_PADDING_SPACE * -1 ) };
-	padding-inline-start: ${ space( INLINE_PADDING_SPACE ) };
+	padding-inline-end: ${ inlinePadding };
 
 	svg {
 		fill: currentColor;
 	}
 `;
 
-export const CloseIconWrapper = styled.div`
-	display: flex;
-	margin-inline-start: ${ space( INLINE_PADDING_SPACE * -1 ) };
-	padding-inline-end: ${ space( INLINE_PADDING_SPACE ) };
-`;
-
 export const StyledInputControl = styled( InputControl )`
 	input[type='search'] {
 		&::-webkit-search-decoration,