@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/Rating/index.tsx

@@ -27,9 +27,11 @@ import {
 import { Path, Svg } from "react-native-svg";
 import { Skeleton } from "../../Skeleton";
 import { StarInk } from "./StarInk";
+import { filledCount } from "./ratingMath";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
-import { formSelectedColors } from "../../shared/colorRamps";
+import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
   mergeFieldHandler,
@@ -38,6 +40,8 @@ import {
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
 
+export { filledCount } from "./ratingMath";
+
 /** Visual glyph follows the size token (Material small/medium/large). Floor 16. */
 function starGlyphSize(sizeToken: SizeTokens | string | undefined): number {
   const token = (sizeToken ?? "$4") as SizeTokens;
@@ -46,13 +50,6 @@ function starGlyphSize(sizeToken: SizeTokens | string | undefined): number {
   return Math.max(16, Math.round(control * 0.55));
 }
 
-function filledCount(value: number, maxStars: number): number {
-  if (!(maxStars > 0)) return 0;
-  const n = Math.round(value * maxStars);
-  if (!Number.isFinite(n)) return 0;
-  return Math.max(0, Math.min(maxStars, n));
-}
-
 function starPath(size: number, innerRatio = 0.382): string {
   const cx = size / 2;
   const cy = size / 2;
@@ -179,6 +176,7 @@ function StarRow({
   hasError,
   starSize,
   pointy,
+  inTableCell,
 }: {
   id?: string;
   filledStars: number;
@@ -194,6 +192,7 @@ function StarRow({
   hasError?: boolean;
   starSize: number;
   pointy: boolean;
+  inTableCell?: boolean;
 }) {
   const { disabledState } = useResolvedKnobs();
   const describedBy = useFieldDescribedBy();
@@ -225,6 +224,7 @@ function StarRow({
   const tabStopStar = focusedStar ?? Math.min(Math.max(filledStars, 1), Math.max(maxStars, 1));
   const starOutset = Math.max(0, (MIN_PRESS_TARGET - starSize) / 2);
   const itemRadius = pointy ? 0 : 1000;
+  const growPressTarget = !inTableCell;
   const valueLabel = t("{{star}} of {{max}} stars", { star: displayFilled, max: maxStars });
   const focusStar = (starNumber: number) => {
     starRefs.current[starNumber - 1]?.focus?.();
@@ -307,6 +307,8 @@ function StarRow({
       data-rating-row
       data-rating-live={live ? "true" : undefined}
       data-rating-glyph={starSize}
+      data-rating-cell={inTableCell ? "true" : undefined}
+      data-rating-pointy={pointy ? "true" : undefined}
       {...(isWeb && !disabled && !readOnly
         ? {
             onPointerMove: ((e: any) => {
@@ -360,9 +362,14 @@ function StarRow({
             aria-disabled={disabled || undefined}
             aria-checked={isChecked}
             borderRadius={itemRadius}
-            {...pressTargetStyle()}
-            marginHorizontal={-starOutset}
-            marginVertical={-starOutset}
+            {...(growPressTarget
+              ? {
+                  ...pressTargetStyle(),
+                  marginHorizontal: -starOutset,
+                  marginVertical: -starOutset,
+                  "data-rating-grow": "true" as const,
+                }
+              : {})}
             hitSlop={pressTargetHitSlop(starSize)}
             // Keyboard: roving tabindex + Enter/Space + arrows select (native
             // radio). Disabled drops out of the tab order.
@@ -400,14 +407,8 @@ function StarRow({
           </StarWrapper>
         );
       })}
-      {maxStars > 0 ? (
-        <SizableText
-          {...knobProps.label}
-          {...knobProps.body}
-          aria-hidden
-          userSelect="none"
-          data-rating-value
-        >
+      {!inTableCell && maxStars > 0 ? (
+        <SizableText {...knobProps.body} aria-hidden userSelect="none" data-rating-value>
           {valueLabel}
         </SizableText>
       ) : null}
@@ -472,6 +473,7 @@ export function Rating({
   compact,
 }: RatingProps) {
   const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const inTableCell = useIsInTableCell();
   const resolvedPointy = pointy ?? knobProps.pointy;
   // Sane bare default (UX-009): an omitted starIcon renders the package star
   // instead of an invalid element crash on rounded themes.
@@ -488,10 +490,15 @@ export function Rating({
   // (D-01). The empty star stays neutral: it marks nothing.
   const theme = useTheme();
   const markToken = formSelectedColors.mark.slice(1);
+  const emptyToken = formControlColors.boundary.slice(1);
   const filledColor = getVariable(
     (theme as any)[markToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
   );
-  const emptyColor = getVariable(theme.color7?.get("web") ?? theme.color?.get("web"));
+  // DF-06 / WCAG 1.4.11: empty stars are graphical objects. $color7 is below
+  // the 3:1 boundary floor; Radio's empty ring uses the same boundary token.
+  const emptyColor = getVariable(
+    (theme as any)[emptyToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
+  );
 
   const handleStarPress = (
     starIndex: number,
@@ -506,7 +513,12 @@ export function Rating({
   // Render skeleton placeholder
   if (skeleton) {
     return (
-      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
+      <FieldLayout
+        id={id}
+        label={inTableCell ? undefined : label}
+        size={size}
+        knobProps={knobProps}
+      >
         <XStack {...knobProps.gap} alignItems="center">
           {Array.from({ length: maxStars }, (_, i) => (
             <Skeleton
@@ -526,10 +538,10 @@ export function Rating({
     return (
       <FieldLayout
         id={id}
-        label={label}
+        label={inTableCell ? undefined : label}
         labelProps={labelProps}
         error={error}
-        helperText={helperText}
+        helperText={inTableCell ? undefined : helperText}
         required={required}
         size={size}
         knobProps={knobProps}
@@ -553,6 +565,7 @@ export function Rating({
           hasError={!!error}
           starSize={starSize}
           pointy={!!resolvedPointy}
+          inTableCell={inTableCell}
         />
       </FieldLayout>
     );
@@ -572,10 +585,10 @@ export function Rating({
         return (
           <FieldLayout
             id={id}
-            label={label}
+            label={inTableCell ? undefined : label}
             labelProps={labelProps}
             error={resolvedError}
-            helperText={helperText}
+            helperText={inTableCell ? undefined : helperText}
             required={required}
             size={size}
             knobProps={knobProps}
@@ -603,6 +616,7 @@ export function Rating({
               hasError={!!resolvedError}
               starSize={starSize}
               pointy={!!resolvedPointy}
+              inTableCell={inTableCell}
             />
           </FieldLayout>
         );

package/src/fields/Rating/ratingMath.spec.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { filledCount } from "./ratingMath";
+
+describe("filledCount", () => {
+  it("maps the 0–1 fraction onto discrete stars", () => {
+    expect(filledCount(0, 5)).toBe(0);
+    expect(filledCount(0.1, 5)).toBe(1);
+    expect(filledCount(0.5, 5)).toBe(3);
+    expect(filledCount(1, 5)).toBe(5);
+    expect(filledCount(0.5, 3)).toBe(2);
+  });
+
+  it("clamps overflow, negatives, and non-finite values", () => {
+    expect(filledCount(3, 5)).toBe(5);
+    expect(filledCount(-1, 5)).toBe(0);
+    expect(filledCount(Number.NaN, 5)).toBe(0);
+    expect(filledCount(Number.POSITIVE_INFINITY, 5)).toBe(5);
+  });
+
+  it("returns zero stars when maxStars is not positive", () => {
+    expect(filledCount(1, 0)).toBe(0);
+    expect(filledCount(1, -2)).toBe(0);
+  });
+});

package/src/fields/Rating/ratingMath.ts

@@ -0,0 +1,14 @@
+/**
+ * Map a 0–1 rating fraction onto a discrete filled-star count.
+ * Overflow, negatives, and non-finite values clamp; a non-positive
+ * `maxStars` is zero stars (no crash).
+ */
+export function filledCount(value: number, maxStars: number): number {
+  if (!(maxStars > 0)) return 0;
+  if (!Number.isFinite(value)) {
+    return value > 0 ? maxStars : 0;
+  }
+  const n = Math.round(value * maxStars);
+  if (!Number.isFinite(n)) return 0;
+  return Math.max(0, Math.min(maxStars, n));
+}

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -1,6 +1,8 @@
 import { fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
 import { SearchInput } from "./index";
 
 describe("SearchInput", () => {
@@ -140,6 +142,12 @@ describe("SearchInput", () => {
     const clear = result.container.querySelector("[aria-label='Clear search']");
     if (!clear) throw new Error("clear button not rendered");
     expect(clear.getAttribute("tabindex")).toBe("0");
+    expect(clear.className).toMatch(/mp-chip-dismiss/);
+    expect(clear.className).not.toMatch(/mp-chip-dismiss-ring/);
+    const ring = clear.querySelector(".mp-chip-dismiss-ring");
+    expect(ring).not.toBeNull();
+    expect(clear.contains(ring)).toBe(true);
+    expect(result.container.querySelector(".mp-search-clear-ring")).toBeNull();
     const extraStops = [...result.container.querySelectorAll("[tabindex='0']")].filter(
       (el) => el !== input && el !== clear,
     );
@@ -185,4 +193,82 @@ describe("SearchInput", () => {
     const input = result.container.querySelector("input");
     expect(input?.getAttribute("aria-disabled")).toBe("true");
   });
+
+  it("does not fork a SearchInput-only clear ring stylesheet", () => {
+    renderWithProviders(<SearchInput defaultValue="abc" />);
+    const chrome = document.getElementById("mp-search-input-chrome")?.textContent ?? "";
+    expect(chrome).not.toMatch(/mp-search-clear/);
+    expect(chrome).toMatch(/mp-search-input/);
+  });
+
+  it("default painted box is 44 tall; end-cap is the size-recipe square", () => {
+    const result = renderWithProviders(<SearchInput defaultValue="abc" />);
+    const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    const clear = result.container.querySelector("[aria-label='Clear search']") as HTMLElement;
+    if (!box || !clear) throw new Error("box or clear not found");
+    expect(box.getAttribute("data-visual-height")).toBe("44");
+    expect(clear.getAttribute("data-end-cap")).toBe("44");
+    expect(box.getAttribute("data-press-floor")).toBe("box");
+  });
+
+  it("end-cap square is generated from the size recipe at every token", () => {
+    for (const token of SIZE_RECIPE_TOKENS) {
+      if (token === "$true") continue;
+      const height = sizeRecipeForToken(token).height;
+      const result = renderWithProviders(
+        <SearchInput defaultValue="abc" size={token} aria-label={`q-${token}`} />,
+      );
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const clear = result.container.querySelector("[aria-label='Clear search']") as HTMLElement;
+      if (!box || !clear) throw new Error(`anatomy missing at ${token}`);
+      expect(box.getAttribute("data-visual-height"), token).toBe(String(height));
+      expect(clear.getAttribute("data-end-cap"), token).toBe(String(height));
+    }
+  });
+
+  it("compact steps density and leaves size on the recipe; size ejects height", () => {
+    const compact = renderWithProviders(<SearchInput compact />);
+    const compactBox = compact.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(compactBox.getAttribute("data-density")).toBe("compact");
+    // LC-76: compact is density only — default size stays the medium recipe.
+    expect(compactBox.getAttribute("data-size")).toBe("$4");
+
+    const sized = renderWithProviders(<SearchInput size="$5" />);
+    const sizedBox = sized.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(sizedBox.getAttribute("data-density")).toBe("comfortable");
+    expect(sizedBox.getAttribute("data-size")).toBe("$5");
+
+    const both = renderWithProviders(<SearchInput compact size="$5" />);
+    const bothBox = both.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    expect(bothBox.getAttribute("data-density")).toBe("compact");
+    expect(bothBox.getAttribute("data-size")).toBe("$5");
+  });
+
+  it("renders skeleton without a searchbox (LC-20)", () => {
+    const result = renderWithProviders(<SearchInput label="Find" skeleton />);
+    expect(result.container.querySelector("input")).toBeNull();
+    expect(result.findTextElement("Find")).toBeDefined();
+  });
+
+  it("error replaces helper in the field slot", () => {
+    const result = renderWithProviders(
+      <SearchInput label="Find" helperText="Type a name" error="Too short" />,
+    );
+    expect(result.findTextElement("Type a name")).toBeUndefined();
+    expect(result.findTextElement("Too short")).toBeDefined();
+  });
+
+  it("form-integrated name keeps onChange(value) (LC-14)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Form formOptions={{ defaultValues: { q: "" } }} onSubmit={() => {}} submitText="Go">
+        <SearchInput name="q" label="Find" onChange={onChange} debounceMs={0} />
+      </Form>,
+    );
+    expect(result.findTextElement("Find")).toBeDefined();
+    const input = result.container.querySelector("input");
+    if (!input) throw new Error("input not found");
+    fireEvent.change(input, { target: { value: "abc" } });
+    expect(onChange).toHaveBeenCalledWith("abc");
+  });
 });

package/src/fields/SearchInput/SearchInput.stories.tsx

@@ -134,3 +134,17 @@ export const Disabled: Story = {
     </YStack>
   ),
 };
+
+/** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20). */
+export const SkeletonState: Story = {
+  args: { label: "Find", skeleton: true },
+};
+
+export const WithError: Story = {
+  args: { label: "Find", error: "Too short", defaultValue: "ab" },
+  render: (args) => (
+    <YStack maxWidth={400}>
+      <SearchInput {...args} />
+    </YStack>
+  ),
+};