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

fix: MenuItem with icon only will still have additional margin #21925

Merged
merged 3 commits into from Mar 6, 2020

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Mar 6, 2020

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

fix #21917

💡 Background and solution

css selector can not handle text node. Add additional className for check if only one child.

📝 Changelog

Language Changelog
🇺🇸 English Fix MenuItem in horizontal Menu with only one icon still have extra margin.
🇨🇳 Chinese 修复 Menu 水平模式下 MenuItem 只有一个 Icon 的时候仍然有额外 margin 的问题。

☑️ 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

@@ -203,6 +203,16 @@
margin-left: 10px;
}
}

&.@{menu-prefix-cls}-item-only-child {
.@{iconfont-css-prefix} {
Copy link
Member

@afc163 afc163 Mar 6, 2020

Choose a reason for hiding this comment

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

能不能用 .@{iconfont-css-prefix}:only-child 伪类?

Copy link
Member Author

@zombieJ zombieJ Mar 6, 2020

Choose a reason for hiding this comment

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

css selector can not handle text node. Add additional className for check if only one child.

Copy link
Member Author

@zombieJ zombieJ Mar 6, 2020

Choose a reason for hiding this comment

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

:last-child :only-child 都试过了,text node 都选不出来。

Copy link
Member

@afc163 afc163 Mar 6, 2020

Choose a reason for hiding this comment

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

为啥需要选 text node,不是 icon 么。

https://codepen.io/afc163-1472555193/pen/qBdPGXW

Copy link
Member Author

@zombieJ zombieJ Mar 6, 2020

Choose a reason for hiding this comment

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

因为你只选择了 mail 的图标……试试下面这个:

- .anticon.anticon-mail:only-child {
+ .anticon:only-child {

Copy link
Member Author

@zombieJ zombieJ Mar 6, 2020

Choose a reason for hiding this comment

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

截屏2020-03-06上午11 24 22

Copy link
Member

@afc163 afc163 Mar 6, 2020

Choose a reason for hiding this comment

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

.ant-menu-item > .anticon:only-child {
  margin-right: 0;
}

这样如何

Copy link
Member Author

@zombieJ zombieJ Mar 6, 2020

Choose a reason for hiding this comment

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

外层 selector 是没用的, text node 是选不到的。

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Mar 6, 2020

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Mar 6, 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 17e831d:

Sandbox Source
antd reproduction template Configuration

@codecov
Copy link

@codecov codecov bot commented Mar 6, 2020

Codecov Report

Merging #21925 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #21925   +/-   ##
=======================================
  Coverage   97.96%   97.96%           
=======================================
  Files         305      305           
  Lines        7015     7015           
  Branches     1933     1934    +1     
=======================================
  Hits         6872     6872           
  Misses        143      143
Impacted Files Coverage Δ
components/menu/MenuItem.tsx 94.73% <100%> (ø) ⬆️

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 36c05dd...17e831d. Read the comment docs.

afc163
afc163 approved these changes Mar 6, 2020
@zombieJ zombieJ merged commit e8876d5 into master Mar 6, 2020
29 checks passed
@zombieJ zombieJ deleted the fix-menu-icon-only branch Mar 6, 2020
@afc163
Copy link
Member

@afc163 afc163 commented Mar 8, 2020

close #21984 too

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.

3 participants