chore: S2 docs followup (#8504)

* make 'ArrowDown' open the menu onKeyDown

* preventDefault on 'ArrowDown' to prevent scrolling

* fix chevron in menu button

* fix github logo

* header/menu layout improvements

* lint

Author: reidbarber

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

@@ -2,9 +2,8 @@
 
 import {ActionButton} from '@react-spectrum/s2';
 import {AdobeLogo} from './icons/AdobeLogo';
-import ChevronDown from '@react-spectrum/s2/icons/ChevronDown';
 import {flushSync} from 'react-dom';
-import {GithubLogo} from './icons/GithubLogo';
+import GithubLogo from './icons/GithubLogo';
 import {InternationalizedLogo} from './icons/InternationalizedLogo';
 import {MarkdownMenu} from './MarkdownMenu';
 import {PageProps} from '@parcel/rsc';
@@ -61,6 +60,21 @@ export default function Header(props: PageProps) {
     });
   };
 
+  let handleActionButtonKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === 'ArrowDown' && !searchOpen) {
+      e.preventDefault();
+      toggleShowSearchMenu();
+    }
+  };
+
+  const ChevronDownIcon = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} {...props}>
+      <path
+        fill="var(--iconPrimary, #222)"
+        d="M3.755 7.243a.748.748 0 0 1 1.06-.02l5.183 4.986 5.197-4.999a.749.749 0 1 1 1.04 1.08l-5.717 5.5a.747.747 0 0 1-1.04 0L3.776 8.303a.746.746 0 0 1-.02-1.06Z" />
+    </svg>
+  );
+
   return (
     <>
       <header className={style({width: 'full', display: {default: 'none', lg: 'flex'}, justifyContent: 'center'})}>
@@ -72,7 +86,7 @@ export default function Header(props: PageProps) {
             alignItems: 'center'
           })}>
           <div className={style({justifySelf: 'start'})}>
-            <ActionButton aria-label="Open menu and search" size="XL" isQuiet onPress={toggleShowSearchMenu} UNSAFE_style={{paddingInlineStart: 10}}>
+            <ActionButton aria-label="Open menu and search" size="XL" isQuiet onPress={toggleShowSearchMenu} onKeyDown={handleActionButtonKeyDown} UNSAFE_style={{paddingInlineStart: 10}}>
               <div className={style({display: 'flex', alignItems: 'center'})}>
                 <div className={style({marginTop: 4})} style={{viewTransitionName: !searchOpen ? 'search-menu-icon' : 'none'} as CSSProperties}>
                   {getButtonIcon(currentPage)}
@@ -81,13 +95,13 @@ export default function Header(props: PageProps) {
                   {getButtonText(currentPage)}
                 </span>
               </div>
-              <ChevronDown UNSAFE_className={'react-spectrum-select-chevron' + style({paddingEnd: 8})} UNSAFE_style={{width: 18}} />
+              <ChevronDownIcon className={style({width: 18})} />
             </ActionButton>
           </div>
           <SearchMenu pages={pages} currentPage={currentPage} toggleShowSearchMenu={toggleShowSearchMenu} closeSearchMenu={closeSearchMenu} isSearchOpen={searchOpen} />
           <div className={style({display: 'flex', alignItems: 'center', gap: 4, justifySelf: 'end'})}>
             <MarkdownMenu url={currentPage.url} />
-            <ActionButton aria-label="React Spectrum GitHub repo" size="XL" isQuiet>
+            <ActionButton aria-label="React Spectrum GitHub repo" size="L" isQuiet>
               <GithubLogo />
             </ActionButton>
           </div>

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

@@ -42,7 +42,7 @@ export function MarkdownMenu({url}: MarkdownMenuProps) {
 
   return (
     <MenuTrigger>
-      <ActionButton isQuiet aria-label="Markdown options">
+      <ActionButton size="L" isQuiet aria-label="Markdown options">
         <Copy />
       </ActionButton>
       <Menu onAction={onAction}>

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

@@ -281,6 +281,11 @@ export default function SearchMenu(props: SearchMenuProps) {
       onFocusSearch(); // Open the search overlay
       setSearchValue(e.key); // Set the initial search value
     }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      toggleShowSearchMenu();
+    }
   };
 
   let handleButtonPress = () => {
@@ -290,9 +295,8 @@ export default function SearchMenu(props: SearchMenuProps) {
   return (
     <div
       className={style({ 
-        width: 'full', 
         display: 'grid',
-        gridTemplateColumns: 'auto 1fr auto',
+        gridTemplateColumns: 'auto 1fr',
         alignItems: 'center',
         gap: 16
       })}>

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

@@ -78,7 +78,7 @@ export default function SearchResultsMenu({
             ref={searchRef}
             size="L"
             aria-label={`Search ${libraryName}`}
-            UNSAFE_style={{marginInlineEnd: 308, viewTransitionName: isPrimary ? 'search-menu-search-field' : 'none'} as CSSProperties}
+            UNSAFE_style={{marginInlineEnd: 296, viewTransitionName: isPrimary ? 'search-menu-search-field' : 'none'} as CSSProperties}
             styles={style({width: '[500px]'})} />
         </div>
 
@@ -88,7 +88,6 @@ export default function SearchResultsMenu({
 
         <div style={{display: showCards ? 'none' : 'block'}} className={style({height: 'full', overflow: 'auto'})}>
           {mainItems.length > 0 ? (
-             
             <div
               className={style({marginX: 'auto', marginY: 8, maxWidth: '[500px]'})}
               role="region"

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

@@ -47,7 +47,8 @@ const tabs = style({
   display: 'flex',
   flexShrink: 0,
   font: 'ui',
-  height: 'full'
+  height: 'full',
+  paddingTop: 8
 });
 
 /**

packages/dev/s2-docs/src/icons/GithubLogo.tsx

@@ -1,21 +1,18 @@
-import React from 'react';
+
+import {createIcon} from '@react-spectrum/s2';
+
+import {forwardRef, Ref, SVGProps} from 'react';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 
-export const GithubLogo = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={20}
-      height={20}
-      viewBox="0 0 20 19"
-      className={style({color: 'gray-1000'})}>
-      <path
-        d="M9.969 0C4.457 0 0 4.355 0 9.742c0 4.305 2.855 7.95 6.816 9.238.497.098.676-.207.676-.464 0-.227-.015-1-.015-1.809-2.774.582-3.352-1.16-3.352-1.16-.445-1.129-1.105-1.418-1.105-1.418-.907-.598.066-.598.066-.598 1.008.063 1.535 1 1.535 1 .89 1.485 2.328 1.063 2.906.805.082-.629.348-1.063.63-1.305-2.216-.226-4.544-1.066-4.544-4.804 0-1.067.399-1.938 1.024-2.614-.098-.242-.446-1.242.101-2.582 0 0 .84-.258 2.739 1a9.934 9.934 0 0 1 2.492-.32c.844 0 1.703.11 2.492.32 1.898-1.258 2.742-1 2.742-1 .543 1.34.2 2.34.098 2.582.644.676 1.023 1.547 1.023 2.614 0 3.738-2.328 4.562-4.554 4.804.363.305.675.887.675 1.805 0 1.309-.015 2.355-.015 2.68 0 .257.183.562.675.464 3.961-1.289 6.82-4.933 6.82-9.238C19.942 4.355 15.47 0 9.97 0Zm0 0"
-        className={style({stroke: 'none', fill: '[currentcolor]'})}
-        style={{
-          fillRule: 'evenodd',
-          fillOpacity: 1
-        }} />
-    </svg>
-  );
-};
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (<svg className={style({color: 'gray-1000'})} xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 20 19" ref={ref} {...props}><path
+  d="M9.969 0C4.457 0 0 4.355 0 9.742c0 4.305 2.855 7.95 6.816 9.238.497.098.676-.207.676-.464 0-.227-.015-1-.015-1.809-2.774.582-3.352-1.16-3.352-1.16-.445-1.129-1.105-1.418-1.105-1.418-.907-.598.066-.598.066-.598 1.008.063 1.535 1 1.535 1 .89 1.485 2.328 1.063 2.906.805.082-.629.348-1.063.63-1.305-2.216-.226-4.544-1.066-4.544-4.804 0-1.067.399-1.938 1.024-2.614-.098-.242-.446-1.242.101-2.582 0 0 .84-.258 2.739 1 .812-.21 1.652-.32 2.492-.32.844 0 1.703.11 2.492.32 1.898-1.258 2.742-1 2.742-1 .543 1.34.2 2.34.098 2.582.644.676 1.023 1.547 1.023 2.614 0 3.738-2.328 4.562-4.554 4.804.363.305.675.887.675 1.805 0 1.309-.015 2.355-.015 2.68 0 .257.183.562.675.464 3.961-1.289 6.82-4.933 6.82-9.238C19.942 4.355 15.47 0 9.97 0m0 0"
+  className={style({stroke: 'none', fill: '[currentcolor]'})}
+  style={{
+    stroke: 'none',
+    fillRule: 'evenodd',
+    fillOpacity: 1
+  }} /></svg>);
+const ForwardRef = forwardRef(SvgComponent);
+
+
+export default /*#__PURE__*/ createIcon(ForwardRef);