@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/FieldDisplay/index.tsx

@@ -8,25 +8,31 @@
  *
  * Knob contract (LC-18, SHARED recipes): complete `knobProps` fragments —
  * standalone frames take `surface` + `borderRadius` + space padding; table
- * cells stay chromeless (the cell already owns SP-EDGE). Type chrome (check
- * box, swatch, thumb, meter) follows the same radius/size channel as the
- * editable twin. `sizeToken` is control height, never fontSize — type uses
- * `label` + `body`.
+ * cells stay chromeless (the cell already owns SP-EDGE). DescriptionList
+ * slots are also chromeless (LC-39: the list paints no surface) and
+ * start-align every value (LC-44: align-by-type is a COLUMN rule — each
+ * list row is its own class). Type chrome (check box, swatch, thumb, meter)
+ * follows the same radius/size channel as the editable twin. `sizeToken` is
+ * control height, never fontSize — type uses `label` + `body`.
  */
 
 import { CheckIcon, FileIcon, ImageSquareIcon, StarIcon } from "@phosphor-icons/react";
 import { useReadableTextOn, useResolvedKnobs, type KnobProps } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
-import { useState, type ReactNode } from "react";
+import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
 import type { SizeTokens } from "tamagui";
-import { Image, Text, View, XStack, getVariableValue, useTheme } from "tamagui";
+import { Image, Text, View, XStack, getVariableValue, isWeb, useTheme } from "tamagui";
 import { Chip, type ChipColor, type ChipSize } from "../Chip";
 import { BarcodePreview } from "../fields/Barcode/BarcodePreview";
 import { formControlColors, formSelectedColors } from "../shared/colorRamps";
+import { clampRadiusForControl } from "../shared/utils";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { t } from "../shared/t";
 import { asText, EMPTY, formatDateText, formatNumericText } from "./formatters";
 
+/** DG-RAD-05 / R2: checkbox glyph rides the scale but NEVER h/2 (a radio). */
+const CHECKBOX_GLYPH_MAX_RADIUS_TOKEN = 2;
+
 export type FieldDisplayType =
   | "input"
   | "textarea"
@@ -60,12 +66,58 @@ export type FieldDisplayType =
   | "codeeditor"
   | "custom";
 
+export type FieldDisplayAlign = "left" | "right" | "center";
+
 export interface FieldDisplayProps {
   field?: FieldDisplayType;
   value: any;
   fieldProps?: Record<string, any>;
   /** For linked daterange columns. */
   linkedValue?: any;
+  /**
+   * Chromeless slot (table cell / DescriptionList). The host already owns
+   * the surface; FieldDisplay paints no frame (LC-39).
+   */
+  chromeless?: boolean;
+  /**
+   * Horizontal alignment override. DescriptionList start-aligns every value
+   * (LC-44). Table numeric columns still default to end-align (DG-TBL-01).
+   */
+  align?: FieldDisplayAlign;
+  /** Per-row opt-in ellipsis (DG-OVF). Default is wrap outside table cells. */
+  truncate?: boolean;
+}
+
+const DescriptionListSlotContext = createContext(false);
+
+/** True when FieldDisplay is mounted as a DescriptionList value. */
+export function useIsInDescriptionList(): boolean {
+  return useContext(DescriptionListSlotContext);
+}
+
+export function DescriptionListSlotProvider({ children }: { children: ReactNode }) {
+  return (
+    <DescriptionListSlotContext.Provider value={true}>
+      {children}
+    </DescriptionListSlotContext.Provider>
+  );
+}
+
+interface DisplaySlot {
+  chromeless: boolean;
+  align?: FieldDisplayAlign;
+  truncate: boolean;
+  inDescriptionList: boolean;
+}
+
+const DisplaySlotContext = createContext<DisplaySlot>({
+  chromeless: false,
+  truncate: false,
+  inDescriptionList: false,
+});
+
+function useDisplaySlot(): DisplaySlot {
+  return useContext(DisplaySlotContext);
 }
 
 const CHIP_COLORS = new Set<ChipColor>([
@@ -92,19 +144,6 @@ function chipSizeFor(size: string): ChipSize {
   return "$3";
 }
 
-/** Space → padding, same map as table-primitives `getTableCellPadding` (SP-EDGE). */
-function framePadding(space: string): {
-  paddingHorizontal: string;
-  paddingVertical: string;
-} {
-  const map: Record<string, { paddingHorizontal: string; paddingVertical: string }> = {
-    small: { paddingHorizontal: "$1.5", paddingVertical: "$2" },
-    medium: { paddingHorizontal: "$2", paddingVertical: "$3" },
-    large: { paddingHorizontal: "$3", paddingVertical: "$4" },
-  };
-  return map[space] ?? map.medium;
-}
-
 function resolveChipColor(
   value: any,
   fieldProps?: Record<string, any>,
@@ -132,23 +171,35 @@ function isSafeHttpUrl(value: unknown): value is string {
 function useDisplayChrome() {
   const { knobProps } = useResolvedKnobs();
   const inTableCell = useIsInTableCell();
+  const slot = useDisplaySlot();
   const glyphSize = Math.max(
     12,
     Math.round(getVariableValue(getSize(knobProps.sizeToken as SizeTokens)) * 0.45),
   );
-  return { knobProps, inTableCell, glyphSize };
+  return {
+    knobProps,
+    inTableCell,
+    inDescriptionList: slot.inDescriptionList,
+    chromeless: slot.chromeless || inTableCell,
+    align: slot.align,
+    truncate: slot.truncate,
+    glyphSize,
+  };
 }
 
 function DisplayFrame({ field, children }: { field: FieldDisplayType; children: ReactNode }) {
-  const { knobProps, inTableCell } = useDisplayChrome();
-  if (inTableCell) {
+  const { knobProps, chromeless } = useDisplayChrome();
+  if (chromeless) {
     return (
       <XStack
         data-component="FieldDisplay"
         data-field={field}
+        data-chromeless=""
         alignItems="center"
+        justifyContent="flex-start"
         minWidth={0}
         flex={1}
+        width="100%"
       >
         {children}
       </XStack>
@@ -158,13 +209,15 @@ function DisplayFrame({ field, children }: { field: FieldDisplayType; children:
     <XStack
       data-component="FieldDisplay"
       data-field={field}
+      data-space={knobProps.space}
+      data-size={knobProps.size}
       alignItems="center"
       minWidth={0}
       width="100%"
       {...knobProps.surface}
       {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
       {...(knobProps.outlined ? { backgroundColor: "transparent" } : undefined)}
-      {...framePadding(knobProps.space)}
     >
       {children}
     </XStack>
@@ -178,13 +231,15 @@ function ValueText({
   lines = 1,
   wrap = false,
   empty = false,
+  title,
 }: {
   children: ReactNode;
   mono?: boolean;
-  align?: "left" | "right" | "center";
+  align?: FieldDisplayAlign;
   lines?: number;
   wrap?: boolean;
   empty?: boolean;
+  title?: string;
 }) {
   const { knobProps } = useResolvedKnobs();
   return (
@@ -201,6 +256,7 @@ function ValueText({
       width={wrap ? "100%" : undefined}
       display={wrap ? "block" : undefined}
       whiteSpace={wrap ? "pre-wrap" : undefined}
+      {...(isWeb && title ? ({ title } as Record<string, unknown>) : undefined)}
     >
       {children}
     </Text>
@@ -210,19 +266,33 @@ function ValueText({
 function TextCell({
   children,
   mono = false,
-  align = "left",
+  align,
   lines = 1,
-  wrap = false,
+  wrap,
 }: {
   children: ReactNode;
   mono?: boolean;
-  align?: "left" | "right" | "center";
+  align?: FieldDisplayAlign;
   lines?: number;
   wrap?: boolean;
 }) {
+  const { inDescriptionList, truncate, align: slotAlign } = useDisplayChrome();
   const empty = children === EMPTY;
+  const resolvedAlign = align ?? slotAlign ?? "left";
+  const resolvedWrap = wrap ?? (inDescriptionList && !truncate);
+  const title =
+    truncate && !resolvedWrap && typeof children === "string" && children !== EMPTY
+      ? children
+      : undefined;
   return (
-    <ValueText mono={mono} align={align} lines={lines} wrap={wrap} empty={empty}>
+    <ValueText
+      mono={mono}
+      align={resolvedAlign}
+      lines={truncate ? 1 : lines}
+      wrap={resolvedWrap}
+      empty={empty}
+      title={title}
+    >
       {children}
     </ValueText>
   );
@@ -239,7 +309,7 @@ function InputDisplay({
   multiline?: boolean;
   mono?: boolean;
 }) {
-  const { knobProps, inTableCell } = useDisplayChrome();
+  const { knobProps, inTableCell, truncate } = useDisplayChrome();
   const text = asText(value);
   const link = href || (isSafeHttpUrl(value) ? value : undefined);
   if (link && text !== EMPTY) {
@@ -264,22 +334,24 @@ function InputDisplay({
     );
   }
   return (
-    <TextCell mono={mono} wrap={Boolean(multiline && !inTableCell)}>
+    <TextCell mono={mono} wrap={Boolean(multiline && !inTableCell && !truncate)}>
       {text}
     </TextCell>
   );
 }
 
 function NumericDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
-  if (value == null || value === "") return <TextCell align="right">{EMPTY}</TextCell>;
+  const { align } = useDisplayChrome();
+  const numericAlign = align ?? "right";
+  if (value == null || value === "") return <TextCell align={numericAlign}>{EMPTY}</TextCell>;
   const num = typeof value === "number" ? value : Number(value);
-  if (Number.isNaN(num)) return <TextCell align="right">{asText(value)}</TextCell>;
+  if (Number.isNaN(num)) return <TextCell align={numericAlign}>{asText(value)}</TextCell>;
   const formatted = formatNumericText(num, {
     precision: fieldProps?.precision,
     currency: fieldProps?.currency,
   });
   return (
-    <TextCell mono align="right">
+    <TextCell mono align={numericAlign}>
       {formatted}
     </TextCell>
   );
@@ -341,16 +413,24 @@ function ChoiceDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<
 }
 
 function BooleanDisplay({ value }: { value: any }) {
-  const { knobProps, glyphSize } = useDisplayChrome();
+  const { knobProps, glyphSize, align } = useDisplayChrome();
   const onMark = useReadableTextOn(formSelectedColors.mark);
-  if (value == null) return <TextCell align="center">{EMPTY}</TextCell>;
+  if (value == null) return <TextCell align={align ?? "center"}>{EMPTY}</TextCell>;
   const marked = Boolean(value);
+  const glyphRadius = clampRadiusForControl(
+    knobProps.borderRadius.borderRadius,
+    CHECKBOX_GLYPH_MAX_RADIUS_TOKEN,
+  );
+  const boxBorderWidth = Math.max(Number(knobProps.inputSurface.borderWidth) || 1, 2);
   return (
     <View
+      data-checkbox-box=""
+      data-checkbox-radius={String(glyphRadius)}
       width={glyphSize}
       height={glyphSize}
       {...knobProps.inputSurface}
-      {...knobProps.borderRadius}
+      borderWidth={boxBorderWidth}
+      borderRadius={glyphRadius}
       backgroundColor={
         marked
           ? formSelectedColors.mark
@@ -358,7 +438,7 @@ function BooleanDisplay({ value }: { value: any }) {
             ? "transparent"
             : formControlColors.background
       }
-      borderColor={marked ? formSelectedColors.mark : formControlColors.border}
+      borderColor={marked ? formSelectedColors.mark : formControlColors.boundary}
       alignItems="center"
       justifyContent="center"
       aria-hidden
@@ -470,14 +550,25 @@ function ImageDisplay({ value }: { value: any }) {
   return <Thumb src={src} alt="" knobProps={knobProps} />;
 }
 
-function BarcodeDisplay({ value }: { value: any }) {
+function BarcodeDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
   const { knobProps, glyphSize } = useDisplayChrome();
   const text = String(value ?? "");
   if (!text) return <TextCell>{EMPTY}</TextCell>;
+  const formats = fieldProps?.formats;
+  const format = Array.isArray(formats)
+    ? formats[0]
+    : typeof fieldProps?.format === "string"
+      ? fieldProps.format
+      : undefined;
   return (
     <XStack alignItems="center" minWidth={0} flexShrink={1} {...knobProps.gap}>
       <ValueText mono>{text}</ValueText>
-      <BarcodePreview value={text} height={Math.max(12, glyphSize)} moduleWidth={1} />
+      <BarcodePreview
+        value={text}
+        height={Math.max(12, glyphSize)}
+        moduleWidth={1}
+        format={typeof format === "string" ? format : undefined}
+      />
     </XStack>
   );
 }
@@ -584,7 +675,21 @@ export function FieldDisplay({
   value,
   fieldProps,
   linkedValue,
+  chromeless = false,
+  align,
+  truncate = false,
 }: FieldDisplayProps) {
+  const inTableCell = useIsInTableCell();
+  const inDescriptionList = useIsInDescriptionList();
+  const slot = useMemo<DisplaySlot>(
+    () => ({
+      chromeless: chromeless || inTableCell || inDescriptionList,
+      align: align ?? (inDescriptionList ? "left" : undefined),
+      truncate,
+      inDescriptionList,
+    }),
+    [chromeless, inTableCell, inDescriptionList, align, truncate],
+  );
   let body: ReactNode;
   switch (field) {
     case "input":
@@ -602,7 +707,7 @@ export function FieldDisplay({
       break;
 
     case "barcode":
-      body = <BarcodeDisplay value={value} />;
+      body = <BarcodeDisplay value={value} fieldProps={fieldProps} />;
       break;
 
     case "stepper":
@@ -680,5 +785,9 @@ export function FieldDisplay({
       break;
   }
 
-  return <DisplayFrame field={field}>{body}</DisplayFrame>;
+  return (
+    <DisplaySlotContext.Provider value={slot}>
+      <DisplayFrame field={field}>{body}</DisplayFrame>
+    </DisplaySlotContext.Provider>
+  );
 }

package/src/FieldGroup.spec.tsx

@@ -0,0 +1,63 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { FieldGroup } from "./FieldGroup";
+
+afterEach(cleanup);
+
+describe("FieldGroup design-law (MPO-60)", () => {
+  it("renders a semantic fieldset + legend on web", () => {
+    const result = renderWithProviders(
+      <FieldGroup legend="Billing">
+        <div>card</div>
+      </FieldGroup>,
+    );
+    expect(result.container.querySelector("fieldset[data-mpo-field-group]")).toBeTruthy();
+    expect(result.container.querySelector("[data-mpo-legend]")?.textContent).toBe("Billing");
+  });
+
+  it("paints the legend at weight 400 (R7 / §6.1)", () => {
+    const result = renderWithProviders(
+      <FieldGroup legend="Name">
+        <div>first</div>
+      </FieldGroup>,
+    );
+    const legend = result.container.querySelector("[data-mpo-legend]") as HTMLElement | null;
+    expect(legend).toBeTruthy();
+    const weight =
+      legend?.style.fontWeight ||
+      (legend ? getComputedStyle(legend).fontWeight : "") ||
+      (legend?.className.match(/fw-400|fow-400|font-weight-400/) ? "400" : "");
+    expect(["400", "normal"]).toContain(String(weight));
+  });
+
+  it("field gap follows space, not sizeToken (density≠size)", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ size: "large", space: "small" }}>
+        <FieldGroup legend="Billing">
+          <div>card</div>
+        </FieldGroup>
+      </Preset>,
+    );
+    const group = result.container.querySelector("[data-mpo-field-group]");
+    expect(group?.getAttribute("data-field-gap")).toBe("$2");
+    expect(group?.getAttribute("data-size")).toBe("large");
+  });
+
+  it("compact nested scale steps density without reading sizeToken as gap", () => {
+    const result = renderWithProviders(
+      <FieldGroup legend="Compact" compact>
+        <div>field</div>
+      </FieldGroup>,
+    );
+    const group = result.container.querySelector("[data-mpo-field-group]");
+    expect(group?.getAttribute("data-density")).toBe("compact");
+    expect(group?.getAttribute("data-size")).toBe("medium");
+    expect(group?.getAttribute("data-field-gap")).toBe("$2");
+  });
+});

package/src/FieldGroup.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Text, YStack, isWeb } from "tamagui";
 import { FormGrid, type FormGridColumns } from "./FormGrid";
 
@@ -27,6 +27,8 @@ export interface FieldGroupProps {
  * Polaris FormLayout.Group / GOV.UK fieldset: related short fields only
  * (name, city/postcode). Field gap follows the space knob; nest inside
  * {@link FormSection} so section spacing stays larger than field spacing.
+ * `compact` wraps descendants in a compact density Preset (LC-73) so nested
+ * fields inherit the same gaps without a per-field prop.
  */
 export function FieldGroup({ legend, children, columns = 1, gap, compact }: FieldGroupProps) {
   const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
@@ -41,7 +43,7 @@ export function FieldGroup({ legend, children, columns = 1, gap, compact }: Fiel
       children
     );
 
-  return (
+  const group = (
     <YStack
       {...(useFieldset ? { render: "fieldset" as const } : {})}
       data-mpo-field-group=""
@@ -66,18 +68,29 @@ export function FieldGroup({ legend, children, columns = 1, gap, compact }: Fiel
       {useFieldset ? (
         <Text
           render="legend"
+          data-mpo-legend=""
           {...knobProps.label}
-          {...knobProps.heading}
+          fontWeight="400"
+          color={knobProps.textAccentColor}
           style={{ padding: 0, marginBottom: 0, float: "left", width: "100%" } as never}
         >
           {legend}
         </Text>
       ) : (
-        <Text {...knobProps.label} {...knobProps.heading} role="heading" aria-level={3}>
+        <Text
+          data-mpo-legend=""
+          {...knobProps.label}
+          fontWeight="400"
+          color={knobProps.textAccentColor}
+          role="heading"
+          aria-level={3}
+        >
           {legend}
         </Text>
       )}
       {body}
     </YStack>
   );
+
+  return compact ? <Preset overrides={{ density: "compact" }}>{group}</Preset> : group;
 }

package/src/Fieldset.spec.tsx

@@ -0,0 +1,39 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Fieldset } from "./FormSection";
+
+afterEach(cleanup);
+
+describe("Fieldset", () => {
+  it("renders a semantic fieldset + legend on web", () => {
+    const result = renderWithProviders(
+      <Fieldset label="Contact">
+        <div>email</div>
+      </Fieldset>,
+    );
+    expect(result.container.querySelector("fieldset")).toBeTruthy();
+    expect(result.container.querySelector("[data-mpo-fieldset]")).toBeTruthy();
+    expect(result.container.querySelector("legend")?.textContent).toContain("Contact");
+  });
+
+  it("paints the legend at weight 400 (R7 / §6.1)", () => {
+    const result = renderWithProviders(
+      <Fieldset label="Account">
+        <div>name</div>
+      </Fieldset>,
+    );
+    const legend = (result.container.querySelector("[data-mpo-legend]") ||
+      result.container.querySelector("legend")) as HTMLElement | null;
+    expect(legend).toBeTruthy();
+    const weight =
+      legend?.style.fontWeight ||
+      (legend ? getComputedStyle(legend).fontWeight : "") ||
+      (legend?.className.match(/fw-400|fow-400|font-weight-400/) ? "400" : "");
+    expect(["400", "normal"]).toContain(String(weight));
+  });
+});