Use ListBox for ComponentCardView

Author: devongovett

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

@@ -1,11 +1,10 @@
-/* eslint-disable rulesdir/imports */
-/* eslint-disable monorepo/no-internal-import */
 'use client';
 
-import {CardView, Collection} from '@react-spectrum/s2';
 import {ComponentCard} from './ComponentCard';
-import {Key} from 'react-aria-components';
+import {InternalCardViewContext} from '../../../@react-spectrum/s2/src/Card';
+import {Key, ListBox, ListBoxItem} from 'react-aria-components';
 import React from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 export interface ComponentCardItem {
   id: string,
@@ -19,16 +18,49 @@ interface ComponentCardGridProps {
   ariaLabel?: string,
   size?: 'S' | 'M' | 'L',
   onAction?: (key: Key) => void,
-  styles?: any,
   renderEmptyState?: () => React.ReactNode
 }
 
-export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, styles, renderEmptyState}: ComponentCardGridProps) {
+export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', onAction, renderEmptyState}: ComponentCardGridProps) {
   return (
-    <CardView aria-label={ariaLabel} onAction={onAction} styles={styles} renderEmptyState={renderEmptyState}>
-      <Collection items={items}>
+    <InternalCardViewContext.Provider value={{ElementType: ListBoxItem, layout: 'grid'}}>
+      <ListBox
+        aria-label={ariaLabel}
+        layout="grid"
+        onAction={onAction}
+        className={style({
+          display: {
+            default: 'grid',
+            isEmpty: 'flex'
+          },
+          gridTemplateColumns: {
+            default: 'repeat(auto-fill, minmax(150px, 1fr))',
+            md: 'repeat(auto-fill, minmax(200px, 1fr))'
+          },
+          gridAutoRows: 'max-content',
+          gap: 16,
+          padding: {
+            default: 12,
+            md: 16
+          },
+          marginX: {
+            default: -12,
+            md: 0
+          },
+          alignItems: {
+            isEmpty: 'center'
+          },
+          justifyContent: {
+            default: 'space-between',
+            isEmpty: 'center'
+          },
+          overflow: 'auto',
+          flexGrow: 1
+        })}
+        renderEmptyState={renderEmptyState}
+        items={items}>
         {(item) => <ComponentCard id={item.id} name={item.name.trim()} href={item.href} description={item.description} size={size} />}
-      </Collection>
-    </CardView>
+      </ListBox>
+    </InternalCardViewContext.Provider>
   );
 }

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

@@ -272,22 +272,23 @@ export function SearchMenu(props: SearchMenuProps) {
         {orderedTabs.map((tab, i) => (
           <TabPanel key={tab.id} id={tab.id}>
             <Autocomplete>
-              <div className={style({margin: 'auto', width: '[fit-content]', paddingBottom: 4})}>
-                <SearchField
-                  value={searchValue}
-                  onChange={setSearchValue}
-                  ref={searchRef}
-                  size="L"
-                  aria-label={`Search ${tab.label}`}
-                  UNSAFE_style={{marginInlineEnd: 296, viewTransitionName: i === 0 ? 'search-menu-search-field' : 'none'} as CSSProperties}
-                  styles={style({width: '[500px]'})} />
-              </div>
+              <div className={style({display: 'flex', flexDirection: 'column', height: 'full'})}>
+                <div className={style({flexShrink: 0, marginStart: 16, marginEnd: 64})}>
+                  <SearchField
+                    value={searchValue}
+                    onChange={setSearchValue}
+                    ref={searchRef}
+                    size="L"
+                    aria-label={`Search ${tab.label}`}
+                    placeholder={`Search ${tab.label}`}
+                    UNSAFE_style={{marginInlineEnd: 296, viewTransitionName: i === 0 ? 'search-menu-search-field' : 'none'} as CSSProperties}
+                    styles={style({width: 500})} />
+                </div>
 
-              <CloseButton onClose={onClose} />
+                <CloseButton onClose={onClose} />
 
-              <div className={style({height: 'full', overflow: 'auto', paddingX: 16, paddingBottom: 16})}>
                 {sections.length > 0 && (
-                  <div className={style({position: 'sticky', top: 0, zIndex: 1, backgroundColor: 'layer-2', paddingY: 8})}>
+                  <div className={style({flexShrink: 0, zIndex: 1, backgroundColor: 'layer-2', paddingTop: 16})}>
                     <SelectableCollectionContext.Provider value={null}>
                       <TagGroup
                         selectionMode="single"
@@ -296,7 +297,7 @@ export function SearchMenu(props: SearchMenuProps) {
                         onSelectionChange={handleSectionSelectionChange}
                         aria-label="Select section"
                         items={tags}
-                        styles={style({marginX: 12})}>
+                        styles={style({marginX: 16})}>
                         {(tag) => (
                           <Tag key={tag.id} id={tag.id}>
                             {tag.name}
@@ -307,10 +308,7 @@ export function SearchMenu(props: SearchMenuProps) {
                   </div>
                 )}
                 <ComponentCardView
-                  onAction={() => {
-                    setSearchValue('');
-                    onClose();
-                  }}
+                  onAction={onClose}
                   items={selectedItems.map(item => ({
                     id: item.id,
                     name: item.name,

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

@@ -2,6 +2,7 @@
 
 import {Button, ButtonProps, Modal, ModalOverlay} from 'react-aria-components';
 import {fontRelative, style} from '@react-spectrum/s2/style' with { type: 'macro' };
+import {getLibraryFromPage, getLibraryLabel} from './library';
 import {Page} from '@parcel/rsc';
 import React, {CSSProperties, lazy, useCallback, useEffect, useState} from 'react';
 import Search from '@react-spectrum/s2/icons/Search';
@@ -138,7 +139,8 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
         className={({isHovered, isFocusVisible}) => style({
           height: 40,
           boxSizing: 'border-box',
-          paddingX: 'edge-to-text',
+          paddingStart: 'pill',
+          paddingEnd: 8,
           fontSize: 'ui-lg',
           borderRadius: 'full',
           borderWidth: 2,
@@ -177,6 +179,7 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
             '--iconPrimary': {type: 'fill', value: 'currentColor'},
             flexShrink: 0
           }))} />
+        <span className={style({font: 'ui-lg', color: 'gray-600'})}>Search {getLibraryLabel(getLibraryFromPage(props.currentPage))}</span>
         <kbd
           className={style({
             marginStart: 'auto',