Update menu title styles

WordPress · Sep 23, 2020 · 40f37c6 · 40f37c6
1 parent cc9da16
commit 40f37c6
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 53 deletions.
diff --git a/packages/components/src/navigation/menu/menu-title.js b/packages/components/src/navigation/menu/menu-title.js
@@ -8,9 +8,12 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Animate from '../../animate';
 import Button from '../../button';
-import { MenuTitleSearchUI, MenuTitleUI } from '../styles/navigation-styles';
+import {
+	MenuTitleHeadingUI,
+	MenuTitleSearchUI,
+	MenuTitleUI,
+} from '../styles/navigation-styles';
 import TextControl from '../../text-control';
 
 export default function NavigationMenuTitle( {
@@ -30,55 +33,48 @@ export default function NavigationMenuTitle( {
 		setIsSearching( false );
 	};
 
-	if ( isSearching ) {
-		/* translators: placeholder for sidebar search box. %s: menu title */
-		const placeholder = sprintf( __( 'Search in %s' ), title );
-		return (
-			<Animate type="appear" options={ { origin: 'bottom right' } }>
-				{ ( { className: animateClassName } ) => (
-					<div className={ animateClassName }>
-						<MenuTitleSearchUI>
-							<Icon icon={ searchIcon } />
-
-							<TextControl
-								autocomplete="off"
-								// eslint-disable-next-line jsx-a11y/no-autofocus
-								autoFocus
-								onChange={ ( value ) => setSearch( value ) }
-								placeholder={ placeholder }
-								value={ search }
-							/>
-
-							<Button
-								isSmall
-								isTertiary
-								onClick={ onSearchClose }
-							>
-								<Icon icon={ closeSmall } />
-							</Button>
-						</MenuTitleSearchUI>
-					</div>
-				) }
-			</Animate>
-		);
-	}
+	/* translators: placeholder for sidebar search box. %s: menu title */
+	const placeholder = sprintf( __( 'Search in %s' ), title );
 
 	return (
-		<MenuTitleUI
-			as="h2"
-			className="components-navigation__menu-title"
-			variant="subtitle"
-		>
-			{ title }
-
-			{ hasSearch && (
-				<Button
-					isSmall
-					isTertiary
-					onClick={ () => setIsSearching( true ) }
+		<MenuTitleUI>
+			{ ! isSearching && (
+				<MenuTitleHeadingUI
+					as="h2"
+					className="components-navigation__menu-title"
+					variant="title.small"
 				>
+					{ title }
+
+					{ hasSearch && (
+						<Button
+							isSmall
+							isTertiary
+							onClick={ () => setIsSearching( true ) }
+						>
+							<Icon icon={ searchIcon } />
+						</Button>
+					) }
+				</MenuTitleHeadingUI>
+			) }
+
+			{ isSearching && (
+				<MenuTitleSearchUI>
 					<Icon icon={ searchIcon } />
-				</Button>
+
+					<TextControl
+						autocomplete="off"
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus
+						onChange={ ( value ) => setSearch( value ) }
+						placeholder={ placeholder }
+						value={ search }
+					/>
+
+					<Button isSmall isTertiary onClick={ onSearchClose }>
+						<Icon icon={ closeSmall } />
+					</Button>
+				</MenuTitleSearchUI>
 			) }
 		</MenuTitleUI>
 	);

diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
@@ -50,7 +50,12 @@ export const MenuBackButtonUI = styled( Button )`
 	}
 `;
 
-export const MenuTitleUI = styled( Text )`
+export const MenuTitleUI = styled.div`
+	overflow: hidden;
+	width: 100%;
+`;
+
+export const MenuTitleHeadingUI = styled( Text )`
 	align-items: center;
 	color: ${ G2.gray[ 100 ] };
 	display: flex;
@@ -70,29 +75,31 @@ export const MenuTitleUI = styled( Text )`
 
 export const MenuTitleSearchUI = styled.div`
 	margin-bottom: 2px;
-	padding: 4px;
+	padding: 0;
 	position: relative;
 
 	.components-base-control .components-base-control__field {
-		margin: 0;
+		margin-bottom: 8px;
 
 		input {
-			padding-left: 26px;
+			height: 36px;
+			padding-left: 30px;
 			padding-right: 40px;
 		}
 	}
 
 	> svg {
 		left: 6px;
 		position: absolute;
-		top: 7px;
+		top: 6px;
 	}
 
 	.components-button.is-small {
 		height: 30px;
+		padding: 0;
 		position: absolute;
 		right: 4px;
-		top: 4px;
+		top: 3px;
 
 		&:active {
 			background: none;