refactor(site): demui <IconField /> - #27719
Conversation
There was a problem hiding this comment.
馃挕 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 273607676b
鈩癸笍 About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 馃憤.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| }); | ||
| await userEvent.click(button); | ||
| await expect(button).toHaveAttribute("aria-expanded", "true"); | ||
| await expect(await screen.findByText("Smileys & People")).toBeVisible(); |
There was a problem hiding this comment.
Query inside the emoji picker's shadow root
When Storybook runs OpenPicker, this lookup times out because emoji-mart renders the category label inside em-emoji-picker's shadow root, as confirmed by EmojiPicker.tsx accessing that same .shadowRoot. Testing Library's screen.findByText does not traverse shadow DOM, so the story test fails after successfully opening the picker; use a shadow-root-aware query or assert observable state on the picker host.
Useful? React with 馃憤聽/ 馃憥.
| </Popover> | ||
| </InputGroupAddon> | ||
| </InputGroup> | ||
| <IconField |
There was a problem hiding this comment.
Keep the prewarmed picker out of the tab order
On the MCP server, provider, and OAuth app forms, switching this wrapper to IconField now also mounts its production-only prewarmed emoji picker inside an sr-only container. That picker contains focusable shadow-DOM controls, and aria-hidden removes them from the accessibility tree but not the keyboard tab order, so keyboard users can tab through invisible search, navigation, and emoji controls before opening the popover; make the prewarm container inert or preload the module without mounting the interactive picker.
AGENTS.md reference: site/AGENTS.md:L199-L204
Useful? React with 馃憤聽/ 馃憥.
| placeholder="file location" | ||
| onChange={(value) => void form.setFieldValue("iconURL", value)} | ||
| label={null} | ||
| onChange={(event) => |
There was a problem hiding this comment.
non-blocking: It feels redundant that we're giving the setFieldValue callback to both onChange and onPickEmoji (here as well as ProviderForm and OAuth2AppForm)
It looks like all other instances of IconField set both onChange and onPickEmoji handlers. But I'm not sure if onChange actually does anything, since it gets forwarded to InputGroupInput 鉃★笍 Input 鉃★笍 input, and you can't change an IconField's value by typing in it
There was a problem hiding this comment.
I will look into this after this PR, does feel odd.
Replace MUI
TextField/ Emotion theming inIconFieldwithInputGroup,Popover, and Tailwind.IconPickerFieldalready had the demui'dInputGroup+Popoverimplementation, so that was ported into the sharedIconField. Per review feedback,IconPickerFieldis now removed and its call sites (the MCP server, provider, and OAuth app forms) useIconFielddirectly.