[Bug] Steps progressDot 无法放置在小容器中

[RaoHai]

重现链接

https://codesandbox.io/s/antd-reproduction-template-forked-clfri?file=/index.js:533-544

antd 版本

4.16.3

重现步骤

<div style={{ width: 200, border: "1px solid blue", margin: 20 }}>
      <Steps progressDot size="small">
        <Steps.Step>1</Steps.Step>
        <Steps.Step>2</Steps.Step>
        <Steps.Step>3</Steps.Step>
        <Steps.Step>4</Steps.Step>
      </Steps>
    </div>

期望的结果是什么？

能正确容纳在小容器中

实际的结果是什么？

浏览器

No response

浏览器版本

No response

操作系统

No response

其他

[zombieJ]

感觉可以用 flex 重搞一下结构

[zombieJ]

patch: https://codesandbox.io/s/blissful-gagarin-7gsrv?file=/src/styles.css

[zombieJ]

看起来每个 Step 固定宽度是 By Design，加了一个 improvement 标签先

[afc163]

Steps 本身也有类似问题。

[zombieJ]

patch: https://codesandbox.io/s/blissful-gagarin-7gsrv?file=/src/styles.css

和设计师沟通了一下，下一版 Steps 会一些些不一样。还没定稿，先不重构结构。

[afc163]

@RaoHai 临时补丁包：https://codesandbox.io/s/zi-ding-yi-dian-zhuang-bu-zou-tiao-antd-4-17-0-alpha-9-forked-42l6k?file=/index.css

[afc163]

可以把样式里的

ant-design/components/style/themes/default.less

Line 1031 in 2f96995

@steps-description-max-width: 140px;

这个完全改成 JS 控制。