mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

fix: Steps inside Steps style (#27514)

Browse Source 
* style: fix style of Steps inside Steps

* fix snapshot and rtl

* fix rtl style
This commit is contained in:
偏右 2020-11-03 16:20:44 +08:00 committed by GitHub
parent db8569c069
commit 114dde6373
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 340 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2794,6 +2794,274 @@ Array [
]
`;
exports[`renders ./components/steps/demo/steps-in-steps.md correctly 1`] = `
Array [
<div
class="ant-radio-group ant-radio-group-outline"
style="margin-bottom:16px"
>
<label
class="ant-radio-wrapper"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="small"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
Small
</span>
</label>
<label
class="ant-radio-wrapper ant-radio-wrapper-checked"
>
<span
class="ant-radio ant-radio-checked"
>
<input
checked=""
class="ant-radio-input"
type="radio"
value="default"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
Default
</span>
</label>
</div>,
<div
class="ant-steps ant-steps-vertical ant-steps-default"
>
<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"
>
1
</span>
</div>
<div
class="ant-steps-item-content"
>
<div
class="ant-steps-item-title"
>
Finished
</div>
<div
class="ant-steps-item-description"
>
<div
class="ant-card ant-card-bordered"
>
<div
class="ant-card-body"
>
<div
class="ant-steps ant-steps-horizontal ant-steps-default ant-steps-label-horizontal"
>
<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"
>
1
</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-wait"
>
<div
class="ant-steps-item-container"
>
<div
class="ant-steps-item-tail"
/>
<div
class="ant-steps-item-icon"
>
<span
class="ant-steps-icon"
>
2
</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"
>
3
</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>
</div>
</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"
>
2
</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"
>
3
</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>,
]
`;
exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
<div
class="ant-steps ant-steps-vertical"

54
components/steps/demo/steps-in-steps.md Normal file
View File

@ -0,0 +1,54 @@
---
order: 99
debug: true
title:
zh-CN: Steps 嵌套 Steps
en-US: Steps inside Steps
---
## zh-CN
测试 Steps 嵌套 Steps 的样式。
## en-US
Test style of Steps inside Steps.
```jsx
import React, { useState } from 'react';
import { Steps, Radio, Card } from 'antd';
const { Step } = Steps;
const App = () => {
const [size, setSize] = useState('default');
const horizontalSteps = (
<Card>
<Steps size={size}>
<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>
</Card>
);
return (
<>
<Radio.Group
style={{ marginBottom: 16 }}
value={size}
onChange={e => setSize(e.target.value)}
>
<Radio value="small">Small</Radio>
<Radio value="default">Default</Radio>
</Radio.Group>
<Steps size={size} direction="vertical">
<Step title="Finished" description={horizontalSteps} />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
</>
);
};
ReactDOM.render(<App />, mountNode);
```

6
components/steps/style/index.less
View File

@ -41,7 +41,7 @@
}
&:last-child {
flex: none;
flex: none !important;
}
&:last-child > &-container > &-tail,
@ -123,13 +123,13 @@
}
.step-item-status(wait);
.step-item-status(process);
&-process &-icon {
&-process > &-container > &-icon {
background: @process-icon-color;
.@{steps-prefix-cls}-icon {
color: @process-icon-text-color;
}
}
&-process &-title {
&-process > &-container > &-title {
font-weight: 500;
}
.step-item-status(finish);

13
components/steps/style/rtl.less
View File

@ -137,10 +137,6 @@
// vertical
.steps-vertical() {
.@{steps-prefix-cls}-item {
.@{steps-prefix-cls}-rtl& {
padding-right: 0 !important;
}
&-icon {
.@{steps-prefix-cls}-rtl& {
float: right;
@ -251,3 +247,12 @@
}
}
}
@media (max-width: @screen-xs) {
.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
// https://github.com/ant-design/ant-design/issues/27498
.@{steps-prefix-cls}-item {
padding-right: 0 !important;
}
}
}

7
components/steps/style/vertical.less
View File

@ -4,7 +4,7 @@
.@{steps-prefix-cls}-item {
display: block;
flex: 1 0 auto;
padding-left: 0 !important;
padding-left: 0;
overflow: visible;
&-icon {
@ -75,5 +75,10 @@
@media (max-width: @screen-xs) {
.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
.steps-vertical;
// https://github.com/ant-design/ant-design/issues/27498
.@{steps-prefix-cls}-item {
padding-left: 0 !important;
}
}
}