test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

🐛 Fix Steps vertical progressDot style (#18356)

Browse Source 
broken via #17994

close #18354
This commit is contained in:
偏右 2019-08-20 12:31:52 +08:00 committed by GitHub
parent 3518f562c2
commit 14308db289
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 277 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
components/steps/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1189,113 +1189,303 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
`;
exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
<div
class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
>
<div>
<div
class="ant-steps-item ant-steps-item-finish"
class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
>
<div
class="ant-steps-item-container"
class="ant-steps-item ant-steps-item-finish"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
class="ant-steps-item-container"
>
<span
class="ant-steps-icon"
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Finished
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-description"
class="ant-steps-item-content"
>
This is a description.
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<div
class="ant-steps ant-steps-vertical ant-steps-dot"
>
<div
class="ant-steps-item-container"
class="ant-steps-item ant-steps-item-finish"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
class="ant-steps-item-container"
>
<span
class="ant-steps-icon"
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-description"
class="ant-steps-item-content"
>
This is a description.
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description. This is a description.
</div>
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
class="ant-steps-item-container"
>
<span
class="ant-steps-icon"
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-description"
class="ant-steps-item-content"
>
This is a description.
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
This is a description. This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
In Progress
</div>
<div
class="ant-steps-item-description"
>
This is a description. This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
<div
class="ant-steps-item ant-steps-item-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>

22
components/steps/demo/progress-dot.md
View File

@ -14,16 +14,26 @@ title:
Steps with progress dot style.
```jsx
import { Steps } from 'antd';
import { Steps, Divider } from 'antd';
const { Step } = Steps;
ReactDOM.render(
<Steps progressDot current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>,
<div>
<Steps progressDot current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<Divider />
<Steps progressDot current={1} direction="vertical">
<Step title="Finished" description="This is a description. This is a description." />
<Step title="Finished" description="This is a description. This is a description." />
<Step title="In Progress" description="This is a description. This is a description." />
<Step title="Waiting" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
</div>,
mountNode,
);
```

3
components/steps/style/progress-dot.less
View File

@ -63,7 +63,8 @@
margin-top: 8px;
margin-left: 0;
}
.@{steps-prefix-cls}-item-tail {
// https://github.com/ant-design/ant-design/issues/18354
.@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
top: 2px;
left: -9px;
margin: 0;