Skip to content

Commit

Permalink
🐛 Fix Steps vertical progressDot style (ant-design#18356)
Browse files Browse the repository at this point in the history 
broken via ant-design#17994

close ant-design#18354
  • Loading branch information
@afc163 @lewis617
afc163 authored and lewis617 committed Aug 22, 2019
1 parent c9dc181 commit 282d8c2
Show file tree
Hide file tree
Showing 3 changed files with 260 additions and 59 deletions.
294 changes: 242 additions & 52 deletions components/steps/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
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"
>
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-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>
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-content"
class="ant-steps-item-container"
>
<div
class="ant-steps-item-title"
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
Finished
<span
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"
>
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>
class="ant-steps-icon"
>
<span
class="ant-steps-icon-dot"
/>
</span>
</div>
<div
class="ant-steps-item-content"
>
<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-process ant-steps-item-active"
>
<div
class="ant-steps-item-content"
class="ant-steps-item-container"
>
<div
class="ant-steps-item-title"
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
In Progress
<span
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-wait"
>
<div
class="ant-steps-item-tail"
/>
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-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>
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-content"
class="ant-steps-item-container"
>
<div
class="ant-steps-item-title"
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
Waiting
<span
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"
>
Waiting
</div>
<div
class="ant-steps-item-description"
>
This is a description.
</div>
</div>
</div>
</div>
Expand Down
22 changes: 16 additions & 6 deletions components/steps/demo/progress-dot.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 2 additions & 1 deletion components/steps/style/progress-dot.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 282d8c2

Please sign in to comment.