@dloizides/ui-forms 1.9.0 → 1.11.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 1.11.0
+
+**`ThemedTextInput` shipped no metrics, so every direct caller got a raw 19px input.**
+
+It documented itself as "the ONE source of truth for the input look" while shipping
+only **colours** — no border, radius, padding or height. `FormField` quietly passed its
+own private duplicate of those metrics, so anything reached *through* `FormField` looked
+correct and the gap was invisible. Every **direct** caller — the documented, blessed
+usage — got a raw browser input.
+
+Measured live in the Digital Kin CMS before: **10/10 inputs below the 48px floor**, text
+inputs 19px, textareas 38px. After: **0/10**, at 48/96px.
+
+**Label association was absent entirely** (0 `label[for]`, 0 ids). Two defects only a
+real browser could find, both fixed here:
+
+- **`htmlFor` is silently dropped by react-native-web** — it is not on the prop
+  allowlist, the same family as the dropped `accessibilityHint`. A prop-level assertion
+  passes against the broken build; only a DOM-level test catches it, so that is what the
+  new tests assert.
+- **Dangling `for`.** `Field` assumed render-function children place the id they are
+  handed, but `SelectControl` uses `aria-labelledby` instead — so the difficulty label
+  shipped `for="field-control-3"` pointing at **nothing**, passing every structural check
+  while focusing no field. `useHtmlFor` now sets `for` only when the target is genuinely
+  in the document.
+
+> ⚠️ **Cross-fleet visual change.** `controlStyles.input` gaining `minHeight: 48` lifts
+> dense filter inputs and select triggers in `aml-v2`/`agora-web` from ~38-41px to 48px.
+> This cannot be avoided: the input floor is what fixes the 19px defect, and nothing
+> fixes that without also lifting inputs that already had padding. Owner-approved.
+
+
 ## 1.9.0
 
 **Campaign F3 — `Field`'s spacing model, and the layout primitives.** `Field` hard-coded a 16px

package/dist/index.d.mts

@@ -94,6 +94,21 @@ interface FieldChildContext {
      */
     describedById?: string;
     hasError: boolean;
+    /**
+     * `id` this field's `<label for>` points at. Assign it to the control (RN `id` → DOM `id`) and
+     * clicking the label text focuses the control — a free doubling of the hit area that every
+     * field was throwing away.
+     *
+     * A plain-node child gets this injected automatically (see below); a render-function child has
+     * to place it, because only the caller knows which element inside is the actual control.
+     */
+    controlId: string;
+    /**
+     * `id` OF the label element. For a control that `<label for>` cannot address — anything that is
+     * not a native form element, e.g. the `<div role="button">` a `SelectControl` trigger renders —
+     * point `aria-labelledby` here instead.
+     */
+    labelId: string;
 }
 type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
 interface FieldProps {
@@ -356,6 +371,13 @@ declare const FormActions: ({ onSave, onCancel, saveLabel, cancelLabel, saveHint
  * soft ring) for free, driven by the active theme.
  */
 
+/**
+ * The private `styles.input` that used to live here — padding 10/12, radius 8, border 1 — was a
+ * verbatim duplicate of `controlStyles.input`, and `ThemedTextInput` now applies that itself. The
+ * duplication is what hid the real defect: because `FormField` supplied metrics, inputs reached
+ * through it looked correct, while every DIRECT `ThemedTextInput` caller got an unstyled 19px box
+ * and nobody could see the difference from in here.
+ */
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     label: string;
     required?: boolean;
@@ -373,6 +395,20 @@ declare const FormField: ({ label, required, error, containerStyle, ...textInput
  * It is the ONE source of truth for the input look: `FormField` renders it, and raw filter inputs
  * (search / country / year / date fallbacks) use it directly instead of forking the styles.
  *
+ * ## The box metrics are applied HERE, and that is new
+ *
+ * This component claimed to be the source of truth for the input look while shipping only
+ * COLOURS — no border, no radius, no padding, no height. `FormField` happened to pass its own
+ * private copy of those metrics, so every input reached through `FormField` looked right and the
+ * gap stayed invisible. Any caller that used `ThemedTextInput` directly — the documented, blessed
+ * way to use it — got a raw browser input: **19px tall**, measured in production on an admin CMS
+ * where all 10 inputs failed the hit-target floor.
+ *
+ * So `controlStyles.input` is now the component's own base, ahead of the caller's `style` in the
+ * cascade. Callers that already passed the same metrics (`FormField`) are unaffected — the values
+ * are identical, which is precisely why the duplication was invisible — and callers that pass
+ * their own overrides still win, because their `style` merges after the base.
+ *
  * Every existing `TextInputProps` (value, placeholder, onChangeText, testID, accessibility…) is
  * forwarded untouched; `onFocus`/`onBlur` you pass are composed with the internal focus state.
  */
@@ -387,6 +423,16 @@ interface ThemedTextInputProps extends TextInputProps {
     describedById?: string;
     /** Marks the field required for assistive tech (`aria-required` on web). No-op on native. */
     requiredField?: boolean;
+    /**
+     * Opt OUT of the shared box metrics (border, radius, padding, the kit's min-height floor) and
+     * render colours only — the pre-1.11 behaviour.
+     *
+     * For the rare control that supplies its own complete box, e.g. an input embedded inside an
+     * already-bordered composite where a second border would double up. It is a prop rather than
+     * the default because the default has to be the accessible one: the previous default shipped
+     * 19px inputs to production precisely because "no metrics" was the silent fallback.
+     */
+    unstyledBox?: boolean;
 }
 declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
 
@@ -576,6 +622,17 @@ interface SelectControlProps {
      */
     accessibilityLabel: string;
     accessibilityHint?: string;
+    /**
+     * `id` of the `Field` label naming this control — take it from the render-child context's
+     * `labelId`. The trigger is a `<div role="button">`, which `<label for>` cannot address (that
+     * only works for native form elements), so the association runs the other way: the trigger
+     * points AT the label.
+     *
+     * `accessibilityLabel` still wins for the accessible NAME, deliberately — it is the only one of
+     * the two that carries the current selection ("Status: Active"). This adds the structural link
+     * without changing a single announcement.
+     */
+    labelledById?: string;
     /** PRE-LOCALIZED accessibility hint applied to every option in the menu. */
     optionHint?: string;
     /** Merged LAST onto the anchor wrapper — the consumer always wins over the shared style. */
@@ -583,7 +640,7 @@ interface SelectControlProps {
     /** Trigger is `${testID}-trigger`, menu `${testID}-menu`, options `${testID}-option-${value}`. */
     testID: string;
 }
-declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
+declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
 /**
  * `TypeaheadControl` — a search-as-you-type combobox (aml-v2's CountryPicker, generalized). A
@@ -702,16 +759,24 @@ interface AnchoredMenuProps {
 declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, }: AnchoredMenuProps): React.ReactElement;
 
 declare const controlStyles: {
-    /** The shared bordered box every dense text control renders in. */
+    /**
+     * The shared bordered box every dense text control renders in.
+     *
+     * `minHeight` is the kit floor: padding alone produced a ~38px box, and a bare input with no
+     * box style at all measured **19px** in production. Height is a hit-target guarantee, so it
+     * is stated rather than left to emerge from font size + padding.
+     */
     input: {
         borderWidth: number;
         borderRadius: number;
         paddingHorizontal: number;
         paddingVertical: number;
         fontSize: number;
+        minHeight: number;
     };
     /** The select trigger: a bordered field box matching the text inputs + a chevron. */
     selectTrigger: {
+        minHeight: number;
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";

package/dist/index.d.ts

@@ -94,6 +94,21 @@ interface FieldChildContext {
      */
     describedById?: string;
     hasError: boolean;
+    /**
+     * `id` this field's `<label for>` points at. Assign it to the control (RN `id` → DOM `id`) and
+     * clicking the label text focuses the control — a free doubling of the hit area that every
+     * field was throwing away.
+     *
+     * A plain-node child gets this injected automatically (see below); a render-function child has
+     * to place it, because only the caller knows which element inside is the actual control.
+     */
+    controlId: string;
+    /**
+     * `id` OF the label element. For a control that `<label for>` cannot address — anything that is
+     * not a native form element, e.g. the `<div role="button">` a `SelectControl` trigger renders —
+     * point `aria-labelledby` here instead.
+     */
+    labelId: string;
 }
 type FieldChildren = React.ReactNode | ((context: FieldChildContext) => React.ReactNode);
 interface FieldProps {
@@ -356,6 +371,13 @@ declare const FormActions: ({ onSave, onCancel, saveLabel, cancelLabel, saveHint
  * soft ring) for free, driven by the active theme.
  */
 
+/**
+ * The private `styles.input` that used to live here — padding 10/12, radius 8, border 1 — was a
+ * verbatim duplicate of `controlStyles.input`, and `ThemedTextInput` now applies that itself. The
+ * duplication is what hid the real defect: because `FormField` supplied metrics, inputs reached
+ * through it looked correct, while every DIRECT `ThemedTextInput` caller got an unstyled 19px box
+ * and nobody could see the difference from in here.
+ */
 interface FormFieldProps extends Omit<TextInputProps, 'style'> {
     label: string;
     required?: boolean;
@@ -373,6 +395,20 @@ declare const FormField: ({ label, required, error, containerStyle, ...textInput
  * It is the ONE source of truth for the input look: `FormField` renders it, and raw filter inputs
  * (search / country / year / date fallbacks) use it directly instead of forking the styles.
  *
+ * ## The box metrics are applied HERE, and that is new
+ *
+ * This component claimed to be the source of truth for the input look while shipping only
+ * COLOURS — no border, no radius, no padding, no height. `FormField` happened to pass its own
+ * private copy of those metrics, so every input reached through `FormField` looked right and the
+ * gap stayed invisible. Any caller that used `ThemedTextInput` directly — the documented, blessed
+ * way to use it — got a raw browser input: **19px tall**, measured in production on an admin CMS
+ * where all 10 inputs failed the hit-target floor.
+ *
+ * So `controlStyles.input` is now the component's own base, ahead of the caller's `style` in the
+ * cascade. Callers that already passed the same metrics (`FormField`) are unaffected — the values
+ * are identical, which is precisely why the duplication was invisible — and callers that pass
+ * their own overrides still win, because their `style` merges after the base.
+ *
  * Every existing `TextInputProps` (value, placeholder, onChangeText, testID, accessibility…) is
  * forwarded untouched; `onFocus`/`onBlur` you pass are composed with the internal focus state.
  */
@@ -387,6 +423,16 @@ interface ThemedTextInputProps extends TextInputProps {
     describedById?: string;
     /** Marks the field required for assistive tech (`aria-required` on web). No-op on native. */
     requiredField?: boolean;
+    /**
+     * Opt OUT of the shared box metrics (border, radius, padding, the kit's min-height floor) and
+     * render colours only — the pre-1.11 behaviour.
+     *
+     * For the rare control that supplies its own complete box, e.g. an input embedded inside an
+     * already-bordered composite where a second border would double up. It is a prop rather than
+     * the default because the default has to be the accessible one: the previous default shipped
+     * 19px inputs to production precisely because "no metrics" was the silent fallback.
+     */
+    unstyledBox?: boolean;
 }
 declare const ThemedTextInput: React.ForwardRefExoticComponent<ThemedTextInputProps & React.RefAttributes<TextInput>>;
 
@@ -576,6 +622,17 @@ interface SelectControlProps {
      */
     accessibilityLabel: string;
     accessibilityHint?: string;
+    /**
+     * `id` of the `Field` label naming this control — take it from the render-child context's
+     * `labelId`. The trigger is a `<div role="button">`, which `<label for>` cannot address (that
+     * only works for native form elements), so the association runs the other way: the trigger
+     * points AT the label.
+     *
+     * `accessibilityLabel` still wins for the accessible NAME, deliberately — it is the only one of
+     * the two that carries the current selection ("Status: Active"). This adds the structural link
+     * without changing a single announcement.
+     */
+    labelledById?: string;
     /** PRE-LOCALIZED accessibility hint applied to every option in the menu. */
     optionHint?: string;
     /** Merged LAST onto the anchor wrapper — the consumer always wins over the shared style. */
@@ -583,7 +640,7 @@ interface SelectControlProps {
     /** Trigger is `${testID}-trigger`, menu `${testID}-menu`, options `${testID}-option-${value}`. */
     testID: string;
 }
-declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
+declare function SelectControl({ options, value, onChange, placeholder, accessibilityLabel, accessibilityHint, labelledById, optionHint, style, testID, }: SelectControlProps): React.ReactElement;
 
 /**
  * `TypeaheadControl` — a search-as-you-type combobox (aml-v2's CountryPicker, generalized). A
@@ -702,16 +759,24 @@ interface AnchoredMenuProps {
 declare function AnchoredMenu({ options, selectedValue, onSelect, onDismiss, colors, optionHint, testID, anchorRef, }: AnchoredMenuProps): React.ReactElement;
 
 declare const controlStyles: {
-    /** The shared bordered box every dense text control renders in. */
+    /**
+     * The shared bordered box every dense text control renders in.
+     *
+     * `minHeight` is the kit floor: padding alone produced a ~38px box, and a bare input with no
+     * box style at all measured **19px** in production. Height is a hit-target guarantee, so it
+     * is stated rather than left to emerge from font size + padding.
+     */
     input: {
         borderWidth: number;
         borderRadius: number;
         paddingHorizontal: number;
         paddingVertical: number;
         fontSize: number;
+        minHeight: number;
     };
     /** The select trigger: a bordered field box matching the text inputs + a chevron. */
     selectTrigger: {
+        minHeight: number;
         flexDirection: "row";
         alignItems: "center";
         justifyContent: "space-between";