docs: fix new-theme-override example, fix relative hrefs

Author: git-nandor

docs/theming/new-theme-overrides.md

@@ -544,16 +544,16 @@ type: example
     <Table caption="Independent overrides: ColHeader purple, RowHeader deeppink">
       <Table.Head>
         <Table.Row>
-          <Table.ColHeader id="h-row">TableColHeader — purple</Table.ColHeader>
-          <Table.ColHeader id="h-col">TableColHeader — purple</Table.ColHeader>
+          <Table.ColHeader id="row-headers">Row headers column - purple</Table.ColHeader>
+          <Table.ColHeader id="cells">Cells column - purple</Table.ColHeader>
         </Table.Row>
       </Table.Head>
       <Table.Body>
         <Table.Row>
           <Table.RowHeader>TableRowHeader — deeppink</Table.RowHeader>
           <Table.Cell>TableCell — unchanged</Table.Cell>
         </Table.Row>
-                <Table.Row>
+        <Table.Row>
           <Table.RowHeader>TableRowHeader — deeppink</Table.RowHeader>
           <Table.Cell>TableCell — unchanged</Table.Cell>
         </Table.Row>

packages/__docs__/src/App/index.tsx

@@ -70,6 +70,7 @@ import {
 } from '../versionData'
 import {
   parseCurrentUrl,
+  navigateTo,
   navigateToVersion,
   getDeployBase,
   MINOR_VERSION_REGEX
@@ -699,7 +700,16 @@ class App extends Component<AppProps, AppState> {
     return (
       <Alert variant="info" margin="0 0 medium">
         {subject} is designed for components for <strong>v11.7</strong> and
-        later. <Link href={v11_7Href}>Switch to v11.7</Link>
+        later.{' '}
+        <Link
+          href={v11_7Href}
+          onClick={(e) => {
+            e.preventDefault()
+            this.handleMinorVersionChange('v11_7')
+          }}
+        >
+          Switch to v11.7
+        </Link>
       </Alert>
     )
   }
@@ -832,7 +842,13 @@ class App extends Component<AppProps, AppState> {
             <Alert variant="info" margin="xx-large 0">
               This page is made for the latest version (
               {this.getLatestMinorVersion()?.replace('_', '.')}) of InstUI.{' '}
-              <Link href="component-versioning">
+              <Link
+                href="component-versioning"
+                onClick={(e) => {
+                  e.preventDefault()
+                  navigateTo('component-versioning')
+                }}
+              >
                 Learn more about the versioning system
               </Link>
             </Alert>

packages/__docs__/src/Document/index.tsx

@@ -43,6 +43,7 @@ import { TableOfContents } from '../TableOfContents'
 import { Heading } from '../Heading'
 
 import { AppContext } from '../appContext'
+import { navigateTo } from '../navigationUtils'
 
 import { allowedProps } from './props'
 import type { DocumentProps, DocumentState, DocDataType } from './props'
@@ -203,7 +204,15 @@ class Document extends Component<DocumentProps, DocumentState> {
           <View margin="small 0" display="block">
             The easiest way to do this is to utilize the{' '}
             <code>themeOverride</code> property. See the{' '}
-            <Link href="#legacy-theme-overrides">Legacy theme overrides</Link>{' '}
+            <Link
+              href="legacy-theme-overrides"
+              onClick={(e) => {
+                e.preventDefault()
+                navigateTo('legacy-theme-overrides')
+              }}
+            >
+              Legacy theme overrides
+            </Link>{' '}
             guide for more info and alternative methods.
           </View>
 
@@ -307,7 +316,16 @@ import { ${importName} } from '${versionedPackageName}'`
         <View as="div" margin="small 0 0 0">
           This import is pinned to the selected component version; future
           breaking changes land at new paths. For other import styles, see the{' '}
-          <Link href="component-versioning">Component versioning</Link> guide.
+          <Link
+            href="component-versioning"
+            onClick={(e) => {
+              e.preventDefault()
+              navigateTo('component-versioning')
+            }}
+          >
+            Component versioning
+          </Link>{' '}
+          guide.
         </View>
       </View>
     )

packages/__docs__/src/Icons/index.tsx

@@ -27,6 +27,7 @@ import { Spinner } from '@instructure/ui-spinner'
 import { View } from '@instructure/ui-view'
 import { Alert } from '@instructure/ui-alerts'
 import { Link } from '@instructure/ui-link'
+import { navigateTo } from '../navigationUtils'
 
 // Lazy load icons gallery component
 const IconsGallery = lazy(() => import('./IconsGallery'))
@@ -50,9 +51,17 @@ const IconsPage = () => {
         <Alert variant="info" margin="0 0 medium">
           The version selector does not affect this page. For icons compatible
           with older versions, use{' '}
-          <Link href="/legacy-icons">Legacy Icons</Link>. These icons are only
-          meant to be used with the new theming system, please do not use them
-          with the old (pre v11.7) components.
+          <Link
+            href="legacy-icons"
+            onClick={(e) => {
+              e.preventDefault()
+              navigateTo('legacy-icons')
+            }}
+          >
+            Legacy Icons
+          </Link>
+          . These icons are only meant to be used with the new theming system,
+          please do not use them with the old (pre v11.7) components.
         </Alert>
         <IconsGallery />
       </Suspense>

packages/__docs__/src/LegacyIcons/index.tsx

@@ -42,6 +42,7 @@ import { SourceCodeEditor } from '@instructure/ui-source-code-editor'
 import * as InstIcons from '@instructure/ui-icons'
 import { IconXSolid } from '@instructure/ui-icons'
 import { Link } from '@instructure/ui-link'
+import { navigateTo } from '../navigationUtils'
 import { Flex } from '@instructure/ui-flex'
 import type { Glyph, LegacyIconsData } from '../../buildScripts/DataTypes.mjs'
 
@@ -249,7 +250,16 @@ const LegacyIconsPage = ({ iconData }: LegacyIconsPageProps) => {
       </Alert>
       <Alert variant="info" margin="0 0 medium">
         New icon set is available, please only use it with InstUI v11.7 or newer
-        components: <Link href="/icons">Icons</Link>
+        components:{' '}
+        <Link
+          href="icons"
+          onClick={(e) => {
+            e.preventDefault()
+            navigateTo('icons')
+          }}
+        >
+          Icons
+        </Link>
       </Alert>
       <Alert variant="info" margin="0 0 medium">
         Our legacy icon components are rendered through Emotion, so server-side

packages/__docs__/src/Theme/index.tsx

@@ -34,6 +34,7 @@ import { Alert } from '@instructure/ui-alerts'
 import { Spinner } from '@instructure/ui-spinner'
 import { Link } from '@instructure/ui-link'
 
+import { navigateTo } from '../navigationUtils'
 import { Heading } from '../Heading'
 import { Description } from '../Description'
 import { ColorSwatch } from '../ColorSwatch'
@@ -326,7 +327,13 @@ type ThemeState = { showColors: boolean }
           <Alert variant="info" margin="0 0 medium">
             This theme is used by <strong>InstUI v11.6</strong> components. For
             v11.7 and later, use the{' '}
-            <Link href={`#${themeKey.replace('legacy-', '')}`}>
+            <Link
+              href={themeKey.replace('legacy-', '')}
+              onClick={(e) => {
+                e.preventDefault()
+                navigateTo(themeKey.replace('legacy-', ''))
+              }}
+            >
               {themeKey.replace('legacy-', '')}
             </Link>{' '}
             theme instead.