feat(design): use colorIcon for Menu and Dropdown menu item icons - #1589
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
😭 Preview Deploy failed. |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📦 Modified package
🤔 This is a ...
🔗 Related issue link
N/A
💡 Background and solution
Problem
Menu and Dropdown menu icons did not use the linear icon color. Neither antd nor OBUI sets a color for
.ant-menu-item-icon/.ant-dropdown-menu-item-icon, so the icons inherited the item text color: Menu items useitemColor(gray9#3b4a69), and the Dropdown popup menu setscolor: colorText(gray10#132039) on items and submenu titles. As a result the icons looked darker than the same icons in Button, Card and Table, which already usecolorIcon(gray8#5c6b8a).Solution
.ant-menu:not(.ant-menu-dark)— that setscolorIconon the icons of items and submenu titles which are not selected, not danger and not disabled.ant-dropdown-menuprefix and its root does not carry theant-menuclass, so the Menu rule alone does not reach it.#595959; it now usestoken.colorTextSecondaryso the docs table follows the theme.colorIconfor light items and submenu titles, and that selected / danger / disabled / dark cases do not. Expected values are derived from the theme token (packages/design/src/theme/default.ts) instead of hardcoded RGB values, so the assertions stay in sync with the token definition.Verified
npx vitest run --project @oceanbase/design→ 64 test files, 406 tests passed.npx eslinton the changed files → clean.npx tsc --noEmit -p packages/design/tsconfig.jsonreports no errors for the changed files.📝 Changelog
- 💄 In light theme, icons of menu items and submenu titles now use the linear icon color
colorIcon(gray8#5c6b8a), consistent with Button, Card and Table icons; selected, danger and disabled items keep their own colors.- Dropdown
- 💄 In light theme, icons of dropdown menu items and submenu titles now use the linear icon color
colorIcon(gray8#5c6b8a); selected, danger and disabled items keep their own colors.- 💄 亮色主题下，菜单项和子菜单标题的图标改用线性图标色
colorIcon（gray8#5c6b8a），与 Button、Card、Table 的图标保持一致；选中、危险和禁用项保持原有状态色。- Dropdown
- 💄 亮色主题下，下拉菜单项和子菜单标题的图标改用线性图标色
colorIcon（gray8#5c6b8a）；选中、危险和禁用项保持原有状态色。☑️ Self-Check before Merge