refactor(site): migrate <Markdown /> and <InlineMarkdown /> off MUI - #27724
Conversation
… MUI Replace Emotion `css` / MUI theme tokens in `Markdown` with Tailwind semantic classes, and swap `InlineMarkdown`'s MUI `Link` for the shared `Link` component. Code block colors now use theme tokens (`surface-secondary`, `syntax-key`, `content-destructive`) instead of hardcoded zinc/teal and `theme.palette`. Also adds a `WithLink` story for the full Markdown component.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 99782b7b97
ℹ️ 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".
| return ( | ||
| <Link | ||
| href={href} | ||
| target={isExternal ? "_blank" : undefined} |
There was a problem hiding this comment.
For external links rendered through InlineMarkdown, this now sets target="_blank" and changes the rendered link primitive, but the existing WithLink story only supplies args and has no play assertion. Add Storybook interaction coverage that locates the link semantically and verifies the external and internal target behavior, as FE1 requires user-visible behavior changes to be exercised by a story's play function.
AGENTS.md reference: site/AGENTS.md:L9-L10
Useful? React with 👍 / 👎.
| const markdownClassName = cn( | ||
| "text-base", | ||
| "[&_:is(h1,h2,h3,h4,h5,h6)]:mt-8", | ||
| "[&_:is(h1,h2,h3,h4,h5,h6)]:mb-4", | ||
| "[&_:is(h1,h2,h3,h4,h5,h6)]:leading-tight", | ||
| "[&_p]:mt-0 [&_p]:mb-4 [&_p:only-child]:my-0", | ||
| "[&_ul]:mb-4 [&_ul]:flex [&_ul]:flex-col [&_ul]:gap-2", | ||
| "[&_ol]:mb-4 [&_ol]:flex [&_ol]:flex-col [&_ol]:gap-2", | ||
| "[&_li>ul]:mt-4 [&_li>ol]:mt-4 [&_li>p]:mb-0", | ||
| "[&_.prismjs]:overflow-x-auto [&_.prismjs]:rounded-lg [&_.prismjs]:bg-surface-secondary [&_.prismjs]:px-6 [&_.prismjs]:py-4", | ||
| "[&_.prismjs_code]:text-content-secondary", | ||
| "[&_.prismjs_.key]:text-syntax-key [&_.prismjs_.property]:text-syntax-key", | ||
| "[&_.prismjs_.inserted]:text-syntax-key [&_.prismjs_.keyword]:text-syntax-key", | ||
| "[&_.prismjs_.deleted]:text-content-destructive", | ||
| ); |
There was a problem hiding this comment.
holy tailwind selectors. Can we inline this at usage? Non-blocking just not sure we need it to be defined here
There was a problem hiding this comment.
I agreedly hate this, but the alternative is to import a CSS file (gross? idk), I will come back to this post-MUI 🙏🏻
2 participants
Replace Emotion
css/ MUI theme tokens inMarkdownwith Tailwind semantic classes, and swapInlineMarkdown's MUILinkfor the sharedLinkcomponent.Code block colors now use theme tokens (
surface-secondary,syntax-key,content-destructive) instead of hardcoded zinc/teal andtheme.palette. Also adds aWithLinkstory for the full Markdown component.