mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
fix(steps): fix steps style (#39100)
* fix(steps): fix steps style * docs(steps): update demo * style: formater * docs(steps): update demo * test: update snapshot * fix(steps): fix the line style in vertical state * chore: supplement 8abeac7643 * fix: coverage
This commit is contained in:
Wuxh
GitHub
parent
880a57298e
commit
a7f94d5457
@ -2989,62 +2989,67 @@ exports[`renders ./components/steps/demo/progress.tsx extend context correctly 1
|
||||
|
||||
exports[`renders ./components/steps/demo/progress-debug.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<span>
|
||||
Percentage to undefined
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Percentage +
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Current +
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Wait
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Process
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Finish
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Error
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Percentage to undefined
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Percentage +
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Current +
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Wait
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Process
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Finish
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Error
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
|
||||
>
|
||||
|
||||
@ -2557,62 +2557,67 @@ exports[`renders ./components/steps/demo/progress.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/steps/demo/progress-debug.tsx correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
<span>
|
||||
Percentage to undefined
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Percentage +
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Current +
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Wait
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Process
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Finish
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Error
|
||||
</span>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Percentage to undefined
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Percentage +
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Current +
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Wait
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Process
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Finish
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Status Error
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
|
||||
>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { StepsProps } from 'antd';
|
||||
import { Button, Steps } from 'antd';
|
||||
import { Button, Steps, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [percent, setPercentage] = useState(0);
|
||||
const [percent, setPercentage] = useState<number | undefined>(0);
|
||||
const [current, setCurrent] = useState(1);
|
||||
const [status, setStatus] = useState<StepsProps['status']>('process');
|
||||
const description = 'This is a description.';
|
||||
@ -24,20 +24,18 @@ const App: React.FC = () => {
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setPercentage(0)}>Percentage to undefined</Button>
|
||||
<Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCurrent((current + 1) % 3);
|
||||
setPercentage(0);
|
||||
}}
|
||||
>
|
||||
Current +
|
||||
</Button>
|
||||
<Button onClick={() => setStatus('wait')}>Status Wait</Button>
|
||||
<Button onClick={() => setStatus('process')}>Status Process</Button>
|
||||
<Button onClick={() => setStatus('finish')}>Status Finish</Button>
|
||||
<Button onClick={() => setStatus('error')}>Status Error</Button>
|
||||
<Space.Compact block>
|
||||
<Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
|
||||
<Button onClick={() => setPercentage((prev) => ((prev ?? 0) + 10) % 100)}>
|
||||
Percentage +
|
||||
</Button>
|
||||
<Button onClick={() => setCurrent((prev) => (prev + 1) % 3)}>Current +</Button>
|
||||
<Button onClick={() => setStatus('wait')}>Status Wait</Button>
|
||||
<Button onClick={() => setStatus('process')}>Status Process</Button>
|
||||
<Button onClick={() => setStatus('finish')}>Status Finish</Button>
|
||||
<Button onClick={() => setStatus('error')}>Status Error</Button>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Steps current={current} percent={percent} status={status} items={items} />
|
||||
<Steps current={current} percent={percent} status={status} size="small" items={items} />
|
||||
<Steps
|
||||
|
||||
@ -16,18 +16,26 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
|
||||
{
|
||||
[`&${componentCls}-vertical > ${componentCls}-item `]: {
|
||||
paddingInlineStart: token.paddingXXS,
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: token.marginXXS,
|
||||
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-horizontal`]: {
|
||||
[`${componentCls}-item:first-child`]: {
|
||||
[`&, &${componentCls}-small`]: {
|
||||
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
|
||||
paddingBottom: token.paddingXXS,
|
||||
paddingInlineStart: token.paddingXXS,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
|
||||
{
|
||||
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
|
||||
},
|
||||
|
||||
[`&${componentCls}-label-vertical`]: {
|
||||
[`${componentCls}-item ${componentCls}-item-tail`]: {
|
||||
top: token.margin - 2 * token.lineWidth,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user