From 3df2c3dcd71cdd7ce2d56e32e78501d1a7ea7bf3 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 11:59:56 +0200
Subject: [PATCH 01/22] Clean up search result types

---
 .../components/GlobalSearch/GlobalSearch.tsx  |  44 +++++---
 polaris.shopify.com/src/types.ts              |  61 ++++-------
 polaris.shopify.com/src/utils/search.ts       | 103 ++++++++----------
 3 files changed, 91 insertions(+), 117 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index f30acdbc136..857beac37ca 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -60,7 +60,7 @@ function GlobalSearch({}: Props) {
 
   if (searchResults) {
     Object.values(searchResults)
-      .sort((a, b) => a.maxScore - b.maxScore)
+      .sort((a, b) => a.topScore - b.topScore)
       .forEach((group) => {
         resultsInRenderedOrder = [...resultsInRenderedOrder, ...group.results];
       });
@@ -217,7 +217,7 @@ function GlobalSearch({}: Props) {
               >
                 {searchResults &&
                   Object.entries(searchResults)
-                    .sort((a, b) => a[1].maxScore - b[1].maxScore)
+                    .sort((a, b) => a[1].topScore - b[1].topScore)
                     .map(([category]) => {
                       const typedCategory = category as SearchResultCategory;
 
@@ -233,9 +233,12 @@ function GlobalSearch({}: Props) {
                                   const { searchResultData } = getItemProps({
                                     resultIndex,
                                   });
+                                  if (!result.meta.Foundations) return null;
+                                  const { title, excerpt } =
+                                    result.meta.Foundations;
                                   return (
                                     <li
-                                      key={result.meta.title}
+                                      key={result.meta.Foundations.title}
                                       className={className(
                                         styles.FoundationsResult,
                                         searchResultData?.isHighlighted &&
@@ -247,12 +250,8 @@ function GlobalSearch({}: Props) {
                                         <a
                                           tabIndex={searchResultData?.tabIndex}
                                         >
-                                          <h4>{result.meta.title}</h4>
-                                          <p>
-                                            {stripMarkdownLinks(
-                                              result.meta.excerpt
-                                            )}
-                                          </p>
+                                          <h4>{title}</h4>
+                                          <p>{stripMarkdownLinks(excerpt)}</p>
                                         </a>
                                       </Link>
                                     </li>
@@ -270,13 +269,17 @@ function GlobalSearch({}: Props) {
                               <ComponentGrid>
                                 {results.map((result) => {
                                   resultIndex++;
+                                  if (!result.meta.Components) return null;
+                                  const { url } = result;
+                                  const { name, description, status } =
+                                    result.meta.Components;
                                   return (
                                     <ComponentGrid.Item
-                                      key={result.meta.name}
-                                      url={result.url}
-                                      description={result.meta.description}
-                                      name={result.meta.name}
-                                      status={result.meta.status}
+                                      key={name}
+                                      url={url}
+                                      description={description}
+                                      name={name}
+                                      status={status}
                                       {...getItemProps({ resultIndex })}
                                     />
                                   );
@@ -303,10 +306,12 @@ function GlobalSearch({}: Props) {
                               >
                                 {results.map((result) => {
                                   resultIndex++;
+                                  if (!result.meta.Tokens) return null;
+                                  const { token } = result.meta.Tokens;
                                   return (
                                     <TokenList.Item
-                                      key={result.meta.token.name}
-                                      token={result.meta.token}
+                                      key={token.name}
+                                      token={token}
                                       {...getItemProps({ resultIndex })}
                                     />
                                   );
@@ -324,10 +329,13 @@ function GlobalSearch({}: Props) {
                               <IconGrid>
                                 {results.map((result) => {
                                   resultIndex++;
+                                  if (!result.meta.Icons) return null;
+                                  const { url } = result;
+                                  const { icon } = result.meta.Icons;
                                   return (
                                     <IconGrid.Item
-                                      key={result.url}
-                                      icon={result.meta.icon}
+                                      key={url}
+                                      icon={icon}
                                       onClick={() => router.push(result.url)}
                                       {...getItemProps({ resultIndex })}
                                     />
diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts
index e19de556852..913ab309344 100644
--- a/polaris.shopify.com/src/types.ts
+++ b/polaris.shopify.com/src/types.ts
@@ -19,53 +19,34 @@ export const searchResultCategories = [
 
 export type SearchResultCategory = typeof searchResultCategories[number];
 
-interface BaseSearchResult {
+export interface SearchResult {
+  category: SearchResultCategory;
   url: string;
   score: number;
+  meta: Partial<{
+    Components: {
+      name: string;
+      description: string;
+      status?: Status;
+    };
+    Foundations: {
+      title: string;
+      excerpt: string;
+    };
+    Tokens: {
+      token: TokenPropertiesWithName;
+    };
+    Icons: { icon: Icon };
+  }>;
 }
 
-export interface FoundationsSearchResult extends BaseSearchResult {
-  category: "Foundations";
-  meta: {
-    title: string;
-    excerpt: string;
-  };
-}
-
-export interface ComponentsSearchResult extends BaseSearchResult {
-  category: "Components";
-  meta: {
-    name: string;
-    description: string;
-    status?: Status;
-  };
-}
-
-export interface TokensSearchResult extends BaseSearchResult {
-  category: "Tokens";
-  meta: {
-    token: TokenPropertiesWithName;
-  };
-}
-
-export interface IconsSearchResult extends BaseSearchResult {
-  category: "Icons";
-  meta: { icon: Icon };
-}
-
-export type SearchResult =
-  | FoundationsSearchResult
-  | ComponentsSearchResult
-  | TokensSearchResult
-  | IconsSearchResult;
-
 export type SearchResults = SearchResult[];
 
 export type GroupedSearchResults = {
-  Foundations: { results: FoundationsSearchResult[]; maxScore: number };
-  Components: { results: ComponentsSearchResult[]; maxScore: number };
-  Tokens: { results: TokensSearchResult[]; maxScore: number };
-  Icons: { results: IconsSearchResult[]; maxScore: number };
+  [key in SearchResultCategory]: {
+    results: SearchResult[];
+    topScore: number;
+  };
 };
 
 export type Icon = {
diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index b7746344e10..87b8df57629 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -1,11 +1,7 @@
 import {
-  SearchResultCategory,
   SearchResults,
-  ComponentsSearchResult,
-  FoundationsSearchResult,
-  IconsSearchResult,
-  TokensSearchResult,
   GroupedSearchResults,
+  searchResultCategories,
 } from "../types";
 import { tokens, TokenProperties } from "@shopify/polaris-tokens";
 import Fuse from "fuse.js";
@@ -41,9 +37,11 @@ components.forEach(({ frontMatter: { name, status }, intro }) => {
     score: 0,
     url: `/components/${slugify(name)}`,
     meta: {
-      name,
-      description: stripMarkdownLinks(intro),
-      status,
+      Components: {
+        name,
+        description: stripMarkdownLinks(intro),
+        status,
+      },
     },
   });
 });
@@ -55,10 +53,12 @@ Object.entries(colorLight).forEach(([tokenName, tokenValue]) => {
     score: 0,
     url: `/tokens/colors#${tokenName}`,
     meta: {
-      token: {
-        name: tokenName,
-        description: tokenValue.description || "",
-        value: tokenValue.value,
+      Tokens: {
+        token: {
+          name: tokenName,
+          description: tokenValue.description || "",
+          value: tokenValue.value,
+        },
       },
     },
   });
@@ -74,10 +74,12 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
         score: 0,
         url: `/tokens/${slugify(groupSlug)}#${tokenName}`,
         meta: {
-          token: {
-            name: tokenName,
-            description: tokenProperties.description || "",
-            value: tokenProperties.value,
+          Tokens: {
+            token: {
+              name: tokenName,
+              description: tokenProperties.description || "",
+              value: tokenProperties.value,
+            },
           },
         },
       });
@@ -93,7 +95,9 @@ Object.keys(metadata).forEach((fileName) => {
     url: `/icons?icon=${fileName}`,
     score: 0,
     meta: {
-      icon: { fileName, keywords, name, description, set },
+      Icons: {
+        icon: { fileName, keywords, name, description, set },
+      },
     },
   });
 });
@@ -107,8 +111,10 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
     score: 0,
     url,
     meta: {
-      title: name,
-      excerpt: intro,
+      Foundations: {
+        title: name,
+        excerpt: intro,
+      },
     },
   });
 });
@@ -135,10 +141,10 @@ const fuse = new Fuse(results, {
 
 export function search(query: string): GroupedSearchResults {
   const groupedResults: GroupedSearchResults = {
-    Foundations: { results: [], maxScore: 0 },
-    Components: { results: [], maxScore: 0 },
-    Tokens: { results: [], maxScore: 0 },
-    Icons: { results: [], maxScore: 0 },
+    Foundations: { results: [], topScore: 0 },
+    Components: { results: [], topScore: 0 },
+    Tokens: { results: [], topScore: 0 },
+    Icons: { results: [], topScore: 0 },
   };
 
   if (query.length > 0) {
@@ -149,42 +155,21 @@ export function search(query: string): GroupedSearchResults {
       score: result.score || 0,
     }));
 
-    groupedResults["Foundations"].results = scoredResults
-      .filter((result) => result.category === "Foundations")
-      .map((result) => ({
-        ...result,
-        score: result.score || 0,
-      }))
-      .slice(0, MAX_RESULTS["Foundations"]) as FoundationsSearchResult[];
-
-    groupedResults["Components"].results = scoredResults
-      .filter((result) => result.category === "Components")
-      .map((result) => ({
-        ...result,
-        score: result.score || 0,
-      }))
-      .slice(0, MAX_RESULTS["Components"]) as ComponentsSearchResult[];
-
-    groupedResults["Tokens"].results = scoredResults
-      .filter((result) => result.category === "Tokens")
-      .map((result) => ({
-        ...result,
-        score: result.score || 0,
-      }))
-      .slice(0, MAX_RESULTS["Tokens"]) as TokensSearchResult[];
-
-    groupedResults["Icons"].results = scoredResults
-      .filter((result) => result.category === "Icons")
-      .map((result) => ({
-        ...result,
-        score: result.score || 0,
-      }))
-      .slice(0, MAX_RESULTS["Icons"]) as IconsSearchResult[];
-
-    Object.keys(groupedResults).forEach((category) => {
-      const typedCategory = category as SearchResultCategory;
-      groupedResults[typedCategory].maxScore =
-        groupedResults[typedCategory].results[0]?.score || 0;
+    searchResultCategories.forEach((category) => {
+      groupedResults[category].results = scoredResults
+        .filter((result) => result.category === category)
+        .map((result) => ({ ...result, score: result.score || 0 }))
+        .slice(0, MAX_RESULTS[category]);
+    });
+
+    searchResultCategories.forEach((category) => {
+      groupedResults[category] = {
+        ...groupedResults[category],
+        topScore:
+          groupedResults[category].results.length > 0
+            ? groupedResults[category].results[0].score
+            : 0,
+      };
     });
   }
 

From 8895190adcd0f72b374b54d1efdf921fa9163028 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 12:08:04 +0200
Subject: [PATCH 02/22] Fix fuse metadata keys

---
 polaris.shopify.com/src/utils/search.ts | 30 ++++++++++++++++---------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index 87b8df57629..be36cbd7da9 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -121,17 +121,24 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
 
 const fuse = new Fuse(results, {
   keys: [
-    { name: "meta.title", weight: 100 },
-    { name: "meta.name", weight: 100 },
-    { name: "meta.description", weight: 50 },
-    { name: "meta.excerpt", weight: 50 },
-    { name: "meta.token.name", weight: 200 },
-    // { name: "meta.token.description", weight: 50 },
-    { name: "meta.token.value", weight: 50 },
-    { name: "meta.icon.fileName", weight: 50 },
-    { name: "meta.icon.keywords", weight: 20 },
-    { name: "meta.icon.set", weight: 20 },
-    // { name: "meta.icon.description", weight: 50 },
+    // Foundations
+    { name: "meta.Foundations.title", weight: 100 },
+    { name: "meta.Foundations.excerpt", weight: 50 },
+
+    // Components
+    { name: "meta.Components.name", weight: 100 },
+    { name: "meta.Components.description", weight: 50 },
+
+    // Tokens
+    { name: "meta.Tokens.token.name", weight: 200 },
+    { name: "meta.Tokens.token.value", weight: 50 },
+
+    // Icons
+    { name: "meta.Icons.icon.fileName", weight: 50 },
+    { name: "meta.Icons.icon.name", weight: 50 },
+    { name: "meta.Icons.icon.keywords", weight: 20 },
+    { name: "meta.Icons.icon.set", weight: 20 },
+    { name: "meta.Icons.icon.description", weight: 50 },
   ],
   includeScore: true,
   threshold: 0.5,
@@ -148,6 +155,7 @@ export function search(query: string): GroupedSearchResults {
   };
 
   if (query.length > 0) {
+    console.log(results);
     const fuseResults = fuse.search(query);
 
     const scoredResults: SearchResults = fuseResults.map((result) => ({

From e49a075f3bd7532726d5ef64cd231307ecaedcf8 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 12:08:48 +0200
Subject: [PATCH 03/22] Remove console log

---
 polaris.shopify.com/src/utils/search.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index be36cbd7da9..ec4659a0c14 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -155,7 +155,6 @@ export function search(query: string): GroupedSearchResults {
   };
 
   if (query.length > 0) {
-    console.log(results);
     const fuseResults = fuse.search(query);
 
     const scoredResults: SearchResults = fuseResults.map((result) => ({

From d3c2d840b3d349a20bb30a37c0337f2ce388515b Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 14:22:41 +0200
Subject: [PATCH 04/22] Refactor global search

---
 .../ComponentGrid/ComponentGrid.module.scss   |   2 +-
 .../ComponentGrid/ComponentGrid.tsx           |  18 +-
 .../GlobalSearch/GlobalSearch.module.scss     |   2 +-
 .../components/GlobalSearch/GlobalSearch.tsx  | 422 +++++++++---------
 .../components/IconGrid/IconGrid.module.scss  |   2 +-
 .../src/components/IconGrid/IconGrid.tsx      |  29 +-
 .../TokenList/TokenList.module.scss           |   2 +-
 .../src/components/TokenList/TokenList.tsx    |  28 +-
 polaris.shopify.com/src/types.ts              |  14 +-
 polaris.shopify.com/src/utils/search.ts       |  13 +-
 10 files changed, 257 insertions(+), 275 deletions(-)

diff --git a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss
index 8f660084ce1..075af9e06e1 100644
--- a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss
+++ b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss
@@ -30,7 +30,7 @@
   }
 
   @media (hover: hover) {
-    &.isHighlighted a {
+    &[data-is-current-result="true"] {
       background: var(--search-highlight-color);
     }
   }
diff --git a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
index dc3239e849d..d00da137942 100644
--- a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
+++ b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
@@ -1,10 +1,10 @@
 import Image from "../Image";
 import Link from "next/link";
-import { SearchResultItem } from "../../types";
 import { className, slugify } from "../../utils/various";
 import { Status } from "../../types";
 import styles from "./ComponentGrid.module.scss";
 import StatusBadge from "../StatusBadge";
+import { useGlobalSearchResult } from "../GlobalSearch/GlobalSearch";
 
 interface ComponentGridProps {
   children: React.ReactNode;
@@ -14,7 +14,7 @@ function ComponentGrid({ children }: ComponentGridProps) {
   return <ul className={styles.ComponentGrid}>{children}</ul>;
 }
 
-interface ComponentGridItemProps extends SearchResultItem {
+interface ComponentGridItemProps {
   name: string;
   description: string;
   url: string;
@@ -25,20 +25,14 @@ function ComponentGridItem({
   name,
   description,
   url,
-  searchResultData,
   status,
 }: ComponentGridItemProps) {
+  const attributes = useGlobalSearchResult();
+
   return (
-    <li
-      key={name}
-      className={className(
-        styles.Component,
-        searchResultData?.isHighlighted && styles.isHighlighted
-      )}
-      {...searchResultData?.itemAttributes}
-    >
+    <li key={name} className={className(styles.Component)} {...attributes}>
       <Link href={url} passHref>
-        <a tabIndex={searchResultData?.tabIndex}>
+        <a tabIndex={attributes?.tabIndex}>
           <div className={styles.Preview}>
             <Image
               src={`/component-previews/${slugify(name)}.png`}
diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
index 523ab89615d..d6daaf8473f 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
@@ -172,7 +172,7 @@
   border-radius: var(--border-radius-600);
 
   @media (hover: hover) {
-    &.isHighlighted {
+    &[data-is-current-result="true"] {
       background: var(--search-highlight-color);
     }
   }
diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index 857beac37ca..4f2e7f8448c 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -1,9 +1,8 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, createContext, useContext } from "react";
 import { search } from "../../utils/search";
 import {
   GroupedSearchResults,
   SearchResultCategory,
-  SearchResultItem,
   SearchResults,
 } from "../../types";
 import styles from "./GlobalSearch.module.scss";
@@ -12,12 +11,36 @@ import IconGrid from "../IconGrid";
 import ComponentGrid from "../ComponentGrid";
 import TokenList from "../TokenList";
 import Link from "next/link";
-import { className, slugify, stripMarkdownLinks } from "../../utils/various";
+import { slugify, stripMarkdownLinks } from "../../utils/various";
 import { Dialog } from "@headlessui/react";
 import { KeyboardEventHandler } from "react";
 
 interface Props {}
 
+const SearchContext = createContext({ id: "", currentItemId: "" });
+
+export function useGlobalSearchResult() {
+  const searchContext = useContext(SearchContext);
+
+  if (!searchContext.id) return null;
+
+  let data = {
+    id: slugify(searchContext.id),
+    "data-is-global-search-result": true,
+    "data-is-current-result": false,
+    tabIndex: -1,
+  };
+
+  if (searchContext.currentItemId === searchContext.id) {
+    data = {
+      ...data,
+      "data-is-current-result": true,
+    };
+  }
+
+  return data;
+}
+
 function scrollToTop() {
   const overflowEl = document.querySelector(`.${styles.ResultsInner}`);
   if (overflowEl) {
@@ -28,7 +51,7 @@ function scrollToTop() {
 function scrollIntoView() {
   const overflowEl = document.querySelector(`.${styles.ResultsInner}`);
   const highlightedEl = document.querySelector(
-    '#search-results [data-is-active-descendant="true"]'
+    '#search-results [data-is-current-result="true"]'
   );
 
   if (overflowEl && highlightedEl) {
@@ -53,7 +76,7 @@ function GlobalSearch({}: Props) {
   const [searchResults, setSearchResults] = useState<GroupedSearchResults>();
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const [activeDescendant, setActiveDescendant] = useState(0);
+  const [currentResultIndex, setCurrentResultIndex] = useState(0);
   const router = useRouter();
 
   let resultsInRenderedOrder: SearchResults = [];
@@ -84,16 +107,15 @@ function GlobalSearch({}: Props) {
 
   useEffect(() => {
     setSearchResults(search(searchTerm));
-    setActiveDescendant(0);
+    setCurrentResultIndex(0);
     scrollToTop();
   }, [searchTerm]);
 
-  useEffect(() => scrollIntoView(), [activeDescendant]);
+  useEffect(() => scrollIntoView(), [currentResultIndex]);
 
   useEffect(() => {
-    const handler = () => {
-      setIsOpen(false);
-    };
+    const handler = () => setIsOpen(false);
+
     router.events.on("beforeHistoryChange", handler);
     router.events.on("hashChangeComplete", handler);
 
@@ -114,51 +136,28 @@ function GlobalSearch({}: Props) {
   ) => {
     switch (evt.code) {
       case "ArrowDown":
-        if (activeDescendant < searchResultsCount - 1) {
-          setActiveDescendant(activeDescendant + 1);
+        if (currentResultIndex < searchResultsCount - 1) {
+          setCurrentResultIndex(currentResultIndex + 1);
           evt.preventDefault();
         }
         break;
 
       case "ArrowUp":
-        if (activeDescendant > 0) {
-          setActiveDescendant(activeDescendant - 1);
+        if (currentResultIndex > 0) {
+          setCurrentResultIndex(currentResultIndex - 1);
           evt.preventDefault();
         }
         break;
 
       case "Enter":
         setIsOpen(false);
-        const url = resultsInRenderedOrder[activeDescendant].url;
+        const url = resultsInRenderedOrder[currentResultIndex].url;
         router.push(url);
         break;
     }
   };
 
-  const getItemId = (resultIndex: number): string => {
-    return `result${slugify(resultsInRenderedOrder[resultIndex].url)}`;
-  };
-
-  const getItemProps = ({
-    resultIndex,
-  }: {
-    resultIndex: number;
-  }): SearchResultItem => {
-    const isHighlighted = resultIndex === activeDescendant;
-    return {
-      searchResultData: {
-        isHighlighted,
-        itemAttributes: {
-          id: getItemId(resultIndex),
-          "data-is-active-descendant": isHighlighted,
-        },
-        tabIndex: -1,
-        url: resultsInRenderedOrder[resultIndex].url,
-      },
-    };
-  };
-
-  let resultIndex = -1;
+  const currentItemId = resultsInRenderedOrder[currentResultIndex]?.id || "";
 
   return (
     <>
@@ -174,188 +173,185 @@ function GlobalSearch({}: Props) {
       <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
         <div className={styles.ModalBackdrop}></div>
         <div className="dark-mode">
-          <>
-            <Dialog.Panel className={styles.Results}>
-              {isOpen && (
-                <div className={styles.Header}>
-                  <div className={styles.SearchIcon}>
-                    <SearchIcon />
-                  </div>
-
-                  <input
-                    type="search"
-                    value={searchTerm}
-                    onChange={(evt) => setSearchTerm(evt.target.value)}
-                    role="combobox"
-                    aria-controls="search-results"
-                    aria-expanded={searchResultsCount > 0}
-                    aria-activedescendant={
-                      searchResultsCount > 0
-                        ? getItemId(activeDescendant)
-                        : undefined
-                    }
-                    onKeyDown={handleKeyboardNavigation}
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck={false}
-                    placeholder="Search"
-                  />
-                  <button
-                    className={styles.MobileCloseButton}
-                    onClick={() => setIsOpen(false)}
-                  >
-                    Close
-                  </button>
+          <Dialog.Panel className={styles.Results}>
+            {isOpen && (
+              <div className={styles.Header}>
+                <div className={styles.SearchIcon}>
+                  <SearchIcon />
                 </div>
-              )}
-              <div
-                className={styles.ResultsInner}
-                id="search-results"
-                role="listbox"
-                aria-label="Search results"
-              >
-                {searchResults &&
-                  Object.entries(searchResults)
-                    .sort((a, b) => a[1].topScore - b[1].topScore)
-                    .map(([category]) => {
-                      const typedCategory = category as SearchResultCategory;
-
-                      switch (typedCategory) {
-                        case "Foundations":
-                          const results = searchResults[typedCategory].results;
-                          if (results.length === 0) return null;
-                          return (
-                            <ResultsGroup title={category}>
-                              <div className={styles.FoundationsResults}>
-                                {results.map((result) => {
-                                  resultIndex++;
-                                  const { searchResultData } = getItemProps({
-                                    resultIndex,
-                                  });
-                                  if (!result.meta.Foundations) return null;
-                                  const { title, excerpt } =
-                                    result.meta.Foundations;
-                                  return (
-                                    <li
-                                      key={result.meta.Foundations.title}
-                                      className={className(
-                                        styles.FoundationsResult,
-                                        searchResultData?.isHighlighted &&
-                                          styles.isHighlighted
-                                      )}
-                                      {...searchResultData?.itemAttributes}
-                                    >
-                                      <Link href={result.url} passHref>
-                                        <a
-                                          tabIndex={searchResultData?.tabIndex}
-                                        >
-                                          <h4>{title}</h4>
-                                          <p>{stripMarkdownLinks(excerpt)}</p>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  );
-                                })}
-                              </div>
-                            </ResultsGroup>
-                          );
-
-                        case "Components": {
-                          const results = searchResults[typedCategory].results;
-                          if (results.length === 0) return null;
-                          return (
-                            <ResultsGroup title={category}>
-                              <ComponentGrid>
-                                {results.map((result) => {
-                                  resultIndex++;
-                                  if (!result.meta.Components) return null;
-                                  const { url } = result;
-                                  const { name, description, status } =
-                                    result.meta.Components;
-                                  return (
-                                    <ComponentGrid.Item
-                                      key={name}
-                                      url={url}
-                                      description={description}
-                                      name={name}
-                                      status={status}
-                                      {...getItemProps({ resultIndex })}
-                                    />
-                                  );
-                                })}
-                              </ComponentGrid>
-                            </ResultsGroup>
-                          );
-                        }
-
-                        case "Tokens": {
-                          const results = searchResults[typedCategory].results;
-                          if (results.length === 0) return null;
-                          return (
-                            <ResultsGroup title={category}>
-                              <TokenList
-                                showTableHeading={false}
-                                columns={{
-                                  preview: true,
-                                  name: true,
-                                  figmaUsage: false,
-                                  value: false,
-                                  description: true,
-                                }}
-                              >
-                                {results.map((result) => {
-                                  resultIndex++;
-                                  if (!result.meta.Tokens) return null;
-                                  const { token } = result.meta.Tokens;
-                                  return (
-                                    <TokenList.Item
-                                      key={token.name}
-                                      token={token}
-                                      {...getItemProps({ resultIndex })}
-                                    />
-                                  );
-                                })}
-                              </TokenList>
-                            </ResultsGroup>
-                          );
-                        }
-
-                        case "Icons": {
-                          const results = searchResults[typedCategory].results;
-                          if (results.length === 0) return null;
-                          return (
-                            <ResultsGroup title={category}>
-                              <IconGrid>
-                                {results.map((result) => {
-                                  resultIndex++;
-                                  if (!result.meta.Icons) return null;
-                                  const { url } = result;
-                                  const { icon } = result.meta.Icons;
-                                  return (
-                                    <IconGrid.Item
-                                      key={url}
-                                      icon={icon}
-                                      onClick={() => router.push(result.url)}
-                                      {...getItemProps({ resultIndex })}
-                                    />
-                                  );
-                                })}
-                              </IconGrid>
-                            </ResultsGroup>
-                          );
-                        }
-                      }
-                    })}
+                <input
+                  type="search"
+                  value={searchTerm}
+                  onChange={(evt) => setSearchTerm(evt.target.value)}
+                  role="combobox"
+                  aria-controls="search-results"
+                  aria-expanded={searchResultsCount > 0}
+                  aria-activedescendant={currentItemId}
+                  onKeyDown={handleKeyboardNavigation}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
+                  placeholder="Search"
+                />
+                <button
+                  className={styles.MobileCloseButton}
+                  onClick={() => setIsOpen(false)}
+                >
+                  Close
+                </button>
               </div>
-            </Dialog.Panel>
-          </>
+            )}
+            <div
+              className={styles.ResultsInner}
+              id="search-results"
+              role="listbox"
+              aria-label="Search results"
+            >
+              {searchResults && (
+                <SearchResults
+                  searchResults={searchResults}
+                  currentItemId={currentItemId}
+                />
+              )}
+            </div>
+          </Dialog.Panel>
         </div>
       </Dialog>
     </>
   );
 }
 
+function SearchResults({
+  searchResults,
+  currentItemId,
+}: {
+  searchResults: GroupedSearchResults;
+  currentItemId: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      {Object.entries(searchResults)
+        .sort((a, b) => a[1].topScore - b[1].topScore)
+        .map(([category]) => {
+          const typedCategory = category as SearchResultCategory;
+          const results = searchResults[typedCategory].results;
+          if (results.length === 0) return null;
+
+          switch (typedCategory) {
+            case "Foundations":
+              return (
+                <ResultsGroup title={category}>
+                  <div className={styles.FoundationsResults}>
+                    {results.map(({ id, url, meta }) => {
+                      if (!meta.Foundations) return null;
+                      const { title, excerpt } = meta.Foundations;
+                      return (
+                        <SearchContext.Provider
+                          key={title}
+                          value={{ currentItemId, id }}
+                        >
+                          <li className={styles.FoundationsResult}>
+                            <Link href={url} passHref>
+                              <a>
+                                <h4>{title}</h4>
+                                <p>{stripMarkdownLinks(excerpt)}</p>
+                              </a>
+                            </Link>
+                          </li>
+                        </SearchContext.Provider>
+                      );
+                    })}
+                  </div>
+                </ResultsGroup>
+              );
+
+            case "Components": {
+              return (
+                <ResultsGroup title={category}>
+                  <ComponentGrid>
+                    {results.map(({ id, url, meta }) => {
+                      if (!meta.Components) return null;
+                      const { name, description, status } = meta.Components;
+                      return (
+                        <SearchContext.Provider
+                          key={id}
+                          value={{ currentItemId, id }}
+                        >
+                          <ComponentGrid.Item
+                            url={url}
+                            description={description}
+                            name={name}
+                            status={status}
+                          />
+                        </SearchContext.Provider>
+                      );
+                    })}
+                  </ComponentGrid>
+                </ResultsGroup>
+              );
+            }
+
+            case "Tokens": {
+              return (
+                <ResultsGroup title="Tokens">
+                  <TokenList
+                    showTableHeading={false}
+                    columns={{
+                      preview: true,
+                      name: true,
+                      figmaUsage: false,
+                      value: false,
+                      description: true,
+                    }}
+                  >
+                    {results.map(({ id, meta }) => {
+                      if (!meta.Tokens) return null;
+                      const { token, category } = meta.Tokens;
+                      return (
+                        <SearchContext.Provider
+                          key={id}
+                          value={{ currentItemId, id }}
+                        >
+                          <TokenList.Item category={category} token={token} />
+                        </SearchContext.Provider>
+                      );
+                    })}
+                  </TokenList>
+                </ResultsGroup>
+              );
+            }
+
+            case "Icons": {
+              return (
+                <ResultsGroup title={category}>
+                  <IconGrid>
+                    {results.map(({ id, url, meta }) => {
+                      if (!meta.Icons) return null;
+                      const { icon } = meta.Icons;
+                      return (
+                        <SearchContext.Provider
+                          key={id}
+                          value={{ currentItemId, id }}
+                        >
+                          <IconGrid.Item
+                            icon={icon}
+                            onClick={() => router.push(url)}
+                          />
+                        </SearchContext.Provider>
+                      );
+                    })}
+                  </IconGrid>
+                </ResultsGroup>
+              );
+            }
+          }
+        })}
+    </>
+  );
+}
+
 function SearchIcon() {
   return (
     <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
index 3b4bb0a9db8..c76370be810 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
@@ -30,7 +30,7 @@
   }
 
   @media (hover: hover) {
-    &.isHighlighted button,
+    &[data-is-current-result="true"] button,
     &.isSelected button {
       background: var(--search-highlight-color);
 
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
index 37fc7f65f80..6612c692b1c 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
@@ -1,5 +1,5 @@
 import Image from "../Image";
-import { className } from "../../utils/various";
+import { className, slugify } from "../../utils/various";
 import Tooltip from "../Tooltip";
 const importedSvgs = require.context(
   "../../../../polaris-icons/icons",
@@ -7,7 +7,8 @@ const importedSvgs = require.context(
   /\.svg$/
 );
 import styles from "./IconGrid.module.scss";
-import { Icon, SearchResultItem } from "../../types";
+import { Icon } from "../../types";
+import { useGlobalSearchResult } from "../GlobalSearch/GlobalSearch";
 
 interface IconGridProps {
   children: React.ReactNode;
@@ -17,28 +18,20 @@ function IconGrid({ children }: IconGridProps) {
   return <ul className={styles.IconGrid}>{children}</ul>;
 }
 
-interface IconGridItemProps extends SearchResultItem {
+interface IconGridItemProps {
   icon: Icon;
   onClick: (iconName: string) => void;
   isSelected?: boolean;
 }
 
-function IconGridItem({
-  icon,
-  onClick,
-  isSelected,
-  searchResultData,
-}: IconGridItemProps) {
+function IconGridItem({ icon, onClick, isSelected }: IconGridItemProps) {
+  const attributes = useGlobalSearchResult();
+
   return (
     <li
-      key={`${icon.name}+${icon.set}`}
-      className={className(
-        styles.Icon,
-        searchResultData?.isHighlighted && styles.isHighlighted,
-        isSelected && styles.isSelected
-      )}
-      {...searchResultData?.itemAttributes}
-      id={icon.fileName}
+      key={`${icon.name}-${icon.set}`}
+      className={className(styles.Icon, isSelected && styles.isSelected)}
+      {...attributes}
     >
       <Tooltip
         ariaLabel={icon.description}
@@ -52,7 +45,7 @@ function IconGridItem({
       >
         <button
           onClick={() => onClick(icon.name)}
-          tabIndex={searchResultData?.tabIndex}
+          tabIndex={attributes?.tabIndex}
         >
           <div className={styles.SVGWrapper}>
             <Image
diff --git a/polaris.shopify.com/src/components/TokenList/TokenList.module.scss b/polaris.shopify.com/src/components/TokenList/TokenList.module.scss
index 27f1aa553be..a31edc1a0e1 100644
--- a/polaris.shopify.com/src/components/TokenList/TokenList.module.scss
+++ b/polaris.shopify.com/src/components/TokenList/TokenList.module.scss
@@ -60,7 +60,7 @@
     position: relative;
 
     @media (hover: hover) {
-      &.isHighlighted {
+      &[data-is-current-result="true"] {
         &,
         &:hover {
           background: var(--search-highlight-color);
diff --git a/polaris.shopify.com/src/components/TokenList/TokenList.tsx b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
index e62202b19ea..e2772fa2404 100644
--- a/polaris.shopify.com/src/components/TokenList/TokenList.tsx
+++ b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
@@ -1,4 +1,4 @@
-import { SearchResultItem, TokenPropertiesWithName } from "../../types";
+import { TokenPropertiesWithName } from "../../types";
 import { createContext } from "react";
 import { className, slugify } from "../../utils/various";
 import styles from "./TokenList.module.scss";
@@ -8,6 +8,7 @@ import Image from "../Image";
 import Tooltip from "../Tooltip";
 import { figmaColorNames } from "../../data/figmaColorNames";
 import Link from "next/link";
+import { useGlobalSearchResult } from "../GlobalSearch/GlobalSearch";
 
 interface ColumnsConfig {
   preview: boolean;
@@ -106,36 +107,36 @@ function getFigmaUsageForToken(
   return usage;
 }
 
-interface TokenListItemProps extends SearchResultItem {
+interface TokenListItemProps {
+  category: string;
   token: TokenPropertiesWithName;
 }
 
 function TokenListItem({
+  category,
   token: { name, value, description },
-  searchResultData,
 }: TokenListItemProps) {
   const figmaUsage = getFigmaUsageForToken(name, value);
   const tokenNameWithPrefix = `--p-${name}`;
   const [copy, didJustCopy] = useCopyToClipboard(tokenNameWithPrefix);
 
+  let attributes = useGlobalSearchResult();
+  const isClickableSearchResult = !!attributes?.tabIndex;
+
   return (
     <TokenListContext.Consumer>
       {({ columns }) => (
         <tr
           key={name}
-          className={className(
-            styles.TokenListItem,
-            !!searchResultData && styles.renderedInSearchResults,
-            searchResultData?.isHighlighted && styles.isHighlighted
-          )}
-          {...searchResultData?.itemAttributes}
+          className={className(styles.TokenListItem)}
+          {...attributes}
           id={slugify(name)}
         >
           {columns.preview && (
             <td>
               <TokenPreview name={name} value={value} />
-              {searchResultData?.url && (
-                <Link href={searchResultData.url}>
+              {isClickableSearchResult && (
+                <Link href={`/tokens/${category}#${attributes?.id}`}>
                   <a className={styles.ClickableItemLink} tabIndex={-1}>
                     View token
                   </a>
@@ -158,10 +159,7 @@ function TokenListItem({
                       </div>
                     )}
                   >
-                    <button
-                      onClick={copy}
-                      tabIndex={searchResultData?.tabIndex}
-                    >
+                    <button onClick={copy} tabIndex={attributes?.tabIndex}>
                       <Image
                         src={iconClipboard}
                         alt={"Copy"}
diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts
index 913ab309344..d17c17eb91f 100644
--- a/polaris.shopify.com/src/types.ts
+++ b/polaris.shopify.com/src/types.ts
@@ -20,6 +20,7 @@ export const searchResultCategories = [
 export type SearchResultCategory = typeof searchResultCategories[number];
 
 export interface SearchResult {
+  id: string;
   category: SearchResultCategory;
   url: string;
   score: number;
@@ -34,6 +35,7 @@ export interface SearchResult {
       excerpt: string;
     };
     Tokens: {
+      category: string;
       token: TokenPropertiesWithName;
     };
     Icons: { icon: Icon };
@@ -57,18 +59,6 @@ export type Icon = {
   set: string;
 };
 
-export interface SearchResultItem {
-  searchResultData?: {
-    isHighlighted: boolean;
-    tabIndex: -1;
-    itemAttributes: {
-      id: string;
-      "data-is-active-descendant": boolean;
-    };
-    url: string;
-  };
-}
-
 export enum Breakpoints {
   Mobile = 500,
   Tablet = 768,
diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index ec4659a0c14..f075a02cfde 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -33,6 +33,7 @@ let results: SearchResults = [];
 // Add components
 components.forEach(({ frontMatter: { name, status }, intro }) => {
   results.push({
+    id: slugify(name),
     category: "Components",
     score: 0,
     url: `/components/${slugify(name)}`,
@@ -49,11 +50,13 @@ components.forEach(({ frontMatter: { name, status }, intro }) => {
 // Add color tokens
 Object.entries(colorLight).forEach(([tokenName, tokenValue]) => {
   results.push({
+    id: slugify(tokenName),
     category: "Tokens",
     score: 0,
     url: `/tokens/colors#${tokenName}`,
     meta: {
       Tokens: {
+        category: "colors",
         token: {
           name: tokenName,
           description: tokenValue.description || "",
@@ -70,11 +73,13 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
   Object.entries(tokenGroup).forEach(
     ([tokenName, tokenProperties]: [string, TokenProperties]) => {
       results.push({
+        id: slugify(tokenName),
         category: "Tokens",
         score: 0,
         url: `/tokens/${slugify(groupSlug)}#${tokenName}`,
         meta: {
           Tokens: {
+            category: groupSlug,
             token: {
               name: tokenName,
               description: tokenProperties.description || "",
@@ -91,6 +96,7 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
 Object.keys(metadata).forEach((fileName) => {
   const { name, set, description, keywords } = metadata[fileName];
   results.push({
+    id: slugify(fileName),
     category: "Icons",
     url: `/icons?icon=${fileName}`,
     score: 0,
@@ -107,6 +113,7 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
   const url = `/foundations/${section}/${slugify(name)}`;
 
   results.push({
+    id: slugify(name),
     category: "Foundations",
     score: 0,
     url,
@@ -163,10 +170,14 @@ export function search(query: string): GroupedSearchResults {
     }));
 
     searchResultCategories.forEach((category) => {
-      groupedResults[category].results = scoredResults
+      const resultsInCategory = scoredResults
         .filter((result) => result.category === category)
         .map((result) => ({ ...result, score: result.score || 0 }))
         .slice(0, MAX_RESULTS[category]);
+
+      if (resultsInCategory) {
+        groupedResults[category].results = resultsInCategory;
+      }
     });
 
     searchResultCategories.forEach((category) => {

From 6b5d1833fb23c2b7d077251d38298e744fde18e6 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 14:27:57 +0200
Subject: [PATCH 05/22] Refactor

---
 .../src/components/GlobalSearch/GlobalSearch.tsx          | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index 4f2e7f8448c..c40a693a576 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -11,7 +11,7 @@ import IconGrid from "../IconGrid";
 import ComponentGrid from "../ComponentGrid";
 import TokenList from "../TokenList";
 import Link from "next/link";
-import { slugify, stripMarkdownLinks } from "../../utils/various";
+import { stripMarkdownLinks } from "../../utils/various";
 import { Dialog } from "@headlessui/react";
 import { KeyboardEventHandler } from "react";
 
@@ -24,14 +24,16 @@ export function useGlobalSearchResult() {
 
   if (!searchContext.id) return null;
 
+  const { id, currentItemId } = searchContext;
+
   let data = {
-    id: slugify(searchContext.id),
+    id,
     "data-is-global-search-result": true,
     "data-is-current-result": false,
     tabIndex: -1,
   };
 
-  if (searchContext.currentItemId === searchContext.id) {
+  if (currentItemId === id) {
     data = {
       ...data,
       "data-is-current-result": true,

From ee2329c520526ab8798ca4e36d657464686fac34 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 14:31:12 +0200
Subject: [PATCH 06/22] Refactor

---
 .../src/components/GlobalSearch/GlobalSearch.tsx             | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index c40a693a576..a9915809e0d 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -34,10 +34,7 @@ export function useGlobalSearchResult() {
   };
 
   if (currentItemId === id) {
-    data = {
-      ...data,
-      "data-is-current-result": true,
-    };
+    data["data-is-current-result"] = true;
   }
 
   return data;

From 03a48135402ebd1f6965435fd6667c001213220c Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 14:31:53 +0200
Subject: [PATCH 07/22] Simplify code

---
 .../src/components/GlobalSearch/GlobalSearch.tsx       | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index a9915809e0d..c7ef6ce2a06 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -26,18 +26,12 @@ export function useGlobalSearchResult() {
 
   const { id, currentItemId } = searchContext;
 
-  let data = {
+  return {
     id,
     "data-is-global-search-result": true,
-    "data-is-current-result": false,
+    "data-is-current-result": currentItemId === id,
     tabIndex: -1,
   };
-
-  if (currentItemId === id) {
-    data["data-is-current-result"] = true;
-  }
-
-  return data;
 }
 
 function scrollToTop() {

From 5aa9b6bfa7b5ba1c759363c0584af53a20ef2bb9 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 14:35:34 +0200
Subject: [PATCH 08/22] Remove props

---
 .../src/components/GlobalSearch/GlobalSearch.tsx              | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index c7ef6ce2a06..b8816fc4ba7 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -15,8 +15,6 @@ import { stripMarkdownLinks } from "../../utils/various";
 import { Dialog } from "@headlessui/react";
 import { KeyboardEventHandler } from "react";
 
-interface Props {}
-
 const SearchContext = createContext({ id: "", currentItemId: "" });
 
 export function useGlobalSearchResult() {
@@ -65,7 +63,7 @@ function scrollIntoView() {
   }
 }
 
-function GlobalSearch({}: Props) {
+function GlobalSearch() {
   const [searchResults, setSearchResults] = useState<GroupedSearchResults>();
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");

From c33802871d177769cfaeb917870ad7caea48bf4e Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 15:03:10 +0200
Subject: [PATCH 09/22] Use arrays for search results

---
 .../components/GlobalSearch/GlobalSearch.tsx  | 258 +++++++++---------
 polaris.shopify.com/src/types.ts              |  16 +-
 polaris.shopify.com/src/utils/search.ts       |  75 +++--
 3 files changed, 165 insertions(+), 184 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index b8816fc4ba7..e889532fd4c 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -15,13 +15,18 @@ import { stripMarkdownLinks } from "../../utils/various";
 import { Dialog } from "@headlessui/react";
 import { KeyboardEventHandler } from "react";
 
+const CATEGORY_NAMES: { [key in SearchResultCategory]: string } = {
+  components: "Components",
+  foundations: "Foundations",
+  tokens: "Tokens",
+  icons: "Icons",
+};
+
 const SearchContext = createContext({ id: "", currentItemId: "" });
 
 export function useGlobalSearchResult() {
   const searchContext = useContext(SearchContext);
-
   if (!searchContext.id) return null;
-
   const { id, currentItemId } = searchContext;
 
   return {
@@ -34,9 +39,7 @@ export function useGlobalSearchResult() {
 
 function scrollToTop() {
   const overflowEl = document.querySelector(`.${styles.ResultsInner}`);
-  if (overflowEl) {
-    overflowEl.scrollTo({ top: 0, behavior: "smooth" });
-  }
+  overflowEl?.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 function scrollIntoView() {
@@ -64,7 +67,7 @@ function scrollIntoView() {
 }
 
 function GlobalSearch() {
-  const [searchResults, setSearchResults] = useState<GroupedSearchResults>();
+  const [searchResults, setSearchResults] = useState<GroupedSearchResults>([]);
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [currentResultIndex, setCurrentResultIndex] = useState(0);
@@ -72,13 +75,9 @@ function GlobalSearch() {
 
   let resultsInRenderedOrder: SearchResults = [];
 
-  if (searchResults) {
-    Object.values(searchResults)
-      .sort((a, b) => a.topScore - b.topScore)
-      .forEach((group) => {
-        resultsInRenderedOrder = [...resultsInRenderedOrder, ...group.results];
-      });
-  }
+  searchResults.forEach((group) => {
+    resultsInRenderedOrder = [...resultsInRenderedOrder, ...group.results];
+  });
 
   const searchResultsCount = resultsInRenderedOrder.length;
 
@@ -223,122 +222,119 @@ function SearchResults({
   const router = useRouter();
   return (
     <>
-      {Object.entries(searchResults)
-        .sort((a, b) => a[1].topScore - b[1].topScore)
-        .map(([category]) => {
-          const typedCategory = category as SearchResultCategory;
-          const results = searchResults[typedCategory].results;
-          if (results.length === 0) return null;
-
-          switch (typedCategory) {
-            case "Foundations":
-              return (
-                <ResultsGroup title={category}>
-                  <div className={styles.FoundationsResults}>
-                    {results.map(({ id, url, meta }) => {
-                      if (!meta.Foundations) return null;
-                      const { title, excerpt } = meta.Foundations;
-                      return (
-                        <SearchContext.Provider
-                          key={title}
-                          value={{ currentItemId, id }}
-                        >
-                          <li className={styles.FoundationsResult}>
-                            <Link href={url} passHref>
-                              <a>
-                                <h4>{title}</h4>
-                                <p>{stripMarkdownLinks(excerpt)}</p>
-                              </a>
-                            </Link>
-                          </li>
-                        </SearchContext.Provider>
-                      );
-                    })}
-                  </div>
-                </ResultsGroup>
-              );
-
-            case "Components": {
-              return (
-                <ResultsGroup title={category}>
-                  <ComponentGrid>
-                    {results.map(({ id, url, meta }) => {
-                      if (!meta.Components) return null;
-                      const { name, description, status } = meta.Components;
-                      return (
-                        <SearchContext.Provider
-                          key={id}
-                          value={{ currentItemId, id }}
-                        >
-                          <ComponentGrid.Item
-                            url={url}
-                            description={description}
-                            name={name}
-                            status={status}
-                          />
-                        </SearchContext.Provider>
-                      );
-                    })}
-                  </ComponentGrid>
-                </ResultsGroup>
-              );
-            }
-
-            case "Tokens": {
-              return (
-                <ResultsGroup title="Tokens">
-                  <TokenList
-                    showTableHeading={false}
-                    columns={{
-                      preview: true,
-                      name: true,
-                      figmaUsage: false,
-                      value: false,
-                      description: true,
-                    }}
-                  >
-                    {results.map(({ id, meta }) => {
-                      if (!meta.Tokens) return null;
-                      const { token, category } = meta.Tokens;
-                      return (
-                        <SearchContext.Provider
-                          key={id}
-                          value={{ currentItemId, id }}
-                        >
-                          <TokenList.Item category={category} token={token} />
-                        </SearchContext.Provider>
-                      );
-                    })}
-                  </TokenList>
-                </ResultsGroup>
-              );
-            }
-
-            case "Icons": {
-              return (
-                <ResultsGroup title={category}>
-                  <IconGrid>
-                    {results.map(({ id, url, meta }) => {
-                      if (!meta.Icons) return null;
-                      const { icon } = meta.Icons;
-                      return (
-                        <SearchContext.Provider
-                          key={id}
-                          value={{ currentItemId, id }}
-                        >
-                          <IconGrid.Item
-                            icon={icon}
-                            onClick={() => router.push(url)}
-                          />
-                        </SearchContext.Provider>
-                      );
-                    })}
-                  </IconGrid>
-                </ResultsGroup>
-              );
-            }
+      {searchResults.map(({ category, results }) => {
+        switch (category) {
+          case "foundations":
+            return (
+              <ResultsGroup category={category}>
+                <div className={styles.FoundationsResults}>
+                  {results.map(({ id, url, meta }) => {
+                    if (!meta.Foundations) return null;
+                    const { title, excerpt } = meta.Foundations;
+                    return (
+                      <SearchContext.Provider
+                        key={title}
+                        value={{ currentItemId, id }}
+                      >
+                        <li className={styles.FoundationsResult}>
+                          <Link href={url} passHref>
+                            <a>
+                              <h4>{title}</h4>
+                              <p>{stripMarkdownLinks(excerpt)}</p>
+                            </a>
+                          </Link>
+                        </li>
+                      </SearchContext.Provider>
+                    );
+                  })}
+                </div>
+              </ResultsGroup>
+            );
+
+          case "components": {
+            return (
+              <ResultsGroup category={category}>
+                <ComponentGrid>
+                  {results.map(({ id, url, meta }) => {
+                    if (!meta.Components) return null;
+                    const { name, description, status } = meta.Components;
+                    return (
+                      <SearchContext.Provider
+                        key={id}
+                        value={{ currentItemId, id }}
+                      >
+                        <ComponentGrid.Item
+                          url={url}
+                          description={description}
+                          name={name}
+                          status={status}
+                        />
+                      </SearchContext.Provider>
+                    );
+                  })}
+                </ComponentGrid>
+              </ResultsGroup>
+            );
           }
-        })}
+
+          case "tokens": {
+            return (
+              <ResultsGroup category={category}>
+                <TokenList
+                  showTableHeading={false}
+                  columns={{
+                    preview: true,
+                    name: true,
+                    figmaUsage: false,
+                    value: false,
+                    description: true,
+                  }}
+                >
+                  {results.map(({ id, meta }) => {
+                    if (!meta.Tokens) return null;
+                    const { token, category } = meta.Tokens;
+                    return (
+                      <SearchContext.Provider
+                        key={id}
+                        value={{ currentItemId, id }}
+                      >
+                        <TokenList.Item category={category} token={token} />
+                      </SearchContext.Provider>
+                    );
+                  })}
+                </TokenList>
+              </ResultsGroup>
+            );
+          }
+
+          case "icons": {
+            return (
+              <ResultsGroup category={category}>
+                <IconGrid>
+                  {results.map(({ id, url, meta }) => {
+                    if (!meta.Icons) return null;
+                    const { icon } = meta.Icons;
+                    return (
+                      <SearchContext.Provider
+                        key={id}
+                        value={{ currentItemId, id }}
+                      >
+                        <IconGrid.Item
+                          icon={icon}
+                          onClick={() => router.push(url)}
+                        />
+                      </SearchContext.Provider>
+                    );
+                  })}
+                </IconGrid>
+              </ResultsGroup>
+            );
+          }
+
+          default:
+            return [];
+        }
+      })}
     </>
   );
 }
@@ -355,15 +351,15 @@ function SearchIcon() {
 }
 
 function ResultsGroup({
-  title,
+  category,
   children,
 }: {
-  title: string;
+  category: SearchResultCategory;
   children: React.ReactNode;
 }) {
   return (
     <div className={styles.ResultsGroup}>
-      <h3 className={styles.ResultsGroupName}>{title}</h3>
+      <h3 className={styles.ResultsGroupName}>{CATEGORY_NAMES[category]}</h3>
       {children}
     </div>
   );
diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts
index d17c17eb91f..de1d0d288f5 100644
--- a/polaris.shopify.com/src/types.ts
+++ b/polaris.shopify.com/src/types.ts
@@ -11,10 +11,10 @@ export interface TokenPropertiesWithName extends TokenProperties {
 }
 
 export const searchResultCategories = [
-  "Foundations",
-  "Components",
-  "Tokens",
-  "Icons",
+  "foundations",
+  "components",
+  "tokens",
+  "icons",
 ] as const;
 
 export type SearchResultCategory = typeof searchResultCategories[number];
@@ -45,11 +45,9 @@ export interface SearchResult {
 export type SearchResults = SearchResult[];
 
 export type GroupedSearchResults = {
-  [key in SearchResultCategory]: {
-    results: SearchResult[];
-    topScore: number;
-  };
-};
+  category: SearchResultCategory;
+  results: SearchResult[];
+}[];
 
 export type Icon = {
   fileName: string;
diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index f075a02cfde..8b003728834 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -2,6 +2,7 @@ import {
   SearchResults,
   GroupedSearchResults,
   searchResultCategories,
+  SearchResultCategory,
 } from "../types";
 import { tokens, TokenProperties } from "@shopify/polaris-tokens";
 import Fuse from "fuse.js";
@@ -11,11 +12,11 @@ import metadata from "@shopify/polaris-icons/metadata";
 import components from "../data/components.json";
 import foundations from "../data/foundations.json";
 
-const MAX_RESULTS: { [key: string]: number } = {
-  Foundations: 3,
-  Components: 3,
-  Tokens: 5,
-  Icons: 14,
+const MAX_RESULTS: { [key in SearchResultCategory]: number } = {
+  foundations: 3,
+  components: 3,
+  tokens: 5,
+  icons: 14,
 };
 
 const {
@@ -34,7 +35,7 @@ let results: SearchResults = [];
 components.forEach(({ frontMatter: { name, status }, intro }) => {
   results.push({
     id: slugify(name),
-    category: "Components",
+    category: "components",
     score: 0,
     url: `/components/${slugify(name)}`,
     meta: {
@@ -51,7 +52,7 @@ components.forEach(({ frontMatter: { name, status }, intro }) => {
 Object.entries(colorLight).forEach(([tokenName, tokenValue]) => {
   results.push({
     id: slugify(tokenName),
-    category: "Tokens",
+    category: "tokens",
     score: 0,
     url: `/tokens/colors#${tokenName}`,
     meta: {
@@ -74,7 +75,7 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
     ([tokenName, tokenProperties]: [string, TokenProperties]) => {
       results.push({
         id: slugify(tokenName),
-        category: "Tokens",
+        category: "tokens",
         score: 0,
         url: `/tokens/${slugify(groupSlug)}#${tokenName}`,
         meta: {
@@ -97,7 +98,7 @@ Object.keys(metadata).forEach((fileName) => {
   const { name, set, description, keywords } = metadata[fileName];
   results.push({
     id: slugify(fileName),
-    category: "Icons",
+    category: "icons",
     url: `/icons?icon=${fileName}`,
     score: 0,
     meta: {
@@ -114,7 +115,7 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
 
   results.push({
     id: slugify(name),
-    category: "Foundations",
+    category: "foundations",
     score: 0,
     url,
     meta: {
@@ -129,23 +130,23 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
 const fuse = new Fuse(results, {
   keys: [
     // Foundations
-    { name: "meta.Foundations.title", weight: 100 },
-    { name: "meta.Foundations.excerpt", weight: 50 },
+    { name: "meta.foundations.title", weight: 100 },
+    { name: "meta.foundations.excerpt", weight: 50 },
 
     // Components
-    { name: "meta.Components.name", weight: 100 },
-    { name: "meta.Components.description", weight: 50 },
+    { name: "meta.components.name", weight: 100 },
+    { name: "meta.components.description", weight: 50 },
 
     // Tokens
-    { name: "meta.Tokens.token.name", weight: 200 },
-    { name: "meta.Tokens.token.value", weight: 50 },
+    { name: "meta.tokens.token.name", weight: 200 },
+    { name: "meta.tokens.token.value", weight: 50 },
 
     // Icons
-    { name: "meta.Icons.icon.fileName", weight: 50 },
-    { name: "meta.Icons.icon.name", weight: 50 },
-    { name: "meta.Icons.icon.keywords", weight: 20 },
-    { name: "meta.Icons.icon.set", weight: 20 },
-    { name: "meta.Icons.icon.description", weight: 50 },
+    { name: "meta.icons.icon.fileName", weight: 50 },
+    { name: "meta.icons.icon.name", weight: 50 },
+    { name: "meta.icons.icon.keywords", weight: 20 },
+    { name: "meta.icons.icon.set", weight: 20 },
+    { name: "meta.icons.icon.description", weight: 50 },
   ],
   includeScore: true,
   threshold: 0.5,
@@ -154,12 +155,7 @@ const fuse = new Fuse(results, {
 });
 
 export function search(query: string): GroupedSearchResults {
-  const groupedResults: GroupedSearchResults = {
-    Foundations: { results: [], topScore: 0 },
-    Components: { results: [], topScore: 0 },
-    Tokens: { results: [], topScore: 0 },
-    Icons: { results: [], topScore: 0 },
-  };
+  const groupedResults: GroupedSearchResults = [];
 
   if (query.length > 0) {
     const fuseResults = fuse.search(query);
@@ -170,25 +166,16 @@ export function search(query: string): GroupedSearchResults {
     }));
 
     searchResultCategories.forEach((category) => {
-      const resultsInCategory = scoredResults
-        .filter((result) => result.category === category)
-        .map((result) => ({ ...result, score: result.score || 0 }))
-        .slice(0, MAX_RESULTS[category]);
-
-      if (resultsInCategory) {
-        groupedResults[category].results = resultsInCategory;
-      }
+      groupedResults.push({
+        category,
+        results: scoredResults
+          .filter((result) => result.category === category)
+          .map((result) => ({ ...result, score: result.score || 0 }))
+          .slice(0, MAX_RESULTS[category]),
+      });
     });
 
-    searchResultCategories.forEach((category) => {
-      groupedResults[category] = {
-        ...groupedResults[category],
-        topScore:
-          groupedResults[category].results.length > 0
-            ? groupedResults[category].results[0].score
-            : 0,
-      };
-    });
+    groupedResults.sort((a, b) => a.results[0].score - b.results[0].score);
   }
 
   return groupedResults;

From d2c60932478185eae3b0841355c540beb765c8d7 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 15:05:58 +0200
Subject: [PATCH 10/22] Fix search result casing

---
 polaris.shopify.com/src/types.ts        |  8 ++++----
 polaris.shopify.com/src/utils/search.ts | 14 ++++++++------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts
index de1d0d288f5..76a4f276cf4 100644
--- a/polaris.shopify.com/src/types.ts
+++ b/polaris.shopify.com/src/types.ts
@@ -25,20 +25,20 @@ export interface SearchResult {
   url: string;
   score: number;
   meta: Partial<{
-    Components: {
+    components: {
       name: string;
       description: string;
       status?: Status;
     };
-    Foundations: {
+    foundations: {
       title: string;
       excerpt: string;
     };
-    Tokens: {
+    tokens: {
       category: string;
       token: TokenPropertiesWithName;
     };
-    Icons: { icon: Icon };
+    icons: { icon: Icon };
   }>;
 }
 
diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index 8b003728834..142302e592f 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -39,7 +39,7 @@ components.forEach(({ frontMatter: { name, status }, intro }) => {
     score: 0,
     url: `/components/${slugify(name)}`,
     meta: {
-      Components: {
+      components: {
         name,
         description: stripMarkdownLinks(intro),
         status,
@@ -56,7 +56,7 @@ Object.entries(colorLight).forEach(([tokenName, tokenValue]) => {
     score: 0,
     url: `/tokens/colors#${tokenName}`,
     meta: {
-      Tokens: {
+      tokens: {
         category: "colors",
         token: {
           name: tokenName,
@@ -79,7 +79,7 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
         score: 0,
         url: `/tokens/${slugify(groupSlug)}#${tokenName}`,
         meta: {
-          Tokens: {
+          tokens: {
             category: groupSlug,
             token: {
               name: tokenName,
@@ -102,7 +102,7 @@ Object.keys(metadata).forEach((fileName) => {
     url: `/icons?icon=${fileName}`,
     score: 0,
     meta: {
-      Icons: {
+      icons: {
         icon: { fileName, keywords, name, description, set },
       },
     },
@@ -119,7 +119,7 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
     score: 0,
     url,
     meta: {
-      Foundations: {
+      foundations: {
         title: name,
         excerpt: intro,
       },
@@ -175,7 +175,9 @@ export function search(query: string): GroupedSearchResults {
       });
     });
 
-    groupedResults.sort((a, b) => a.results[0].score - b.results[0].score);
+    groupedResults.sort(
+      (a, b) => (a.results[0]?.score || 0) - (b.results[0]?.score || 0)
+    );
   }
 
   return groupedResults;

From cae41c045696e93318d320b22cf45466de7fdad8 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 15:06:43 +0200
Subject: [PATCH 11/22] Change uppercase keys to lowercase

---
 .../src/components/GlobalSearch/GlobalSearch.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index e889532fd4c..fb6300e8f1a 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -229,8 +229,8 @@ function SearchResults({
               <ResultsGroup category={category}>
                 <div className={styles.FoundationsResults}>
                   {results.map(({ id, url, meta }) => {
-                    if (!meta.Foundations) return null;
-                    const { title, excerpt } = meta.Foundations;
+                    if (!meta.foundations) return null;
+                    const { title, excerpt } = meta.foundations;
                     return (
                       <SearchContext.Provider
                         key={title}
@@ -256,8 +256,8 @@ function SearchResults({
               <ResultsGroup category={category}>
                 <ComponentGrid>
                   {results.map(({ id, url, meta }) => {
-                    if (!meta.Components) return null;
-                    const { name, description, status } = meta.Components;
+                    if (!meta.components) return null;
+                    const { name, description, status } = meta.components;
                     return (
                       <SearchContext.Provider
                         key={id}
@@ -291,8 +291,8 @@ function SearchResults({
                   }}
                 >
                   {results.map(({ id, meta }) => {
-                    if (!meta.Tokens) return null;
-                    const { token, category } = meta.Tokens;
+                    if (!meta.tokens) return null;
+                    const { token, category } = meta.tokens;
                     return (
                       <SearchContext.Provider
                         key={id}
@@ -312,8 +312,8 @@ function SearchResults({
               <ResultsGroup category={category}>
                 <IconGrid>
                   {results.map(({ id, url, meta }) => {
-                    if (!meta.Icons) return null;
-                    const { icon } = meta.Icons;
+                    if (!meta.icons) return null;
+                    const { icon } = meta.icons;
                     return (
                       <SearchContext.Provider
                         key={id}

From 0c933956cdb2873a740a08df604f0780fa8b997a Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 17:45:30 +0200
Subject: [PATCH 12/22] Extract Foundations grid into separate component

---
 .../ComponentGrid/ComponentGrid.module.scss   |   2 +-
 .../ComponentGrid/ComponentGrid.tsx           |  10 +-
 .../FoundationsGrid.module.scss               | 145 +++++++++++++++++
 .../FoundationsGrid/FoundationsGrid.tsx       |  57 +++++++
 .../src/components/FoundationsGrid/index.ts   |   3 +
 .../FoundationsIndexPage.module.scss          | 120 --------------
 .../FoundationsIndexPage.tsx                  |  42 ++---
 .../GlobalSearch/GlobalSearch.module.scss     |  37 +----
 .../components/GlobalSearch/GlobalSearch.tsx  |  36 +++--
 .../src/components/IconGrid/IconGrid.tsx      |   6 +-
 .../src/components/TokenList/TokenList.tsx    |  13 +-
 .../src/components/TokensPage/TokensPage.tsx  |   6 +-
 polaris.shopify.com/src/data/foundations.json | 146 ++++++++++++------
 .../src/scripts/parseGuidelines.mjs           |   2 +-
 polaris.shopify.com/src/types.ts              |   1 +
 polaris.shopify.com/src/utils/search.ts       |   5 +-
 16 files changed, 374 insertions(+), 257 deletions(-)
 create mode 100644 polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
 create mode 100644 polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.tsx
 create mode 100644 polaris.shopify.com/src/components/FoundationsGrid/index.ts

diff --git a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss
index 075af9e06e1..6797448a049 100644
--- a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss
+++ b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.module.scss
@@ -30,7 +30,7 @@
   }
 
   @media (hover: hover) {
-    &[data-is-current-result="true"] {
+    &[data-is-current-result="true"] a {
       background: var(--search-highlight-color);
     }
   }
diff --git a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
index d00da137942..97d5ee61930 100644
--- a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
+++ b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
@@ -27,12 +27,16 @@ function ComponentGridItem({
   url,
   status,
 }: ComponentGridItemProps) {
-  const attributes = useGlobalSearchResult();
+  const searchAttributes = useGlobalSearchResult();
 
   return (
-    <li key={name} className={className(styles.Component)} {...attributes}>
+    <li
+      key={name}
+      className={className(styles.Component)}
+      {...searchAttributes}
+    >
       <Link href={url} passHref>
-        <a tabIndex={attributes?.tabIndex}>
+        <a tabIndex={searchAttributes?.tabIndex}>
           <div className={styles.Preview}>
             <Image
               src={`/component-previews/${slugify(name)}.png`}
diff --git a/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
new file mode 100644
index 00000000000..864760bba7a
--- /dev/null
+++ b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
@@ -0,0 +1,145 @@
+@import "../../styles/fonts.scss";
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.FoundationsGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  h2 {
+    @include heading-2;
+    margin-bottom: 1.5rem;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    display: grid;
+    gap: 0.75rem;
+    // https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
+    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+
+    @media screen and (max-width: $breakpointDesktopLarge) {
+      // Foundations section currently has 5 articles. This avoids
+      // a 4 + 1 situation which looks horrible.
+      grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
+    }
+  }
+}
+
+.FoundationsGridItem {
+  @media (hover: hover) {
+    &[data-is-current-result="true"] {
+      background: var(--search-highlight-color);
+    }
+  }
+
+  &[data-category="foundations"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-1);
+    }
+  }
+
+  &[data-category="design"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-2);
+    }
+  }
+
+  &[data-category="content"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-3);
+    }
+  }
+
+  &[data-category="patterns"] {
+    a:before,
+    .Icon {
+      background: var(--decorative-4);
+    }
+  }
+
+  a {
+    height: 100%;
+    position: relative;
+    padding: 1.25rem 1.25rem 1rem;
+    display: block;
+    color: inherit;
+    border-radius: var(--border-radius-800);
+    box-shadow: var(--card-shadow);
+
+    &[data-is-current-result="true"] {
+      background: var(--search-highlight-color);
+    }
+
+    &:hover {
+      box-shadow: var(--card-shadow-hover);
+    }
+
+    &:focus-visible {
+      box-shadow: var(--focus-outline);
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 45px;
+      margin: auto;
+      border-radius: var(--border-radius-800) var(--border-radius-800) 0 0;
+      opacity: 0.25;
+    }
+
+    .Icon {
+      position: relative;
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50px;
+      width: 50px;
+      border-radius: var(--border-radius-800);
+
+      svg {
+        filter: brightness(-100%);
+        opacity: 0.66;
+      }
+
+      @include dark-mode {
+        svg {
+          filter: brightness(1000%);
+        }
+      }
+    }
+
+    h4 {
+      @include heading-4;
+      color: var(--text-strong);
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: pre;
+    }
+
+    p {
+      margin: 0;
+      font-size: var(--font-size-100);
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  a:before,
+  .Icon {
+    background: var(--decorative-1);
+  }
+}
diff --git a/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.tsx b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.tsx
new file mode 100644
index 00000000000..fec1d1e7544
--- /dev/null
+++ b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.tsx
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import React from "react";
+import { stripMarkdownLinks } from "../../utils/various";
+import { useGlobalSearchResult } from "../GlobalSearch/GlobalSearch";
+import styles from "./FoundationsGrid.module.scss";
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+function FoundationsGrid({ title, children }: Props) {
+  return (
+    <div className={styles.FoundationsGrid}>
+      <div key={title} className={styles.Category}>
+        <div className={styles.Text}>
+          {title && <h2>{title}</h2>}
+          <ul>{children}</ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface FoundationsGridItemProps {
+  title: string;
+  excerpt: string;
+  url: string;
+  icon: JSX.Element;
+  category: string;
+}
+
+function FoundationsGridItem({
+  title,
+  excerpt,
+  url,
+  icon,
+  category,
+}: FoundationsGridItemProps) {
+  const searchAttributes = useGlobalSearchResult();
+
+  return (
+    <li className={styles.FoundationsGridItem} data-category={category}>
+      <Link href={url} passHref>
+        <a {...searchAttributes}>
+          <div className={styles.Icon}>{icon}</div>
+          <h4>{title}</h4>
+          <p>{stripMarkdownLinks(excerpt)}</p>
+        </a>
+      </Link>
+    </li>
+  );
+}
+
+FoundationsGrid.Item = FoundationsGridItem;
+
+export default FoundationsGrid;
diff --git a/polaris.shopify.com/src/components/FoundationsGrid/index.ts b/polaris.shopify.com/src/components/FoundationsGrid/index.ts
new file mode 100644
index 00000000000..26650d4ca88
--- /dev/null
+++ b/polaris.shopify.com/src/components/FoundationsGrid/index.ts
@@ -0,0 +1,3 @@
+import FoundationsGrid from "./FoundationsGrid";
+
+export default FoundationsGrid;
diff --git a/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.module.scss b/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.module.scss
index ac0916a405f..ecdf94d2d4d 100644
--- a/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.module.scss
+++ b/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.module.scss
@@ -1,125 +1,5 @@
-@import "../../styles/fonts.scss";
-@import "../../styles/variables.scss";
-@import "../../styles/mixins.scss";
-
-.FoundationsIndexPage {
-  h2 {
-    @include heading-2;
-    margin-bottom: 1.5rem;
-  }
-}
-
 .Categories {
   display: flex;
   flex-direction: column;
   gap: 3rem;
 }
-
-.Category {
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    display: grid;
-    gap: 0.75rem;
-    // https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
-    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
-
-    @media screen and (max-width: $breakpointDesktopLarge) {
-      // Foundations section currently has 5 articles. This avoids
-      // a 4 + 1 situation which looks horrible.
-      grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
-    }
-  }
-
-  a {
-    height: 100%;
-    position: relative;
-    padding: 1.25rem 1.25rem 1rem;
-    display: block;
-    color: inherit;
-    border-radius: var(--border-radius-800);
-    box-shadow: var(--card-shadow);
-
-    &:hover {
-      box-shadow: var(--card-shadow-hover);
-    }
-
-    &:focus-visible {
-      box-shadow: var(--focus-outline);
-    }
-
-    &:before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 45px;
-      margin: auto;
-      border-radius: var(--border-radius-800) var(--border-radius-800) 0 0;
-      opacity: 0.25;
-    }
-
-    .Icon {
-      position: relative;
-      margin-bottom: 1rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 50px;
-      width: 50px;
-      border-radius: var(--border-radius-800);
-
-      svg {
-        filter: brightness(-100%);
-        opacity: 0.66;
-      }
-
-      @include dark-mode {
-        svg {
-          filter: brightness(1000%);
-        }
-      }
-    }
-
-    h4 {
-      @include heading-4;
-      color: var(--text-strong);
-      overflow: hidden;
-      width: 100%;
-      text-overflow: ellipsis;
-      white-space: pre;
-    }
-
-    p {
-      margin: 0;
-      font-size: var(--font-size-100);
-      display: -webkit-box;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-  }
-}
-
-.Categories {
-  .Category {
-    &:nth-child(1) a:before,
-    &:nth-child(1) .Icon {
-      background: var(--decorative-1);
-    }
-    &:nth-child(2) a:before,
-    &:nth-child(2) .Icon {
-      background: var(--decorative-2);
-    }
-    &:nth-child(3) a:before,
-    &:nth-child(3) .Icon {
-      background: var(--decorative-3);
-    }
-    &:nth-child(4) a:before,
-    &:nth-child(4) .Icon {
-      background: var(--decorative-4);
-    }
-  }
-}
diff --git a/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx b/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx
index 315228af6c0..c97b0cc6793 100644
--- a/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx
+++ b/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx
@@ -1,10 +1,9 @@
-import Head from "next/head";
 import { foundationsNavItems } from "../../data/navItems";
-import { getTitleTagValue } from "../../utils/various";
 import styles from "./FoundationsIndexPage.module.scss";
 import Link from "next/link";
 import Layout from "../Layout";
 import PageMeta from "../PageMeta";
+import FoundationsGrid from "../FoundationsGrid";
 
 interface Props {}
 
@@ -23,30 +22,23 @@ function FoundationsIndexPage({}: Props) {
       >
         <div className={styles.Categories}>
           {foundationsNavItems.map((category) => {
-            const url = category.children && category.children[0].url;
-            if (!url) return null;
+            if (!category.children) return null;
             return (
-              <div key={category.title} className={styles.Category}>
-                <div className={styles.Text}>
-                  <h2>{category.title}</h2>
-                  <ul>
-                    {category.children?.map((child) => {
-                      if (!child.url) return null;
-                      return (
-                        <li key={child.title}>
-                          <Link href={child.url} passHref>
-                            <a>
-                              <div className={styles.Icon}>{child.icon}</div>
-                              <h4>{child.title}</h4>
-                              <p>{child.excerpt}</p>
-                            </a>
-                          </Link>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </div>
+              <FoundationsGrid key={category.title} title={category.title}>
+                {category.children.map((child) => {
+                  if (!child.url) return null;
+                  return (
+                    <FoundationsGrid.Item
+                      key={category.title}
+                      title={child.title}
+                      excerpt={child.excerpt}
+                      icon={child.icon}
+                      url={child.url}
+                      category={category.title.toLowerCase()}
+                    />
+                  );
+                })}
+              </FoundationsGrid>
             );
           })}
         </div>
diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
index d6daaf8473f..4a28b49bc0c 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.module.scss
@@ -159,41 +159,6 @@
   }
 }
 
-.FoundationsResults {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.FoundationsResult {
-  position: relative;
-  padding: 1rem;
-  box-shadow: var(--card-shadow);
-  border-radius: var(--border-radius-600);
-
-  @media (hover: hover) {
-    &[data-is-current-result="true"] {
-      background: var(--search-highlight-color);
-    }
-  }
-
-  a {
-    display: block;
-    color: inherit;
-  }
-
-  h4 {
-    font-weight: var(--font-weight-500);
-    font-size: var(--font-size-300);
-    color: var(--text-strong);
-  }
-
-  p {
-    margin-top: 0.1rem;
-    font-size: var(--font-size-100);
-  }
-}
-
 @keyframes search-results-enter {
   from {
     transform: scale(0.98);
@@ -206,7 +171,7 @@
   }
 }
 
-.ModalBackdrop {
+.PreventBackgroundInteractions {
   position: fixed;
   top: 0;
   right: 0;
diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index fb6300e8f1a..6a0ce801184 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -10,10 +10,10 @@ import { useRouter } from "next/router";
 import IconGrid from "../IconGrid";
 import ComponentGrid from "../ComponentGrid";
 import TokenList from "../TokenList";
-import Link from "next/link";
-import { stripMarkdownLinks } from "../../utils/various";
 import { Dialog } from "@headlessui/react";
 import { KeyboardEventHandler } from "react";
+import FoundationsGrid from "../FoundationsGrid";
+import { foundationsNavItems } from "../../data/navItems";
 
 const CATEGORY_NAMES: { [key in SearchResultCategory]: string } = {
   components: "Components",
@@ -22,6 +22,13 @@ const CATEGORY_NAMES: { [key in SearchResultCategory]: string } = {
   icons: "Icons",
 };
 
+const foundationsIcons: { [title: string]: JSX.Element } = {};
+Object.entries(foundationsNavItems).forEach(([, value]) => {
+  value.children?.forEach((child) => {
+    foundationsIcons[child.title] = child.icon;
+  });
+});
+
 const SearchContext = createContext({ id: "", currentItemId: "" });
 
 export function useGlobalSearchResult() {
@@ -161,7 +168,7 @@ function GlobalSearch() {
       </button>
 
       <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
-        <div className={styles.ModalBackdrop}></div>
+        <div className={styles.PreventBackgroundInteractions}></div>
         <div className="dark-mode">
           <Dialog.Panel className={styles.Results}>
             {isOpen && (
@@ -223,31 +230,32 @@ function SearchResults({
   return (
     <>
       {searchResults.map(({ category, results }) => {
+        if (results.length === 0) return null;
         switch (category) {
           case "foundations":
             return (
               <ResultsGroup category={category}>
-                <div className={styles.FoundationsResults}>
+                <FoundationsGrid>
                   {results.map(({ id, url, meta }) => {
                     if (!meta.foundations) return null;
-                    const { title, excerpt } = meta.foundations;
+                    const { title, excerpt, category } = meta.foundations;
+                    const icon = foundationsIcons[title];
                     return (
                       <SearchContext.Provider
                         key={title}
                         value={{ currentItemId, id }}
                       >
-                        <li className={styles.FoundationsResult}>
-                          <Link href={url} passHref>
-                            <a>
-                              <h4>{title}</h4>
-                              <p>{stripMarkdownLinks(excerpt)}</p>
-                            </a>
-                          </Link>
-                        </li>
+                        <FoundationsGrid.Item
+                          title={title}
+                          excerpt={excerpt}
+                          category={category}
+                          url={url}
+                          icon={icon}
+                        />
                       </SearchContext.Provider>
                     );
                   })}
-                </div>
+                </FoundationsGrid>
               </ResultsGroup>
             );
 
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
index 6612c692b1c..faaf1fbfa06 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
@@ -25,13 +25,13 @@ interface IconGridItemProps {
 }
 
 function IconGridItem({ icon, onClick, isSelected }: IconGridItemProps) {
-  const attributes = useGlobalSearchResult();
+  const searchAttributes = useGlobalSearchResult();
 
   return (
     <li
       key={`${icon.name}-${icon.set}`}
       className={className(styles.Icon, isSelected && styles.isSelected)}
-      {...attributes}
+      {...searchAttributes}
     >
       <Tooltip
         ariaLabel={icon.description}
@@ -45,7 +45,7 @@ function IconGridItem({ icon, onClick, isSelected }: IconGridItemProps) {
       >
         <button
           onClick={() => onClick(icon.name)}
-          tabIndex={attributes?.tabIndex}
+          tabIndex={searchAttributes?.tabIndex}
         >
           <div className={styles.SVGWrapper}>
             <Image
diff --git a/polaris.shopify.com/src/components/TokenList/TokenList.tsx b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
index e2772fa2404..e00a4050512 100644
--- a/polaris.shopify.com/src/components/TokenList/TokenList.tsx
+++ b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
@@ -120,8 +120,8 @@ function TokenListItem({
   const tokenNameWithPrefix = `--p-${name}`;
   const [copy, didJustCopy] = useCopyToClipboard(tokenNameWithPrefix);
 
-  let attributes = useGlobalSearchResult();
-  const isClickableSearchResult = !!attributes?.tabIndex;
+  const searchAttributes = useGlobalSearchResult();
+  const isClickableSearchResult = !!searchAttributes?.tabIndex;
 
   return (
     <TokenListContext.Consumer>
@@ -129,14 +129,14 @@ function TokenListItem({
         <tr
           key={name}
           className={className(styles.TokenListItem)}
-          {...attributes}
+          {...searchAttributes}
           id={slugify(name)}
         >
           {columns.preview && (
             <td>
               <TokenPreview name={name} value={value} />
               {isClickableSearchResult && (
-                <Link href={`/tokens/${category}#${attributes?.id}`}>
+                <Link href={`/tokens/${category}#${searchAttributes?.id}`}>
                   <a className={styles.ClickableItemLink} tabIndex={-1}>
                     View token
                   </a>
@@ -159,7 +159,10 @@ function TokenListItem({
                       </div>
                     )}
                   >
-                    <button onClick={copy} tabIndex={attributes?.tabIndex}>
+                    <button
+                      onClick={copy}
+                      tabIndex={searchAttributes?.tabIndex}
+                    >
                       <Image
                         src={iconClipboard}
                         alt={"Copy"}
diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
index f79e3fa6a47..b46614b0ab4 100644
--- a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
+++ b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
@@ -122,7 +122,11 @@ function TokensPage({ tokenGroup }: Props) {
                   : 1
               )
               .map((token) => (
-                <TokenList.Item key={token.name} token={token} />
+                <TokenList.Item
+                  key={token.name}
+                  category={tokenGroup}
+                  token={token}
+                />
               ))}
           </TokenList>
         </div>
diff --git a/polaris.shopify.com/src/data/foundations.json b/polaris.shopify.com/src/data/foundations.json
index b4060ab2165..4128e3d0069 100644
--- a/polaris.shopify.com/src/data/foundations.json
+++ b/polaris.shopify.com/src/data/foundations.json
@@ -32,7 +32,7 @@
       ]
     },
     "intro": "Our mission is to make commerce better for _everyone_. Building products for everyone means creating inclusive content.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -107,7 +107,7 @@
       ]
     },
     "intro": "Merchants use Shopify to get things done. Content should be written and structured to help them understand and take the most important actions.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -147,7 +147,7 @@
       ]
     },
     "intro": "Shopify aims to provide an [inclusive experience](/foundations/accessibility).\nAlternative text (alt text) helps people with low or loss of vision use our\nproducts.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -171,7 +171,7 @@
       ]
     },
     "intro": "This guide is to help designers, developers, recruiters, UX-ers, product\nmanagers, support advisors, or anyone who writes public-facing text for Shopify.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -206,7 +206,7 @@
       ]
     },
     "intro": "After you build an app or other integration, writing help documentation will\nshow merchants how to use it.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -223,7 +223,7 @@
       ]
     },
     "intro": "Shopify creates content for different audiences. One of those audiences is merchants’ customers. A customer is a person or organization who interacts with a Shopify merchant or a merchant’s [sale channel](https://polaris.shopify.com/content/vocabulary#definition-s-sales-channel).",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -248,7 +248,7 @@
       ]
     },
     "intro": "The names we give our products and features teach merchants how to use Shopify\nand how to find the things they need to run their business.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -281,15 +281,21 @@
       ]
     },
     "intro": "Thoughtful, consistent interface content is a core element of a well-designed\nuser experience.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
       "name": "App release notes",
-      "keywords": ["release", "notes", "app", "updates", "fixes"]
+      "keywords": [
+        "release",
+        "notes",
+        "app",
+        "updates",
+        "fixes"
+      ]
     },
     "intro": "Merchants need to quickly understand what’s changed in our apps and why, so they can get back to running their business.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -310,7 +316,7 @@
       ]
     },
     "intro": "It’s important to use the same words, spelling, and capitalization consistently,\notherwise things start looking messy and confusing for merchants.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
@@ -328,31 +334,41 @@
       ]
     },
     "intro": "Learn how to apply Shopify’s voice and choose the right tone, no matter what\nproduct, feature, or app you’re building.",
-    "section": "content"
+    "category": "content"
   },
   {
     "frontMatter": {
       "name": "Colors",
-      "keywords": ["visual patterns", "color strategy", "color use"]
+      "keywords": [
+        "visual patterns",
+        "color strategy",
+        "color use"
+      ]
     },
     "intro": "Our color system builds on the recognition of the Shopify brand colors to make the admin interface more usable.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
       "name": "Data visualizations",
-      "keywords": ["data viz"]
+      "keywords": [
+        "data viz"
+      ]
     },
     "intro": "Visualizations surface patterns in data, and provide immediate answers to a\nsingle, specific question.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
       "name": "Design",
-      "keywords": ["visual design", "design language", "design"]
+      "keywords": [
+        "visual design",
+        "design language",
+        "design"
+      ]
     },
     "intro": "These are the principles that shape how we design all the experiences across the Shopify admin.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
@@ -377,15 +393,18 @@
       ]
     },
     "intro": "Icons in the Shopify admin act as visual aids to help merchants complete tasks. They’re simple, informative, and build on the visual language of the design system.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
       "name": "Illustrations",
-      "keywords": ["drawings", "pictures"]
+      "keywords": [
+        "drawings",
+        "pictures"
+      ]
     },
     "intro": "The Shopify admin uses a precise illustration style to help merchants quickly and clearly understand how things work across every experience.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
@@ -404,15 +423,19 @@
       ]
     },
     "intro": "Interaction states communicate the status of an element in the interface, establish confidence once an action is taken, and suggest the ability (or inability) to interact with the element.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
       "name": "Sounds",
-      "keywords": ["audio", "sonic", "noise"]
+      "keywords": [
+        "audio",
+        "sonic",
+        "noise"
+      ]
     },
     "intro": "We use sound to communicate information and to enhance how merchants experience the Shopify admin. Sound patterns make interactions easier and more predictable.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
@@ -428,15 +451,19 @@
       ]
     },
     "intro": "Consistent spacing creates visual balance that makes the user interface (UI) easier for merchants to scan. Apply consistent spacing to improve the quality of the UI.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
       "name": "Typography",
-      "keywords": ["type styles", "font sizes", "fonts"]
+      "keywords": [
+        "type styles",
+        "font sizes",
+        "fonts"
+      ]
     },
     "intro": "Shopify admin provides a constrained, purposeful set of typographic styles. These styles map to functional roles so you know when to use what.",
-    "section": "design"
+    "category": "design"
   },
   {
     "frontMatter": {
@@ -459,7 +486,7 @@
       ]
     },
     "intro": "Making commerce better for everyone means caring deeply about making quality products. A quality product should have a fantastic user experience (UX), including:",
-    "section": "foundations"
+    "category": "foundations"
   },
   {
     "frontMatter": {
@@ -478,7 +505,7 @@
       ]
     },
     "intro": "Well-designed onboarding flows increase engagement with a product or feature. They’re efficient and they gradually\nintroduce merchants to tasks that have a clearly defined goal and benefit.",
-    "section": "foundations"
+    "category": "foundations"
   },
   {
     "frontMatter": {
@@ -512,7 +539,7 @@
       ]
     },
     "intro": "At Shopify, we empower commerce at a global scale. We build products, tools, and services for people to start, manage, and scale their businesses. We manage enormous complexity for commerce giants, and give new entrepreneurs the best chance to succeed.",
-    "section": "foundations"
+    "category": "foundations"
   },
   {
     "frontMatter": {
@@ -538,7 +565,7 @@
       ]
     },
     "intro": "Currencies are formatted differently in different countries and languages. There’s a currency formatting framework to:",
-    "section": "foundations"
+    "category": "foundations"
   },
   {
     "frontMatter": {
@@ -552,7 +579,7 @@
       ]
     },
     "intro": "Everything we create at Shopify has an underlying foundation of information architecture. If you’re a designer, a content strategist, or a UX developer, you’re already doing IA work.",
-    "section": "foundations"
+    "category": "foundations"
   },
   {
     "frontMatter": {
@@ -575,39 +602,62 @@
       ]
     },
     "intro": "Make commerce better for everyone by building interfaces that work everywhere. These guidelines will help you design, write, and build products that can be used in every part of the world.",
-    "section": "foundations"
+    "category": "foundations"
   },
   {
     "frontMatter": {
       "name": "Error messages",
-      "keywords": ["error states", "invalid", 500, 400, 404, "error pages"]
+      "keywords": [
+        "error states",
+        "invalid",
+        500,
+        400,
+        404,
+        "error pages"
+      ]
     },
     "intro": "Error messages can be scary. Make errors visible to merchants, easy to\nunderstand, and helpful.",
-    "section": "patterns"
+    "category": "patterns"
   },
   {
     "frontMatter": {
       "name": "Help content",
-      "keywords": ["help text", "learn more", "help center", "help"]
+      "keywords": [
+        "help text",
+        "learn more",
+        "help center",
+        "help"
+      ]
     },
     "intro": "​\nHelp content is educational text that describes interactive elements or offers information about concepts in the UI.",
-    "section": "patterns"
+    "category": "patterns"
   },
   {
     "frontMatter": {
       "name": "Home cards",
-      "keywords": ["home cards", "insights", "milestones"]
+      "keywords": [
+        "home cards",
+        "insights",
+        "milestones"
+      ]
     },
     "intro": "Home cards make actionable recommendations based on data from the merchant’s store, or give merchants feedback about their store’s performance.",
-    "section": "patterns"
+    "category": "patterns"
   },
   {
     "frontMatter": {
       "name": "Page layouts",
-      "keywords": ["layout", "page", "columns", "hierarchy", "spacing", "stack"]
+      "keywords": [
+        "layout",
+        "page",
+        "columns",
+        "hierarchy",
+        "spacing",
+        "stack"
+      ]
     },
     "intro": "Layout patterns provide common ways to arrange the content of a screen.",
-    "section": "patterns"
+    "category": "patterns"
   },
   {
     "frontMatter": {
@@ -626,7 +676,7 @@
       ]
     },
     "intro": "Navigating the Shopify admin should be fast, meaningful, and focused, but unintentional loading can get in the way and break a merchant's flow. To deliver a continuous experience, we need to consider loading states when planning and prototyping.",
-    "section": "patterns"
+    "category": "patterns"
   },
   {
     "frontMatter": {
@@ -639,14 +689,18 @@
       ]
     },
     "intro": "The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.",
-    "section": "patterns"
+    "category": "patterns"
   },
   {
     "frontMatter": {
       "name": "Text fields",
-      "keywords": ["text fields", "search", "placeholder text"]
+      "keywords": [
+        "text fields",
+        "search",
+        "placeholder text"
+      ]
     },
     "intro": "Text fields are a combination of the field label (the title) and the input area. Inputs can be typed text, URLs, date pickers, and more.",
-    "section": "patterns"
+    "category": "patterns"
   }
-]
+]
\ No newline at end of file
diff --git a/polaris.shopify.com/src/scripts/parseGuidelines.mjs b/polaris.shopify.com/src/scripts/parseGuidelines.mjs
index eac5eb641c5..9c33790547f 100644
--- a/polaris.shopify.com/src/scripts/parseGuidelines.mjs
+++ b/polaris.shopify.com/src/scripts/parseGuidelines.mjs
@@ -28,7 +28,7 @@ for (let i = 0; i < subfolders.length; i++) {
 
       const { readme, ...rest } = parsed;
 
-      guidelines.push({ ...rest, section: dirName });
+      guidelines.push({ ...rest, category: dirName });
     }
   }
 }
diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts
index 76a4f276cf4..a1d21e2e74e 100644
--- a/polaris.shopify.com/src/types.ts
+++ b/polaris.shopify.com/src/types.ts
@@ -33,6 +33,7 @@ export interface SearchResult {
     foundations: {
       title: string;
       excerpt: string;
+      category: string;
     };
     tokens: {
       category: string;
diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index 142302e592f..d5b898d3203 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -110,8 +110,8 @@ Object.keys(metadata).forEach((fileName) => {
 });
 
 // Add foundations
-foundations.forEach(({ frontMatter: { name }, intro, section }) => {
-  const url = `/foundations/${section}/${slugify(name)}`;
+foundations.forEach(({ frontMatter: { name }, intro, headings, category }) => {
+  const url = `/foundations/${category}/${slugify(name)}`;
 
   results.push({
     id: slugify(name),
@@ -122,6 +122,7 @@ foundations.forEach(({ frontMatter: { name }, intro, section }) => {
       foundations: {
         title: name,
         excerpt: intro,
+        category,
       },
     },
   });

From ad002f6ffe5851d8dcdaa10195e429867fb8e73a Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 17:46:22 +0200
Subject: [PATCH 13/22] Remove unused key

---
 polaris.shopify.com/src/utils/search.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index d5b898d3203..b05b4da37f3 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -110,7 +110,7 @@ Object.keys(metadata).forEach((fileName) => {
 });
 
 // Add foundations
-foundations.forEach(({ frontMatter: { name }, intro, headings, category }) => {
+foundations.forEach(({ frontMatter: { name }, intro, category }) => {
   const url = `/foundations/${category}/${slugify(name)}`;
 
   results.push({

From d93173dd73f75abb39834fa0aad7328e40c5ee0c Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 5 Jul 2022 21:25:42 +0200
Subject: [PATCH 14/22] Ensure that ids are unique

---
 polaris.shopify.com/src/utils/search.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index b05b4da37f3..e230559c743 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -34,7 +34,7 @@ let results: SearchResults = [];
 // Add components
 components.forEach(({ frontMatter: { name, status }, intro }) => {
   results.push({
-    id: slugify(name),
+    id: slugify(`components ${name}`),
     category: "components",
     score: 0,
     url: `/components/${slugify(name)}`,
@@ -51,7 +51,7 @@ components.forEach(({ frontMatter: { name, status }, intro }) => {
 // Add color tokens
 Object.entries(colorLight).forEach(([tokenName, tokenValue]) => {
   results.push({
-    id: slugify(tokenName),
+    id: slugify(`tokens ${tokenName}`),
     category: "tokens",
     score: 0,
     url: `/tokens/colors#${tokenName}`,
@@ -74,7 +74,7 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
   Object.entries(tokenGroup).forEach(
     ([tokenName, tokenProperties]: [string, TokenProperties]) => {
       results.push({
-        id: slugify(tokenName),
+        id: slugify(`tokens ${tokenName}`),
         category: "tokens",
         score: 0,
         url: `/tokens/${slugify(groupSlug)}#${tokenName}`,
@@ -97,7 +97,7 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
 Object.keys(metadata).forEach((fileName) => {
   const { name, set, description, keywords } = metadata[fileName];
   results.push({
-    id: slugify(fileName),
+    id: slugify(`icons ${name} ${set}`),
     category: "icons",
     url: `/icons?icon=${fileName}`,
     score: 0,
@@ -114,7 +114,7 @@ foundations.forEach(({ frontMatter: { name }, intro, category }) => {
   const url = `/foundations/${category}/${slugify(name)}`;
 
   results.push({
-    id: slugify(name),
+    id: slugify(`foundations ${name}`),
     category: "foundations",
     score: 0,
     url,

From b5d28173b4a2376eafb16c46b590c19d8686395a Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 16:59:33 +0200
Subject: [PATCH 15/22] Fix things that broke in merge

---
 .../src/components/GlobalSearch/GlobalSearch.tsx          | 8 +++++---
 .../src/components/IconGrid/IconGrid.module.scss          | 3 ++-
 polaris.shopify.com/src/components/IconGrid/IconGrid.tsx  | 2 +-
 polaris.shopify.com/src/utils/search.ts                   | 2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
index b0cf82bae83..e8068392094 100644
--- a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
+++ b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -147,9 +147,11 @@ function GlobalSearch() {
         break;
 
       case "Enter":
-        setIsOpen(false);
-        const url = resultsInRenderedOrder[currentResultIndex].url;
-        router.push(url);
+        if (resultsInRenderedOrder.length > 0) {
+          setIsOpen(false);
+          const url = resultsInRenderedOrder[currentResultIndex].url;
+          router.push(url);
+        }
         break;
     }
   };
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
index 1e092c3c254..fa19929bbef 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
@@ -33,7 +33,8 @@
   }
 
   &.isSelected,
-  &:hover {
+  &:hover,
+  &[data-is-current-result="true"] {
     background: var(--search-highlight-color);
   }
 }
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
index 59fc4abdb68..0feb972e010 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
@@ -42,7 +42,6 @@ function IconGridItem({ icon, activeIcon, query }: IconGridItemProps) {
           },
         }}
         scroll={false}
-        {...searchAttributes}
       >
         <a
           className={className(
@@ -50,6 +49,7 @@ function IconGridItem({ icon, activeIcon, query }: IconGridItemProps) {
             activeIcon === id && styles.isSelected
           )}
           id={icon.id}
+          {...searchAttributes}
         >
           <Image
             src={`/icons/${id}.svg`}
diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index 5c1681e7c51..fed813b0d61 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -104,7 +104,7 @@ Object.entries(otherTokenGroups).forEach(([groupSlug, tokenGroup]) => {
 // Add icons
 Object.keys(iconMetadata).forEach((fileName) => {
   results.push({
-    id: slugify(`icons ${name} ${iconMetadata[fileName].set}`),
+    id: slugify(`icons ${fileName} ${iconMetadata[fileName].set}`),
     category: "icons",
     url: `/icons?icon=${fileName}`,
     score: 0,

From 893f30dbc905af9591889825a0733e63dd7a8352 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:18:39 +0200
Subject: [PATCH 16/22] Remove missing import

---
 .../src/components/FoundationsIndexPage/FoundationsIndexPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx b/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx
index c97b0cc6793..ceb4d95f143 100644
--- a/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx
+++ b/polaris.shopify.com/src/components/FoundationsIndexPage/FoundationsIndexPage.tsx
@@ -1,6 +1,5 @@
 import { foundationsNavItems } from "../../data/navItems";
 import styles from "./FoundationsIndexPage.module.scss";
-import Link from "next/link";
 import Layout from "../Layout";
 import PageMeta from "../PageMeta";
 import FoundationsGrid from "../FoundationsGrid";

From d69d3eecdc1741d3b232eecbfd643df99232072f Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:23:01 +0200
Subject: [PATCH 17/22] Tighten grid

---
 .../src/components/FoundationsGrid/FoundationsGrid.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
index 864760bba7a..6a0bd62bf0b 100644
--- a/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
+++ b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
@@ -18,7 +18,7 @@
     display: grid;
     gap: 0.75rem;
     // https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
-    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
 
     @media screen and (max-width: $breakpointDesktopLarge) {
       // Foundations section currently has 5 articles. This avoids

From cee7f36eee2cc2c37edb708ccbd5f7268a4c9ba7 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:30:05 +0200
Subject: [PATCH 18/22] Tweak method for rendering grid

---
 .../components/IconGrid/IconGrid.module.scss  | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
index fa19929bbef..312c0c9bd2a 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
@@ -2,12 +2,24 @@
 
 .IconGrid {
   border-radius: var(--border-radius-600);
-  border: 1px solid var(--border-color-light);
-  overflow: hidden;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow: inset 0 0 0 1px var(--border-color-light),
+      0 0 0 5px var(--surface);
+    pointer-events: none;
+    border-radius: var(--border-radius-600);
+  }
 }
 
 .IconGridInner {
-  margin: 0 -1px -1px 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
 }
@@ -21,10 +33,6 @@
   border-right: 1px solid var(--border-color-light);
   gap: 1.125rem;
 
-  &:focus-visible {
-    box-shadow: var(--focus-outline-inside);
-  }
-
   p {
     flex: 1;
     white-space: nowrap;
@@ -32,10 +40,12 @@
     text-overflow: ellipsis;
   }
 
+  &:focus-visible,
   &.isSelected,
   &:hover,
   &[data-is-current-result="true"] {
     background: var(--search-highlight-color);
+    box-shadow: none;
   }
 }
 

From 9f287b20c8c03192f34c6fbc2b666ca0407b7e64 Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:30:21 +0200
Subject: [PATCH 19/22] Tweak number of search results that are visible at the
 same time

---
 polaris.shopify.com/src/utils/search.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/polaris.shopify.com/src/utils/search.ts b/polaris.shopify.com/src/utils/search.ts
index fed813b0d61..8770eb6bc9e 100644
--- a/polaris.shopify.com/src/utils/search.ts
+++ b/polaris.shopify.com/src/utils/search.ts
@@ -14,10 +14,10 @@ import components from "../data/components.json";
 import foundations from "../data/foundations.json";
 
 const MAX_RESULTS: { [key in SearchResultCategory]: number } = {
-  foundations: 3,
-  components: 3,
+  foundations: 8,
+  components: 6,
   tokens: 5,
-  icons: 14,
+  icons: 9,
 };
 
 const {

From 240ec4da3d2f7932189aef9f625e47c094a27d8f Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:33:17 +0200
Subject: [PATCH 20/22] Remove helper

---
 .../src/components/ComponentGrid/ComponentGrid.tsx   | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
index 48a52caffe1..b5bd9bc16b2 100644
--- a/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
+++ b/polaris.shopify.com/src/components/ComponentGrid/ComponentGrid.tsx
@@ -1,10 +1,6 @@
 import Image from "../Image";
 import Link from "next/link";
-import {
-  className,
-  getReadableStatusValue,
-  slugify,
-} from "../../utils/various";
+import { getReadableStatusValue, slugify } from "../../utils/various";
 import { Status } from "../../types";
 import styles from "./ComponentGrid.module.scss";
 import StatusBadge from "../StatusBadge";
@@ -34,11 +30,7 @@ function ComponentGridItem({
   const searchAttributes = useGlobalSearchResult();
 
   return (
-    <li
-      key={name}
-      className={className(styles.Component)}
-      {...searchAttributes}
-    >
+    <li key={name} className={styles.Component} {...searchAttributes}>
       <Link href={url} passHref>
         <a tabIndex={searchAttributes?.tabIndex}>
           <div className={styles.Preview}>

From d205a97acb6d81d87fa22e644160f87fd43516aa Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:38:03 +0200
Subject: [PATCH 21/22] CSS clean up

---
 .../FoundationsGrid/FoundationsGrid.module.scss        |  6 ------
 .../src/components/IconGrid/IconGrid.module.scss       | 10 ++++++++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
index 6a0bd62bf0b..5642ccf0676 100644
--- a/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
+++ b/polaris.shopify.com/src/components/FoundationsGrid/FoundationsGrid.module.scss
@@ -3,18 +3,12 @@
 @import "../../styles/mixins.scss";
 
 .FoundationsGrid {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
   h2 {
     @include heading-2;
     margin-bottom: 1.5rem;
   }
 
   ul {
-    display: flex;
-    flex-wrap: wrap;
     display: grid;
     gap: 0.75rem;
     // https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
index 312c0c9bd2a..f54114e5555 100644
--- a/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
+++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.module.scss
@@ -42,11 +42,17 @@
 
   &:focus-visible,
   &.isSelected,
-  &:hover,
-  &[data-is-current-result="true"] {
+  &:hover {
     background: var(--search-highlight-color);
     box-shadow: none;
   }
+
+  @media (hover: hover) {
+    &[data-is-current-result="true"] {
+      background: var(--search-highlight-color);
+      box-shadow: none;
+    }
+  }
 }
 
 .SectionHeading {

From a226bda5e1c5499cef7ad16945ce2338e2a7425d Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Tue, 19 Jul 2022 17:42:06 +0200
Subject: [PATCH 22/22] Add changeset

---
 .changeset/smart-carrots-exist.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/smart-carrots-exist.md

diff --git a/.changeset/smart-carrots-exist.md b/.changeset/smart-carrots-exist.md
new file mode 100644
index 00000000000..839897728d5
--- /dev/null
+++ b/.changeset/smart-carrots-exist.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Major refactor of site search