Skip to content

Fix/sensitive input UI#36

Merged
gitsad merged 2 commits into
mainfrom
fix/sensitive-input-ui
Jun 10, 2026
Merged

Fix/sensitive input UI#36
gitsad merged 2 commits into
mainfrom
fix/sensitive-input-ui

Conversation

@gitsad

@gitsad gitsad commented Jun 10, 2026

Copy link
Copy Markdown
Member

What does this PR do?

Makes the sensitive-field (PII) marker in forms overridable. Previously the 🔒
badge next to a sensitive field's label was rendered directly by FormRenderer
with no override slot — unlike input/select/checkbox/textarea/file/submitButton —
so consumers couldn't restyle or remove it without a global CSS hack (which can't
be scoped per use-case and risks stripping PII markers from forms that legitimately
want them).

FormRenderer now resolves the badge through the existing element-override system
under a new sensitiveIndicator key. Consumers can swap in their own marker, or
return null to opt a given form scope out of the badge entirely — no CSS hacks,
fully scoped. Default rendering is unchanged (opt-out via override).

Also exports FormSensitiveIndicatorElementProps (the new override's props) and
FormFileElementProps (previously imported by the demo but not actually exported).
The demo wires up a custom PII chip indicator to demonstrate the slot.

Closes #

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing behavior to change)
  • Refactor (no functional change)
  • Documentation
  • CI / tooling

Packages Affected

  • @mobile-reality/mdma-spec
  • @mobile-reality/mdma-parser
  • @mobile-reality/mdma-runtime
  • @mobile-reality/mdma-attachables-core
  • @mobile-reality/mdma-renderer-react
  • @mobile-reality/mdma-prompt-pack
  • Blueprint: ___________

Checklist

  • I have read the CONTRIBUTING guide.
  • My code follows the existing code style (pnpm format and pnpm lint pass).
  • I have added or updated tests that cover my changes.
  • All tests pass (pnpm test).
  • Type-checking passes (pnpm typecheck).
  • I have added a changeset (pnpm changeset) if this change affects published packages.
  • New or changed MDMA schemas are backwards-compatible (or marked as breaking).
  • Sensitive fields are marked with sensitive: true where appropriate.

Note: no automated test added — the renderer-react package has no DOM test
harness (no react-dom / @testing-library/react), so the change is covered by
typecheck + manual verification in the demo. The "backwards-compatible schemas"
and "sensitive fields marked" items are N/A (no schema changes); checked as such.

How to Test

  1. pnpm install && pnpm --filter @mobile-reality/mdma-renderer-react build
  2. Run the demo and open a document containing a form with a sensitive: true
    field. With the demo customizations active, the default 🔒 badge is replaced by
    the custom PII chip (GlassSensitiveIndicator) — confirming the slot resolves.
  3. Remove sensitiveIndicator from the demo's form.elements overrides → the
    default 🔒 badge renders, proving the default is unchanged.
  4. Set it to sensitiveIndicator: () => null → the badge disappears entirely
    (the opt-out path consumers will use).

@gitsad gitsad merged commit 4ae6bab into main Jun 10, 2026
1 check passed
@gitsad gitsad deleted the fix/sensitive-input-ui branch June 10, 2026 09:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants