diff --git a/package-lock.json b/package-lock.json
index a65d29f95..b3ba4149e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,12 +17,13 @@
"@codemirror/view": "^6.26.3",
"@microbit/microbit-connection": "^1.0.0",
"@microbit/microbit-fs": "^0.10.0",
- "@microbit/ui": "^0.1.1",
- "@microbit/ui-patterns": "^0.1.1",
+ "@microbit/ui": "^0.2.0",
+ "@microbit/ui-patterns": "^0.2.0",
"@sanity/block-content-to-react": "^3.0.0",
"@sanity/image-url": "^1.0.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.4.3",
"@types/lodash.debounce": "^4.0.6",
"@types/lodash.sortby": "^4.7.6",
"@types/lunr": "^2.3.4",
@@ -3276,9 +3277,9 @@
}
},
"node_modules/@microbit/ui": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.1.1.tgz",
- "integrity": "sha512-m/idP+sg58HLZOk6LiJknaQxVYNShXOxh9RLVnXVE+G1TYrRAwuLg17131YARve3DJV9mga3U9n/Mcr+nK6SNQ==",
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.2.0.tgz",
+ "integrity": "sha512-LOSUj/466E9grrMyEE+IgLx0aDWsL40gJ9TYoltRvBZtos7nc1PTteAFhAcV2yBwVOtoeIpFz821wDoFtrIuiw==",
"license": "MIT",
"peerDependencies": {
"@pandacss/dev": "^1.11.4",
@@ -3290,15 +3291,15 @@
}
},
"node_modules/@microbit/ui-patterns": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.1.1.tgz",
- "integrity": "sha512-xxi8fxvzE5Jx1v+dvPZEID3EDfM7oOeG09fxPb+AqxQto6dJiDyr+DLeJrUQPxm3D/sDhmEqk2aOCsBjF68AKQ==",
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.2.0.tgz",
+ "integrity": "sha512-7xjvW/daJtr+23XvuScLXLP6+1DPROaRppie3rNZ96MOQciCxlfL0Ld6ZXpolH1WLYIPXHMLTL78nDYpgW1QtA==",
"license": "MIT",
"dependencies": {
"@formatjs/intl-localematcher": "^0.8.0"
},
"peerDependencies": {
- "@microbit/ui": "^0.1.0",
+ "@microbit/ui": "^0.2.0",
"@pandacss/dev": "^1.11.4",
"react": "^18.3.1",
"react-icons": "^4.12.0 || ^5.0.0",
diff --git a/package.json b/package.json
index d1ab9ab5d..e1d133340 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
"@codemirror/view": "^6.26.3",
"@microbit/microbit-connection": "^1.0.0",
"@microbit/microbit-fs": "^0.10.0",
- "@microbit/ui": "^0.1.1",
- "@microbit/ui-patterns": "^0.1.1",
+ "@microbit/ui": "^0.2.0",
+ "@microbit/ui-patterns": "^0.2.0",
"@sanity/block-content-to-react": "^3.0.0",
"@sanity/image-url": "^1.0.1",
"@testing-library/jest-dom": "^5.14.1",
diff --git a/src/common/use-action-feedback.tsx b/src/common/use-action-feedback.tsx
index 2b04a004f..32722f5c9 100644
--- a/src/common/use-action-feedback.tsx
+++ b/src/common/use-action-feedback.tsx
@@ -97,7 +97,6 @@ export class ActionFeedback {
href={deployment.supportLink}
target="_blank"
rel="noopener"
- textDecoration="underline"
>
{chunks}
diff --git a/src/documentation/common/DocString.test.tsx b/src/documentation/common/DocString.test.tsx
index 63b7c3d86..0e34e27f7 100644
--- a/src/documentation/common/DocString.test.tsx
+++ b/src/documentation/common/DocString.test.tsx
@@ -12,7 +12,7 @@ describe("DocString", () => {
"```python\ntestLib.Validator.read_write_prop (property)\n```\n---\nThe read-write property.";
const view = render(
testLib.Validator.read_write_prop (property)
+ "testLib.Validator.read_write_prop (property)
The read-write property.
diff --git a/src/documentation/common/DocString.tsx b/src/documentation/common/DocString.tsx
index 09b856f5f..f94108543 100644
--- a/src/documentation/common/DocString.tsx
+++ b/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 (
diff --git a/src/documentation/common/DocumentationContent.test.tsx b/src/documentation/common/DocumentationContent.test.tsx
index 83fa5dbe6..906054d77 100644
--- a/src/documentation/common/DocumentationContent.test.tsx
+++ b/src/documentation/common/DocumentationContent.test.tsx
@@ -41,7 +41,7 @@ describe("DocumentationContent", () => {
];
const view = render( );
expect(view.container.innerHTML).toMatchInlineSnapshot(
- `""`
+ `""`
);
});
diff --git a/src/documentation/ideas/IdeasDocumentation.tsx b/src/documentation/ideas/IdeasDocumentation.tsx
index 44a3045e0..6502f6fca 100644
--- a/src/documentation/ideas/IdeasDocumentation.tsx
+++ b/src/documentation/ideas/IdeasDocumentation.tsx
@@ -176,6 +176,7 @@ const ActiveLevel = ({
values={{
link: (chunks: ReactNode) => (
{
link: (chunks: ReactNode) => (