docs(S2): add Typography search view

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

@@ -201,10 +201,11 @@ interface ColorSearchViewProps {
   /** Names of colors that exactly match the searched hex value. */
   exactMatches?: Set<string>,
   /** Names of the closest matching colors when no exact matches exist. */
-  closestMatches?: Set<string>
+  closestMatches?: Set<string>,
+  listBoxClassName?: string
 }
 
-export function ColorSearchView({filteredItems, exactMatches = new Set(), closestMatches = new Set()}: ColorSearchViewProps) {
+export function ColorSearchView({filteredItems, exactMatches = new Set(), closestMatches = new Set(), listBoxClassName}: ColorSearchViewProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -261,7 +262,7 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
           }
         }}
         layout="grid"
-        className={style({
+        className={listBoxClassName || style({
           width: 'full',
           display: 'flex',
           flexDirection: 'column',

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

@@ -76,7 +76,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})}>

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);
@@ -311,7 +313,10 @@ function MobileNav({initialTag}: {initialTag?: string}) {
             const showIcons = isIconsSelected && library.id === 'react-spectrum';
             return (
               <MobileTabPanel key={library.id} id={library.id}>
-                <Autocomplete filter={showIcons ? iconFilter : undefined}>
+                <Autocomplete
+                  key={isTypographySelected ? 'typography' : 'default'}
+                  filter={showIcons ? iconFilter : undefined}
+                  disableVirtualFocus={isTypographySelected}>
                   <div className={stickySearchContainer}>
                     <SearchField
                       aria-label="Search"
@@ -359,10 +364,19 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                         <LazyColorSearchView
                           filteredItems={filteredColors.sections}
                           exactMatches={filteredColors.exactMatches}
-                          closestMatches={filteredColors.closestMatches} />
+                          closestMatches={filteredColors.closestMatches}
+                          listBoxClassName={style({
+                            flexGrow: 1,
+                            overflow: 'auto',
+                            width: '100%',
+                            scrollPaddingY: 4
+                          })} />
                       </Suspense>
                     )}
-                    {!showIcons && (!isColorsSelected || library.id !== 'react-spectrum') && (
+                    {!showIcons && isTypographySelected && library.id === 'react-spectrum' && (
+                      <TypographySearchView searchValue={searchValue} />
+                    )}
+                    {!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';
@@ -160,7 +161,10 @@ export function SearchMenu(props: SearchMenuProps) {
           const placeholderText = getPlaceholderText(tab.label);
           return (
             <TabPanel key={tab.id} id={tab.id}>
-              <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
+              <Autocomplete
+                key={selectedTagId === 'typography' ? 'typography' : 'default'}
+                filter={isIconsSelected ? iconFilter : undefined}
+                disableVirtualFocus={selectedTagId === 'typography'}>
                 <div className={style({display: 'flex', flexDirection: 'column', height: 'full'})}>
                   <div className={style({flexShrink: 0, marginStart: 16, marginEnd: 64})}>
                     <SearchField
@@ -182,6 +186,8 @@ export function SearchMenu(props: SearchMenuProps) {
                       selectedTagId={selectedTagId}
                       onSectionSelectionChange={handleTagSelectionChange}
                       onResourceSelectionChange={handleTagSelectionChange}
+                      wrapperClassName={style({paddingTop: 16, flexShrink: 0, zIndex: 1})}
+                      contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 16})}
                       onHover={tag => {
                         preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []);
                       }} />
@@ -198,11 +204,20 @@ export function SearchMenu(props: SearchMenuProps) {
                   {selectedTagId === 'colors' && (
                     <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<ColorSearchSkeleton />}>
-                        <LazyColorSearchView filteredItems={filteredColors.sections} exactMatches={filteredColors.exactMatches} closestMatches={filteredColors.closestMatches} />
+                        <LazyColorSearchView 
+                          filteredItems={filteredColors.sections} 
+                          exactMatches={filteredColors.exactMatches} 
+                          closestMatches={filteredColors.closestMatches}
+                          listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
                       </Suspense>
                     </div>
                   )}
-                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && (
+                  {selectedTagId === 'typography' && (
+                    <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
+                      <TypographySearchView searchValue={searchValue} />
+                    </div>
+                  )}
+                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && selectedTagId !== 'typography' && (
                     <ComponentCardView
                       key={selectedLibrary + selectedTagId}
                       currentUrl={currentUrl}