fix:search - always show search expanded in header (mdn#5507)

* fix:search - always show search expanded in header Always show the search input as expanded in the header. fix mdn#5493 * expand and collapse search input on focus and blur * fix tests by changing functionality * Add clear search button on focus. Do not collapse input on mobile
dipikabh · Mar 17, 2022 · 22c4229 · 22c4229
1 parent d3d59b6
commit 22c4229
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 150 deletions.
diff --git a/client/src/homepage/homepage-hero/index.scss b/client/src/homepage/homepage-hero/index.scss
@@ -67,13 +67,18 @@
     }
   }
 
-  .header-search {
+  .homepage-hero-search {
     width: 100%;
     max-height: 4rem;
     display: flex;
     margin-bottom: 1rem;
 
     .search-input-field {
+      border-radius: 10rem;
+      background-color: rgba(1, 1, 1, 0.5);
+      font: var(--type-body-l);
+      padding: 2rem;
+
       &:focus {
         box-shadow: var(--focus-01);
         border-color: var(--field-focus-border);
@@ -88,10 +93,6 @@
       display: flex;
     }
 
-    .close-search-button {
-      display: none;
-    }
-
     .search-results {
       top: 4.2rem;
       margin: 0 1.5rem;
@@ -120,15 +121,6 @@
     }
   }
 
-  .header-search {
-    .search-input-field {
-      font: var(--type-body-l);
-      border-radius: 10rem;
-      background-color: rgba(1, 1, 1, 0.5);
-      padding: 2rem;
-    }
-  }
-
   .search-button.button {
     position: absolute;
     right: 1.5rem;

diff --git a/client/src/homepage/homepage-hero/index.tsx b/client/src/homepage/homepage-hero/index.tsx
@@ -14,7 +14,7 @@ export function HomepageHero() {
           Documenting web technologies, including CSS, HTML, and JavaScript,
           since 2005.
         </p>
-        <Search id="hp-search" />
+        <Search id="hp-search" isHomepageSearch={true} />
       </section>
       <Mandala rotate={true} extraClasses="homepage-hero-bg" />
     </div>

diff --git a/client/src/search.tsx b/client/src/search.tsx
@@ -128,7 +128,6 @@ function BreadcrumbURI({
 }
 
 type InnerSearchNavigateWidgetProps = SearchProps & {
-  onCloseSearch?: () => void;
   onResultPicked?: () => void;
   defaultSelection: [number, number];
 };
@@ -164,7 +163,6 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
     onChangeInputValue,
     isFocused,
     onChangeIsFocused,
-    onCloseSearch,
     onResultPicked,
     defaultSelection,
   } = props;
@@ -196,7 +194,7 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
 
   const resultItems: ResultItem[] = useMemo(() => {
     if (!searchIndex || !inputValue || searchIndexError) {
-      // This can happen if the initialized hasn't completed yet or
+      // This can happen if the initialization hasn't completed yet or
       // completed un-successfully.
       return [];
     }
@@ -457,7 +455,9 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
           onFocus: () => {
             onChangeIsFocused(true);
           },
-          onBlur: () => onChangeIsFocused(false),
+          onBlur: () => {
+            onChangeIsFocused(false);
+          },
           onKeyDown(event) {
             if (event.key === "Escape" && inputRef.current) {
               onChangeInputValue("");
@@ -487,20 +487,20 @@ function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {
 
       <Button
         type="action"
-        icon="search"
-        buttonType="submit"
-        extraClasses="search-button"
+        icon="cancel"
+        extraClasses="clear-search-button"
+        onClickHandler={() => onChangeInputValue("")}
       >
-        <span className="visually-hidden">Search</span>
+        <span className="visually-hidden">Clear search input</span>
       </Button>
 
       <Button
         type="action"
-        icon="cancel"
-        extraClasses="close-search-button"
-        onClickHandler={onCloseSearch}
+        icon="search"
+        buttonType="submit"
+        extraClasses="search-button"
       >
-        <span className="visually-hidden">Close search</span>
+        <span className="visually-hidden">Search</span>
       </Button>
 
       <div {...getMenuProps()}>

diff --git a/client/src/ui/molecules/search/index.scss b/client/src/ui/molecules/search/index.scss
@@ -2,6 +2,8 @@
 @use "../../vars" as *;
 
 .header-search {
+  max-width: 100%;
+
   .search-widget {
     position: relative;
     width: 100%;
@@ -38,6 +40,17 @@
       }
     }
 
+    @media screen and (min-width: $screen-md) {
+      &:invalid {
+        width: 1rem;
+      }
+    }
+
+    &:focus,
+    &:valid {
+      width: inherit;
+    }
+
     &:invalid,
     &:invalid::placeholder {
       animation: blink 2s step-end infinite;
@@ -86,7 +99,10 @@
     color: var(--icon-critical);
     margin: 0;
   }
+}
 
+.header-search,
+.homepage-hero-search {
   .search-results {
     border: 1px solid var(--border-secondary);
     border-radius: var(--elem-radius);
@@ -170,10 +186,12 @@
 }
 
 .search-form {
+  display: flex;
   position: relative;
 }
 
-.button.search-button {
+.button.search-button,
+.button.clear-search-button {
   --button-color: var(--icon-secondary);
   --button-height: 1.5rem;
   --button-padding: 0;
@@ -187,15 +205,23 @@
   }
 
   @media screen and (min-width: $screen-md) {
-    right: 3.5rem;
+    right: 1.2rem;
     width: 1.5rem;
   }
 }
 
-.close-search-button {
+.button.clear-search-button {
   display: none;
+}
 
-  @media screen and (min-width: $screen-md) {
-    display: block;
+/* When the search input has focus or has content,
+   show the clear search button */
+.header-search .search-input-field {
+  &:valid,
+  &:focus {
+    & ~ .button.clear-search-button {
+      display: block;
+      right: 2.8rem;
+    }
   }
 }
diff --git a/client/src/ui/molecules/search/index.tsx b/client/src/ui/molecules/search/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import SearchNavigateWidget from "../../../search";
@@ -21,16 +21,12 @@ function useQueryParamState() {
 
 export function Search({
   id,
-  hasOpened,
-  onCloseSearch,
+  isHomepageSearch,
   onResultPicked,
-  onChangeIsFocused = () => {},
 }: {
   id: string;
-  hasOpened?: boolean;
-  onCloseSearch?: () => void;
+  isHomepageSearch?: boolean;
   onResultPicked?: () => void;
-  onChangeIsFocused?: (isFocused?: boolean) => void;
 }) {
   const [value, setValue] = useQueryParamState();
   const [isFocused, setIsFocused] = useState(false);
@@ -44,27 +40,18 @@ export function Search({
       isFocused,
       onChangeIsFocused: (isFocused) => {
         setIsFocused(isFocused);
-        onChangeIsFocused(isFocused);
       },
       defaultSelection,
       onChangeSelection: (selection) => setDefaultSelection(selection),
     }),
-    [id, value, isFocused, defaultSelection, setValue, onChangeIsFocused]
+    [id, value, isFocused, defaultSelection, setValue]
   );
 
-  useEffect(() => {
-    if (hasOpened) {
-      setIsFocused(true);
-    }
-  }, [hasOpened]);
-
   return (
-    <div className="header-search">
-      <SearchNavigateWidget
-        {...searchProps}
-        onResultPicked={onResultPicked}
-        onCloseSearch={onCloseSearch}
-      />
+    <div
+      className={isHomepageSearch ? "homepage-hero-search" : "header-search"}
+    >
+      <SearchNavigateWidget {...searchProps} onResultPicked={onResultPicked} />
     </div>
   );
 }
diff --git a/client/src/ui/organisms/top-navigation-main/index.scss b/client/src/ui/organisms/top-navigation-main/index.scss
@@ -34,10 +34,6 @@
     }
   }
 
-  .toggle-search-button {
-    display: none;
-  }
-
   .theme-toggle {
     align-self: end;
     margin-bottom: 1.5rem;
@@ -153,10 +149,6 @@
     display: none;
   }
 
-  .header-search {
-    max-width: 100%;
-  }
-
   @media screen and (min-width: $screen-md) {
     align-items: center;
     display: flex;
@@ -197,38 +189,5 @@
     .menu-toggle + .top-level-entry {
       display: inline-flex;
     }
-
-    .toggle-search-button {
-      display: inline-block;
-    }
-
-    .search-form {
-      display: none;
-    }
-  }
-}
-
-.top-navigation-main.has-search-open {
-  .header-search {
-    width: 240px;
-  }
-
-  .header-search ~ * {
-    display: none;
-  }
-
-  .search-form {
-    display: flex;
-  }
-}
-
-.category-home {
-  .header-search {
-    .search-input-field {
-      &:focus {
-        box-shadow: var(--focus-01);
-        border-color: var(--field-focus-border);
-      }
-    }
   }
 }
diff --git a/client/src/ui/organisms/top-navigation-main/index.tsx b/client/src/ui/organisms/top-navigation-main/index.tsx
@@ -5,8 +5,6 @@ import MainMenu from "../../molecules/main-menu";
 import { UserMenu } from "../../molecules/user-menu";
 import { Search } from "../../molecules/search";
 
-import { Button } from "../../atoms/button";
-
 import { useUserData } from "../../../user-context";
 
 import "./index.scss";
@@ -16,37 +14,13 @@ import { ThemeToggle } from "../../molecules/theme-toggle";
 export const TopNavigationMain = ({ isOpenOnMobile }) => {
   const userData = useUserData();
   const isAuthenticated = userData && userData.isAuthenticated;
-  const [showSearch, setShowSearch] = React.useState(false);
-  const [hasOpened, setHasOpened] = React.useState<boolean | undefined>(false);
-
-  function handleShowSearch() {
-    setShowSearch(true);
-    setHasOpened(true);
-  }
 
   return (
-    <div
-      className={`top-navigation-main${showSearch ? " has-search-open" : ""}`}
-    >
+    <div className="top-navigation-main">
       <MainMenu isOpenOnMobile={isOpenOnMobile} />
 
-      <Search
-        id="top-nav-search"
-        hasOpened={hasOpened}
-        onChangeIsFocused={(isFocused) => setHasOpened(isFocused)}
-        onCloseSearch={() => {
-          setShowSearch(false);
-        }}
-      />
-      <ThemeToggle></ThemeToggle>
-      <Button
-        type="action"
-        icon="search"
-        onClickHandler={handleShowSearch}
-        extraClasses="toggle-search-button"
-      >
-        <span className="visually-hidden">Show search</span>
-      </Button>
+      <Search id="top-nav-search" />
+      <ThemeToggle />
 
       {ENABLE_PLUS &&
         ((isAuthenticated && (

diff --git a/client/src/writers-homepage/index.scss b/client/src/writers-homepage/index.scss
@@ -1,5 +1,5 @@
 #writers-homepage {
-  .header-search {
+  .homepage-hero-search {
     margin-bottom: 60px;
 
     .search-button {