@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/list/RangeFilter.spec.tsx

@@ -0,0 +1,88 @@
+// The base-XP filter is a stock Tamagui Slider: Track, TrackActive and one
+// Thumb from the tamagui barrel, the track a thin size token, the thumb a
+// size token, at row and stacked (sidebar / sheet) layouts alike. The thumb
+// follows input at once and the minimum commits once it rests.
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { RangeFilter } from "./RangeFilter";
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+const source = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), "RangeFilter.tsx"),
+  "utf8",
+);
+
+async function renderSlider(layout: "row" | "stack", onChange = vi.fn(), value = 0) {
+  renderWithProviders(
+    <RangeFilter
+      label="Base XP"
+      value={value}
+      max={300}
+      step={5}
+      layout={layout}
+      onChange={onChange}
+      testID="xp"
+    />,
+  );
+  const slider = await screen.findByTestId("xp", {}, { timeout: 5000 });
+  return { slider, onChange };
+}
+
+describe("RangeFilter stock slider", () => {
+  it("composes the tamagui Slider's own parts, not the forms wrapper", () => {
+    expect(source).toMatch(/await import\("tamagui"\)/);
+    expect(source).not.toMatch(/@multiplatform\.one\/forms"\)/);
+    expect(source).toMatch(/<Slider\.Track/);
+    expect(source).toMatch(/<Slider\.TrackActive/);
+    expect(source).toMatch(/<Slider\.Thumb/);
+  });
+
+  it("sizes the track and thumb from tokens: a thin track, a token thumb", () => {
+    expect(source).toMatch(/<Slider\.Track height="\$0\.5"/);
+    expect(source).toMatch(/size="\$1\.5"/);
+  });
+
+  for (const layout of ["row", "stack"] as const) {
+    it(`renders track, filled range and thumb in the ${layout} layout`, async () => {
+      const { slider } = await renderSlider(layout, vi.fn(), 60);
+      expect(slider.querySelector('[data-slider-part="track"]')).not.toBeNull();
+      expect(slider.querySelector('[data-slider-part="range"]')).not.toBeNull();
+      const thumb = screen.getByRole("slider");
+      expect(thumb.getAttribute("aria-valuenow")).toBe("60");
+      expect(thumb.getAttribute("aria-valuemax")).toBe("300");
+      expect(document.querySelector(`[data-range-layout="${layout}"]`)).not.toBeNull();
+    });
+  }
+
+  it("reads Any at no minimum and the minimum with a plus once set", async () => {
+    await renderSlider("stack", vi.fn(), 0);
+    expect(document.querySelector("[data-range-readout]")?.textContent).toBe("Any");
+    cleanup();
+    await renderSlider("stack", vi.fn(), 120);
+    expect(document.querySelector("[data-range-readout]")?.textContent).toBe("120+");
+  });
+
+  it("moves the thumb at once and commits the minimum once it rests", async () => {
+    const { onChange } = await renderSlider("stack", vi.fn(), 60);
+    const thumb = screen.getByRole("slider");
+    vi.useFakeTimers();
+    act(() => {
+      fireEvent.keyDown(thumb, { key: "ArrowRight" });
+    });
+    expect(document.querySelector("[data-range-readout]")?.textContent).toBe("65+");
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    vi.useRealTimers();
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith(65));
+  });
+});

package/src/list/RangeFilter.tsx

@@ -1,6 +1,6 @@
 import { Text, XStack, YStack } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Suspense, lazy, type ComponentType } from "react";
+import { Suspense, lazy, useEffect, useRef, useState, type ComponentType } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface RangeFilterProps {
@@ -11,64 +11,151 @@ export interface RangeFilterProps {
   max: number;
   step?: number;
   onChange: (value: number) => void;
+  /**
+   * `row`: label, track and readout on one line (a toolbar band).
+   * `stack`: label and readout above a full-width track (a sidebar or sheet).
+   */
+  layout?: "row" | "stack";
+  testID?: string;
 }
 
-const readoutWidth = 44;
-const trackMinWidth = 100;
+/** Quiet time after the last slider move before the minimum commits. */
+const commitDelayMs = 150;
 
-// The forms Slider is not in the curated GNOME forms shim, so the row
-// resolves lazily and checks the barrel: a target without a Slider renders
-// no row (a label without its control is worse than nothing).
+// A stock Tamagui Slider: a thin token-high track, the filled range from the
+// accent ramp and a token-sized round thumb. Resolved lazily from the
+// tamagui barrel so a target whose tamagui build carries no Slider (the
+// curated GNOME shim) renders no row: a label without its control is worse
+// than nothing.
 const RangeRowLazy = lazy(async () => {
-  const forms = await import("@multiplatform.one/forms");
-  const MaybeSlider = (forms as Partial<typeof forms>).Slider;
+  const tamagui = await import("tamagui");
+  const MaybeSlider = (tamagui as Partial<typeof tamagui>).Slider;
   if (!MaybeSlider) {
     const Absent: ComponentType<RangeFilterProps> = () => null;
     return { default: Absent };
   }
   const Slider = MaybeSlider;
 
-  function RangeRow({ label, value, max, step = 5, onChange }: RangeFilterProps) {
+  function RangeRow({
+    label,
+    value,
+    max,
+    step = 5,
+    onChange,
+    layout = "row",
+    testID,
+  }: RangeFilterProps) {
     const { t } = useTranslation();
     const { knobProps } = useResolvedKnobs();
-    return (
-      <XStack {...knobProps.gap} alignItems="center" flexGrow={1} minWidth={0}>
-        <Text fontSize="$2" color="$color11" flexShrink={0} userSelect="none">
-          {label}
-        </Text>
-        {/* A column on purpose: the Slider's %-width chain collapses to 0
-            inside a row; a column's cross-axis stretch hands the track the
-            flexed width. */}
-        <YStack flexGrow={1} flexShrink={1} minWidth={trackMinWidth} justifyContent="center">
-          <Slider
-            value={[value]}
-            min={0}
-            max={max}
-            step={step}
-            onChange={(values) => {
-              if (typeof values[0] === "number") onChange(values[0]);
-            }}
+    // The thumb follows the finger at once; the list narrows once it rests.
+    const [draft, setDraft] = useState(value);
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => setDraft(value), [value]);
+    useEffect(
+      () => () => {
+        if (timer.current) clearTimeout(timer.current);
+      },
+      [],
+    );
+    const move = (next: number) => {
+      setDraft(next);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => onChangeRef.current(next), commitDelayMs);
+    };
+
+    const readout = (
+      <Text
+        {...knobProps.label}
+        color={draft > 0 ? "$color12" : "$color10"}
+        flexShrink={0}
+        userSelect="none"
+        textAlign="right"
+        data-range-readout=""
+      >
+        {draft > 0 ? `${draft}+` : t("Any")}
+      </Text>
+    );
+    const caption = (
+      <Text {...knobProps.label} color="$color11" flexShrink={0} userSelect="none">
+        {label}
+      </Text>
+    );
+    // A column on purpose: the Slider's %-width chain collapses to 0 inside
+    // a row; a column's cross-axis stretch hands the track the flexed width.
+    const track = (
+      // Inset by half the thumb so it stays inside the column at either end.
+      <YStack
+        flexGrow={1}
+        flexShrink={1}
+        minWidth={0}
+        justifyContent="center"
+        paddingHorizontal="$2"
+      >
+        <Slider
+          value={[Math.min(draft, max)]}
+          min={0}
+          max={max}
+          step={step}
+          size="$2"
+          onValueChange={(values: number[]) => {
+            if (typeof values[0] === "number") move(values[0]);
+          }}
+          aria-label={label}
+          testID={testID}
+          data-range-slider=""
+        >
+          <Slider.Track height="$0.5" backgroundColor="$color5" data-slider-part="track">
+            <Slider.TrackActive backgroundColor="$color9" data-slider-part="range" />
+          </Slider.Track>
+          <Slider.Thumb
+            index={0}
+            size="$1.5"
+            circular
+            backgroundColor="$background"
+            borderColor="$color9"
+            borderWidth={knobProps.surface.borderWidth}
+            elevation={knobProps.elevation}
+            hoverStyle={{ borderColor: "$color10" }}
+            pressStyle={{ borderColor: "$color11" }}
+            focusVisibleStyle={{ outlineColor: "$outlineColor", outlineWidth: 2 }}
             aria-label={label}
-            compact
+            data-slider-part="thumb"
           />
+        </Slider>
+      </YStack>
+    );
+
+    if (layout === "stack") {
+      return (
+        <YStack {...knobProps.gapSm} data-range-layout="stack">
+          <XStack alignItems="baseline" {...knobProps.gap}>
+            {caption}
+            {readout}
+          </XStack>
+          {track}
         </YStack>
-        <Text
-          fontSize="$2"
-          fontWeight="600"
-          color={value > 0 ? "$color12" : "$color10"}
-          minWidth={readoutWidth}
-          textAlign="right"
-          userSelect="none"
-        >
-          {value > 0 ? `${value}+` : t("Any")}
-        </Text>
+      );
+    }
+    return (
+      <XStack
+        {...knobProps.gap}
+        alignItems="center"
+        flexGrow={1}
+        minWidth={0}
+        data-range-layout="row"
+      >
+        {caption}
+        {track}
+        {readout}
       </XStack>
     );
   }
   return { default: RangeRow };
 });
 
-/** A "minimum value" filter for a numeric field: label, slider, readout. */
+/** A "minimum value" filter for a numeric field: label, stock slider, readout. */
 export function RangeFilter(props: RangeFilterProps) {
   return (
     <Suspense fallback={null}>

package/src/list/RecordCard.native.tsx

@@ -1,6 +1,6 @@
 import { Card, Text, XStack, YStack } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { FacetBadge } from "./FacetBadge";
@@ -38,42 +38,44 @@ export function RecordCard({
     <Card
       testID={testID}
       {...knobProps.cardSurface}
+      // Full-bleed media: the card has no inset of its own and its radius
+      // clips the image well; the body below carries the inset.
+      padding={0}
+      gap={0}
+      overflow="hidden"
+      data-record-card-bleed=""
       elevation={knobProps.elevation}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, [
+        "boxShadow",
+        "shadowColor",
+        "shadowOffset",
+        "shadowOpacity",
+        "shadowRadius",
+        "elevation",
+      ])}
       pressStyle={{ scale: 0.98, ...elevationState.pressKnobProps }}
       role="button"
       aria-label={title}
       onPress={() => onPress?.()}
     >
-      <YStack gap="$1.5">
+      <YStack gap={0}>
         <YStack position="relative">
-          <ImageWell sources={images} alt={title} tints={tints} inset={0.04} />
-          {code ? (
-            <XStack
-              position="absolute"
-              top="$2"
-              left="$2"
-              {...knobProps.borderRadius}
-              borderWidth={0}
-              backgroundColor="$background08"
-              paddingHorizontal="$1.5"
-              paddingVertical="$0.5"
-              zIndex={1}
-            >
-              <Text fontSize="$1" fontWeight="800" letterSpacing={1} color="$color12">
-                {code}
-              </Text>
-            </XStack>
-          ) : null}
+          <ImageWell
+            sources={images}
+            alt={title}
+            tints={tints}
+            inset={0.04}
+            borderRadius={0}
+            {...({ "data-record-card-media": "" } as Record<string, unknown>)}
+          />
           {favorite ? (
             <XStack position="absolute" top="$1" right="$1" zIndex={2}>
               <Button
-                size="$3"
                 circular
                 chromeless
                 minWidth={knobProps.sizeToken}
                 minHeight={knobProps.sizeToken}
-                transition={knobProps.transition}
+                {...transitionProps(knobProps.motion.control)}
                 backgroundColor="$background08"
                 pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
                 onPress={handleToggleFavorite}
@@ -89,37 +91,44 @@ export function RecordCard({
               />
             </XStack>
           ) : null}
-          {badges.length > 0 ? (
-            <XStack
-              position="absolute"
-              bottom="$2"
-              left="$2"
-              right="$2"
-              gap="$1.5"
-              flexWrap="wrap"
-              zIndex={1}
-              pointerEvents="none"
+        </YStack>
+        <YStack {...knobProps.panelPadding} gap="$1.5">
+          <XStack gap="$2" alignItems="baseline">
+            <Text
+              {...knobProps.heading}
+              fontWeight="700"
+              fontSize="$4"
+              numberOfLines={1}
+              color="$color12"
+              flexShrink={1}
             >
+              {title}
+            </Text>
+            {code ? (
+              <Text
+                fontSize="$2"
+                fontWeight="700"
+                color="$color10"
+                flexShrink={0}
+                {...({ "data-record-card-code": "" } as Record<string, unknown>)}
+              >
+                {code}
+              </Text>
+            ) : null}
+          </XStack>
+          {subtitle ? (
+            <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+          {badges.length > 0 ? (
+            <XStack gap="$1.5" flexWrap="wrap">
               {badges.map((badge) => (
-                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} compact />
+                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} size="$3" />
               ))}
             </XStack>
           ) : null}
         </YStack>
-        <YStack gap="$0.5">
-          <Text
-            {...knobProps.heading}
-            fontWeight="700"
-            fontSize="$4"
-            numberOfLines={1}
-            color="$color12"
-          >
-            {title}
-          </Text>
-          <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
-            {subtitle || " "}
-          </Text>
-        </YStack>
       </YStack>
     </Card>
   );

package/src/list/RecordCard.spec.tsx

@@ -0,0 +1,56 @@
+// A record card is full-bleed media over a padded body: the image well runs
+// to the card's edges (the card clips it to its radius) and the name, the
+// code and the facet pills sit in the body under it, not stickered on the art.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { RecordCard } from "./RecordCard";
+
+afterEach(cleanup);
+
+function renderCard() {
+  return renderWithProviders(
+    <RecordCard
+      title="Pikachu"
+      subtitle="Mouse Pokémon"
+      code="#025"
+      images={["https://art.spec.test/25.png"]}
+      tints={["yellow"]}
+      badges={[{ value: "electric", label: "Electric", tint: "yellow" }]}
+      href="/pokemon/pikachu"
+      testID="card"
+    />,
+  );
+}
+
+describe("RecordCard full-bleed media", () => {
+  it("drops the card's inset and clips its media to the radius", () => {
+    renderCard();
+    const card = screen.getByTestId("card");
+    expect(card.hasAttribute("data-record-card-bleed")).toBe(true);
+    expect(card.className).toMatch(/_ox-hidden/);
+    expect(card.className).toMatch(/_oy-hidden/);
+    expect(card.className).toMatch(/_pt-0px/);
+    expect(card.className).toMatch(/_btlr-t-radius/);
+  });
+
+  it("keeps the name, number and type pills out of the media", () => {
+    renderCard();
+    const media = screen.getByTestId("card").querySelector("[data-record-card-media]") as Element;
+    expect(media).not.toBeNull();
+    for (const text of ["Pikachu", "#025", "Electric"]) {
+      const node = screen.getByText(text);
+      expect(media.contains(node)).toBe(false);
+      expect(media.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    }
+  });
+
+  it("reads name, then number, then the pills", () => {
+    renderCard();
+    const name = screen.getByText("Pikachu");
+    const code = screen.getByText("#025");
+    const pill = screen.getByText("Electric");
+    expect(name.compareDocumentPosition(code) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(code.compareDocumentPosition(pill) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});

package/src/list/RecordCard.tsx

@@ -1,6 +1,7 @@
 import { Anchor, Card, Text, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import {
+  transitionProps,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
@@ -116,9 +117,22 @@ export function RecordCard({
       testID={testID}
       position="relative"
       {...knobProps.cardSurface}
+      // Full-bleed media: the card has no inset of its own and its radius
+      // clips the image well; the body below carries the inset.
+      padding={0}
+      gap={0}
+      overflow="hidden"
+      data-record-card-bleed=""
       elevation={knobProps.elevation}
       cursor="pointer"
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, [
+        "boxShadow",
+        "shadowColor",
+        "shadowOffset",
+        "shadowOpacity",
+        "shadowRadius",
+        "elevation",
+      ])}
       hoverStyle={{ ...elevationState.hoverKnobProps }}
       pressStyle={{ ...elevationState.pressKnobProps }}
       {...(href
@@ -155,34 +169,18 @@ export function RecordCard({
             : undefined)}
         />
       ) : null}
-      <YStack gap="$1.5" zIndex={1} pointerEvents={passThrough}>
+      <YStack gap={0} zIndex={1} pointerEvents={passThrough}>
         <YStack position="relative" pointerEvents={passThrough}>
           <ImageWell
             sources={images}
             alt={title}
             tints={tints}
             inset={0.04}
+            borderRadius={0}
             lazy={lazy}
             pointerEvents={inert}
+            {...({ "data-record-card-media": "" } as Record<string, unknown>)}
           />
-          {code ? (
-            <XStack
-              position="absolute"
-              top="$2"
-              left="$2"
-              {...knobProps.borderRadius}
-              borderWidth={0}
-              backgroundColor="$background08"
-              paddingHorizontal="$1.5"
-              paddingVertical="$0.5"
-              zIndex={1}
-              pointerEvents={inert}
-            >
-              <Text fontSize="$1" fontWeight="800" letterSpacing={1} color="$color12">
-                {code}
-              </Text>
-            </XStack>
-          ) : null}
           {favorite ? (
             <XStack
               position="absolute"
@@ -199,12 +197,11 @@ export function RecordCard({
                 : undefined)}
             >
               <Button
-                size="$3"
                 circular
                 chromeless
                 minWidth={knobProps.sizeToken}
                 minHeight={knobProps.sizeToken}
-                transition={knobProps.transition}
+                {...transitionProps(knobProps.motion.control)}
                 backgroundColor="$background08"
                 hoverStyle={{ backgroundColor: "$background", scale: 1.08 }}
                 pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
@@ -223,37 +220,44 @@ export function RecordCard({
               />
             </XStack>
           ) : null}
-          {badges.length > 0 ? (
-            <XStack
-              position="absolute"
-              bottom="$2"
-              left="$2"
-              right="$2"
-              gap="$1.5"
-              flexWrap="wrap"
-              zIndex={1}
-              pointerEvents="none"
+        </YStack>
+        <YStack {...knobProps.panelPadding} gap="$1.5" pointerEvents={inert}>
+          <XStack gap="$2" alignItems="baseline">
+            <Text
+              {...knobProps.heading}
+              fontWeight="700"
+              fontSize="$4"
+              numberOfLines={1}
+              color="$color12"
+              flexShrink={1}
             >
+              {title}
+            </Text>
+            {code ? (
+              <Text
+                fontSize="$2"
+                fontWeight="700"
+                color="$color10"
+                flexShrink={0}
+                {...({ "data-record-card-code": "" } as Record<string, unknown>)}
+              >
+                {code}
+              </Text>
+            ) : null}
+          </XStack>
+          {subtitle ? (
+            <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+          {badges.length > 0 ? (
+            <XStack gap="$1.5" flexWrap="wrap">
               {badges.map((badge) => (
-                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} compact />
+                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} size="$3" />
               ))}
             </XStack>
           ) : null}
         </YStack>
-        <YStack gap="$0.5" pointerEvents={inert}>
-          <Text
-            {...knobProps.heading}
-            fontWeight="700"
-            fontSize="$4"
-            numberOfLines={1}
-            color="$color12"
-          >
-            {title}
-          </Text>
-          <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
-            {subtitle || " "}
-          </Text>
-        </YStack>
       </YStack>
     </Card>
   );