docs(S2): add Typography search view

packages/dev/s2-docs/src/ColorSearchView.tsx

@@ -201,14 +201,14 @@ const scaleSwatches: Record<string, string> = {
 
 export function CopyInfoMessage() {
   return (
-    <div className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, padding: 8})}>
-      <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-        <InfoCircle styles={iconStyle({size: 'XS'})} />
-        <span className={style({font: 'ui'})}>Press a color to copy its name.</span>
-      </div>
-      <span>
-        See <Link href="styling">styling</Link> for more information.
-      </span>
+    <div
+      className={style({
+        display: 'flex',
+        gap: 4,
+        padding: 8
+      })}>
+      <InfoCircle styles={iconStyle({size: 'XS'})} />
+      <span className={style({font: 'ui'})}>Press a color to copy its name. See <Link href="styling">styling</Link> for more information.</span>
     </div>
   );
 }
@@ -268,38 +268,40 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
   }
 
   return (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, height: 'full'})}>
       <CopyInfoMessage />
-      <ListBox
-        aria-label="Colors"
-        onAction={(key) => {
-          for (const section of sections) {
-            const item = section.items.find(item => item.id === key.toString());
-            if (item) {
-              handleCopyColor(item.name, item.id);
-              break;
+      <div className={style({flexGrow: 1, overflow: 'auto'})}>
+        <ListBox
+          aria-label="Colors"
+          onAction={(key) => {
+            for (const section of sections) {
+              const item = section.items.find(item => item.id === key.toString());
+              if (item) {
+                handleCopyColor(item.name, item.id);
+                break;
+              }
             }
-          }
-        }}
-        layout="grid"
-        className={listBoxStyle}
-        dependencies={[copiedId, exactMatches, closestMatches]}
-        items={sections}>
-        {section => (
-          <ListBoxSection id={section.id} className={sectionStyle}>
-            <Header className={headerStyle}>{section.name}</Header>
-            {section.items.map(item => (
-              <ColorItem 
-                key={item.id}
-                item={item} 
-                sectionId={section.id}
-                isCopied={copiedId === item.id}
-                isBestMatch={exactMatches.has(item.name) || closestMatches.has(item.name)}
-                isExactMatch={exactMatches.has(item.name)} />
-            ))}
-          </ListBoxSection>
-        )}
-      </ListBox>
+          }}
+          layout="grid"
+          className={listBoxStyle}
+          dependencies={[copiedId, exactMatches, closestMatches]}
+          items={sections}>
+          {section => (
+            <ListBoxSection id={section.id} className={sectionStyle}>
+              <Header className={headerStyle}>{section.name}</Header>
+              {section.items.map(item => (
+                <ColorItem 
+                  key={item.id}
+                  item={item} 
+                  sectionId={section.id}
+                  isCopied={copiedId === item.id}
+                  isBestMatch={exactMatches.has(item.name) || closestMatches.has(item.name)}
+                  isExactMatch={exactMatches.has(item.name)} />
+              ))}
+            </ListBoxSection>
+          )}
+        </ListBox>
+      </div>
     </div>
   );
 }

packages/dev/s2-docs/src/IconSearchView.tsx

@@ -4,7 +4,7 @@
 import {Autocomplete, GridLayout, ListBox, ListBoxItem, Size, useFilter, Virtualizer} from 'react-aria-components';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import Close from '@react-spectrum/s2/icons/Close';
-import {Content, Heading, IllustratedMessage, pressScale, SearchField, Skeleton, Text, ToastQueue} from '@react-spectrum/s2';
+import {Content, Heading, IllustratedMessage, Link, pressScale, SearchField, Skeleton, Text, ToastQueue} from '@react-spectrum/s2';
 import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {iconAliases} from './iconAliases.js';
 // @ts-ignore
@@ -59,9 +59,14 @@ export function useCopyImport() {
 
 function CopyInfoMessage() {
   return (
-    <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}>
+    <div
+      className={style({
+        display: 'flex',
+        gap: 4,
+        padding: 8
+      })}>
       <InfoCircle styles={iconStyle({size: 'XS'})} />
-      <span className={style({font: 'ui'})}>Press an item to copy its import statement</span>
+      <span className={style({font: 'ui'})}>Press an item to copy its import statement. See <Link href="icons">Icons</Link> for more information.</span>
     </div>
   );
 }
@@ -80,7 +85,7 @@ function IconListBox({items, copiedId, onAction, listBoxClassName}: IconListBoxP
         onAction={(item) => onAction(item.toString())}
         items={items}
         layout="grid"
-        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}
+        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, padding: 8})}
         dependencies={[copiedId]}
         renderEmptyState={() => (
           <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
@@ -132,10 +137,10 @@ export function IconSearchView({filteredItems, listBoxClassName}: IconSearchView
   let {copiedId, handleCopyImport} = useCopyImport();
 
   return (
-    <>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16, height: 'full', paddingX: 16})}>
       <CopyInfoMessage />
       <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} listBoxClassName={listBoxClassName} />
-    </>
+    </div>
   );
 }
 

packages/dev/s2-docs/src/MobileSearchMenu.tsx

@@ -17,6 +17,7 @@ import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library} from './constants';
 import React, {cloneElement, CSSProperties, ReactElement, ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
 import {SearchTagGroups} from './SearchTagGroups';
+import {TypographySearchView} from './TypographySearchView';
 import {useId} from '@react-aria/utils';
 import {useRouter} from './Router';
 
@@ -242,6 +243,7 @@ function MobileNav({initialTag}: {initialTag?: string}) {
 
   const filteredColors = useFilteredColors(searchValue);
   const isColorsSelected = selectedSection === 'colors';
+  const isTypographySelected = selectedSection === 'typography';
 
   let handleSearchFocus = () => {
     setSearchFocused(true);
@@ -370,7 +372,17 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                         </Suspense>
                       </div>
                     )}
-                    {!showIcons && (!isColorsSelected || library.id !== 'react-spectrum') && (
+                    {!showIcons && isTypographySelected && library.id === 'react-spectrum' && (
+                      <div
+                        className={style({
+                          flexGrow: 1,
+                          overflow: 'auto',
+                          paddingBottom: 16
+                        })}>
+                        <TypographySearchView searchValue={searchValue} />
+                      </div>
+                    )}
+                    {!showIcons && !isColorsSelected && !isTypographySelected && (
                       <ComponentCardView
                         currentUrl={currentUrl}
                         onAction={key => {

packages/dev/s2-docs/src/SearchMenu.tsx

@@ -20,6 +20,7 @@ import {SearchTagGroups} from './SearchTagGroups';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
+import {TypographySearchView} from './TypographySearchView';
 import {useRouter} from './Router';
 import './SearchMenu.css';
 import {preloadComponentImages} from './ComponentCard';
@@ -201,7 +202,12 @@ export function SearchMenu(props: SearchMenuProps) {
                       </Suspense>
                     </div>
                   )}
-                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && (
+                  {selectedTagId === 'typography' && (
+                    <div className={style({flexGrow: 1, overflow: 'auto', paddingX: 16, paddingBottom: 16})}>
+                      <TypographySearchView searchValue={searchValue} />
+                    </div>
+                  )}
+                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && selectedTagId !== 'typography' && (
                     <ComponentCardView
                       key={selectedLibrary + selectedTagId}
                       currentUrl={currentUrl}