Link underlines - WIP

Author: microbit-robert

src/common/use-action-feedback.tsx

@@ -97,7 +97,6 @@ export class ActionFeedback {
                   href={deployment.supportLink}
                   target="_blank"
                   rel="noopener"
-                  textDecoration="underline"
                 >
                   {chunks}
                 </MaybeLink>

src/documentation/common/DocString.tsx

@@ -3,11 +3,18 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { css, cx } from "@microbit/ui";
 import React from "react";
 import { styled } from "styled-system/jsx";
 import { SystemStyleObject } from "styled-system/types";
 import { renderMarkdown } from "../../editor/codemirror/language-server/documentation";
 
+// Docstring links (autolinked URLs in the type stubs) must be marked by more
+// than colour. Scoped here so the CodeMirror popups' anchors stay bare.
+const underlineLinksClass = css({
+  "& a": { textDecoration: "underline" },
+});
+
 export interface DocStringProps {
   value: string;
   /** Use span inside phrasing content (e.g. a heading subtitle). */
@@ -21,7 +28,7 @@ const DocString = React.memo(
     const Component = as === "span" ? styled.span : styled.div;
     return (
       <Component
-        className="docs-spacing docs-code"
+        className={cx("docs-spacing docs-code", underlineLinksClass)}
         dangerouslySetInnerHTML={html}
         css={cssProp}
       />

src/documentation/ideas/IdeasDocumentation.tsx

@@ -176,6 +176,7 @@ const ActiveLevel = ({
           values={{
             link: (chunks: ReactNode) => (
               <Link
+                variant="standalone"
                 color="brand.500"
                 href={microbitOrgMiciProjectsUrl(languageId)}
                 target="_blank"

src/documentation/search/SearchResultList.tsx

@@ -66,6 +66,7 @@ const SearchResultItem = ({
   return (
     <Stack pl="3px" pr="3px">
       <Link
+        variant="standalone"
         bgColor={viewedResults.includes(id) ? "#efedf5" : "unset"}
         borderRadius="md"
         href={url}

src/editor/ModuleOverlay.tsx

@@ -97,7 +97,8 @@ const ModuleOverlay = ({ moduleData }: ModuleOverlayProps) => {
               link: (chunks: ReactNode) => (
                 <Button
                   variant="link"
-                  css={{ color: "brand.500" }}
+                  // In prose, so marked by more than colour.
+                  css={{ color: "brand.500", textDecoration: "underline" }}
                   onPress={handleShowSettings}
                 >
                   {chunks}

src/serial/TracebackLink.tsx

@@ -33,7 +33,13 @@ const TracebackLink = ({ traceback, children }: TracebackLinkProps) => {
     [setSelection, traceback]
   );
   return (
-    <Link data-testid="traceback-link" onClick={handleClick}>
+    // Standalone: only the location span (see MaybeTracebackLink) is
+    // underlined, not the error text sharing the click target.
+    <Link
+      variant="standalone"
+      data-testid="traceback-link"
+      onClick={handleClick}
+    >
       {children}
     </Link>
   );