@multiplatform.one/components 6.1.0 → 6.4.0

package/src/layouts/tags.tsx

@@ -1,6 +1,7 @@
-import { PlusIcon, TagIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PlusIcon, TagIcon } from "@phosphor-icons/react";
+import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Button,
   Input,
@@ -9,11 +10,22 @@ import {
   Popover,
   ScrollView,
   Text,
+  View,
   XStack,
   YStack,
   type YStackProps,
 } from "tamagui";
+import {
+  Chip,
+  ChipFrame,
+  ChipText,
+  chipIconSize,
+  type ChipColor,
+  type ChipSize,
+  type ChipVariant,
+} from "../Chip";
 import { componentColors } from "../componentColors";
+import { withInterp } from "../shared/t";
 
 // ---------------------------------------------------------------------------
 // Types  (generic -- no Frappe dependency)
@@ -30,8 +42,11 @@ export interface TagItem {
   label: string;
 }
 
-/** Chip visual variant */
-export type TagVariant = "filled" | "outlined" | "ghost";
+/**
+ * Chip visual variant (canonical Chip vocabulary).
+ * Legacy aliases accepted for back-compat: "filled" → solid, "outlined" → outline, "ghost" → subtle.
+ */
+export type TagVariant = ChipVariant | "filled" | "outlined" | "ghost";
 
 export interface TagsProps extends Omit<YStackProps, "children" | "theme"> {
   /** Tags to display */
@@ -70,9 +85,9 @@ export interface TagsProps extends Omit<YStackProps, "children" | "theme"> {
   /** Compact mode - smaller UI */
   compact?: boolean;
 
-  /** Chip visual variant: "filled" (default), "outlined", or "ghost" */
+  /** Chip visual variant: "subtle" (default), "solid", or "outline" */
   variant?: TagVariant;
-  /** Tamagui theme for chips (e.g. "blue", "red"). Uses active theme when omitted. */
+  /** Chip color (e.g. "blue", "red"). Uses "gray" when omitted or unrecognized. */
   theme?: string;
 
   /** Labels for i18n -- consumers pass pre-translated strings */
@@ -97,7 +112,7 @@ export interface TagsProps extends Omit<YStackProps, "children" | "theme"> {
  * Generic Tags component for displaying and managing tags.
  * Fully data-agnostic -- accepts tags via props and emits callbacks.
  *
- * Uses Tamagui `Button` size `$2` for tag chips with themed hover/press states.
+ * Renders each tag as the canonical `Chip` component (solid/subtle/outline vocabulary).
  */
 export function Tags({
   tags,
@@ -113,36 +128,43 @@ export function Tags({
   enableAdd = true,
   enableRemove = true,
   compact = false,
-  variant = "filled",
+  variant = "subtle",
   theme: chipTheme,
   labels = {},
-  placeholder = "Add tag...",
+  placeholder: placeholderProp,
   ...stackProps
 }: TagsProps) {
+  const { t } = useTranslation();
+  const placeholder = placeholderProp ?? t("Add tag...");
   const { knobProps } = useResolvedKnobs();
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const chipSize = compact
-    ? knobProps.sizeToken === "$5"
-      ? "$4"
-      : knobProps.sizeToken === "$4"
-        ? "$3"
-        : "$2"
-    : knobProps.sizeToken;
+  const chipSize = (
+    compact
+      ? knobProps.sizeToken === "$5"
+        ? "$4"
+        : knobProps.sizeToken === "$4"
+          ? "$3"
+          : "$2"
+      : knobProps.sizeToken
+  ) as ChipSize;
 
   const [inputValue, setInputValue] = useState("");
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const {
-    addTag: addTagLabel = "Add Tag",
-    noTags: noTagsLabel = "No tags",
-    clickToAdd: clickToAddLabel = "Click + to add tags",
-    suggestions: suggestionsLabel = "Suggestions",
-    noAvailableTags: noAvailableTagsLabel = "No available tags",
-    createTag: createTagLabel = (value: string) => `Create "${value}"`,
+    addTag: addTagLabel = t("Add Tag"),
+    noTags: noTagsLabel = t("No tags"),
+    clickToAdd: clickToAddLabel = t("Click + to add tags"),
+    suggestions: suggestionsLabel = t("Suggestions"),
+    noAvailableTags: noAvailableTagsLabel = t("No available tags"),
+    createTag: createTagLabel = (value: string) => withInterp(t('Create "{{value}}"'), { value }),
   } = labels;
 
-  const appliedTagNames = useMemo(() => new Set(tags.map((t) => t.label.toLowerCase())), [tags]);
+  const appliedTagNames = useMemo(
+    () => new Set(tags.map((tag) => tag.label.toLowerCase())),
+    [tags],
+  );
 
   const availableSuggestions = useMemo(() => {
     const searchTerm = inputValue.toLowerCase().trim();
@@ -224,72 +246,55 @@ export function Tags({
     </XStack>
   );
 
-  const getVariantStyles = (v: TagVariant) => {
-    switch (v) {
-      case "outlined":
-        return {
-          backgroundColor: "transparent" as const,
-          borderWidth: 1,
-          borderColor: "$borderColor" as const,
-          hoverStyle: { backgroundColor: componentColors.interactive.background },
-          pressStyle: { backgroundColor: componentColors.interactive.hover },
-        };
-      case "ghost":
-        return {
-          backgroundColor: "transparent" as const,
-          hoverStyle: { backgroundColor: componentColors.interactive.background },
-          pressStyle: { backgroundColor: componentColors.interactive.hover },
-        };
-      case "filled":
-        return {
-          ...knobProps.surface,
-          hoverStyle: { backgroundColor: componentColors.interactive.active },
-          pressStyle: { backgroundColor: componentColors.surface.border },
-        };
-    }
-  };
+  // Map legacy Tags vocabulary onto the canonical Chip vocabulary.
+  const chipVariant: ChipVariant =
+    variant === "filled"
+      ? "solid"
+      : variant === "outlined"
+        ? "outline"
+        : variant === "ghost"
+          ? "subtle"
+          : variant;
+
+  const chipColor: ChipColor = (
+    ["gray", "red", "green", "blue", "yellow", "orange", "purple"] as const
+  ).includes(chipTheme as ChipColor)
+    ? (chipTheme as ChipColor)
+    : "gray";
 
   const renderTagItem = (tag: TagItem) => {
     const actions = {
       onRemove: () => onRemove?.(tag),
     };
 
-    const variantStyles = getVariantStyles(variant);
-
-    const defaultContent = (
-      <Button
-        key={tag.id}
+    const chip = (
+      <Chip
         size={chipSize}
-        theme={chipTheme}
-        {...variantStyles}
-        {...knobProps.borderRadius}
-        borderRadius="$10"
-        {...({ animation: "quick" } as any)}
-        onPress={() => onTagClick?.(tag)}
-        cursor={onTagClick ? "pointer" : "default"}
-        iconAfter={
-          enableRemove && !disabled && onRemove ? (
-            <XStack
-              focusable
-              hitSlop={8}
-              padding="$1"
-              borderRadius="$10"
-              hoverStyle={{ backgroundColor: componentColors.surface.border }}
-              cursor="pointer"
-              onPress={(e: { stopPropagation: () => void }) => {
-                e.stopPropagation();
-                actions.onRemove();
-              }}
-              aria-label={`Remove ${tag.label}`}
-              accessibilityRole="button"
-            >
-              <XIcon size={compact ? 12 : 14} />
-            </XStack>
-          ) : undefined
-        }
+        variant={chipVariant}
+        color={chipColor}
+        disabled={disabled}
+        onDismiss={enableRemove && !disabled && onRemove ? actions.onRemove : undefined}
       >
         {tag.label}
-      </Button>
+      </Chip>
+    );
+
+    const defaultContent = onTagClick ? (
+      <XStack
+        key={tag.id}
+        cursor="pointer"
+        onPress={() => onTagClick(tag)}
+        // role, not accessibilityRole: the RN-only prop leaks onto the DOM
+        // <div> on web; RN maps role="button" to accessibilityRole natively.
+        role="button"
+        aria-label={tag.label}
+        hoverStyle={{ opacity: 0.85 }}
+        pressStyle={{ opacity: 0.7 }}
+      >
+        {chip}
+      </XStack>
+    ) : (
+      chip
     );
 
     if (renderTag) {
@@ -324,7 +329,7 @@ export function Tags({
 
       {availableSuggestions.length > 0 && (
         <YStack gap="$1">
-          <Text fontSize="$1" color={componentColors.text.muted} paddingLeft="$1">
+          <Text fontSize="$1" color={componentColors.text.muted} paddingInlineStart="$1">
             {suggestionsLabel}
           </Text>
           <ScrollView maxHeight={150}>
@@ -375,17 +380,64 @@ export function Tags({
           : tags.map((tag) => <React.Fragment key={tag.id}>{renderTagItem(tag)}</React.Fragment>)}
 
         {enableAdd && canAdd && (
-          <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} placement="bottom-start">
+          <Popover
+            open={isPopoverOpen}
+            onOpenChange={setIsPopoverOpen}
+            placement="bottom-start"
+            offset={4}
+            stayInFrame
+            allowFlip
+          >
             <Popover.Trigger asChild>
-              <Button
-                size={chipSize}
-                variant="outlined"
-                {...({ animation: "quick" } as any)}
-                icon={<PlusIcon size={compact ? 14 : 16} />}
-                circular={compact}
+              {/* Chip-scale visual (shares ChipFrame/ChipText size variants so its
+                  height/padding/font track the Chip pills) wrapped in a
+                  transparent press target floored at 44 tall (DG-LAY-04 / D-02
+                  house pressTarget* channel — the pill itself stays chip-sized).
+                  Horizontal slop is capped below half the $2 row gap so the
+                  target never overlaps the adjacent chip / its dismiss zone. */}
+              <View
+                role="button"
+                aria-label={addTagLabel}
+                tabIndex={0}
+                cursor="pointer"
+                alignItems="center"
+                justifyContent="center"
+                {...pressTargetStyle()}
+                minWidth={undefined}
+                paddingHorizontal={3}
+                marginHorizontal={-3}
+                focusVisibleStyle={{
+                  outlineColor: "$outlineColor",
+                  outlineWidth: 2,
+                  outlineStyle: "solid",
+                }}
+                onKeyDown={
+                  ((e: React.KeyboardEvent) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      setIsPopoverOpen(true);
+                    }
+                  }) as unknown as () => void
+                }
               >
-                {!compact && addTagLabel}
-              </Button>
+                <ChipFrame
+                  size={chipSize}
+                  variant="outline"
+                  backgroundColor="transparent"
+                  {...knobProps.borderRadius}
+                  borderColor={componentColors.interactive.border}
+                  gap={compact ? 0 : "$1"}
+                  hoverStyle={{ backgroundColor: componentColors.interactive.hover }}
+                  pressStyle={{ backgroundColor: componentColors.interactive.active }}
+                >
+                  <PlusIcon size={chipIconSize(chipSize)} />
+                  {/* Compact is icon-only: a zero-width space still establishes the
+                      chip text line box so the trigger height matches the pills. */}
+                  <ChipText size={chipSize} color={componentColors.text.secondary}>
+                    {compact ? "\u200B" : addTagLabel}
+                  </ChipText>
+                </ChipFrame>
+              </View>
             </Popover.Trigger>
 
             <Popover.Content
@@ -403,7 +455,11 @@ export function Tags({
         )}
 
         {tags.length === 0 && enableAdd && !isPopoverOpen && (
-          <Text color={componentColors.text.muted} fontSize={compact ? "$1" : "$2"} marginLeft="$1">
+          <Text
+            color={componentColors.text.muted}
+            fontSize={compact ? "$1" : "$2"}
+            marginInlineStart="$1"
+          >
             {clickToAddLabel}
           </Text>
         )}

package/src/layouts/timeline-comments.spec.tsx

@@ -0,0 +1,243 @@
+// Comment-section behavior: display-name prettify, one-level threading,
+// relative timestamps, and the inline composer submit path.
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
+import * as React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  Timeline,
+  type TimelineEntry,
+  formatRelativeTimestamp,
+  getEntryDisplayName,
+  prettifyAuthorName,
+  threadEntries,
+} from "./timeline";
+
+afterEach(cleanup);
+
+describe("prettifyAuthorName", () => {
+  it("prettifies the email local part", () => {
+    expect(prettifyAuthorName("john.doe@example.com")).toBe("John Doe");
+    expect(prettifyAuthorName("alice@example.com")).toBe("Alice");
+    expect(prettifyAuthorName("dev_ops-team@example.com")).toBe("Dev Ops Team");
+    expect(prettifyAuthorName("jdoe42@example.com")).toBe("Jdoe");
+  });
+
+  it("passes non-email names through untouched", () => {
+    expect(prettifyAuthorName("Grace Hopper")).toBe("Grace Hopper");
+    expect(prettifyAuthorName("Administrator")).toBe("Administrator");
+  });
+
+  it("never returns an empty name", () => {
+    expect(prettifyAuthorName("")).toBe("Unknown");
+    expect(prettifyAuthorName("   ")).toBe("Unknown");
+  });
+
+  it("getEntryDisplayName prefers authorName over prettified author", () => {
+    expect(getEntryDisplayName({ author: "m@x.com", authorName: "Marcus Wright" })).toBe(
+      "Marcus Wright",
+    );
+    expect(getEntryDisplayName({ author: "m.wright@x.com" })).toBe("M Wright");
+  });
+});
+
+describe("threadEntries", () => {
+  const entry = (id: string, parentId?: string, ts = "2026-01-01T00:00:00Z"): TimelineEntry => ({
+    id,
+    type: "comment",
+    author: "a@x.com",
+    content: id,
+    timestamp: ts,
+    parentId,
+  });
+
+  it("groups replies one level under their parent", () => {
+    const threads = threadEntries([
+      entry("a"),
+      entry("b"),
+      entry("a1", "a", "2026-01-02T00:00:00Z"),
+    ]);
+    expect(threads.map((t) => t.entry.id)).toEqual(["a", "b"]);
+    expect(threads[0].replies.map((r) => r.id)).toEqual(["a1"]);
+    expect(threads[1].replies).toEqual([]);
+  });
+
+  it("flattens reply-to-reply under the thread root (one level max)", () => {
+    const threads = threadEntries([
+      entry("a"),
+      entry("a1", "a", "2026-01-02T00:00:00Z"),
+      entry("a1a", "a1", "2026-01-03T00:00:00Z"),
+    ]);
+    expect(threads).toHaveLength(1);
+    expect(threads[0].replies.map((r) => r.id)).toEqual(["a1", "a1a"]);
+  });
+
+  it("sorts replies oldest-first regardless of input order", () => {
+    const threads = threadEntries([
+      entry("a"),
+      entry("a2", "a", "2026-01-05T00:00:00Z"),
+      entry("a1", "a", "2026-01-02T00:00:00Z"),
+    ]);
+    expect(threads[0].replies.map((r) => r.id)).toEqual(["a1", "a2"]);
+  });
+
+  it("treats orphaned parentIds as top-level", () => {
+    const threads = threadEntries([entry("a"), entry("x", "missing-parent")]);
+    expect(threads.map((t) => t.entry.id)).toEqual(["a", "x"]);
+  });
+
+  it("survives parentId cycles without losing entries", () => {
+    const threads = threadEntries([entry("b", "c"), entry("c", "b"), entry("a")]);
+    // cycle: first member promotes to top-level, the other nests under it —
+    // every entry stays in the feed
+    const rendered = threads.flatMap((t) => [t.entry.id, ...t.replies.map((r) => r.id)]);
+    expect(rendered.sort()).toEqual(["a", "b", "c"]);
+    // true roots keep input order; cycle fallbacks append after them
+    expect(threads.map((t) => t.entry.id)).toEqual(["a", "b"]);
+  });
+});
+
+describe("formatRelativeTimestamp", () => {
+  const now = new Date("2026-08-12T12:00:00Z").getTime();
+  const at = (msBefore: number) => new Date(now - msBefore).toISOString();
+
+  it("formats compact relative times", () => {
+    expect(formatRelativeTimestamp(at(10_000), now)).toBe("just now");
+    expect(formatRelativeTimestamp(at(5 * 60_000), now)).toBe("5m ago");
+    expect(formatRelativeTimestamp(at(2 * 3_600_000), now)).toBe("2h ago");
+    expect(formatRelativeTimestamp(at(24 * 3_600_000), now)).toBe("1 day ago");
+    expect(formatRelativeTimestamp(at(10 * 86_400_000), now)).toBe("10 days ago");
+    expect(formatRelativeTimestamp(at(60 * 86_400_000), now)).toBe("2mo ago");
+    expect(formatRelativeTimestamp(at(800 * 86_400_000), now)).toBe("2y ago");
+  });
+
+  it("returns the raw string for invalid timestamps", () => {
+    expect(formatRelativeTimestamp("not-a-date", now)).toBe("not-a-date");
+  });
+});
+
+describe("LC-12 timestamp registers (content class picks the register)", () => {
+  // House knob default is `timestampStyle: "absolute"` (test-utils mock =
+  // defaultKnobs) — comment rows must STILL render the relative register.
+  const twoHoursAgo = new Date(Date.now() - 2 * 3_600_000).toISOString();
+  const entries: TimelineEntry[] = [
+    {
+      id: "c1",
+      type: "comment",
+      author: "grace@example.com",
+      content: "Social commentary",
+      timestamp: twoHoursAgo,
+    },
+    {
+      id: "v1",
+      type: "version",
+      author: "admin@example.com",
+      timestamp: twoHoursAgo,
+      changes: [{ field: "status", old: "Draft", new: "Submitted" }],
+    },
+  ];
+
+  it("defaults comments to relative and system events to compact absolute", () => {
+    renderWithProviders(<Timeline entries={entries} />);
+    expect(screen.getByText("2h ago")).toBeInTheDocument();
+    expect(screen.getByText(formatAbsoluteDateTime(twoHoursAgo))).toBeInTheDocument();
+  });
+
+  it("formatTimestamp prop ejects the register for every class", () => {
+    renderWithProviders(<Timeline entries={entries} formatTimestamp={() => "CUSTOM-TS"} />);
+    expect(screen.getAllByText("CUSTOM-TS")).toHaveLength(2);
+    expect(screen.queryByText("2h ago")).not.toBeInTheDocument();
+  });
+});
+
+describe("Timeline comment section rendering", () => {
+  const entries: TimelineEntry[] = [
+    {
+      id: "c1",
+      type: "comment",
+      author: "john.doe@example.com",
+      content: "Top-level comment",
+      timestamp: "2026-08-12T10:00:00Z",
+    },
+    {
+      id: "c1r1",
+      type: "comment",
+      parentId: "c1",
+      author: "reply.guy@example.com",
+      content: "A threaded reply",
+      timestamp: "2026-08-12T11:00:00Z",
+    },
+    {
+      id: "v1",
+      type: "version",
+      author: "admin@example.com",
+      timestamp: "2026-08-11T10:00:00Z",
+      changes: [{ field: "status", old: "Draft", new: "Submitted" }],
+    },
+  ];
+
+  it("renders prettified display names, never raw emails", () => {
+    renderWithProviders(<Timeline entries={entries} />);
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("Reply Guy")).toBeInTheDocument();
+    expect(screen.queryByText("john.doe@example.com")).not.toBeInTheDocument();
+    expect(screen.queryByText("admin@example.com")).not.toBeInTheDocument();
+  });
+
+  it("renders the feed with feed/article roles and threaded reply content", () => {
+    renderWithProviders(<Timeline entries={entries} />);
+    expect(screen.getByRole("feed")).toBeInTheDocument();
+    expect(screen.getAllByRole("article").length).toBe(3);
+    expect(screen.getByText("A threaded reply")).toBeInTheDocument();
+    expect(screen.getByText("made changes")).toBeInTheDocument();
+  });
+
+  it("submits a top-level comment through onCommentSubmit", () => {
+    const onCommentSubmit = vi.fn();
+    renderWithProviders(<Timeline entries={entries} onCommentSubmit={onCommentSubmit} />);
+    const input = screen.getByPlaceholderText("Add a comment...");
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "hello world" } });
+    fireEvent.click(screen.getByRole("button", { name: /Comment/ }));
+    expect(onCommentSubmit).toHaveBeenCalledWith("hello world", undefined);
+  });
+
+  it("opens an inline reply composer and submits with parentId", () => {
+    const onCommentSubmit = vi.fn();
+    renderWithProviders(<Timeline entries={entries} onCommentSubmit={onCommentSubmit} />);
+    // Reply on the threaded reply — parentId must be the clicked entry's id
+    fireEvent.click(screen.getByRole("button", { name: "Reply Reply Guy" }));
+    const replyInput = screen.getByPlaceholderText("Write a reply...");
+    fireEvent.change(replyInput, { target: { value: "nested answer" } });
+    fireEvent.click(screen.getByRole("button", { name: /Comment/ }));
+    expect(onCommentSubmit).toHaveBeenCalledWith("nested answer", { parentId: "c1r1" });
+  });
+
+  it("calls onReply instead of opening the internal composer when provided", () => {
+    const onReply = vi.fn();
+    renderWithProviders(<Timeline entries={entries} onCommentAdded={() => {}} onReply={onReply} />);
+    fireEvent.click(screen.getByRole("button", { name: "Reply John Doe" }));
+    expect(onReply).toHaveBeenCalledWith(expect.objectContaining({ id: "c1" }));
+    expect(screen.queryByPlaceholderText("Write a reply...")).not.toBeInTheDocument();
+  });
+
+  it("falls back to onCommentAdded for top-level submits (legacy API)", () => {
+    const onCommentAdded = vi.fn();
+    renderWithProviders(<Timeline entries={entries} onCommentAdded={onCommentAdded} />);
+    const input = screen.getByPlaceholderText("Add a comment...");
+    fireEvent.change(input, { target: { value: "legacy path" } });
+    fireEvent.click(screen.getByRole("button", { name: /Comment/ }));
+    expect(onCommentAdded).toHaveBeenCalledWith("legacy path");
+  });
+
+  it("hides the composer when enableAddComment is false or disabled", () => {
+    renderWithProviders(
+      <Timeline entries={entries} enableAddComment={false} onCommentAdded={() => {}} />,
+    );
+    expect(screen.queryByPlaceholderText("Add a comment...")).not.toBeInTheDocument();
+    cleanup();
+    renderWithProviders(<Timeline entries={entries} disabled onCommentAdded={() => {}} />);
+    expect(screen.queryByPlaceholderText("Add a comment...")).not.toBeInTheDocument();
+  });
+});

package/src/layouts/timeline-radius.spec.tsx

@@ -0,0 +1,57 @@
+// Regression test for SB-M-301: the borderRadius knob must reach Timeline
+// entry rows (previously only the comment composer and empty state responded).
+// jsdom's getComputedStyle cannot cascade Tamagui's class-based CSS, so this
+// asserts on the atomic border-radius classes (_btlr-*) the knob emits.
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import * as React from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Timeline, type TimelineEntry } from "./timeline";
+
+afterEach(cleanup);
+
+const entries: TimelineEntry[] = [
+  {
+    id: "entry-1",
+    type: "comment",
+    content: "Looks good!",
+    author: "Alice",
+    timestamp: "2026-01-15T10:00:00Z",
+  },
+];
+
+function entryRowRadiusClass(): string | undefined {
+  const author = screen.getByText("Alice");
+  let el: HTMLElement | null = author.parentElement;
+  for (let i = 0; i < 12 && el; i++) {
+    const radiusClass = String(el.className || "")
+      .split(" ")
+      .find((c) => c.startsWith("_btlr-"));
+    if (radiusClass) return radiusClass;
+    el = el.parentElement;
+  }
+  return undefined;
+}
+
+describe("Timeline entry radius knob (SB-M-301)", () => {
+  it("entry row border radius follows the borderRadius knob", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Timeline entries={entries} />
+      </Preset>,
+    );
+    const fullRadiusClass = entryRowRadiusClass();
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Timeline entries={entries} />
+      </Preset>,
+    );
+    const noneRadiusClass = entryRowRadiusClass();
+
+    expect(fullRadiusClass).toBeDefined();
+    expect(fullRadiusClass).not.toBe(noneRadiusClass);
+  });
+});