Design system tweaks

oxidecomputer · Dec 17, 2024 · 44ac341 · 44ac341
1 parent 7492e4a
commit 44ac341
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 75 deletions.
diff --git a/app/components/AsciidocBlocks/Document.tsx b/app/components/AsciidocBlocks/Document.tsx
@@ -5,15 +5,23 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useDelegatedReactRouterLinks } from '@oxide/design-system/components/dist'
 import { Content, type DocumentBlock } from '@oxide/react-asciidoc'
+import { useRef } from 'react'
 
-const CustomDocument = ({ document }: { document: DocumentBlock }) => (
-  <div
-    id="content"
-    className="asciidoc-body max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0"
-  >
-    <Content blocks={document.blocks} />
-  </div>
-)
+const CustomDocument = ({ document }: { document: DocumentBlock }) => {
+  let ref = useRef<HTMLDivElement>(null)
+  useDelegatedReactRouterLinks(ref, document.title)
+
+  return (
+    <div
+      id="content"
+      className="asciidoc-body max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0"
+      ref={ref}
+    >
+      <Content blocks={document.blocks} />
+    </div>
+  )
+}
 
 export { CustomDocument }
diff --git a/app/components/Spinner.tsx b/app/components/Spinner.tsx
diff --git a/app/components/rfd/RfdDiscussionDialog.tsx b/app/components/rfd/RfdDiscussionDialog.tsx
@@ -13,6 +13,7 @@ import {
   useDialogStore,
   type DialogStore,
 } from '@ariakit/react'
+import { Spinner } from '@oxide/design-system/components/dist'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -30,7 +31,6 @@ import type {
 } from '~/services/rfd.server'
 
 import { GotoIcon } from '../CustomIcons'
-import Spinner from '../Spinner'
 import { CommentThreadBlock, matchCommentToBlock } from './RfdInlineComments'
 import { calcOffset } from './RfdPreview'
 
@@ -353,14 +353,14 @@ const DiscussionReview = ({
           <div className="text-sans-semi-md">
             <a
               href={data.review.user.html_url}
-              className="hover:text-secondary"
+              className="text-sans-semi-md text-raise hover:text-default"
               target="_blank"
               rel="noreferrer"
             >
               {data.review.user.login}
             </a>
           </div>
-          <div className="ml-1 text-sans-md text-quaternary">
+          <div className="ml-1 text-sans-md text-tertiary">
             reviewed on
             <time dateTime={data.review.submitted_at}>
               {' '}
@@ -376,7 +376,7 @@ const DiscussionReview = ({
           <div className="flex items-center border-b p-3 text-sans-md bg-secondary border-b-secondary">
             <a
               href={data.review.user.html_url}
-              className="hover:text-secondary"
+              className="text-sans-semi-md text-raise hover:text-default"
               target="_blank"
               rel="noreferrer"
             >
@@ -459,7 +459,7 @@ const DiscussionIssueComment = ({
           <div className="flex items-center border-b p-3 text-sans-md bg-secondary border-b-secondary">
             <a
               href={data.user.html_url}
-              className="hover:text-secondary"
+              className="text-sans-semi-md text-raise hover:text-default"
               target="_blank"
               rel="noreferrer"
             >

diff --git a/app/components/rfd/RfdInlineComments.tsx b/app/components/rfd/RfdInlineComments.tsx
@@ -17,6 +17,7 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react'
+import { Badge } from '@oxide/design-system/components/dist'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -361,19 +362,18 @@ export const CommentThreadBlock = ({
       )}
     >
       {/* Meta */}
-      {/* {isOverlay && ( */}
       <div className="flex items-center justify-between p-3 bg-secondary">
         <a href={htmlUrl} target="_blank" rel="noreferrer" className="hover:opacity-80">
-          <div className="flex items-center !normal-case text-mono-xs">
+          <div className="flex items-center !normal-case text-mono-sm">
             {isOverlay && (
               <span className="mr-1 text-sans-sm text-tertiary">Comment on </span>
             )}
             {path}
 
             {isOutdated && (
-              <div className="ml-2 rounded px-1 py-[1px] text-mono-xs text-notice bg-notice-secondary">
+              <Badge className="ml-1" color="notice">
                 Outdated
-              </div>
+              </Badge>
             )}
           </div>
         </a>
@@ -460,14 +460,14 @@ export const CommentThreadBlock = ({
                     <div className="text-sans-semi-md">
                       <a
                         href={comment.user.html_url}
-                        className="hover:text-secondary"
+                        className="text-raise hover:text-default"
                         target="_blank"
                         rel="noreferrer"
                       >
                         {comment.user.login}
                       </a>
                     </div>
-                    <div className="ml-1 text-sans-md text-quaternary">
+                    <div className="ml-1 text-sans-md text-tertiary">
                       <time dateTime={comment.created_at}>
                         {dayjs(comment.created_at).fromNow()}
                       </time>

diff --git a/app/routes/rfd.$slug.tsx b/app/routes/rfd.$slug.tsx
@@ -8,6 +8,7 @@
 import {
   DesktopOutline,
   SmallScreenOutline,
+  Spinner,
   useActiveSectionTracking,
   useIntersectionObserver,
 } from '@oxide/design-system/components/dist'

diff --git a/app/styles/index.css b/app/styles/index.css
@@ -14,6 +14,7 @@
 @import '@oxide/design-system/styles/dist/blue.css';
 @import '@oxide/design-system/components/dist/asciidoc.css';
 @import '@oxide/design-system/components/dist/button.css';
+@import '@oxide/design-system/components/dist/spinner.css';
 
 @import './lib/asciidoc.css';
 @import './lib/highlight.css';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@asciidoctor/core": "^3.0.4",
     "@floating-ui/react": "^0.17.0",
     "@meilisearch/instant-meilisearch": "^0.8.2",
-    "@oxide/design-system": "^1.7.7--canary.09651fc.0",
+    "@oxide/design-system": "^1.8.0",
     "@oxide/react-asciidoc": "^1.0.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
@@ -83,6 +83,6 @@
     "vitest": "^2.0.3"
   },
   "engines": {
-    "node": "^20.0.0"
+    "node": "^23.0.0"
   }
 }