fix: correct the code style in the hover status - #9142
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟡 Changes recommended
The new hover-only light-theme override should also apply for :focus-visible to avoid inconsistent/incorrect styling for keyboard users.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR syncs a styling fix from doc-kit to adjust how inline code is colored when a ChangeHistory dropdown item is hovered, specifically under the light theme.
Changes:
- Adds a light-theme-specific CSS rule to override
codetext color on dropdown item hover.
File summaries
| File | Description |
|---|---|
| packages/ui-components/src/Common/ChangeHistory/index.module.css | Adds a light-theme hover override for inline code styling within dropdown items. |
Review details
- Files reviewed: 1/1 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: btea <2356281422@qq.com>
AugustinMauroy
left a comment
AugustinMauroy
left a comment
There was a problem hiding this comment.
Could you add a story that allow us to see that this issue is fixed
I added a brief note. |
|
oh nice but I mean a story of storybook you have to update this file to have code in children https://github.com/nodejs/nodejs.org/blob/main/packages/ui-components/src/Common/ChangeHistory/index.stories.tsx we use chromatic to automatically deploy storybook like vercel do for website |
|
Thank you for your detailed explanation. 👍 |
| decorators: [ | ||
| withThemeByDataAttribute<ReactRenderer>({ | ||
| themes: { light: '', dark: 'dark' }, | ||
| themes: { light: 'light', dark: 'dark' }, |
There was a problem hiding this comment.
Add specific attribute values to ensure that the newly added class can be matched in the storybook.
Description
sync nodejs/doc-kit#1080
Validation
Related Issues
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.