feat: improve customizer search visibility (#4456)

* feat: improve customizer search visibility

Author: HardeepAsrani

assets/apps/customizer-controls/src/customizer-search/MainSearch.tsx

@@ -1,6 +1,5 @@
 import { createPortal } from '@wordpress/element';
 import React, { useState } from 'react';
-import SearchToggle from './SearchToggle';
 import SearchComponent, { Control } from './SearchComponent';
 import SearchResults from './SearchResults';
 
@@ -20,23 +19,13 @@ type MainSearchProps = {
  * @class
  */
 const MainSearch: React.FC<MainSearchProps> = ({ search, button, results }) => {
-	const [isOpened, setIsOpened] = useState(false);
 	const [query, setQuery] = useState('');
 	const [matchResults, setMatchResults] = useState([] as Control[]);
 
 	return (
 		<>
-			{createPortal(
-				<SearchToggle
-					onToggle={() => {
-						setIsOpened(!isOpened);
-					}}
-				/>,
-				button
-			)}
 			{createPortal(
 				<SearchComponent
-					isOpened={isOpened}
 					search={query}
 					setSearch={setQuery}
 					matchResults={matchResults}

assets/apps/customizer-controls/src/customizer-search/SearchComponent.tsx

@@ -60,7 +60,6 @@ declare global {
  * Type SearchComponentProps
  */
 type SearchComponentProps = {
-	isOpened: boolean;
 	search: string;
 	setSearch: (value: string) => void;
 	matchResults: Control[];
@@ -75,7 +74,6 @@ type SearchComponentProps = {
  * @class
  */
 const SearchComponent: React.FC<SearchComponentProps> = ({
-	isOpened,
 	search,
 	setSearch,
 	matchResults,
@@ -128,24 +126,6 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
 		});
 	}, []);
 
-	/**
-	 * This `useEffect()` is being used to listen for the toggleEvent
-	 * from `SearchToggle` component.
-	 */
-	useEffect(() => {
-		if (isOpened) {
-			document
-				.getElementById('neve-customize-search-field')
-				?.classList.add('visible');
-			document.getElementById('nv-customizer-search-input')?.focus();
-		} else {
-			document
-				.getElementById('neve-customize-search-field')
-				?.classList.remove('visible');
-			clearField();
-		}
-	}, [isOpened]);
-
 	useEffect(() => {
 		if (search === '') {
 			if (customizerPanels?.classList.contains('search-not-found')) {
@@ -217,15 +197,12 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
 	return (
 		<>
 			<span className="accordion-section">
-				<span className="search-input">
-					{__('Search', 'neve') +
-						' ' +
-						__('Settings', 'neve').toLowerCase()}
-				</span>
 				<span className="nv-search-wrap">
 					<input
 						type="text"
-						placeholder={__('Search', 'neve')}
+						placeholder={
+							__('Search', 'neve') + ' ' + __('Settings', 'neve')
+						}
 						id="nv-customizer-search-input"
 						className="nv-customizer-search-input"
 						value={search}

assets/apps/customizer-controls/src/customizer-search/SearchToggle.tsx

@@ -1,27 +1,10 @@
 #neve-customize-search {
-  position: absolute;
-  top: 40px;
-  right: 0;
-  width: 40px;
-  height: 28px;
-  overflow: hidden;
-  z-index: 1000;
-
-  button {
-    text-decoration: none;
-    &:focus:not(:disabled) {
-      box-shadow: none;
-      outline: none;
-    }
-  }
+  display: none;
 }
 
 
 #neve-customize-search-field {
-  display: none;
-  &.visible {
-    display: block;
-  }
+  display: block;
 
   .accordion-section {
     background-color: #fff;
@@ -37,7 +20,6 @@
   .nv-search-wrap {
     display: flex;
     align-items: center;
-    margin-top: 6px;
   }
 
   .nv-customizer-search-input {