fix: menu inline collapsed show without icon #24330

xrkffgg · 2020-05-20T16:53:14Z

[中文版模板 / Chinese template]

🤔 This is a ...

🔗 Related issue link

close #24311

💡 Background and solution

Use Avatar component to automatically adjust the font size of content

Rendering

📝 Changelog

Language	Changelog
🇺🇸 English	Adjust text shows the first character when Menu is collapsed in inline mode.
🇨🇳 Chinese	调整 Menu inline 模式下未设置 icon 的菜单收起时文字显示第一个字符。

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

View rendered components/menu/demo/inline-collapsed.md

github-actions

https://preview-24330-ant-design.surge.sh

https://preview-24330-ant-design.surge.sh/components/button

ant-design-bot · 2020-05-20T16:56:31Z

xrkffgg · 2020-05-20T16:57:20Z

ant-design/components/avatar/index.tsx

Line 88 in f646b6f

scale: nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1,

Avatar 默认两边各留了 4px 的边界，计划增加一个 API 可以控制这个值

这样的话，在这个地方会更完善一些

@afc163

what do you think?

codecov · 2020-05-21T00:15:21Z

Codecov Report

Merging #24330 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #24330   +/-   ##
=======================================
  Coverage   99.10%   99.10%           
=======================================
  Files         363      363           
  Lines        7230     7234    +4     
  Branches     1966     2009   +43     
=======================================
+ Hits         7165     7169    +4     
  Misses         65       65

Impacted Files	Coverage Δ
components/menu/MenuItem.tsx	`96.87% <100.00%> (+0.20%)`	⬆️
components/menu/SubMenu.tsx	`94.73% <100.00%> (+0.61%)`	⬆️

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 89d7101...1a17a7e. Read the comment docs.

xrkffgg · 2020-05-21T01:06:11Z

/rebase

afc163 · 2020-05-21T03:06:23Z

Avatar 默认两边各留了 4px 的边界，计划增加一个 API 可以控制这个值

可行，不过就要发到 feature 分支了。

afc163 · 2020-05-21T03:07:04Z

文字一多就没法读，试着拿第一个字符吧。

afc163 · 2020-05-21T06:12:33Z

components/menu/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import '../../avatar/index';


样式依赖要放在 style/index.ts 中。

xrkffgg · 2020-05-21T06:23:27Z

dark

light

xrkffgg · 2020-05-21T06:25:09Z

😂😂😂 如果是第一个字符，完全没必要 Avatar 了啊

afc163 · 2020-05-21T06:26:19Z

带个圈当背景，图形整体性会强很多。

afc163 · 2020-05-21T06:26:37Z

一个 N/O 感觉像是乱码。

xrkffgg · 2020-05-21T06:33:14Z

xrkffgg · 2020-05-21T06:37:49Z

我觉得有必要确认下要用哪种方式 😂😂

如果带圈，圈的的大小，边框色，背景色都需权衡下

xrkffgg · 2020-05-21T06:47:29Z

yoyo837 · 2020-05-21T06:49:36Z

这种时候该视觉的同志勇敢的站出来说话了

zombieJ · 2020-05-21T13:35:15Z

这么看似乎都不用 Avatar 了，直接 children 第一个字母就成了。

afc163 · 2020-05-22T08:36:06Z

那就首字母吧，不用 Avatar 了。

xrkffgg · 2020-05-23T01:19:37Z

那就首字母吧，不用 Avatar 了。

首字母的话，需要带圈吗？实心圈还是光有边框的？

hengkx · 2020-05-23T01:22:07Z

首字母一样岂不是很尴尬

ant-design-bot · 2020-05-27T09:56:07Z

ant-design-bot · 2020-05-27T09:59:58Z

xrkffgg · 2020-05-27T10:05:44Z

components/menu/MenuItem.tsx

    // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
    // ref: https://github.com/ant-design/ant-design/pull/23456
    if (!icon || (isValidElement(children) && children.type === 'span')) {
+      if (children && inlineCollapsed && level === 1 && typeof children === 'string') {
+        return <p>{children.charAt(0)}</p>;
+      }
      return children;


其实 children 为空的话，要不要 span 都行。
换了种方式，保持原有 snap 。

为啥是 p ？

用 span 加 className 呢。

试了 span ，不太行。换成了 div

ant-design-bot · 2020-05-27T10:05:58Z

ant-design-bot · 2020-05-27T10:10:01Z

xrkffgg · 2020-05-27T10:30:24Z

图标是span，没办法区分，然后用了p

xrkffgg · 2020-05-27T10:36:54Z

加class可以，我晚上改成这种的。

ant-design-bot · 2020-05-27T14:07:51Z

ant-design-bot · 2020-05-27T14:12:05Z

zombieJ · 2020-05-27T14:53:10Z

@shaodahong，用更新的方式更新 UI test 评论，否则留言太多了。

shaodahong · 2020-05-27T14:54:39Z

@shaodahong，用更新的方式更新 UI test 评论，否则留言太多了。

嗯。是这么做的，但是 rebase 后的评论就拉不到了……

shaodahong · 2020-05-27T14:55:08Z

fetch https://api.github.com/repos/ant-design/ant-design/issues/24330/comments

zombieJ · 2020-05-28T09:00:23Z

嗯。是这么做的，但是 rebase 后的评论就拉不到了……

神奇……

pr-triage bot added the PR: unreviewed label May 20, 2020

reviewflow bot assigned xrkffgg May 20, 2020

github-actions bot reviewed May 20, 2020

View reviewed changes

github-actions bot force-pushed the fix-menu branch from fc100a8 to 68bc12b Compare May 21, 2020 01:07

afc163 reviewed May 21, 2020

View reviewed changes

xrkffgg assigned zombieJ, yoyo837, hengkx, shangguanhongzhou, shaodahong and AshoneA May 21, 2020

xrkffgg mentioned this pull request May 21, 2020

feat: add avatar gap api #24357

Merged

17 tasks

xrkffgg changed the title ~~fix: menu inline collapsed show without icon~~ wip fix: menu inline collapsed show without icon May 27, 2020

pr-triage bot removed the PR: unreviewed label May 27, 2020

fix snap

820ae11

xrkffgg changed the title ~~wip fix: menu inline collapsed show without icon~~ fix: menu inline collapsed show without icon May 27, 2020

pr-triage bot added the PR: unreviewed label May 27, 2020

xrkffgg commented May 27, 2020

View reviewed changes

add class

1a17a7e

afc163 merged commit 9b54bd7 into master May 27, 2020

afc163 deleted the fix-menu branch May 27, 2020 14:19

pr-triage bot added PR: merged and removed PR: unreviewed labels May 27, 2020

ant-design deleted a comment from ant-design-bot May 28, 2020

zombieJ mentioned this pull request May 31, 2020

docs: 4.3.0 changelog #24607

Merged

13 tasks

zombieJ unassigned AshoneA, hengkx, yoyo837, shaodahong and xrkffgg Feb 16, 2021

fix: menu inline collapsed show without icon #24330

fix: menu inline collapsed show without icon #24330

Conversation

xrkffgg commented May 20, 2020 • edited by afc163 Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

Rendering

📝 Changelog

☑️ Self Check before Merge

github-actions bot left a comment • edited Loading

Choose a reason for hiding this comment

ant-design-bot commented May 20, 2020 • edited Loading

xrkffgg commented May 20, 2020

codecov bot commented May 21, 2020 • edited Loading

Codecov Report

xrkffgg commented May 21, 2020

afc163 commented May 21, 2020 • edited Loading

afc163 commented May 21, 2020 • edited Loading

afc163 May 21, 2020

Choose a reason for hiding this comment

xrkffgg commented May 21, 2020

dark

light

xrkffgg commented May 21, 2020

afc163 commented May 21, 2020

afc163 commented May 21, 2020

xrkffgg commented May 21, 2020

xrkffgg commented May 21, 2020 • edited Loading

xrkffgg commented May 21, 2020

yoyo837 commented May 21, 2020

zombieJ commented May 21, 2020

afc163 commented May 22, 2020

xrkffgg commented May 23, 2020

hengkx commented May 23, 2020

ant-design-bot commented May 27, 2020

ant-design-bot commented May 27, 2020

xrkffgg May 27, 2020 • edited Loading

Choose a reason for hiding this comment

afc163 May 27, 2020

Choose a reason for hiding this comment

afc163 May 27, 2020

Choose a reason for hiding this comment

xrkffgg May 27, 2020

Choose a reason for hiding this comment

ant-design-bot commented May 27, 2020

ant-design-bot commented May 27, 2020

xrkffgg commented May 27, 2020 via email • edited Loading

xrkffgg commented May 27, 2020 via email • edited Loading

ant-design-bot commented May 27, 2020

ant-design-bot commented May 27, 2020

zombieJ commented May 27, 2020

shaodahong commented May 27, 2020

shaodahong commented May 27, 2020

zombieJ commented May 28, 2020

xrkffgg commented May 20, 2020 •

edited by afc163

Loading

github-actions bot left a comment •

edited

Loading

ant-design-bot commented May 20, 2020 •

edited

Loading

codecov bot commented May 21, 2020 •

edited

Loading

afc163 commented May 21, 2020 •

edited

Loading

afc163 commented May 21, 2020 •

edited

Loading

xrkffgg commented May 21, 2020 •

edited

Loading

xrkffgg May 27, 2020 •

edited

Loading

xrkffgg commented May 27, 2020 via email •

edited

Loading

xrkffgg commented May 27, 2020 via email •

edited

Loading