@tangle-network/ui 11.28.0 → 11.28.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.28.2
+
+### Patch Changes
+
+- 9f4d5b8: A file `Input`'s selector button inherits the field's text size, so `sm`, `lg` and coarse-pointer file inputs no longer keep a 14px button.
+
+## 11.28.1
+
+### Patch Changes
+
+- 084cd75: A Markdown image without alt text now gives its full-size link the accessible name "Open image full size".
+
 ## 11.28.0
 
 ### Minor Changes

package/dist/markdown/markdown.js

@@ -86,6 +86,7 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }) {
 		href: url,
 		target: "_blank",
 		rel: "noopener noreferrer",
+		"aria-label": alt ? void 0 : "Open image full size",
 		className: "inline-block max-w-full",
 		children: image
 	});

package/dist/primitives/input.js

@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const inputVariants = cva(cn("flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation, fieldTouchText), {
+const inputVariants = cva(cn("flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium", fieldPresentation, fieldTouchText), {
 	variants: {
 		variant: {
 			default: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.28.0",
+  "version": "11.28.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/markdown/markdown.test.tsx

@@ -114,6 +114,12 @@ describe("Markdown", () => {
     expect(ad.closest("a")).toHaveAttribute("target", "_blank");
     expect(ad.closest("a")).toHaveAttribute("rel", "noopener noreferrer");
 
+    render(<Markdown>{"![](https://example.com/decorative.png)"}</Markdown>);
+    expect(screen.getByRole("link", { name: "Open image full size" })).toHaveAttribute(
+      "href",
+      "https://example.com/decorative.png",
+    );
+
     const badge = screen.getByRole("img", { name: "Badge" });
     expect(badge.closest("a")).toHaveAttribute("href", "https://example.com/docs");
     expect(badge.closest("a")?.parentElement?.closest("a")).toBeNull();

package/src/markdown/markdown.tsx

@@ -113,7 +113,14 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }: Component
   );
   if (insideLink) return image;
   return (
-    <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block max-w-full">
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      // An image without alt text would otherwise leave the link unnamed.
+      aria-label={alt ? undefined : "Open image full size"}
+      className="inline-block max-w-full"
+    >
       {image}
     </a>
   );

package/src/primitives/control-presentation.test.tsx

@@ -63,6 +63,13 @@ describe("shared control presentation", () => {
     }
   });
 
+  it("lets a file input's selector button take the field's text size", () => {
+    render(<Input type="file" size="lg" aria-label="Upload" />);
+    const classes = screen.getByLabelText("Upload").className.split(" ");
+    expect(classes).toContain("text-[length:var(--control-text-lg,1rem)]");
+    expect(classes.filter((name) => name.startsWith("file:text-"))).toEqual([]);
+  });
+
   it("gives icon buttons squares on the same heights", () => {
     render(<><Button size="icon-sm" aria-label="Small" /><Button size="icon" aria-label="Medium" /><Button size="icon-lg" aria-label="Large" /></>);
     expect(screen.getByLabelText("Small").className).toContain("size-[var(--control-height-sm,2rem)]");

package/src/primitives/input.tsx

@@ -13,7 +13,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 // and a Button at the same size share a height, text size and corner.
 const inputVariants = cva(
   cn(
-    "flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    "flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium",
     fieldPresentation,
     fieldTouchText,
   ),