jesse3mh9a commented 4 years ago

🤔 This is a ...

[x] New feature
[ ] Bug fix
[ ] Site / documentation update
[x] Demo update
[x] 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

close #25678

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	Add action in Alert and replace with flexbox layout
🇨🇳 Chinese	自定义`action`在Alert组件中, 同时使用`flexbox`替代之前的布局

☑️ Self Check before Merge

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

[x] Doc is updated/provided or not needed
[x] Demo is updated/provided or not needed
[x] TypeScript definition is updated/provided or not needed
[x] Changelog is provided or not needed

jesse3mh9a commented 4 years ago

Note:

组件中root class加入actionable
组件内部设置wrap会溢出换行, action会换行到右侧, 在小容器里面, 文字和操作区域有更好的空间分配

ant-design-bot commented 4 years ago

jesse3mh9a commented 4 years ago

Large container:

Small container(wrap)

codesandbox-ci[bot] commented 4 years ago

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

Sandbox	Source
antd reproduction template	Configuration

07akioni commented 4 years ago

npm run test:update

afc163 commented 4 years ago

Please rebase feature

afc163 commented 4 years ago

关闭按钮的位置应该始终在右上角。

jesse3mh9a commented 4 years ago

关闭按钮的位置应该始终在右上角。

我调整了下

07akioni commented 4 years ago

更新一下 snapshot？测试还挂呢

jesse3mh9a commented 4 years ago

npm run test -- -u components/alert 我只更新了这里面提示有些别的里面

07akioni commented 4 years ago

npm run test -- -u components/alert 我只更新了这里面提示有些别的里面

你最好 rebase 一下之后清了重新安装 node_modules，有的包可能更新了 patch

afc163 commented 4 years ago

rebase 一下最新的 feature 分支。

jesse3mh9a commented 4 years ago

rebase 重新安装了还是报了些别地方的问题

xrkffgg commented 4 years ago

rebase 后，删除 lock，重新安装，然后更新下 snap ( yarn test -u )

xrkffgg commented 4 years ago

点进去可以看具体的错误信息

jesse3mh9a commented 4 years ago

嗯有删除 lock 我简单看了下详细是别的文件里面的明天有时间再看看🌝

afc163 commented 4 years ago

再 rebase 一下，我刚刚合并了 master 过来。

codecov[bot] commented 4 years ago

Codecov Report

Merging #25892 (b12a19f) into feature (25f1c23) will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff            @@
##           feature    #25892   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          392       392           
  Lines         7352      7353    +1     
  Branches      2098      2102    +4     
=========================================
+ Hits          7352      7353    +1

Impacted Files	Coverage Δ
components/alert/index.tsx	`100.00% <100.00%> (ø)`

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 25f1c23...b12a19f. Read the comment docs.

xrkffgg commented 4 years ago

点开可以看看哪行没覆盖

jesse3mh9a commented 4 years ago

all passed✅

jesse3mh9a commented 4 years ago

conflicted

好的收到

jesse3mh9a commented 4 years ago

@afc163 conflicted resolved

afc163 commented 4 years ago

action 应该在右上角。

单行应该和 x 保持一行。

jesse3mh9a commented 4 years ago

ok

jesse3mh9a commented 4 years ago

初步样式布局是这样的, 不知道能符合想要的效果不

afc163 commented 4 years ago

rebase 一下 feature。

jesse3mh9a commented 4 years ago

好的. 有段时间没follow了, 我看一下

jesse3mh9a commented 4 years ago

@afc163 all passed

afc163 commented 4 years ago

API 文档里补充一下 action 。

afc163 commented 4 years ago

比较上面两个页面的 icon 位置：

不带 description 的图标的左移了。
带 description 的图标的上移了。

afc163 commented 4 years ago

shouldClose 没看懂是啥意思。

hengkx commented 4 years ago

action我看文档也没明白是干啥的

hengkx commented 4 years ago

还有新增的属性记得加上版本下次的版本是 4.8.0，还有属性按照字母顺序排序

afc163 commented 4 years ago

shouldClose 没用的话删掉相关代码。

jesse3mh9a commented 4 years ago

好的明天我再看下

jesse3mh9a commented 4 years ago

https://ant.design/components/alert-cn/#components-alert-demo-icon

https://preview-25892-ant-design.surge.sh/components/alert-cn/#components-alert-demo-icon

比较上面两个页面的 icon 位置：

不带 description 的图标的左移了。

带 description 的图标的上移了。

已经调整了

afc163 commented 4 years ago

你两个页面在浏览器 tab 上切换着看吧，都还是有偏差。

afc163 commented 4 years ago

注意一下 x 的位置。

jesse3mh9a commented 4 years ago

bundlesize big?

jesse3mh9a commented 4 years ago

我检查了下 , 包括rtl compact , 布局位置都一致

jesse3mh9a commented 4 years ago

可以加入类似closable的actionable重写覆盖一些样式, 不过这样重写覆盖的样式代码有点多和复杂, 所以这里是在close-icon和closable中插入-mult-act替换一些样式。

逻辑上之前close也属于action, 如果 close和新加的action都存在, close将不再absolute, 就当作-mult-act.

afc163 commented 4 years ago

现在这个 x 的位置和不带 action 时 x 的位置不一致了。

尽量不要插入类似 -mult-act 这样的 className，感觉复杂了，css 体积也会增加不少，试试任何情况下都用 flex 做 close icon 的布局，不用 position: absolute。

jesse3mh9a commented 4 years ago

嗯我这样做了下, 大概的位置还可以一致, 不过 close icon 去掉 absolute 占据了空间会对长文本的 content 排版有点不一样, 这个要怎么解决呢? 还是这样没影响?

afc163 commented 3 years ago

现在也是预留 padding-right 来解决重叠问题的，本质上也是占据空间。改成 flex 后这个 padding-right 也可以去掉了。

jesse3mh9a commented 3 years ago

过几天看看

jesse3mh9a commented 3 years ago

npm start was failing after rebase feature

clear json.lock npm install

Variable @picker-time-panel-column-height is undefined

yoyo837 commented 3 years ago

这个变量有哦，再rebase看看？

jesse3mh9a commented 3 years ago

现在除了rtl还没对应调整, 其余模式下ui都和以前一致

ps: close icon 上下还有点问题

jesse3mh9a commented 3 years ago

除了rtl ui 现在一致了

ant-design / ant-design

feat: Add action in Alert and replace with flexbox layout #25892

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

Codecov Report