@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/Progress/index.tsx

@@ -1,19 +1,24 @@
 import type { ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
 import { Intent } from "@multiplatform.one/theme";
+import type { KnobProps } from "@multiplatform.one/theme";
+import { getSize } from "@tamagui/get-token";
 import type { LabelProps, SizeTokens } from "tamagui";
 import {
   Progress as TamaguiProgress,
   type ProgressProps as TamaguiProgressProps,
+  Text,
   View,
   XStack,
+  getVariableValue,
+  isWeb,
   styled,
   useTheme,
 } from "tamagui";
-import { Field, FieldLayout } from "../../fieldLayout";
+import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formControlColors } from "../../shared/colorRamps";
-import { t } from "../../shared/t";
+import { bidiIsolate, t } from "../../shared/t";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -24,7 +29,7 @@ import {
 
 const ProgressFrame = styled(TamaguiProgress, {
   backgroundColor: formControlColors.background,
-  borderWidth: 0,
+  overflow: "hidden",
   variants: {
     outlined: {
       true: {
@@ -41,6 +46,38 @@ const ProgressIndicator = styled(TamaguiProgress.Indicator, {
 /** Semantic indicator intent — matches the theme's Intent union. */
 export type ProgressIntent = "accent" | "error" | "warning" | "success";
 
+/**
+ * Tamagui Progress size is 0.25 × the size token (a thin track, not a 44px
+ * input). Skeleton height must use the same formula so LC-20 anatomy matches.
+ */
+function trackHeightPx(size: SizeTokens): number {
+  try {
+    const raw = getVariableValue(getSize(size));
+    const n = typeof raw === "number" ? raw : Number(raw);
+    if (!Number.isFinite(n)) return 11;
+    return Math.round(n * 0.25);
+  } catch {
+    return 11;
+  }
+}
+
+function resolveMax(max: number | undefined): number {
+  return typeof max === "number" && Number.isFinite(max) && max > 0 ? max : 100;
+}
+
+function clampProgress(value: unknown, max: number): number {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.min(max, Math.max(0, n));
+}
+
+function indicatorMotion(transition: KnobProps["transition"]) {
+  // `transition` only — the tamagui 1.x `animation` prop is silently dropped
+  // on 2.x (convention lint).
+  if (!transition) return { transition: "none" as const };
+  return { transition };
+}
+
 /**
  * Semantic hue fill: `$color9`, the hue's tint-independent solid step (LC-05,
  * the Gantt-bar recipe), rendered INSIDE `<Intent name>` so it resolves on
@@ -51,10 +88,15 @@ export type ProgressIntent = "accent" | "error" | "warning" | "success";
  * pale wash — not the hue solid. useTheme() subscribes, so scheme changes
  * stay live.
  */
-function HueFillIndicator() {
+function HueFillIndicator({ transition }: { transition: KnobProps["transition"] }) {
   const theme = useTheme();
   const fill = theme.color9?.val;
-  return <ProgressIndicator {...(fill ? { backgroundColor: fill as any } : undefined)} />;
+  return (
+    <ProgressIndicator
+      {...(fill ? { backgroundColor: fill as any } : undefined)}
+      {...indicatorMotion(transition)}
+    />
+  );
 }
 
 export interface ProgressProps {
@@ -83,8 +125,128 @@ export interface ProgressProps {
   intent?: ProgressIntent;
   /** When true, renders a skeleton placeholder instead of the progress bar */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
+  /**
+   * Visible percent beside the track (Primer / Polaris text pairing).
+   * Defaults on when a field label is present; unlabeled embeds stay bar-only.
+   */
+  showValue?: boolean;
+}
+
+type ProgressTrackProps = {
+  id: string;
+  label?: ReactNode;
+  progressValue: number;
+  max: number;
+  required?: boolean;
+  readOnly?: boolean;
+  hasError?: boolean;
+  intent?: ProgressIntent;
+  size?: SizeTokens;
+  sizeToken: SizeTokens;
+  knobProps: KnobProps;
+  elevationWrapperProps: Record<string, any>;
+  progressProps?: ProgressProps["progressProps"];
+  showValue: boolean;
+  blurHandler?: (...args: any[]) => void;
+};
+
+function ProgressTrack({
+  id,
+  label,
+  progressValue,
+  max,
+  required,
+  readOnly,
+  hasError,
+  intent,
+  size,
+  sizeToken,
+  knobProps,
+  elevationWrapperProps,
+  progressProps,
+  showValue,
+  blurHandler,
+}: ProgressTrackProps) {
+  const describedBy = useFieldDescribedBy();
+  const trackSize = size ?? sizeToken;
+  const percent = Math.round((progressValue / max) * 100);
+  const motion = indicatorMotion(knobProps.transition);
+  const name = typeof label === "string" && label ? label : t("Progress");
+
+  const progressElement = (
+    <ProgressFrame
+      width="100%"
+      size={trackSize}
+      overflow="hidden"
+      outlined={knobProps.outlined}
+      {...knobProps.borderRadius}
+      {...(knobProps.outlined ? knobProps.inputSurface : { borderWidth: 0 })}
+      {...(knobProps.outlined ? { borderColor: formControlColors.boundary } : undefined)}
+      aria-label={name}
+      aria-describedby={describedBy}
+      aria-readonly={readOnly || undefined}
+      {...progressProps}
+      id={id}
+      value={progressValue}
+      max={max}
+      {...(blurHandler ? { onBlur: blurHandler } : undefined)}
+      aria-required={required || undefined}
+      aria-invalid={hasError || undefined}
+    >
+      {intent && intent !== "accent" ? (
+        <Intent name={intent}>
+          <HueFillIndicator transition={knobProps.transition} />
+        </Intent>
+      ) : (
+        // `accent` rides the base theme's `$accentBackground` — the exact
+        // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
+        // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
+        // undefined keeps the styled default (gray form ramp) untouched.
+        <ProgressIndicator
+          backgroundColor={intent === "accent" ? "$accentBackground" : undefined}
+          {...motion}
+        />
+      )}
+    </ProgressFrame>
+  );
+
+  const bar = elevationWrapperProps.elevation ? (
+    <View
+      {...elevationWrapperProps}
+      borderRadius={knobProps.borderRadius.borderRadius}
+      flex={1}
+      minWidth={0}
+      width="100%"
+    >
+      {progressElement}
+    </View>
+  ) : (
+    <View flex={1} minWidth={0} width="100%">
+      {progressElement}
+    </View>
+  );
+
+  return (
+    <XStack {...knobProps.gap} alignItems="center" width="100%">
+      {bar}
+      {showValue ? (
+        <Text
+          {...knobProps.body}
+          color={knobProps.textAccentColor}
+          minWidth={40}
+          textAlign="right"
+          flexShrink={0}
+          {...(isWeb
+            ? { "aria-hidden": true, style: { fontVariantNumeric: "tabular-nums" } }
+            : { accessible: false })}
+        >
+          {bidiIsolate(`${percent}%`)}
+        </Text>
+      ) : null}
+    </XStack>
+  );
 }
 
 export function Progress({
@@ -96,16 +258,18 @@ export function Progress({
   helperText,
   error,
   required,
+  readOnly,
   size,
   id: idProp,
   value,
   defaultValue,
-  max = 100,
+  max,
   onBlur,
   progressProps,
   intent,
   skeleton,
   compact,
+  showValue: showValueProp,
 }: ProgressProps) {
   const { resolvedForm, knobProps, elevation, id } = useFormField({
     form: formProp,
@@ -113,71 +277,45 @@ export function Progress({
     compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const resolvedMax = resolveMax(max);
+  const showValue = showValueProp ?? Boolean(label);
+  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const trackSize = size ?? knobProps.sizeToken;
 
-  // Render skeleton placeholder
   if (skeleton) {
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={6} />
+        <XStack {...knobProps.gap} alignItems="center" width="100%">
+          <Skeleton variant="rounded" width="100%" height={trackHeightPx(trackSize)} flex={1} />
+          {showValue ? <Skeleton variant="text" width={40} /> : null}
+        </XStack>
       </FieldLayout>
     );
   }
 
-  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
-
-  const renderProgress = (
-    progressValue: number,
+  const renderTrack = (
+    rawValue: unknown,
     blurHandler?: (...args: any[]) => void,
     hasError?: boolean,
-  ) => {
-    const progressElement = (
-      <ProgressFrame
-        width="100%"
-        size={knobProps.sizeToken}
-        borderRadius={knobProps.borderRadius.borderRadius}
-        outlined={knobProps.outlined}
-        // htmlFor labels don't name div[role=progressbar] — set the name directly
-        aria-label={typeof label === "string" && label ? label : t("Progress")}
-        {...progressProps}
-        id={id}
-        value={progressValue}
-        max={max}
-        {...(blurHandler ? { onBlur: blurHandler } : undefined)}
-        aria-required={required || undefined}
-        aria-invalid={hasError || undefined}
-      >
-        {intent && intent !== "accent" ? (
-          <Intent name={intent}>
-            <HueFillIndicator />
-          </Intent>
-        ) : (
-          // `accent` rides the base theme's `$accentBackground` — the exact
-          // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
-          // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
-          // undefined keeps the styled default (gray form ramp) untouched.
-          <ProgressIndicator
-            backgroundColor={intent === "accent" ? "$accentBackground" : undefined}
-          />
-        )}
-      </ProgressFrame>
-    );
-
-    return (
-      <XStack height={size || knobProps.sizeToken} alignItems="center" width="100%">
-        {elevationWrapperProps.elevation ? (
-          <View
-            {...elevationWrapperProps}
-            borderRadius={knobProps.borderRadius.borderRadius}
-            width="100%"
-          >
-            {progressElement}
-          </View>
-        ) : (
-          progressElement
-        )}
-      </XStack>
-    );
-  };
+  ) => (
+    <ProgressTrack
+      id={id}
+      label={label}
+      progressValue={clampProgress(rawValue, resolvedMax)}
+      max={resolvedMax}
+      required={required}
+      readOnly={readOnly}
+      hasError={hasError}
+      intent={intent}
+      size={size}
+      sizeToken={knobProps.sizeToken}
+      knobProps={knobProps}
+      elevationWrapperProps={elevationWrapperProps}
+      progressProps={progressProps}
+      showValue={showValue}
+      blurHandler={blurHandler}
+    />
+  );
 
   if (!resolvedForm || !name) {
     return (
@@ -191,7 +329,7 @@ export function Progress({
         size={size}
         knobProps={knobProps}
       >
-        {renderProgress(value ?? defaultValue ?? 0, undefined, !!error)}
+        {renderTrack(value ?? defaultValue ?? 0, undefined, !!error)}
       </FieldLayout>
     );
   }
@@ -216,7 +354,7 @@ export function Progress({
             size={size}
             knobProps={knobProps}
           >
-            {renderProgress(
+            {renderTrack(
               (field.state.value as number) ?? 0,
               mergeFieldHandler(field, "handleBlur", onBlur),
               !!resolvedError,

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -440,7 +440,7 @@ describe("RadioGroup Components", () => {
     });
 
     describe("selected mark (LC-05 ONE-EMPHASIS / D-01)", () => {
-      it("paints the checked radio's indicator dot with the accent mark, never ink", () => {
+      it("fills the checked radio with the accent mark; unchecked stays empty", () => {
         const { container } = render(
           <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
             <RadioGroup label="Choose" value="option2" options={mockOptions} />
@@ -448,13 +448,12 @@ describe("RadioGroup Components", () => {
         );
         const checked = container.querySelector('[role="radio"][aria-checked="true"]');
         expect(checked).toBeTruthy();
-        // The indicator dot is the selection mark: it fills with the shared
-        // accent mark token ($accentBackground), not the ink/label tier.
+        // LC-71 selected=fill: the glyph (not a sibling outline) carries the
+        // shared accent mark token ($accentBackground).
         const marked = Array.from(checked!.querySelectorAll("*")).filter((el) =>
           (el as HTMLElement).className?.toString().includes("_bg-accentBackg"),
         );
         expect(marked.length).toBeGreaterThan(0);
-        // Unchecked radios render no accent mark.
         const unchecked = container.querySelector('[role="radio"][aria-checked="false"]');
         expect(unchecked).toBeTruthy();
         const uncheckedMarked = Array.from(unchecked!.querySelectorAll("*")).filter((el) =>
@@ -463,5 +462,33 @@ describe("RadioGroup Components", () => {
         expect(uncheckedMarked.length).toBe(0);
       });
     });
+
+    describe("LC-71 RING-ANATOMY", () => {
+      const classOf = (el: Element) => (el as HTMLElement).className?.toString() ?? "";
+      const treeHasRing = (el: Element) =>
+        [el, ...el.querySelectorAll("*")].some((node) => /outlineWidth-2px/.test(classOf(node)));
+
+      it("does not paint a ring on every radio at rest", () => {
+        const result = renderWithProviders(
+          <RadioGroup label="Choose Option" name="option" value="option1" options={mockOptions} />,
+        );
+        const radios = [...result.container.querySelectorAll('[role="radio"]')];
+        expect(radios.length).toBe(mockOptions.length);
+        for (const radio of radios) {
+          expect(treeHasRing(radio)).toBe(false);
+        }
+      });
+
+      it("does not put a focus-visible ring on the 44px hit target", () => {
+        const result = renderWithProviders(
+          <RadioGroup label="Choose Option" name="option" value="option1" options={mockOptions} />,
+        );
+        const radios = [...result.container.querySelectorAll('[role="radio"]')];
+        for (const radio of radios) {
+          expect(classOf(radio)).toMatch(/outlineWidth-0focus-visible-0px/);
+          expect(classOf(radio)).not.toMatch(/outlineWidth-2px/);
+        }
+      });
+    });
   });
 });