@tangle-network/ui 11.22.3 → 11.23.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.23.0
+
+### Minor Changes
+
+- 57f4e3d: `Tag` takes `wrap` to break a long label across lines instead of truncating it, for text that must be read in full without a hover (model-written part names on a phone or on paper).
+
 ## 11.22.3
 
 ### Patch Changes

package/dist/primitives/tag.d.ts

@@ -30,6 +30,12 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "c
    * the label is a string; pass it when the label is not plain text.
    */
   removeLabel?: string;
+  /**
+   * Wraps a long label onto more lines instead of truncating it. Use it where
+   * the full text matters and no hover is available to read a `title`, such
+   * as model-written part names read on a phone or on paper.
+   */
+  wrap?: boolean;
 }
 declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/primitives/tag.js

@@ -6,23 +6,38 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 //#region src/primitives/tag.tsx
 const SIZE = {
-	sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
-	md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5"
+	sm: "gap-1 px-2 text-xs [&_svg]:size-3",
+	md: "gap-1.5 px-2.5 text-sm [&_svg]:size-3.5"
 };
-const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props }, ref) => {
+const WRAP = {
+	sm: {
+		box: "items-start",
+		label: "py-[3px]",
+		icon: "h-[22px] items-center"
+	},
+	md: {
+		box: "items-start",
+		label: "py-[3px]",
+		icon: "h-[26px] items-center"
+	}
+};
+const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, wrap = false, ...props }, ref) => {
 	const classes = TONE_CLASSES[tone];
 	const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
-		className: cn("inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium", SIZE[size], emphasis === "outline" ? classes.outline : classes.surface, onRemove && (size === "sm" ? "pr-0.5" : "pr-1"), className),
+		className: cn("inline-flex min-w-0 max-w-full shrink-0 rounded-md border font-medium", SIZE[size], wrap ? WRAP[size].box : ["items-center", size === "sm" ? "h-6" : "h-7"], emphasis === "outline" ? classes.outline : classes.surface, onRemove && (size === "sm" ? "pr-0.5" : "pr-1"), className),
 		...props,
 		children: [
 			icon ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: cn("inline-flex shrink-0", classes.icon),
+				className: cn("inline-flex shrink-0", wrap && WRAP[size].icon, classes.icon),
 				children: icon
 			}) : null,
-			/* @__PURE__ */ jsx("span", {
+			wrap ? /* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 [overflow-wrap:anywhere]", WRAP[size].label),
+				children
+			}) : /* @__PURE__ */ jsx("span", {
 				className: "min-w-0 truncate",
 				title: typeof children === "string" ? children : void 0,
 				children
@@ -31,7 +46,7 @@ const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis
 				type: "button",
 				"aria-label": label,
 				onClick: onRemove,
-				className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']", size === "sm" ? "size-5" : "size-6", focusRing),
+				className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']", size === "sm" ? "size-5" : "size-6", wrap && "mt-px", focusRing),
 				children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
 			}) : null
 		]

package/package.json

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

package/src/primitives/chip.test.tsx

@@ -124,6 +124,28 @@ describe("Tag", () => {
   });
 });
 
+describe("Tag wrap", () => {
+  const LONG = "Adafruit-BME680-Temperature-Humidity-Pressure-Gas-Sensor-Breakout";
+
+  it("truncates a long label by default and names it in a title", () => {
+    render(<Tag>{LONG}</Tag>);
+    const label = screen.getByText(LONG);
+    expect(label.className).toContain("truncate");
+    expect(label.getAttribute("title")).toBe(LONG);
+    expect(label.parentElement?.className).toContain("h-6");
+  });
+
+  it("wraps a long label across lines when asked, aligned to its first line", () => {
+    render(<Tag wrap size="md">{LONG}</Tag>);
+    const label = screen.getByText(LONG);
+    expect(label.className).not.toContain("truncate");
+    expect(label.className).toContain("[overflow-wrap:anywhere]");
+    expect(label.className).toContain("py-[3px]");
+    expect(label.parentElement?.className).toContain("items-start");
+    expect(label.parentElement?.className).not.toMatch(/(^|\s)h-7(\s|$)/);
+  });
+});
+
 describe("IconTile", () => {
   it("falls back from a broken image to the glyph, then to initials", () => {
     const { container, rerender } = render(<IconTile src="https://example.invalid/logo.png" name="Acme Robotics" />);

package/src/primitives/tag-chip.stories.tsx

@@ -224,3 +224,27 @@ export const WorstCase: Story = {
     </BothThemes>
   ),
 };
+
+const PART = "Adafruit-BME680-Temperature-Humidity-Pressure-Gas-Sensor-Breakout";
+
+/** `wrap` keeps the whole label readable: one line matches a fixed tag's height; more lines grow it, with the icon and remove button on the first line. */
+export const Wrap: Story = {
+  render: () => (
+    <BothThemes>
+      <div className="flex w-full max-w-[220px] flex-col items-start gap-2" data-testid="wrap-column">
+        {(["sm", "md"] as const).map((size) => (
+          <div key={size} className="flex flex-col items-start gap-2">
+            <div className="flex items-start gap-2">
+              <Tag size={size} data-probe={`fixed-${size}`}>Short</Tag>
+              <Tag size={size} wrap data-probe={`wrap-one-${size}`}>Short</Tag>
+              <Tag size={size} wrap onRemove={() => {}} data-probe={`wrap-remove-${size}`}>Short</Tag>
+            </div>
+            <Tag size={size} wrap tone="teal" icon={<FileText />} onRemove={() => {}} data-probe={`wrap-long-${size}`}>
+              {PART}
+            </Tag>
+          </div>
+        ))}
+      </div>
+    </BothThemes>
+  ),
+};

package/src/primitives/tag.tsx

@@ -33,16 +33,31 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "c
    * the label is a string; pass it when the label is not plain text.
    */
   removeLabel?: string;
+  /**
+   * Wraps a long label onto more lines instead of truncating it. Use it where
+   * the full text matters and no hover is available to read a `title`, such
+   * as model-written part names read on a phone or on paper.
+   */
+  wrap?: boolean;
 }
 
 const SIZE = {
-  sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
-  md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",
+  sm: "gap-1 px-2 text-xs [&_svg]:size-3",
+  md: "gap-1.5 px-2.5 text-sm [&_svg]:size-3.5",
+} as const;
+
+// A truncating tag has one fixed height. A wrapping tag carries its vertical
+// padding on the label instead, sized so one line is exactly that height
+// (sm: 16px line + 6 + 2px border = 24; md: 20 + 6 + 2 = 28), and aligns the
+// icon and remove button to the first line rather than the middle.
+const WRAP = {
+  sm: { box: "items-start", label: "py-[3px]", icon: "h-[22px] items-center" },
+  md: { box: "items-start", label: "py-[3px]", icon: "h-[26px] items-center" },
 } as const;
 
 const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
   (
-    { className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props },
+    { className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, wrap = false, ...props },
     ref,
   ) => {
     const classes = TONE_CLASSES[tone];
@@ -51,8 +66,9 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
       <span
         ref={ref}
         className={cn(
-          "inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium",
+          "inline-flex min-w-0 max-w-full shrink-0 rounded-md border font-medium",
           SIZE[size],
+          wrap ? WRAP[size].box : ["items-center", size === "sm" ? "h-6" : "h-7"],
           emphasis === "outline" ? classes.outline : classes.surface,
           onRemove && (size === "sm" ? "pr-0.5" : "pr-1"),
           className,
@@ -60,15 +76,20 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
         {...props}
       >
         {icon ? (
-          <span aria-hidden="true" className={cn("inline-flex shrink-0", classes.icon)}>
+          <span aria-hidden="true" className={cn("inline-flex shrink-0", wrap && WRAP[size].icon, classes.icon)}>
             {icon}
           </span>
         ) : null}
-        {/* A long label truncates here rather than pushing the remove button
-            out; the title gives its full text on hover. */}
-        <span className="min-w-0 truncate" title={typeof children === "string" ? children : undefined}>
-          {children}
-        </span>
+        {/* By default a long label truncates here rather than pushing the
+            remove button out, and the title gives its full text on hover.
+            `wrap` breaks it across lines instead, even inside one long token. */}
+        {wrap ? (
+          <span className={cn("min-w-0 [overflow-wrap:anywhere]", WRAP[size].label)}>{children}</span>
+        ) : (
+          <span className="min-w-0 truncate" title={typeof children === "string" ? children : undefined}>
+            {children}
+          </span>
+        )}
         {onRemove ? (
           <button
             type="button"
@@ -79,6 +100,8 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
               // the hit area without moving the tag's layout.
               "relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']",
               size === "sm" ? "size-5" : "size-6",
+              // Centred on the first line box (22px sm, 26px md) when wrapping.
+              wrap && "mt-px",
               focusRing,
             )}
           >