style: 💄 update Menu.Item horizontal style #25622

07akioni · 2020-07-14T12:02:14Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

Make active border and dropdown width the same as item content.

📝 Changelog

Language	Changelog
🇺🇸 English	（加粗他们）Menu.Item's blue indicator line and dropdown width are the same as its content's width in `horizontal` mode.
🇨🇳 Chinese	（加粗他们） Menu.Item 水平模式的蓝色指示线和下拉菜单宽度现在和其文字内容宽度一致。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

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

ant-design-bot · 2020-07-14T12:05:50Z

ant-design-bot · 2020-07-14T12:06:13Z

codesandbox-ci · 2020-07-14T12:14:23Z

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 c7973f7:

Sandbox	Source
antd reproduction template	Configuration

afc163 · 2020-07-14T12:31:13Z

改了啥？

codecov · 2020-07-15T05:59:07Z

Codecov Report

Merging #25622 into feature will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           feature   #25622   +/-   ##
========================================
  Coverage    99.52%   99.52%           
========================================
  Files          374      374           
  Lines         7292     7292           
  Branches      1988     1988           
========================================
  Hits          7257     7257           
  Misses          35       35

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6a075f3...c7973f7. Read the comment docs.

afc163 · 2020-07-15T10:46:33Z

/rebase

afc163 · 2020-07-15T10:59:27Z

hover 响应区域要和真实交互区域保持一致（行为一致/鼠标手型一致），可以考虑和蓝线标示的范围保持一致。
影响了 antd 网站顶部的 Menu 样式。
看看能不能不动样式结构，尽量避免业务里类似 antd 网站顶部导航的样式覆盖失效。

07akioni · 2020-07-15T11:09:22Z

hover 响应区域要和真实交互区域保持一致（行为一致/鼠标手型一致），可以考虑和蓝线标示的范围保持一致。

影响了 antd 网站顶部的 Menu 样式。

看看能不能不动样式结构，尽量避免业务里类似 antd 网站顶部导航的样式覆盖失效。

前两点有道理，没考虑到。第三点我感觉是有点困难的，昨晚写的时候没想出来不改的方法，得再想想

afc163 · 2020-07-23T06:48:17Z

components/menu/style/index.less

+      padding: @menu-item-padding;
+      padding-right: 0;
+      padding-left: 0;


Suggested change

padding: @menu-item-padding;

padding-right: 0;

padding-left: 0;

padding: @menu-item-padding 0;

这个不行吧？我印象里是 x x x x 形式的。

即使不是用户也可能这么写

可以的，你试试先。

按照现在的 0 20px 应该没问题，但是这样没有扩展性了，一旦用户设定一个 4 个单位的就会挂掉

0 20px 反了？

现在是 [上下 0，左右 20]，afc 的写法会变成 [[上 0，左右 20] 下 0]。但是如果有人调过这个，来个 1px 2px 3px 4px，变成 1px 2px 3px 4px 0 这个就不符合预期了

有道理，那改回来好了。

那现在这样就能 work 了 😂，我感觉没啥问题

也不解决问题的，如果用户写了 1px 2px 3px 4px，你的下面覆盖了 padding-left|right 它就变成了 1px 0 3px。如果是希望用户自定义，看起来应该是 menu-item-padding-vertical和 menu-item-padding-horizontal

afc163 · 2020-07-23T06:49:27Z

👍 看上去挺好的，这个 changelog 回头要加粗，感觉是挺大的设计变化。

afc163 · 2020-07-24T03:52:28Z

水平 Menu.Item 样式调整，激活状态的指示线宽度和下拉菜单的宽度调整为和 Menu.Item 内部内容一致。

Menu 水平模式的蓝色指示线宽度现在和文字一样长。

07akioni · 2020-07-24T05:55:50Z

水平 Menu.Item 样式调整，激活状态的指示线宽度和下拉菜单的宽度调整为和 Menu.Item 内部内容一致。

Menu 水平模式的蓝色指示线宽度现在和文字一样长。

Fixed

pr-triage bot added the PR: unreviewed label Jul 14, 2020

07akioni force-pushed the fix-menu-hor-style branch from 99d5357 to 7d36a24 Compare July 15, 2020 05:44

07akioni changed the title ~~refactor: Menu.Item horizontal style~~ style: 💄 update Menu.Item horizontal style Jul 15, 2020

github-actions bot force-pushed the fix-menu-hor-style branch from 7d36a24 to 065f334 Compare July 15, 2020 10:47

07akioni changed the title ~~style: 💄 update Menu.Item horizontal style~~ [WIP] style: 💄 update Menu.Item horizontal style Jul 15, 2020

pr-triage bot removed the PR: unreviewed label Jul 15, 2020

07akioni force-pushed the fix-menu-hor-style branch from 065f334 to 0e990a7 Compare July 23, 2020 05:57

afc163 reviewed Jul 23, 2020

View reviewed changes

07akioni changed the title ~~[WIP] style: 💄 update Menu.Item horizontal style~~ style: 💄 update Menu.Item horizontal style Jul 23, 2020

pr-triage bot added the PR: unreviewed label Jul 23, 2020

07akioni changed the base branch from master to feature July 23, 2020 11:14

07akioni added 4 commits July 23, 2020 19:27

refactor: menu style

16d7e4a

chore

d87873c

chore

316376b

fix: site style

c7973f7

07akioni force-pushed the fix-menu-hor-style branch from bd55898 to c7973f7 Compare July 23, 2020 11:29

afc163 approved these changes Jul 24, 2020

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Jul 24, 2020

07akioni merged commit f38f297 into feature Jul 24, 2020

07akioni deleted the fix-menu-hor-style branch July 24, 2020 06:39

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Jul 24, 2020

07akioni mentioned this pull request Jul 26, 2020

docs: changelog 4.5.0 #25820

Merged

matulef mentioned this pull request Jul 27, 2020

Menu with dark theme: selected item's background should have padding around content #25845

Closed

1 task

xrkffgg mentioned this pull request Aug 14, 2020

横向菜单超出部分隐藏功能BUG，深色皮肤能显示缩略号，浅色皮肤无法显示缩略号 #26199

Closed

1 task

mjfwebb mentioned this pull request Sep 5, 2020

Menu - hover and active effect not wide enough #26603

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style: 💄 update Menu.Item horizontal style #25622

style: 💄 update Menu.Item horizontal style #25622

07akioni commented Jul 14, 2020 •

edited

ant-design-bot commented Jul 14, 2020 •

edited

ant-design-bot commented Jul 14, 2020 •

edited

codesandbox-ci bot commented Jul 14, 2020 •

edited

afc163 commented Jul 14, 2020

codecov bot commented Jul 15, 2020 •

edited

afc163 commented Jul 15, 2020

afc163 commented Jul 15, 2020 •

edited

07akioni commented Jul 15, 2020

afc163 Jul 23, 2020

07akioni Jul 23, 2020

07akioni Jul 23, 2020

afc163 Jul 23, 2020

07akioni Jul 23, 2020 •

edited

zombieJ Jul 23, 2020

07akioni Jul 24, 2020

afc163 Jul 24, 2020

07akioni Jul 24, 2020

zombieJ Jul 24, 2020

afc163 commented Jul 23, 2020

afc163 commented Jul 24, 2020

07akioni commented Jul 24, 2020

style: 💄 update Menu.Item horizontal style #25622

style: 💄 update Menu.Item horizontal style #25622

Conversation

07akioni commented Jul 14, 2020 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

ant-design-bot commented Jul 14, 2020 • edited

ant-design-bot commented Jul 14, 2020 • edited

codesandbox-ci bot commented Jul 14, 2020 • edited

afc163 commented Jul 14, 2020

codecov bot commented Jul 15, 2020 • edited

Codecov Report

afc163 commented Jul 15, 2020

afc163 commented Jul 15, 2020 • edited

07akioni commented Jul 15, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

07akioni Jul 23, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Jul 23, 2020

afc163 commented Jul 24, 2020

07akioni commented Jul 24, 2020

07akioni commented Jul 14, 2020 •

edited

ant-design-bot commented Jul 14, 2020 •

edited

ant-design-bot commented Jul 14, 2020 •

edited

codesandbox-ci bot commented Jul 14, 2020 •

edited

codecov bot commented Jul 15, 2020 •

edited

afc163 commented Jul 15, 2020 •

edited

07akioni Jul 23, 2020 •

edited