Search Block: Removed components class from icon button and polished …

…css (#33961)

* removed components classes from icon button, polished css

* changed frontend styles to not use editor variables for paddings

* removed variables for colors too

packages/block-library/src/search/edit.js

@@ -27,7 +27,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { search } from '@wordpress/icons';
+import { Icon, search } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -211,7 +211,8 @@ export default function SearchEdit( {
 		const buttonClasses = classnames(
 			'wp-block-search__button',
 			colorProps.className,
-			isButtonPositionInside ? undefined : borderProps.className
+			isButtonPositionInside ? undefined : borderProps.className,
+			buttonUseIcon ? 'has-icon' : undefined
 		);
 		const buttonStyles = {
 			...colorProps.style,
@@ -223,11 +224,13 @@ export default function SearchEdit( {
 		return (
 			<>
 				{ buttonUseIcon && (
-					<Button
-						icon={ search }
+					<button
+						type="button"
 						className={ buttonClasses }
 						style={ buttonStyles }
-					/>
+					>
+						<Icon icon={ search } />
+					</button>
 				) }
 
 				{ ! buttonUseIcon && (

packages/block-library/src/search/editor.scss

@@ -7,25 +7,11 @@
 }
 
 .wp-block-search {
-	.wp-block-search__input {
-		padding: $grid-unit-10;
-	}
-
-	&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-		padding: $grid-unit-05;
-	}
-
 	.wp-block-search__button {
 		height: auto;
 		border-radius: initial;
-
-		// This needs high specificity because it otherwise inherits styles from `components-button`.
-		// stylelint-disable-line no-duplicate-selectors
-		&.wp-block-search__button.wp-block-search__button {
-			padding: 6px 10px;
-			display: flex;
-			align-items: center;
-		}
+		display: flex;
+		align-items: center;
 	}
 
 	&__components-button-group {

packages/block-library/src/search/style.scss

@@ -31,9 +31,10 @@
 	}
 
 	.wp-block-search__input {
+		padding: 8px;
 		flex-grow: 1;
 		min-width: 3em;
-		border: 1px solid $gray-600;
+		border: 1px solid #949494;
 	}
 
 	&.wp-block-search__button-only {
@@ -43,8 +44,8 @@
 	}
 
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-		padding: $grid-unit-05;
-		border: 1px solid $gray-600;
+		padding: 4px;
+		border: 1px solid #949494;
 
 		.wp-block-search__input {
 			border-radius: 0;