Skip to content

Commit e49e72d

Browse files
shifeng1993shifeng1993
authored
fix: components bug & update docs (#6548)
* fix bug * fix test case and update snapshot,fix space merge class
1 parent 149cedd commit e49e72d

File tree

14 files changed

+192
-158
lines changed

14 files changed

+192
-158
lines changed

‎components/layout/__tests__/__snapshots__/demo.test.js.snap

+52-38
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,58 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`renders ./components/layout/demo/basic.vue correctly 1`] = `
4-
<section class="ant-layout">
5-
<header class="ant-layout-header">Header</header>
6-
<main class="ant-layout-content">Content</main>
7-
<footer class="ant-layout-footer">Footer</footer>
8-
</section>
9-
<section class="ant-layout">
10-
<header class="ant-layout-header">Header</header>
11-
<section class="ant-layout">
12-
<aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
13-
<div class="ant-layout-sider-children">Sider</div>
14-
<!---->
15-
</aside>
16-
<main class="ant-layout-content">Content</main>
17-
</section>
18-
<footer class="ant-layout-footer">Footer</footer>
19-
</section>
20-
<section class="ant-layout">
21-
<header class="ant-layout-header">Header</header>
22-
<section class="ant-layout">
23-
<main class="ant-layout-content">Content</main>
24-
<aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
25-
<div class="ant-layout-sider-children">Sider</div>
26-
<!---->
27-
</aside>
28-
</section>
29-
<footer class="ant-layout-footer">Footer</footer>
30-
</section>
31-
<section class="ant-layout">
32-
<aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
33-
<div class="ant-layout-sider-children">Sider</div>
34-
<!---->
35-
</aside>
36-
<section class="ant-layout">
37-
<header class="ant-layout-header">Header</header>
38-
<main class="ant-layout-content">Content</main>
39-
<footer class="ant-layout-footer">Footer</footer>
40-
</section>
41-
</section>
4+
<div style="width: 100%;" class="ant-space ant-space-vertical">
5+
<div class="ant-space-item" style="margin-bottom: 0px;">
6+
<section class="ant-layout">
7+
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
8+
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
9+
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
10+
</section>
11+
</div>
12+
<!---->
13+
<div class="ant-space-item" style="margin-bottom: 0px;">
14+
<section class="ant-layout">
15+
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
16+
<section class="ant-layout">
17+
<aside style="text-align: center; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(59, 160, 233); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
18+
<div class="ant-layout-sider-children">Sider</div>
19+
<!---->
20+
</aside>
21+
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
22+
</section>
23+
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
24+
</section>
25+
</div>
26+
<!---->
27+
<div class="ant-space-item" style="margin-bottom: 0px;">
28+
<section class="ant-layout">
29+
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
30+
<section class="ant-layout">
31+
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
32+
<aside style="text-align: center; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(59, 160, 233); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
33+
<div class="ant-layout-sider-children">Sider</div>
34+
<!---->
35+
</aside>
36+
</section>
37+
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
38+
</section>
39+
</div>
40+
<!---->
41+
<div class="ant-space-item">
42+
<section class="ant-layout">
43+
<aside style="text-align: center; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(59, 160, 233); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
44+
<div class="ant-layout-sider-children">Sider</div>
45+
<!---->
46+
</aside>
47+
<section class="ant-layout">
48+
<header class="ant-layout-header" style="text-align: center; color: rgb(255, 255, 255); padding-inline: 50; line-height: 64px; background-color: rgb(125, 188, 234);">Header</header>
49+
<main class="ant-layout-content" style="text-align: center; min-height: 120; line-height: 120px; color: rgb(255, 255, 255); background-color: rgb(16, 142, 233);">Content</main>
50+
<footer class="ant-layout-footer" style="text-align: center; color: rgb(255, 255, 255); background-color: rgb(125, 188, 234);">Footer</footer>
51+
</section>
52+
</section>
53+
</div>
54+
<!---->
55+
</div>
4256
`;
4357

4458
exports[`renders ./components/layout/demo/custom-trigger.vue correctly 1`] = `

‎components/layout/demo/basic.vue

+56-62
Original file line numberDiff line numberDiff line change
@@ -16,76 +16,70 @@ Classic page layouts.
1616

1717
</docs>
1818
<template>
19-
<a-layout>
20-
<a-layout-header>Header</a-layout-header>
21-
<a-layout-content>Content</a-layout-content>
22-
<a-layout-footer>Footer</a-layout-footer>
23-
</a-layout>
19+
<a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
20+
<a-layout>
21+
<a-layout-header :style="headerStyle">Header</a-layout-header>
22+
<a-layout-content :style="contentStyle">Content</a-layout-content>
23+
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
24+
</a-layout>
2425

25-
<a-layout>
26-
<a-layout-header>Header</a-layout-header>
2726
<a-layout>
28-
<a-layout-sider>Sider</a-layout-sider>
29-
<a-layout-content>Content</a-layout-content>
27+
<a-layout-header :style="headerStyle">Header</a-layout-header>
28+
<a-layout>
29+
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
30+
<a-layout-content :style="contentStyle">Content</a-layout-content>
31+
</a-layout>
32+
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
3033
</a-layout>
31-
<a-layout-footer>Footer</a-layout-footer>
32-
</a-layout>
3334

34-
<a-layout>
35-
<a-layout-header>Header</a-layout-header>
3635
<a-layout>
37-
<a-layout-content>Content</a-layout-content>
38-
<a-layout-sider>Sider</a-layout-sider>
36+
<a-layout-header :style="headerStyle">Header</a-layout-header>
37+
<a-layout>
38+
<a-layout-content :style="contentStyle">Content</a-layout-content>
39+
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
40+
</a-layout>
41+
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
3942
</a-layout>
40-
<a-layout-footer>Footer</a-layout-footer>
41-
</a-layout>
4243

43-
<a-layout>
44-
<a-layout-sider>Sider</a-layout-sider>
4544
<a-layout>
46-
<a-layout-header>Header</a-layout-header>
47-
<a-layout-content>Content</a-layout-content>
48-
<a-layout-footer>Footer</a-layout-footer>
45+
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
46+
<a-layout>
47+
<a-layout-header :style="headerStyle">Header</a-layout-header>
48+
<a-layout-content :style="contentStyle">Content</a-layout-content>
49+
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
50+
</a-layout>
4951
</a-layout>
50-
</a-layout>
52+
</a-space>
5153
</template>
54+
<script lang="ts" setup>
55+
import type { CSSProperties } from 'vue';
56+
const headerStyle: CSSProperties = {
57+
textAlign: 'center',
58+
color: '#fff',
59+
height: 64,
60+
paddingInline: 50,
61+
lineHeight: '64px',
62+
backgroundColor: '#7dbcea',
63+
};
64+
65+
const contentStyle: CSSProperties = {
66+
textAlign: 'center',
67+
minHeight: 120,
68+
lineHeight: '120px',
69+
color: '#fff',
70+
backgroundColor: '#108ee9',
71+
};
72+
73+
const siderStyle: CSSProperties = {
74+
textAlign: 'center',
75+
lineHeight: '120px',
76+
color: '#fff',
77+
backgroundColor: '#3ba0e9',
78+
};
5279
53-
<style scoped>
54-
#components-layout-demo-basic .code-box-demo {
55-
text-align: center;
56-
}
57-
#components-layout-demo-basic .ant-layout-header,
58-
#components-layout-demo-basic .ant-layout-footer {
59-
color: #fff;
60-
background: #7dbcea;
61-
}
62-
[data-theme='dark'] #components-layout-demo-basic .ant-layout-header {
63-
background: #6aa0c7;
64-
}
65-
[data-theme='dark'] #components-layout-demo-basic .ant-layout-footer {
66-
background: #6aa0c7;
67-
}
68-
#components-layout-demo-basic .ant-layout-footer {
69-
line-height: 1.5;
70-
}
71-
#components-layout-demo-basic .ant-layout-sider {
72-
color: #fff;
73-
line-height: 120px;
74-
background: #3ba0e9;
75-
}
76-
[data-theme='dark'] #components-layout-demo-basic .ant-layout-sider {
77-
background: #3499ec;
78-
}
79-
#components-layout-demo-basic .ant-layout-content {
80-
min-height: 120px;
81-
color: #fff;
82-
line-height: 120px;
83-
background: rgba(16, 142, 233, 1);
84-
}
85-
[data-theme='dark'] #components-layout-demo-basic .ant-layout-content {
86-
background: #107bcb;
87-
}
88-
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
89-
margin-top: 48px;
90-
}
91-
</style>
80+
const footerStyle: CSSProperties = {
81+
textAlign: 'center',
82+
color: '#fff',
83+
backgroundColor: '#7dbcea',
84+
};
85+
</script>

‎components/space/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,11 @@ const Space = defineComponent({
9797
const horizontalSizeVal = horizontalSize.value;
9898
const latestIndex = len - 1;
9999
return (
100-
<div {...attrs} class={cn.value} style={[style.value, attrs.style as any]}>
100+
<div
101+
{...attrs}
102+
class={[cn.value, attrs.class]}
103+
style={[style.value, attrs.style as CSSProperties]}
104+
>
101105
{items.map((child, index) => {
102106
const originIndex = children.indexOf(child);
103107
let itemStyle: CSSProperties = {};

‎components/steps/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Tooltip from '../tooltip';
1515
import { VcStepProps } from '../vc-steps/Step';
1616
import type { Status, ProgressDotRender } from '../vc-steps/interface';
1717
import type { MouseEventHandler } from '../_util/EventInterface';
18+
import { useToken } from '../theme/internal';
1819

1920
// CSSINJS
2021
import useStyle from './style';
@@ -66,6 +67,7 @@ const Steps = defineComponent({
6667
const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
6768
// style
6869
const [wrapSSR, hashId] = useStyle(prefixCls);
70+
const [, token] = useToken();
6971

7072
const screens = useBreakpoint();
7173
const direction = computed(() =>
@@ -90,7 +92,10 @@ const Steps = defineComponent({
9092
}) => {
9193
if (status === 'process' && props.percent !== undefined) {
9294
// currently it's hard-coded, since we can't easily read the actually width of icon
93-
const progressWidth = props.size === 'small' ? 32 : 40;
95+
96+
const progressWidth =
97+
props.size === 'small' ? token.value.controlHeight : token.value.controlHeightLG;
98+
9499
const iconWithProgress = (
95100
<div class={`${prefixCls.value}-progress-icon`}>
96101
<Progress

0 commit comments

Comments
 (0)