add / indicator, add x on mobile search

newrelic · Oct 15, 2024 · f5657fc · f5657fc
1 parent b45385f
commit f5657fc
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalHeader.js b/packages/gatsby-theme-newrelic/src/components/GlobalHeader.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import useMedia from 'use-media';
 import path from 'path';
@@ -27,9 +27,10 @@ const SEARCH_BREAKPOINT = '1355px';
 const SEARCH_BREAKPOINT_2 = '865px';
 const NAVLIST_BREAKPOINT = '1507px';
 
-const GlobalHeader = ({ className, activeSite, hideSearch = false }) => {
+const GlobalHeader = ({ className, activeSite }) => {
   const location = useLocation();
   const { t } = useThemeTranslation();
+  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
 
   const {
     allLocale: { nodes: locales },
@@ -70,7 +71,6 @@ const GlobalHeader = ({ className, activeSite, hideSearch = false }) => {
   return (
     <>
       <AnnouncementBanner />
-      {/* mobile search dropdown was here */}
       <div
         data-swiftype-index={false}
         className={className}
@@ -249,12 +249,12 @@ const GlobalHeader = ({ className, activeSite, hideSearch = false }) => {
                   --search-width: 12rem;
                 }
                 @media screen and (max-width: ${mobileBreakpoint}) {
+                  display: ${mobileSearchOpen ? 'block' : 'none'};
                   position: static;
                 }
               `}
             >
-              <GlobalSearch />
-              {/* desktop search was here */}
+              <GlobalSearch onClose={() => setMobileSearchOpen(false)} />
             </li>
             <li
               css={css`
@@ -268,7 +268,7 @@ const GlobalHeader = ({ className, activeSite, hideSearch = false }) => {
             >
               <Button
                 variant={Button.VARIANT.PLAIN}
-                onClick={() => setMobileSearchClicked((v) => !v)}
+                onClick={() => setMobileSearchOpen(true)}
                 css={css`
                   align-self: center;
                   color: var(--system-text-primary-dark);
@@ -409,7 +409,6 @@ export const NR_SITES = {
 GlobalHeader.propTypes = {
   className: PropTypes.string,
   activeSite: PropTypes.oneOf(Object.values(NR_SITES)),
-  hideSearch: PropTypes.bool,
 };
 
 const HEADER_LINKS = new Map();

diff --git a/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js b/packages/gatsby-theme-newrelic/src/components/GlobalSearch.js
@@ -11,7 +11,8 @@ import useSearch from './SearchModal/useSearch';
 import SearchInput from './SearchInput';
 import SearchDropdown, { DEFAULT_FILTER_TYPES } from './SearchDropdown';
 
-const GlobalSearch = () => {
+const GlobalSearch = ({ onClose }) => {
+  const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const throttledQuery = useThrottle(query, 300);
   const { fetchNextPage, results, status } = useSearch({
@@ -62,13 +63,17 @@ const GlobalSearch = () => {
     requestAnimationFrame(() => searchRef.current?.focus());
   });
 
-  const showSearchDropdown =
-    query.length > 1 && document.activeElement === searchRef.current;
+  const showSearchDropdown = query.length > 1 && open;
 
   return (
     <>
       <SearchInput
-        onFocus={() => {}}
+        onClear={() => {
+          setQuery('');
+          setOpen(false);
+          onClose();
+        }}
+        onFocus={() => setOpen(true)}
         onMove={(direction) => {
           if (direction === 'prev') {
             moveUp();
@@ -160,6 +165,7 @@ const GlobalSearch = () => {
       {showSearchDropdown && (
         <SearchDropdown
           fetchNextPage={fetchNextPage}
+          onClose={() => setOpen(false)}
           onRecentClick={(query, i) => {
             addPageAction({
               eventName: 'savedQuerySearch',

diff --git a/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js b/packages/gatsby-theme-newrelic/src/components/SearchDropdown/SearchDropdown.js
@@ -10,6 +10,7 @@ import Skeleton from './Skeleton';
 
 const SearchDropdown = ({
   fetchNextPage,
+  onClose,
   onRecentClick,
   onResultClick,
   query,
@@ -51,13 +52,14 @@ const SearchDropdown = ({
         )}
         <KeyboardLegend />
       </Container>
-      <Overlay />
+      <Overlay onClick={onClose} />
     </>
   );
 };
 
 SearchDropdown.propTypes = {
   fetchNextPage: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   onRecentClick: PropTypes.func.isRequired,
   onResultClick: PropTypes.func.isRequired,
   query: PropTypes.string,

diff --git a/packages/gatsby-theme-newrelic/src/components/SearchInput.js b/packages/gatsby-theme-newrelic/src/components/SearchInput.js
@@ -1,6 +1,8 @@
 import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
+import { graphql, useStaticQuery } from 'gatsby';
+
 import Icon from './Icon';
 import Link from './Link';
 import composeHandlers from '../utils/composeHandlers';
@@ -50,6 +52,19 @@ const SearchInput = forwardRef(
     },
     ref
   ) => {
+    const {
+      site: {
+        layout: { mobileBreakpoint },
+      },
+    } = useStaticQuery(graphql`
+      query GlobalHeaderQuery {
+        site {
+          layout {
+            mobileBreakpoint
+          }
+        }
+      }
+    `);
     const inputRef = useSyncedRef(ref);
     const [showHotKey, setShowHotkey] = useState(Boolean(focusWithHotKey));
 
@@ -178,13 +193,35 @@ const SearchInput = forwardRef(
             }
           `}
         />
-        {value && onClear && (
+        <kbd
+          css={css`
+            border: 1px solid currentColor;
+            border-radius: 4px;
+            display: inline-grid;
+            line-height: 1.1;
+            margin-right: 0.25rem;
+            padding: 2px 4px;
+            place-items: center;
+            position: absolute;
+            right: 0.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+
+            @media (max-width: ${mobileBreakpoint}) {
+              display: none;
+            }
+          `}
+        >
+          /
+        </kbd>
+        {onClear && (
           <button
             onClick={(e) => {
               e.preventDefault();
               onClear();
             }}
             css={css`
+              display: none;
               right: ${alignIcon === 'right'
                 ? ' calc(var(--horizontal-spacing) + 0.5rem + var(--icon-size))'
                 : 'var(--horizontal-spacing)'};
@@ -202,6 +239,10 @@ const SearchInput = forwardRef(
               padding: 0;
               outline: none;
               z-index: 123;
+
+              @media (max-width: ${mobileBreakpoint}) {
+                display: block;
+              }
             `}
             type="button"
           >