Use Primer ActionList for sidebar (#22885)

* Initial move to ActionLists nav, handle terminal links

* ActionList-ify map topic items

* Some 🎨

* ActionList-ify homepage sidebar

* More 🎨

* Resolve test failures (and 'better' markup?)

* Properties don't exist on ActionList

* Use ul + li elements for ActionLists

* Workaround for TS error with 'as='

Co-authored-by: Octomerger Bot <63058869+Octomerger@users.noreply.github.com>

Author: rsese

components/sidebar/SidebarHomepage.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router'
 import { LinkExternalIcon } from '@primer/octicons-react'
+import { ActionList } from '@primer/components'
 
 import { useVersion } from 'components/hooks/useVersion'
 import { useMainContext } from 'components/context/MainContext'
@@ -11,43 +12,53 @@ export const SidebarHomepage = () => {
   const router = useRouter()
   const { currentVersion } = useVersion()
   const { activeProducts, isFPT } = useMainContext()
+  const navItems = []
+
+  for (let i = 0; i < activeProducts.length; i++) {
+    const product = activeProducts[i]
+
+    if (!isFPT && !product.versions?.includes(currentVersion) && !product.external) {
+      continue
+    }
+
+    const href = `${!product.external ? `/${router.locale}` : ''}${
+      product.versions?.includes(currentVersion) && !isFPT
+        ? `/${currentVersion}/${product.id}`
+        : product.href
+    }`
+
+    navItems.push({
+      renderItem: () => (
+        <ActionList.Item
+          as="li"
+          key={product.id}
+          title={`${product.name}${product.external ? '(External Site)' : ''}`}
+          className="my-2"
+          sx={{ padding: 0 }}
+        >
+          <Link
+            href={href}
+            target={product.external ? '_blank' : undefined}
+            className="f4 pl-4 pr-5 py-2 color-fg-default no-underline width-full"
+          >
+            {product.name}
+            {product.external && (
+              <span className="ml-1">
+                <LinkExternalIcon size="small" />
+              </span>
+            )}
+          </Link>
+        </ActionList.Item>
+      ),
+    })
+  }
 
   return (
     <ul data-testid="sidebar" className="mt-4">
       {!isFPT && <AllProductsLink />}
-
-      {activeProducts.map((product) => {
-        if (!isFPT && !product.versions?.includes(currentVersion) && !product.external) {
-          return null
-        }
-
-        const href = `${!product.external ? `/${router.locale}` : ''}${
-          product.versions?.includes(currentVersion) && !isFPT
-            ? `/${currentVersion}/${product.id}`
-            : product.href
-        }`
-
-        return (
-          <li
-            key={product.id}
-            title={`${product.name}${product.external ? '(External Site)' : ''}`}
-            className="my-3"
-          >
-            <Link
-              href={href}
-              target={product.external ? '_blank' : undefined}
-              className="f4 pl-4 pr-5 py-2 color-fg-default no-underline"
-            >
-              {product.name}
-              {product.external && (
-                <span className="ml-1">
-                  <LinkExternalIcon size="small" />
-                </span>
-              )}
-            </Link>
-          </li>
-        )
-      })}
+      <li>
+        <ActionList {...{ as: 'ul' }} items={navItems}></ActionList>
+      </li>
     </ul>
   )
 }

components/sidebar/SidebarProduct.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { useState, useEffect, SyntheticEvent } from 'react'
 import { ChevronDownIcon } from '@primer/octicons-react'
+import { ActionList } from '@primer/components'
 
 import { Link } from 'components/Link'
 import { ProductTreeNode, useMainContext } from 'components/context/MainContext'
@@ -114,28 +115,37 @@ const CollapsibleSection = (props: SectionProps) => {
     const title = page.renderedShortTitle || page.renderedFullTitle
 
     const isCurrent = routePath === page.href
-    return (
-      <li
-        data-testid="sidebar-article"
-        data-is-current-page={isCurrent}
-        key={page.href}
-        className={cx(
-          'position-relative',
-          styles.sidebarArticle,
-          isCurrent && ['text-bold', styles.sidebarArticleActive]
-        )}
-      >
-        <Link
-          href={page.href}
+    return {
+      text: title,
+      renderItem: () => (
+        <ActionList.Item
+          data-testid="sidebar-article"
+          data-is-current-page={isCurrent}
+          as="li"
           className={cx(
-            'd-block pl-6 pr-5 py-1 no-underline',
-            isCurrent ? 'color-fg-accent' : 'color-fg-default'
+            'position-relative',
+            styles.sidebarArticle,
+            isCurrent && ['text-bold', styles.sidebarArticleActive]
           )}
+          sx={{
+            padding: '2px 0',
+            ':hover': {
+              borderRadius: 0,
+            },
+          }}
         >
-          {title}
-        </Link>
-      </li>
-    )
+          <Link
+            href={page.href}
+            className={cx(
+              'd-block pl-6 pr-5 py-1 no-underline width-full',
+              isCurrent ? 'color-fg-accent' : 'color-fg-default'
+            )}
+          >
+            {title}
+          </Link>
+        </ActionList.Item>
+      ),
+    }
   }
 
   return (
@@ -172,19 +182,23 @@ const CollapsibleSection = (props: SectionProps) => {
                       <summary>
                         <div className={cx('pl-4 pr-5 py-2 no-underline')}>{childTitle}</div>
                       </summary>
-                      <ul data-testid="sidebar-article-group" className="my-2 pb-2">
-                        {childPage.childPages.map(renderTerminalPageLink)}
-                      </ul>
+                      <div data-testid="sidebar-article-group" className="pb-0">
+                        <ActionList
+                          {...{ as: 'ul' }}
+                          items={childPage.childPages.map((cp) => {
+                            return renderTerminalPageLink(cp)
+                          })}
+                        ></ActionList>
+                      </div>
                     </details>
                   </li>
                 )
               })}
             </ul>
           ) : page.childPages[0]?.page.documentType === 'article' ? (
-            <ul data-testid="sidebar-article-group" className="list-style-none pb-2">
-              {/* <!-- some categories have no maptopics, only articles --> */}
-              {page.childPages.map(renderTerminalPageLink)}
-            </ul>
+            <div data-testid="sidebar-article-group" className="pb-0">
+              <ActionList {...{ as: 'ul' }} items={page.childPages.map(renderTerminalPageLink)} />
+            </div>
           ) : null}
         </>
       }