Skip to content

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

Merged
zombieJ merged 3 commits intomasterfrom
fix-menu-icon-only
Mar 6, 2020
Merged

fix: MenuItem with icon only will still have additional margin#21925
zombieJ merged 3 commits intomasterfrom
fix-menu-icon-only

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

}

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

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

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

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

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

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

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

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

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 commented Mar 6, 2020

@codesandbox-ci
Copy link

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 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.

@zombieJ zombieJ merged commit e8876d5 into master Mar 6, 2020
@zombieJ zombieJ deleted the fix-menu-icon-only branch March 6, 2020 03:53
@afc163
Copy link
Member

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.

Icon not centered in horizontal menu item

3 participants