Signup: Use new search for domains signup (#51718)

* Render children into the search area

* Signup: Use new search for domains signup

* Update e2e test selectors for the new component

* Fix focused and other styles and style-lint errors

* Use correct prop for default value

* Move dependency to external

* Fix focus styles for button

Author: sarayourfriend

client/components/domains/register-domain-step/index.jsx

@@ -26,6 +26,7 @@ import { stringify } from 'qs';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 import { withShoppingCart } from '@automattic/shopping-cart';
+import Search from '@automattic/search';
 
 /**
  * Internal dependencies
@@ -44,7 +45,6 @@ import {
 } from 'calypso/lib/domains';
 import { domainAvailability } from 'calypso/lib/domains/constants';
 import { getAvailabilityNotice } from 'calypso/lib/domains/registration/availability-messages';
-import Search from 'calypso/components/search';
 import DomainRegistrationSuggestion from 'calypso/components/domains/domain-registration-suggestion';
 import DomainTransferSuggestion from 'calypso/components/domains/domain-transfer-suggestion';
 import DomainSkipSuggestion from 'calypso/components/domains/domain-skip-suggestion';
@@ -445,13 +445,13 @@ class RegisterDomainStep extends React.Component {
 				<StickyPanel className={ searchBoxClassName }>
 					<CompactCard className="register-domain-step__search-card">
 						<Search
-							additionalClasses={ this.state.clickedExampleSuggestion ? 'is-refocused' : undefined }
+							className={ this.state.clickedExampleSuggestion ? 'is-refocused' : undefined }
 							autoFocus // eslint-disable-line jsx-a11y/no-autofocus
 							delaySearch={ true }
 							delayTimeout={ 1000 }
 							describedBy={ 'step-header' }
 							dir="ltr"
-							initialValue={ this.state.lastQuery }
+							defaultValue={ this.state.lastQuery }
 							value={ this.state.lastQuery }
 							inputLabel={ this.props.translate( 'What would you like your domain name to be?' ) }
 							minLength={ MIN_QUERY_LENGTH }

client/signup/steps/domains/style.scss

@@ -13,7 +13,7 @@
 		margin-bottom: 20px;
 	}
 
-	.search .search__icon-navigation {
+	.search-component .search-component__icon-navigation {
 		background: none;
 	}
 
@@ -22,14 +22,14 @@
 		@include elevation( 2dp );
 	}
 
-	.search.is-open.has-focus {
+	.search-component.is-open.has-focus {
 		border: none;
 		border-radius: 2px;
 		box-shadow: 0 0 0 3px var( --color-accent-light );
 	}
 
 	.search-filters__dropdown-filters {
-		border-radius: 0 3px 3px 0;
+		border-radius: 0 2px 2px 0;
 	}
 
 	.search-filters__dropdown-filters.search-filters__dropdown-filters--is-open {
@@ -38,7 +38,7 @@
 
 	@include breakpoint-deprecated( '<660px' ) {
 		.register-domain-step__search-card,
-		.search.is-open.has-focus {
+		.search-component.is-open.has-focus {
 			border-radius: 0;
 		}
 	}
@@ -56,10 +56,10 @@ body.is-section-signup.is-white-signup {
 	}
 
 	.domains__step-content {
-		.search.is-open.has-focus {
+		.search-component.is-open.has-focus {
 			box-shadow: 0 0 0 2px var( --color-accent );
 			background: var( --color-surface );
-			.search__input {
+			.search-component__input {
 				background: var( --color-surface );
 			}
 		}
@@ -73,19 +73,19 @@ body.is-section-signup.is-white-signup {
 				margin: initial;
 			}
 		}
-		.search__input {
+		.search-component__input {
 			background: $light-white;
 			&::placeholder {
 				color: var( --color-neutral-100 );
 			}
 		}
-		.search.is-open .search__input-fade.ltr::before {
+		.search-component.is-open .search-component__input-fade.ltr::before {
 			display: none;
 		}
-		.search__open-icon {
+		.search-component__open-icon {
 			transform: scaleX( -1 );
 		}
-		.search__close-icon {
+		.search-component__close-icon {
 			display: none;
 		}
 	}

desktop/e2e/tests/lib/pages/signup-steps-page.js

@@ -38,7 +38,7 @@ class SignupStepsPage extends AsyncBaseContainer {
 	}
 
 	async selectDomain( domainName ) {
-		const searchDomainField = By.css( '.search__input' );
+		const searchDomainField = By.css( '.search-component__input' );
 
 		await driverHelper.waitTillPresentAndDisplayed(
 			this.driver,

packages/search/src/search.tsx

@@ -6,7 +6,15 @@
 import { useI18n } from '@wordpress/react-i18n';
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
-import type { Ref, ChangeEvent, FocusEvent, FormEvent, KeyboardEvent, MouseEvent } from 'react';
+import type {
+	ReactNode,
+	Ref,
+	ChangeEvent,
+	FocusEvent,
+	FormEvent,
+	KeyboardEvent,
+	MouseEvent,
+} from 'react';
 import { debounce } from 'lodash';
 
 /**
@@ -50,6 +58,7 @@ type Props = {
 	autoFocus?: boolean;
 	className?: string;
 	compact?: boolean;
+	children?: ReactNode;
 	defaultIsOpen?: boolean;
 	defaultValue?: string;
 	delaySearch?: boolean;
@@ -111,6 +120,7 @@ type ImperativeHandle = {
 
 const InnerSearch = (
 	{
+		children,
 		delaySearch = false,
 		disabled = false,
 		pinned = false,
@@ -428,6 +438,7 @@ const InnerSearch = (
 				{ renderStylingDiv() }
 			</form>
 			{ shouldRenderRightOpenIcon ? renderOpenIcon() : renderCloseButton() }
+			{ children }
 		</div>
 	);
 };

packages/search/src/style.scss

@@ -170,9 +170,9 @@ $input-z-index: 20;
 
 	.components-button {
 		padding: 0;
-	
+
 		&:focus {
-			box-shadow: none;
+			z-index: 9999;
 		}
 	}
 

test/e2e/lib/components/find-a-domain-component.js

@@ -10,7 +10,7 @@ import AsyncBaseContainer from '../async-base-container';
 import * as slackNotifier from '../slack-notifier';
 import * as driverHelper from '../driver-helper.js';
 
-const searchInputSelector = By.className( 'search__input' );
+const searchInputSelector = By.className( 'search-component__input' );
 
 export default class FindADomainComponent extends AsyncBaseContainer {
 	constructor( driver ) {