mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
feat: Timeline support titleSpan (#54072)
* chore: Timeline support titleSpan * test: update snapshot * docs: update doc * test: update snapshot
This commit is contained in:
二货爱吃白萝卜
@@ -27,7 +27,7 @@ const genIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
textAlign: 'center',
|
||||
borderRadius: 'var(--steps-icon-size)',
|
||||
border: `var(--steps-icon-border-width) ${token.lineType} transparent`,
|
||||
transition: ['background', 'border', 'color']
|
||||
transition: ['background', 'border', 'color', 'inset', 'transform']
|
||||
.map((key) => `${key} ${motionDurationSlow}`)
|
||||
.join(', '),
|
||||
zIndex: 1,
|
||||
|
||||
@@ -138,6 +138,7 @@ const genBasicStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
color: token.colorText,
|
||||
fontSize: `var(--steps-title-font-size)`,
|
||||
lineHeight: `var(--steps-title-line-height)`,
|
||||
wordBreak: 'break-word',
|
||||
},
|
||||
|
||||
// >>> Sub Title
|
||||
@@ -147,6 +148,7 @@ const genBasicStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
fontSize: `var(--steps-subtitle-font-size)`,
|
||||
lineHeight: `var(--steps-subtitle-line-height)`,
|
||||
marginInlineStart: token.marginXS,
|
||||
wordBreak: 'break-word',
|
||||
},
|
||||
|
||||
// Content
|
||||
@@ -154,6 +156,7 @@ const genBasicStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
wordBreak: 'break-word',
|
||||
},
|
||||
|
||||
// Rail
|
||||
|
||||
@@ -44,7 +44,7 @@ const genVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
.equal(),
|
||||
insetInlineStart: calc(`var(--steps-icon-size-max)`).div(2).equal(),
|
||||
bottom: calc('var(--steps-vertical-rail-margin)').sub('var(--steps-rail-offset)').equal(),
|
||||
transform: 'translateX(-50%)',
|
||||
marginInlineStart: `calc(var(--steps-rail-size) / -2)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -63,6 +63,7 @@ export interface TimelineProps {
|
||||
variant?: StepsProps['variant'];
|
||||
mode?: TimelineMode;
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
titleSpan?: string | number;
|
||||
|
||||
// Data
|
||||
items?: TimelineItemType[];
|
||||
@@ -102,6 +103,7 @@ const Timeline: CompoundedComponent = (props) => {
|
||||
variant = 'outlined',
|
||||
mode,
|
||||
orientation = 'vertical',
|
||||
titleSpan,
|
||||
|
||||
// Data
|
||||
items,
|
||||
@@ -228,6 +230,19 @@ const Timeline: CompoundedComponent = (props) => {
|
||||
}
|
||||
|
||||
// ==================== Render ======================
|
||||
const stepStyle: React.CSSProperties = {
|
||||
...contextStyle,
|
||||
...style,
|
||||
};
|
||||
|
||||
if (titleSpan && mergedMode !== 'alternate') {
|
||||
if (typeof titleSpan === 'number') {
|
||||
stepStyle['--timeline-head-span'] = titleSpan;
|
||||
} else {
|
||||
stepStyle['--timeline-head-span-ptg'] = titleSpan;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<InternalContext.Provider value={stepInternalContext}>
|
||||
<UnstableContext.Provider value={stepContext}>
|
||||
@@ -239,10 +254,7 @@ const Timeline: CompoundedComponent = (props) => {
|
||||
[`${prefixCls}-layout-alternate`]: layoutAlternate,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
})}
|
||||
style={{
|
||||
...contextStyle,
|
||||
...style,
|
||||
}}
|
||||
style={stepStyle}
|
||||
classNames={mergedClassNames}
|
||||
styles={mergedStyles}
|
||||
// Design
|
||||
|
||||
@@ -1452,210 +1452,6 @@ exports[`renders components/timeline/demo/horizontal-debug.tsx extend context co
|
||||
|
||||
exports[`renders components/timeline/demo/horizontal-debug.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/timeline/demo/label.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
|
||||
style="margin-bottom: 20px;"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="start"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="end"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
End
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="alternate"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Alternate
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset: 0;"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/label.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/timeline/demo/pending.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
|
||||
@@ -2094,6 +1890,612 @@ exports[`renders components/timeline/demo/semantic.tsx extend context correctly
|
||||
|
||||
exports[`renders components/timeline/demo/semantic.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/timeline/demo/title.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
|
||||
style="margin-bottom: 20px;"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="start"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="end"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
End
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="alternate"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Alternate
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset: 0;"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/title.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/timeline/demo/title-span.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
titleSpan = 100px
|
||||
</h5>
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset: 0; --timeline-head-span-ptg: 100px;"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
05:10
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
09:03
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
11:28
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
titleSpan = 25%
|
||||
</h5>
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset: 0; --timeline-head-span-ptg: 25%;"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
05:10
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
09:03
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
11:28
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
titleSpan = 18, mode = end
|
||||
</h5>
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset: 0; --timeline-head-span: 18;"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
05:10
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
09:03
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
11:28
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/title-span.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/timeline/demo/variant.tsx extend context correctly 1`] = `
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-filled ant-steps-dot ant-timeline css-var-test-id css-var-test-id"
|
||||
|
||||
@@ -1438,208 +1438,6 @@ exports[`renders components/timeline/demo/horizontal-debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/label.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
|
||||
style="margin-bottom:20px"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="start"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="end"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
End
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="alternate"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Alternate
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset:0"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/pending.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
|
||||
@@ -2067,6 +1865,608 @@ exports[`renders components/timeline/demo/semantic.tsx correctly 1`] = `
|
||||
</ol>
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/title.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
|
||||
style="margin-bottom:20px"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="start"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="end"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
End
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper css-var-test-id ant-radio-css-var"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="alternate"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-radio-label"
|
||||
>
|
||||
Alternate
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset:0"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
2015-09-01 09:12:11
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/title-span.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin:0"
|
||||
>
|
||||
titleSpan = 100px
|
||||
</h5>
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset:0;--timeline-head-span-ptg:100px"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
05:10
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
09:03
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
11:28
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin:0"
|
||||
>
|
||||
titleSpan = 25%
|
||||
</h5>
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset:0;--timeline-head-span-ptg:25%"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
05:10
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
09:03
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-start ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
11:28
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin:0"
|
||||
>
|
||||
titleSpan = 18, mode = end
|
||||
</h5>
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-outlined ant-steps-dot ant-timeline css-var-test-id ant-timeline-layout-alternate css-var-test-id"
|
||||
style="--steps-items-offset:0;--timeline-head-span:18"
|
||||
>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
05:10
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Create a services
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
09:03
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-empty-header ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-rail ant-steps-item-rail-finish ant-timeline-item-rail"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Technical testing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active ant-timeline-item-position-end ant-timeline-item"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-wrapper ant-timeline-item-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-icon ant-wave-target ant-timeline-item-icon"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-section ant-timeline-item-section"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-header ant-timeline-item-header"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title ant-timeline-item-title"
|
||||
>
|
||||
11:28
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/timeline/demo/variant.tsx correctly 1`] = `
|
||||
<ol
|
||||
class="ant-steps ant-steps-vertical ant-steps-title-horizontal ant-steps-filled ant-steps-dot ant-timeline css-var-test-id css-var-test-id"
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `label` 标签单独展示时间。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `label` show time alone.
|
||||
7
components/timeline/demo/title-span.md
Normal file
7
components/timeline/demo/title-span.md
Normal file
@@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `titleSpan` 设置标题占比空间。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `titleSpan` to set the title span space.
|
||||
45
components/timeline/demo/title-span.tsx
Normal file
45
components/timeline/demo/title-span.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { Flex, Timeline, Typography } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const sharedProps = {
|
||||
items: [
|
||||
{
|
||||
title: '05:10',
|
||||
content: 'Create a services',
|
||||
},
|
||||
{
|
||||
title: '09:03',
|
||||
content: 'Solve initial network problems',
|
||||
},
|
||||
{
|
||||
content: 'Technical testing',
|
||||
},
|
||||
{
|
||||
title: '11:28',
|
||||
content: 'Network problems being solved',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex vertical gap="middle">
|
||||
<Typography.Title level={5} style={{ margin: 0 }}>
|
||||
titleSpan = 100px
|
||||
</Typography.Title>
|
||||
<Timeline {...sharedProps} titleSpan="100px" />
|
||||
|
||||
<Typography.Title level={5} style={{ margin: 0 }}>
|
||||
titleSpan = 25%
|
||||
</Typography.Title>
|
||||
<Timeline {...sharedProps} titleSpan="25%" />
|
||||
|
||||
<Typography.Title level={5} style={{ margin: 0 }}>
|
||||
titleSpan = 18, mode = end
|
||||
</Typography.Title>
|
||||
<Timeline {...sharedProps} titleSpan={18} mode="end" />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
7
components/timeline/demo/title.md
Normal file
7
components/timeline/demo/title.md
Normal file
@@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `title` 标签单独展示时间。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `title` show time alone.
|
||||
@@ -26,7 +26,8 @@ demo:
|
||||
<code src="./demo/horizontal-debug.tsx" debug>Horizontal</code>
|
||||
<code src="./demo/custom.tsx">Custom</code>
|
||||
<code src="./demo/end.tsx">End alternate</code>
|
||||
<code src="./demo/label.tsx">Label</code>
|
||||
<code src="./demo/title.tsx">Title</code>
|
||||
<code src="./demo/title-span.tsx">Title Offset</code>
|
||||
<code src="./demo/semantic.tsx">Semantic Sample</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
@@ -44,6 +45,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| ~~pending~~ | Set the last ghost node's existence or its content. Use `item.loading` instead | ReactNode | false | |
|
||||
| ~~pendingDot~~ | Set the dot of the last ghost node when pending is true. Use `item.icon` instead | ReactNode | <LoadingOutlined /> | |
|
||||
| reverse | Whether reverse nodes or not | boolean | false | |
|
||||
| titleSpan | Set the title span space. It is the distance to the center of the dot <InlinePopover previewURL="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1NJISa7bpqgAAAAAR5AAAAgAerJ8AQ/original"></InlinePopover> | number \| string | 12 | |
|
||||
| variant | Config style variant | `filled` \| `outlined` | `outlined` | |
|
||||
|
||||
### Items
|
||||
|
||||
@@ -27,7 +27,8 @@ demo:
|
||||
<code src="./demo/horizontal-debug.tsx" debug>水平布局</code>
|
||||
<code src="./demo/custom.tsx">自定义时间轴点</code>
|
||||
<code src="./demo/end.tsx">另一侧时间轴点</code>
|
||||
<code src="./demo/label.tsx">标签</code>
|
||||
<code src="./demo/title.tsx">标题</code>
|
||||
<code src="./demo/title-span.tsx">标题占比</code>
|
||||
<code src="./demo/semantic.tsx">语义化自定义</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
@@ -45,6 +46,7 @@ demo:
|
||||
| ~~pending~~ | 指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替 | ReactNode | false | |
|
||||
| ~~pendingDot~~ | 当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替 | ReactNode | <LoadingOutlined /> | |
|
||||
| reverse | 节点排序 | boolean | false | |
|
||||
| titleSpan | 设置标题占比空间，为到 dot 中心点距离 <InlinePopover previewURL="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1NJISa7bpqgAAAAAR5AAAAgAerJ8AQ/original"></InlinePopover> | number \| string | 12 | |
|
||||
| variant | 设置样式变体 | `filled` \| `outlined` | `outlined` | |
|
||||
|
||||
### Items
|
||||
|
||||
@@ -97,8 +97,6 @@ const genHorizontalStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
|
||||
flexDirection: 'column-reverse',
|
||||
},
|
||||
|
||||
[`${itemCls}-section`]: {},
|
||||
|
||||
[`${itemCls}-rail`]: {
|
||||
top: 'auto',
|
||||
bottom: 'var(--steps-horizontal-rail-margin)',
|
||||
|
||||
@@ -135,49 +135,52 @@ const genVerticalStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
|
||||
|
||||
return {
|
||||
[`${componentCls}:not(${componentCls}-horizontal)`]: {
|
||||
'--timeline-head-span': '12',
|
||||
'--timeline-head-span-ptg': 'calc(var(--timeline-head-span) / 24 * 100%)',
|
||||
|
||||
// =============================================================
|
||||
// == Alternate ==
|
||||
// =============================================================
|
||||
[`&${componentCls}-layout-alternate`]: {
|
||||
[itemCls]: {
|
||||
'--timeline-alternate-gap': calc(token.margin)
|
||||
.mul(2)
|
||||
.add('var(--steps-dot-icon-size)')
|
||||
.equal(),
|
||||
|
||||
minHeight: 'auto',
|
||||
paddingBottom: itemPaddingBottom,
|
||||
|
||||
// Icon
|
||||
[`${itemCls}-icon`]: {
|
||||
position: 'absolute',
|
||||
},
|
||||
|
||||
// Icon & Rail
|
||||
[`${itemCls}-icon, ${itemCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: '50%',
|
||||
},
|
||||
transform: 'translateX(-50%)',
|
||||
insetInlineStart: 'var(--timeline-head-span-ptg)',
|
||||
},
|
||||
|
||||
// Icon
|
||||
[`${itemCls}-icon`]: {
|
||||
marginInlineStart: `calc(var(--steps-icon-size) / -2)`,
|
||||
},
|
||||
|
||||
// Section
|
||||
[`${itemCls}-section`]: {
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
gap: calc(token.margin).mul(2).add('var(--steps-dot-icon-size)').equal(),
|
||||
},
|
||||
|
||||
// >>> Header & Content
|
||||
[`${itemCls}-header, ${itemCls}-content`]: {
|
||||
flex: '1 1 50%',
|
||||
gap: 'var(--timeline-alternate-gap)',
|
||||
},
|
||||
|
||||
// >>> Header
|
||||
[`${itemCls}-header`]: {
|
||||
textAlign: 'end',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
flex: '1 1 calc(var(--timeline-head-span-ptg) - var(--timeline-alternate-gap) / 2)',
|
||||
},
|
||||
|
||||
// >>> Content
|
||||
[`${itemCls}-content`]: {
|
||||
textAlign: 'start',
|
||||
flex: '1 1 calc(100% - var(--timeline-head-span-ptg) - var(--timeline-alternate-gap) / 2)',
|
||||
},
|
||||
|
||||
// Position
|
||||
@@ -190,6 +193,10 @@ const genVerticalStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
|
||||
[`${itemCls}-content`]: {
|
||||
textAlign: 'end',
|
||||
},
|
||||
|
||||
[`${itemCls}-icon, ${itemCls}-rail`]: {
|
||||
insetInlineStart: 'calc(100% - var(--timeline-head-span-ptg))',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -208,7 +215,7 @@ const genVerticalStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
|
||||
[`${itemCls}-rail`]: {
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: 'calc(var(--steps-icon-size) / 2)',
|
||||
transform: 'translateX(50%)',
|
||||
marginInlineEnd: `calc(var(--steps-rail-size) / -2)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user