From 869b8e88f7a4062a82dd007251b936719f7e481f Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Mon, 26 Jan 2026 10:03:04 -0600 Subject: [PATCH 01/15] init Typography search view --- packages/dev/s2-docs/src/SearchMenu.tsx | 8 +- .../dev/s2-docs/src/TypographySearchView.tsx | 332 ++++++++++++++++++ packages/dev/s2-docs/src/searchUtils.tsx | 4 + 3 files changed, 343 insertions(+), 1 deletion(-) create mode 100644 packages/dev/s2-docs/src/TypographySearchView.tsx diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx index 155e9bb0c68..b8d66903b91 100644 --- a/packages/dev/s2-docs/src/SearchMenu.tsx +++ b/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) { )} - {selectedTagId !== 'icons' && selectedTagId !== 'colors' && ( + {selectedTagId === 'typography' && ( +
+ +
+ )} + {selectedTagId !== 'icons' && selectedTagId !== 'colors' && selectedTagId !== 'typography' && ( + + Select a typography style to preview and copy the code snippet. See styling for more information. + + ); +} + +const typographySections = [ + { + id: 'heading', + name: 'Heading', + description: 'Use for headings in content pages', + items: ['heading-2xs', 'heading-xs', 'heading-sm', 'heading', 'heading-lg', 'heading-xl', 'heading-2xl', 'heading-3xl'] + }, + { + id: 'title', + name: 'Title', + description: 'Use for titles within UI components such as cards or panels', + items: ['title-xs', 'title-sm', 'title', 'title-lg', 'title-xl', 'title-2xl', 'title-3xl'] + }, + { + id: 'body', + name: 'Body', + description: 'Use for the content of pages that are primarily text', + items: ['body-2xs', 'body-xs', 'body-sm', 'body', 'body-lg', 'body-xl', 'body-2xl', 'body-3xl'] + }, + { + id: 'ui', + name: 'UI', + description: 'Use within interactive UI components', + items: ['ui-xs', 'ui-sm', 'ui', 'ui-lg', 'ui-xl', 'ui-2xl', 'ui-3xl'] + }, + { + id: 'detail', + name: 'Detail', + description: 'Use for less important metadata', + items: ['detail-sm', 'detail', 'detail-lg', 'detail-xl'] + }, + { + id: 'code', + name: 'Code', + description: 'Use for source code', + items: ['code-sm', 'code', 'code-lg', 'code-xl'] + } +]; + +const htmlElements = [ + {id: 'h1', name: '

'}, + {id: 'h2', name: '

'}, + {id: 'h3', name: '

'}, + {id: 'h4', name: '

'}, + {id: 'h5', name: '

'}, + {id: 'h6', name: '
'}, + {id: 'p', name: '

'}, + {id: 'span', name: ''}, + {id: 'div', name: '

'}, + {id: 'label', name: '
)} - {!showIcons && (!isColorsSelected || library.id !== 'react-spectrum') && ( + {!showIcons && isTypographySelected && library.id === 'react-spectrum' && ( +
+ +
+ )} + {!showIcons && !isColorsSelected && !isTypographySelected && ( { diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 0d7cf943bf3..6895029cc77 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -269,19 +269,21 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro - ) => void}> - {htmlElements.map(option => ( - - {option.name} - - ))} - +
+ ) => void}> + {htmlElements.map(option => ( + + {option.name} + + ))} + +
Date: Mon, 26 Jan 2026 15:27:23 -0600 Subject: [PATCH 04/15] make copy info messages consistent (start-aligned) --- packages/dev/s2-docs/src/ColorSearchView.tsx | 78 ++++++++++--------- packages/dev/s2-docs/src/IconSearchView.tsx | 17 ++-- .../dev/s2-docs/src/TypographySearchView.tsx | 2 +- 3 files changed, 52 insertions(+), 45 deletions(-) diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx index 27ba1334063..0f9089d8f71 100644 --- a/packages/dev/s2-docs/src/ColorSearchView.tsx +++ b/packages/dev/s2-docs/src/ColorSearchView.tsx @@ -201,14 +201,14 @@ const scaleSwatches: Record = { export function CopyInfoMessage() { return ( -
-
- - Press a color to copy its name. -
- - See styling for more information. - +
+ + Press a color to copy its name. See styling for more information.
); } @@ -268,38 +268,40 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes } return ( -
+
- { - for (const section of sections) { - const item = section.items.find(item => item.id === key.toString()); - if (item) { - handleCopyColor(item.name, item.id); - break; +
+ { + 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 => ( - -
{section.name}
- {section.items.map(item => ( - - ))} - - )} - + }} + layout="grid" + className={listBoxStyle} + dependencies={[copiedId, exactMatches, closestMatches]} + items={sections}> + {section => ( + +
{section.name}
+ {section.items.map(item => ( + + ))} + + )} + +
); } diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx index ab1ad77364d..3780f391f06 100644 --- a/packages/dev/s2-docs/src/IconSearchView.tsx +++ b/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 ( -
+
- Press an item to copy its import statement + Press an item to copy its import statement. See Icons for more information.
); } @@ -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={() => ( @@ -132,10 +137,10 @@ export function IconSearchView({filteredItems, listBoxClassName}: IconSearchView let {copiedId, handleCopyImport} = useCopyImport(); return ( - <> +
- +
); } diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 6895029cc77..8878690335a 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -40,7 +40,7 @@ function InfoMessage() { padding: 8 })}> - Select a typography style to preview and copy the code snippet. See styling for more information. + Select a typography style to preview and copy its code snippet. See styling for more information.
); } From 4a8c50734649983304159087719ca087220f03f6 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 27 Jan 2026 11:10:22 -0600 Subject: [PATCH 05/15] fix search tags overflowing --- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 1 - packages/dev/s2-docs/src/SearchMenu.tsx | 22 +++++++++++-------- packages/dev/s2-docs/src/SearchTagGroups.tsx | 6 ++--- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index 9ee7b41fbad..cc7e01e67b9 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -330,7 +330,6 @@ function MobileNav({initialTag}: {initialTag?: string}) { selectedTagId={selectedSection} onSectionSelectionChange={handleTagSelectionChange} onResourceSelectionChange={handleTagSelectionChange} - isMobile wrapperClassName={style({paddingTop: 0})} contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 0})} />
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx index b8d66903b91..e4c3446bdbc 100644 --- a/packages/dev/s2-docs/src/SearchMenu.tsx +++ b/packages/dev/s2-docs/src/SearchMenu.tsx @@ -177,15 +177,19 @@ export function SearchMenu(props: SearchMenuProps) { - { - preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []); - }} /> +
+ { + preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []); + }} /> +
{isIconsSelected ? (
}> diff --git a/packages/dev/s2-docs/src/SearchTagGroups.tsx b/packages/dev/s2-docs/src/SearchTagGroups.tsx index 521d0335d1d..62cf17bfd6e 100644 --- a/packages/dev/s2-docs/src/SearchTagGroups.tsx +++ b/packages/dev/s2-docs/src/SearchTagGroups.tsx @@ -18,7 +18,6 @@ interface SearchTagGroupsProps { selectedTagId: string | undefined, onSectionSelectionChange: (keys: Iterable) => void, onResourceSelectionChange?: (keys: Iterable) => void, - isMobile?: boolean, wrapperClassName?: string, contentClassName?: string, onHover?: (id: Key) => void @@ -30,7 +29,6 @@ export function SearchTagGroups({ selectedTagId, onSectionSelectionChange, onResourceSelectionChange, - isMobile = false, wrapperClassName, contentClassName, onHover @@ -58,7 +56,7 @@ export function SearchTagGroups({ onSelectionChange={onSectionSelectionChange} aria-label="Sections" items={sectionTags} - UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}> + UNSAFE_style={{whiteSpace: 'nowrap'}}> {(tag) => ( onHover?.(tag.id)} onPressStart={() => onHover?.(tag.id)}> {tag.name} @@ -79,7 +77,7 @@ export function SearchTagGroups({ onSelectionChange={onResourceSelectionChange} aria-label="Resources" items={resourceTags} - UNSAFE_style={isMobile ? {whiteSpace: 'nowrap'} : undefined}> + UNSAFE_style={{whiteSpace: 'nowrap'}}> {(tag) => ( {tag.name} From 80fdc2fba234d32c80322efdaffb8faf2db6a85b Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 27 Jan 2026 12:39:21 -0600 Subject: [PATCH 06/15] use search value to filter list instead of update preview text --- .../dev/s2-docs/src/TypographySearchView.tsx | 43 ++++++++++++++----- 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 8878690335a..93fdbe40b95 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -1,10 +1,12 @@ 'use client'; -import {ActionButton, DialogTrigger, Link, Popover, Text, ToggleButton, ToggleButtonGroup} from '@react-spectrum/s2'; +import {ActionButton, Content, DialogTrigger, Heading, IllustratedMessage, Link, Popover, Text, ToggleButton, ToggleButtonGroup} from '@react-spectrum/s2'; import {CopyButton} from './CopyButton'; import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {Header, Key, ListBox, ListBoxItem, ListBoxSection} from 'react-aria-components'; import InfoCircle from '@react-spectrum/s2/icons/InfoCircle'; +// eslint-disable-next-line monorepo/no-internal-import +import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults'; import React, {useMemo, useState} from 'react'; const listBoxStyle = style({ @@ -181,7 +183,7 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro const [selectedFont, setSelectedFont] = useState('heading'); const [selectedElement, setSelectedElement] = useState('h1'); - const previewText = searchValue.trim() || 'Sample Text'; + const previewText = 'Sample Text'; const selectedElementTag = String(selectedElement || 'span'); const codeSnippet = `<${selectedElementTag} className={style({font: '${selectedFont}'})}>${previewText}`; @@ -189,15 +191,21 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro ? `${fontStyles[selectedFont as FontStyleKey]} ${previewTextStyle}` : previewTextStyle; - const sections = useMemo(() => typographySections.map(section => ({ - id: section.id, - name: section.name, - description: section.description, - items: section.items.map(name => ({ - id: `${section.id}-${name}`, - name - })) - })), []); + const sections = useMemo(() => { + const searchLower = searchValue.toLowerCase(); + + return typographySections.map(section => ({ + id: section.id, + name: section.name, + description: section.description, + items: section.items + .filter(name => name.toLowerCase().includes(searchLower)) + .map(name => ({ + id: `${section.id}-${name}`, + name + })) + })).filter(section => section.items.length > 0); + }, [searchValue]); const handleSelectionChange = (keys: Set) => { const selectedKey = Array.from(keys)[0]; @@ -228,6 +236,19 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro return new Set(); }, [selectedFont, sections]); + if (searchValue.trim() && sections.length === 0) { + return ( +
+ + + + No results + Try a different search term. + +
+ ); + } + return (
From 837aaf29e20c96d71d17561b3e2a09add93db3da Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Wed, 28 Jan 2026 17:28:37 -0600 Subject: [PATCH 07/15] update placeholder --- packages/dev/s2-docs/src/searchUtils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx index 3d0b303ab7b..da97af7e5da 100644 --- a/packages/dev/s2-docs/src/searchUtils.tsx +++ b/packages/dev/s2-docs/src/searchUtils.tsx @@ -869,7 +869,7 @@ export function useSearchMenuState(options: SearchMenuStateOptions): SearchMenuS return 'Search color names or hex values'; } if (selectedTagId === 'typography') { - return 'Preview typography styles'; + return 'Search typography styles'; } return selectedResourceTag ? `Search ${selectedResourceTag.name}` From 84f63c896019ac41921b262c9efdf51ec702417f Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Wed, 28 Jan 2026 18:18:36 -0600 Subject: [PATCH 08/15] allow editing sample text via RAC TextField --- .../dev/s2-docs/src/TypographySearchView.tsx | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 93fdbe40b95..cf1a84e7db7 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -2,8 +2,8 @@ import {ActionButton, Content, DialogTrigger, Heading, IllustratedMessage, Link, Popover, Text, ToggleButton, ToggleButtonGroup} from '@react-spectrum/s2'; import {CopyButton} from './CopyButton'; +import {FieldInputContext, Header, Input, InputRenderProps, Key, ListBox, ListBoxItem, ListBoxSection, TextField} from 'react-aria-components'; import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'}; -import {Header, Key, ListBox, ListBoxItem, ListBoxSection} from 'react-aria-components'; import InfoCircle from '@react-spectrum/s2/icons/InfoCircle'; // eslint-disable-next-line monorepo/no-internal-import import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults'; @@ -171,8 +171,12 @@ const fontStyles = { type FontStyleKey = keyof typeof fontStyles; -const previewTextStyle = style({ - marginY: 'auto' +const defaultPreviewInputStyle = style({ + ...focusRing(), + backgroundColor: 'transparent', + borderStyle: 'hidden', + borderRadius: 'lg', + textAlign: 'center' }); interface TypographySearchViewProps { @@ -182,14 +186,12 @@ interface TypographySearchViewProps { export function TypographySearchView({searchValue = ''}: TypographySearchViewProps) { const [selectedFont, setSelectedFont] = useState('heading'); const [selectedElement, setSelectedElement] = useState('h1'); - - const previewText = 'Sample Text'; + const [previewText, setPreviewText] = useState('Sample Text'); const selectedElementTag = String(selectedElement || 'span'); const codeSnippet = `<${selectedElementTag} className={style({font: '${selectedFont}'})}>${previewText}`; - const previewTextClassName = selectedFont in fontStyles - ? `${fontStyles[selectedFont as FontStyleKey]} ${previewTextStyle}` - : previewTextStyle; + const fontStyleClass = selectedFont in fontStyles ? fontStyles[selectedFont as FontStyleKey] : undefined; + const previewInputStyle = (renderProps: InputRenderProps) => `${defaultPreviewInputStyle(renderProps)} ${fontStyleClass || ''}`; const sections = useMemo(() => { const searchLower = searchValue.toLowerCase(); @@ -329,7 +331,11 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro justifyContent: 'center', minHeight: 80 })}> - {React.createElement(selectedElementTag, {className: previewTextClassName}, previewText)} + + + + +
From c317617e4eeb4d2d09782dcd9fc44e1897f0e795 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Thu, 29 Jan 2026 10:29:12 -0600 Subject: [PATCH 09/15] add syntax highlighting to code sample --- .../dev/s2-docs/src/TypographySearchView.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index cf1a84e7db7..7963bc4c5de 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -169,6 +169,13 @@ const fontStyles = { 'code-xl': style({font: 'code-xl', color: 'inherit'}) } as const; +// We hard-code these since the code is dynamic and we can't run our highlighter in the browser. +const syntaxStyles = { + tag: style({color: 'red-1000'}), + attribute: style({color: 'indigo-1000'}), + string: style({color: 'green-1000'}) +}; + type FontStyleKey = keyof typeof fontStyles; const defaultPreviewInputStyle = style({ @@ -351,7 +358,27 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro font: 'code-sm' })}> - {codeSnippet} + < + {selectedElementTag} + {' '} + className + = + {'{'} + style + {'('} + {'{'} + font + : + {' '} + '{selectedFont}' + {'}'} + {')'} + {'}'} + > + {previewText} + </ + {selectedElementTag} + >
From 6f3e0d74cde4cad281209625e8dcd0ddd3f285d2 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Fri, 30 Jan 2026 11:14:26 -0600 Subject: [PATCH 10/15] fix scrolling issues --- packages/dev/s2-docs/src/ColorSearchView.tsx | 69 +++++++++---------- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 25 ++++--- packages/dev/s2-docs/src/SearchMenu.tsx | 8 ++- 3 files changed, 52 insertions(+), 50 deletions(-) diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx index 0f9089d8f71..83c556fe3d6 100644 --- a/packages/dev/s2-docs/src/ColorSearchView.tsx +++ b/packages/dev/s2-docs/src/ColorSearchView.tsx @@ -19,7 +19,7 @@ const itemStyle = style({ justifyContent: 'center', alignItems: 'center', gap: 8, - padding: 8, + paddingY: 8, backgroundColor: { default: 'gray-50', isHovered: 'gray-100', @@ -222,10 +222,11 @@ interface ColorSearchViewProps { /** Names of colors that exactly match the searched hex value. */ exactMatches?: Set, /** Names of the closest matching colors when no exact matches exist. */ - closestMatches?: Set + closestMatches?: Set, + 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(null); const timeout = useRef | null>(null); @@ -268,40 +269,38 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes } return ( -
+
-
- { - for (const section of sections) { - const item = section.items.find(item => item.id === key.toString()); - if (item) { - handleCopyColor(item.name, item.id); - break; - } + { + 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 => ( - -
{section.name}
- {section.items.map(item => ( - - ))} - - )} - -
+ } + }} + layout="grid" + className={listBoxClassName || listBoxStyle} + dependencies={[copiedId, exactMatches, closestMatches]} + items={sections}> + {section => ( + +
{section.name}
+ {section.items.map(item => ( + + ))} + + )} +
); } diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index cc7e01e67b9..143b3d86b87 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -357,19 +357,18 @@ function MobileNav({initialTag}: {initialTag?: string}) { )} {!showIcons && isColorsSelected && library.id === 'react-spectrum' && ( -
- }> - - -
+ }> + + )} {!showIcons && isTypographySelected && library.id === 'react-spectrum' && (
) : null} {selectedTagId === 'colors' && ( -
+
}> - +
)} From 6e55d42c98c6a8f85fe8afa207b2ca2bc5919a12 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Fri, 30 Jan 2026 11:17:09 -0600 Subject: [PATCH 11/15] add padding around toggle button group --- packages/dev/s2-docs/src/TypographySearchView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 7963bc4c5de..74ff1b98407 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -299,7 +299,7 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro
-
+
Date: Fri, 30 Jan 2026 11:17:52 -0600 Subject: [PATCH 12/15] add aria-label to textfield --- packages/dev/s2-docs/src/TypographySearchView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 74ff1b98407..14698ce267b 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -339,7 +339,7 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro minHeight: 80 })}> - + From 2a6467316e7829bf078a964f87d97d778bc196fb Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 3 Feb 2026 14:14:48 -0600 Subject: [PATCH 13/15] disable virtual focus for the Autocomplete when Typography is selected --- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 5 ++++- packages/dev/s2-docs/src/SearchMenu.tsx | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index 143b3d86b87..33e744405dc 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -313,7 +313,10 @@ function MobileNav({initialTag}: {initialTag?: string}) { const showIcons = isIconsSelected && library.id === 'react-spectrum'; return ( - +
- +
Date: Tue, 3 Feb 2026 14:59:32 -0600 Subject: [PATCH 14/15] make layout styles consistent with other resource tabs --- packages/dev/s2-docs/src/MobileSearchMenu.tsx | 9 +- packages/dev/s2-docs/src/SearchMenu.tsx | 2 +- .../dev/s2-docs/src/TypographySearchView.tsx | 191 ++++++++---------- 3 files changed, 88 insertions(+), 114 deletions(-) diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx index 33e744405dc..89d51b997c7 100644 --- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx +++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx @@ -374,14 +374,7 @@ function MobileNav({initialTag}: {initialTag?: string}) { )} {!showIcons && isTypographySelected && library.id === 'react-spectrum' && ( -
- -
+ )} {!showIcons && !isColorsSelected && !isTypographySelected && ( )} {selectedTagId === 'typography' && ( -
+
)} diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 14698ce267b..363234202c1 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -3,8 +3,9 @@ import {ActionButton, Content, DialogTrigger, Heading, IllustratedMessage, Link, Popover, Text, ToggleButton, ToggleButtonGroup} from '@react-spectrum/s2'; import {CopyButton} from './CopyButton'; import {FieldInputContext, Header, Input, InputRenderProps, Key, ListBox, ListBoxItem, ListBoxSection, TextField} from 'react-aria-components'; -import {focusRing, iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'}; +import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'}; import InfoCircle from '@react-spectrum/s2/icons/InfoCircle'; +import {InfoMessage} from './colorSearchData'; // eslint-disable-next-line monorepo/no-internal-import import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults'; import React, {useMemo, useState} from 'react'; @@ -33,20 +34,6 @@ const headerStyle = style({ gap: 4 }); -function InfoMessage() { - return ( -
- - Select a typography style to preview and copy its code snippet. See styling for more information. -
- ); -} - const typographySections = [ { id: 'heading', @@ -245,23 +232,9 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro return new Set(); }, [selectedFont, sections]); - if (searchValue.trim() && sections.length === 0) { - return ( -
- - - - No results - Try a different search term. - -
- ); - } - return ( -
- - + <> + Select a typography style and customize the sample text to preview its rendered output and code snippet. See styling for more information.
) => void} className={listBoxStyle} - items={sections}> + items={sections} + renderEmptyState={() => ( + + + No results + Try a different search term. + + )}> {section => (
@@ -299,91 +279,92 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro
-
- ) => void}> - {htmlElements.map(option => ( - - {option.name} - - ))} - -
- -
+
+
+ ) => void}> + {htmlElements.map(option => ( + + {option.name} + + ))} + +
+
- - - - - -
- -
- - < - {selectedElementTag} - {' '} - className - = - {'{'} - style - {'('} - {'{'} - font - : - {' '} - '{selectedFont}' - {'}'} - {')'} - {'}'} - > - {previewText} - </ - {selectedElementTag} - > - - + + + + + +
+ +
+
+ + < + {selectedElementTag} + {' '} + className + = + {'{'} + style + {'('} + {'{'} + font + : + {' '} + '{selectedFont}' + {'}'} + {')'} + {'}'} + > + {previewText} + </ + {selectedElementTag} + > + + +
-
+ ); } From 035d7fcc1142a5ce35996672bd8eb251f02348d2 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 3 Feb 2026 14:59:54 -0600 Subject: [PATCH 15/15] allow sample text to take the full width of the container --- packages/dev/s2-docs/src/TypographySearchView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx index 363234202c1..6d3c964d3a2 100644 --- a/packages/dev/s2-docs/src/TypographySearchView.tsx +++ b/packages/dev/s2-docs/src/TypographySearchView.tsx @@ -170,7 +170,8 @@ const defaultPreviewInputStyle = style({ backgroundColor: 'transparent', borderStyle: 'hidden', borderRadius: 'lg', - textAlign: 'center' + textAlign: 'center', + width: 'full' }); interface TypographySearchViewProps { @@ -319,7 +320,7 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro minHeight: 80 })}> - +