@tangle-network/ui 11.28.1 → 11.28.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.1",
+  "version": "11.28.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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,
   ),