Merge pull request #27612 from github/repo-sync

Repo sync

Author: docs-bot

src/rest/components/RestCodeSamples.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, FormEvent } from 'react'
-import { FormControl, Select, Tooltip, UnderlineNav } from '@primer/react'
+import { FormControl, Select, Tooltip, TabNav } from '@primer/react'
 import { CheckIcon, CopyIcon } from '@primer/octicons-react'
 import Cookies from 'components/lib/cookies'
 import cx from 'classnames'
@@ -246,31 +246,28 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
         <div className="my-0 p-3">
           <RestMethod verb={operation.verb} requestPath={operation.requestPath} />
         </div>
-        <div className="border-top d-inline-flex flex-justify-between width-full flex-items-center">
+        <div className="border-top d-inline-flex flex-justify-between width-full flex-items-center pt-2">
           <div className="d-inline-flex ml-2">
-            <UnderlineNav aria-label="Example language selector">
+            <TabNav aria-label="Example language selector">
               {languageSelectOptions.map((optionKey) => (
-                <UnderlineNav.Link
+                <TabNav.Link
                   key={optionKey}
-                  onClick={() => {
+                  selected={optionKey === selectedLanguage}
+                  onClick={(e) => {
+                    e.preventDefault()
                     handleLanguageSelection(optionKey)
                   }}
                   onKeyDown={(event) => {
                     if (event.key === 'Enter') {
                       handleLanguageSelection(optionKey)
                     }
                   }}
-                  tabIndex={0}
-                  aria-current={optionKey === selectedLanguage}
-                  className={cx('pr-3 mr-0', optionKey === selectedLanguage && 'PRC-selected')}
-                  sx={{
-                    cursor: 'pointer',
-                  }}
+                  href="#"
                 >
                   {t(`rest.reference.code_sample_options.${optionKey}`)}
-                </UnderlineNav.Link>
+                </TabNav.Link>
               ))}
-            </UnderlineNav>
+            </TabNav>
           </div>
           <div className="mr-2">
             <Tooltip
@@ -309,36 +306,28 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
           __html: displayedExample.response.description || t('rest.reference.response'),
         }}
       ></h4>
-
       <div className="border rounded-1">
         {displayedExample.response.schema ? (
-          <UnderlineNav aria-label="Example response format selector">
-            {responseSelectOptions.map((optionKey) => {
-              if (!displayedExample.response.schema) return null
-
-              return (
-                <UnderlineNav.Link
-                  key={optionKey}
-                  onClick={() => {
+          <TabNav className="pt-2 mx-2" aria-label="Example response format selector">
+            {responseSelectOptions.map((optionKey) => (
+              <TabNav.Link
+                key={optionKey}
+                selected={optionKey === selectedResponse}
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleResponseSelection(optionKey)
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
                     handleResponseSelection(optionKey)
-                  }}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter') {
-                      handleResponseSelection(optionKey)
-                    }
-                  }}
-                  tabIndex={0}
-                  aria-current={optionKey === selectedResponse}
-                  className={cx('pr-3 mr-0 ml-2', optionKey === selectedResponse && 'PRC-selected')}
-                  sx={{
-                    cursor: 'pointer',
-                  }}
-                >
-                  {t(`rest.reference.response_options.${optionKey}`)}
-                </UnderlineNav.Link>
-              )
-            })}
-          </UnderlineNav>
+                  }
+                }}
+                href="#"
+              >
+                {t(`rest.reference.response_options.${optionKey}`)}
+              </TabNav.Link>
+            ))}
+          </TabNav>
         ) : null}
         <div className="">
           {/* Status code */}