[jgteske]

Closes #2018

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	d94c3e6
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6af41f9ae4b8c44c24d99a1d
😎 Deploy Preview	https://deploy-preview-2655--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coveralls]

coverage: 84.864% (+0.06%) from 84.803% — jgteske:feat-react-material-adornments into eclipsesource:master

[lucas-koehler]

@EclipseSourceAI

[EclipseSourceAI]

Note

Autonomous AI review.

This review was done by an AI agent and therefore may contain mistakes. Feel free to ignore any comment you disagree with. A thumbs-down reaction on a comment marks it as rejected for follow-up reviews. Noting why in a reply helps, since replies are read too.

Resolving all AI comments does not lead to an automatic approval. A maintainer still needs to review and sign off on the overall architecture and design.

To get an updated review after pushing changes, a maintainer may re-request a review from this account.

Running in Eclipse Enclave, submitted via review-guard-mcp

This PR adds startAdornment / endAdornment UI schema options (plain strings) to the React Material text, number, integer, number-format, select, autocomplete and anyOf-string-or-enum inputs (closes #2018). A new useInputAdornments hook in util/adornment.tsx builds MUI InputAdornments and sets notched for the outlined variant. MaterialInputControl force-shrinks the label when a start adornment is set, because MUI can't detect the adornment through the wrapped inner component. Existing built-in end adornments (clear button, autocomplete popup icons, anyOf datalist) are merged with the user adornment, not replaced. The PR also adds an example and a test suite.

The integration is consistent. Every Material input reads the options the same way, and the existing behaviour without the options is unchanged (the clear button logic is equivalent when no end adornment is set). Points for maintainers:

• Clear button layout in MuiInputText: when an end adornment is set, the clear button permanently reserves space, which leaves a visible gap (inline comment).
• Public API naming: the hook, isAdornmentText and the new types become public API through the util re-export. One of the types has the same name as a MUI type (inline comment).
• Label shrink vs. notched: the two are handled in different places (MaterialInputControl vs. the hook). They have to stay in sync for the outlined notch to look right.
• Example scope: the new "Adornments" example is shared, so it shows up in all renderer sets, but only React Material supports the options.

I couldn't do UI verification: the review sandbox has no network access, so the deploy preview couldn't be loaded and dependencies couldn't be installed for a local build. A maintainer should check the visual result in the deploy preview, especially the select arrow offset (mr: 4) and the outlined label notch.

[lucas-koehler]

Hi @jgteske , thank you for the contribution ❤️
The initial AI review seems to make sensible comments to me. Please have a look at them. I will review this in detail afterwards.

[jgteske]

Hi @lucas-koehler,
the suggestions of the AI review are valide and changes already implemented. It should be ready for your review. Thanks!

[lucas-koehler]

Hi @jgteske ,
thanks for the updates! I have some inline comments. Besides that we should consider the placement of the endadornment vs control buttons again:

IMO the clear button, which only shows up on hover, should be left of the end adornment to avoid leaving a blank gap while it is not shown. For instance, see the current state of the autocomplete control in the adornments example:

no hover:

hovered:

The dropdown arrow should stay on the right end in my opinion. The same should be checked for select controls. In the example, they are not clearable. Please check if they can be clearable.

In general, the order on the right should be:
clear - end adornment - other buttons (dropdown arrow)

If that is too complicated, having the end adornment completely on the right (after the other buttons) would be fine, too. It should be consistent over all affected renderers though.

[jgteske]

Hi @lucas-koehler,
thanks for your review!
In my opinion both orders are valide options. My initial intention was to have the end adornment directly "linked" with the input.
But I agree, that the white gap can be a bit confusing this way. I will change the order and check your inline comments.

[lucas-koehler]

Hi @jgteske , I answered your comment #2655 (comment) . Please have a look :)

[jgteske]

Hi @lucas-koehler,
I looked at your review comment and implemented it with a comment. If this implementation works for you please resolve its conversation. :)
#2655 (comment)

[lucas-koehler]

Hi @jgteske , thanks for the updates! The auto complete and select look good now 👍
This is nearly ready to merge. I have some comments inline. Mostly regarding comments and simplifying the tests :)

[jgteske]

Hi @lucas-koehler,
thanks for the detailed review on the tests. I missed these parts due to the changes indeed. Your requested changes are implemented with d94c3e6

[lucas-koehler]

Thanks for the updates and the contribution in general @jgteske ❤️
LGTM 🚀

[jgteske]

Thank you too for your reviews and insights. Could you please prepare a prerelease Version, so we can use this changes? :)

[lucas-koehler]

@jgteske I published 3.9.0-alpha.3 :)