Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: menu support css variable theme #45750

Merged
merged 16 commits into from Nov 13, 2023
Merged

Conversation

kiner-tang
Copy link
Member

@kiner-tang kiner-tang commented Nov 9, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English menu support css variable theme
🇨🇳 Chinese 菜单支持 css 变量主题

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

🤖 Generated by Copilot at 72681e7

This pull request adds CSS variable support to the menu component by using a custom hook and a utility library. It refactors the menu component style tokens and CSS objects to use the utility functions for handling units, arithmetic operations, and type aliases. It also fixes a typo in the RTL mode and improves the compatibility with different CSS units. The main files affected are components/menu/menu.tsx, components/menu/style/index.tsx, and components/menu/style/cssVar.ts.

🔍 Walkthrough

🤖 Generated by Copilot at 72681e7

  • Add a custom hook useCSSVar to register and use CSS variables for the menu component (link)
  • Import and call useCSSVar in menu.tsx, MenuDivider.tsx, MenuItem.tsx, and SubMenu.tsx and wrap the returned elements with the CSS variable provider (link,link,link,link,link,link,link,link,link,link,link,link,link)
  • Import and use unit and type functions from @ant-design/cssinjs to add unit suffixes to numeric values and declare type aliases for CSS objects in index.tsx, horizontal.tsx, vertical.tsx, and theme.tsx (link,link,link,link)
  • Modify the token types and values in index.tsx to allow unitless values and use token.calc and unit functions to perform arithmetic operations and add unit suffixes (link,link,link,link,link,link,link,link,link,link,link,link)
  • Add a new function prepareComponentToken in index.tsx to return the default token values for the menu component with dark mode and disabled state colors (link)
  • Replace the original object literal with the default token values for the menu component with the prepareComponentToken function call in index.tsx (link,link)
  • Fix a typo in the transform value for the submenu arrow in RTL mode in rtl.tsx (link)
  • Replace the original token values with token.calc and unit functions in theme.tsx to perform arithmetic operations and add unit suffixes (link,link,link,link,link)
  • Replace the original token values with token.calc and unit functions in horizontal.tsx and vertical.tsx to perform arithmetic operations and add unit suffixes (link,link,link,link,link,link,link,link,link)

Copy link

stackblitz bot commented Nov 9, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Nov 9, 2023

Preview Is ready

Copy link
Contributor

github-actions bot commented Nov 9, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 403.94 KB (+173 B 🔺)
./dist/antd-with-locales.min.js 463.38 KB (+199 B 🔺)

Copy link

codesandbox-ci bot commented Nov 9, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3d1dd17:

Sandbox Source
antd reproduction template (forked) Configuration

Copy link

codecov bot commented Nov 9, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (819998c) 100.00% compared to head (3d1dd17) 100.00%.
Report is 3 commits behind head on feature.

Additional details and impacted files
@@            Coverage Diff             @@
##           feature    #45750    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          706       706            
  Lines        12002     12128   +126     
  Branches      3199      3233    +34     
==========================================
+ Hits         12002     12128   +126     
Files Coverage Δ
components/menu/menu.tsx 100.00% <100.00%> (ø)
components/menu/style/horizontal.tsx 100.00% <ø> (ø)
components/menu/style/rtl.tsx 100.00% <100.00%> (ø)
components/menu/style/theme.tsx 100.00% <ø> (ø)
components/menu/style/vertical.tsx 100.00% <100.00%> (ø)

... and 5 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@MadCcc
Copy link
Member

MadCcc commented Nov 9, 2023

argos 上有变化了

components/menu/MenuItem.tsx Outdated Show resolved Hide resolved
components/menu/SubMenu.tsx Outdated Show resolved Hide resolved
@MadCcc MadCcc merged commit 3128539 into feature Nov 13, 2023
92 checks passed
@MadCcc MadCcc deleted the feat/css-variable-theme-menu branch November 13, 2023 01:38
@MadCcc MadCcc mentioned this pull request Nov 13, 2023
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants