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

style: 💄 update Menu.Item horizontal style #25622

Merged
merged 4 commits into from Jul 24, 2020
Merged

Conversation

07akioni
Copy link
Contributor

@07akioni 07akioni commented Jul 14, 2020

[中文版模板 / 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
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

image
image

💡 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
Copy link
Contributor

ant-design-bot commented Jul 14, 2020

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jul 14, 2020

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 14, 2020

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
Copy link
Member

afc163 commented Jul 14, 2020

改了啥?

@07akioni 07akioni changed the title refactor: Menu.Item horizontal style style: 💄 update Menu.Item horizontal style Jul 15, 2020
@codecov
Copy link

codecov bot commented Jul 15, 2020

Codecov Report

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

Impacted file tree graph

@@           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
Copy link
Member

afc163 commented Jul 15, 2020

/rebase

@afc163
Copy link
Member

afc163 commented Jul 15, 2020

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

@07akioni
Copy link
Contributor Author

07akioni commented Jul 15, 2020

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

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

@07akioni 07akioni changed the title style: 💄 update Menu.Item horizontal style [WIP] style: 💄 update Menu.Item horizontal style Jul 15, 2020
padding: @menu-item-padding;
padding-right: 0;
padding-left: 0;
Copy link
Member

@afc163 afc163 Jul 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
padding: @menu-item-padding;
padding-right: 0;
padding-left: 0;
padding: @menu-item-padding 0;

Copy link
Contributor Author

@07akioni 07akioni Jul 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@07akioni 07akioni Jul 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@afc163 afc163 Jul 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以的,你试试先。

Copy link
Contributor Author

@07akioni 07akioni Jul 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@zombieJ zombieJ Jul 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 20px 反了?

Copy link
Contributor Author

@07akioni 07akioni Jul 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@afc163 afc163 Jul 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有道理,那改回来好了。

Copy link
Contributor Author

@07akioni 07akioni Jul 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@zombieJ zombieJ Jul 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@afc163
Copy link
Member

afc163 commented Jul 23, 2020

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

@07akioni 07akioni changed the title [WIP] style: 💄 update Menu.Item horizontal style style: 💄 update Menu.Item horizontal style Jul 23, 2020
@07akioni 07akioni changed the base branch from master to feature Jul 23, 2020
@afc163
Copy link
Member

afc163 commented Jul 24, 2020

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

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

@07akioni
Copy link
Contributor Author

07akioni commented Jul 24, 2020

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

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

Fixed

afc163
afc163 approved these changes Jul 24, 2020
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

4 participants