Skip to content

Commit 149cedd

Browse files
aibayanyu20zhuzhengjian
aibayanyu20
and
zhuzhengjian
authored
test(alert): update demo with space (#6541)
* docs(alert): update demo with space * docs(alert): update alert test snap --------- Co-authored-by: zhuzhengjian <[email protected]>
1 parent 8bf8515 commit 149cedd

File tree

7 files changed

+432
-321
lines changed

7 files changed

+432
-321
lines changed

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

+296-194
Large diffs are not rendered by default.

‎components/alert/demo/banner.vue

+10-11
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,14 @@ Display Alert as a banner at top of page.
1717
</docs>
1818

1919
<template>
20-
<a-alert message="Warning text" banner />
21-
<br />
22-
<a-alert
23-
message="Very long warning text warning text text text text text text text"
24-
banner
25-
closable
26-
/>
27-
<br />
28-
<a-alert :show-icon="false" message="Warning text without icon" banner />
29-
<br />
30-
<a-alert type="error" message="Error text" banner />
20+
<a-space direction="vertical" style="width: 100%">
21+
<a-alert message="Warning text" banner />
22+
<a-alert
23+
message="Very long warning text warning text text text text text text text"
24+
banner
25+
closable
26+
/>
27+
<a-alert :show-icon="false" message="Warning text without icon" banner />
28+
<a-alert type="error" message="Error text" banner />
29+
</a-space>
3130
</template>

‎components/alert/demo/closable.vue

+15-13
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,21 @@ To show close button.
1717
</docs>
1818

1919
<template>
20-
<a-alert
21-
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
22-
type="warning"
23-
closable
24-
@close="onClose"
25-
/>
26-
<a-alert
27-
message="Error Text"
28-
description="Error Description Error Description Error Description Error Description Error Description Error Description"
29-
type="error"
30-
closable
31-
@close="onClose"
32-
/>
20+
<a-space direction="vertical" style="width: 100%">
21+
<a-alert
22+
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
23+
type="warning"
24+
closable
25+
@close="onClose"
26+
/>
27+
<a-alert
28+
message="Error Text"
29+
description="Error Description Error Description Error Description Error Description Error Description Error Description"
30+
type="error"
31+
closable
32+
@close="onClose"
33+
/>
34+
</a-space>
3335
</template>
3436

3537
<script lang="ts" setup>

‎components/alert/demo/custom-icon.vue

+49-47
Original file line numberDiff line numberDiff line change
@@ -17,53 +17,55 @@ Custom Icon make information more clear and more friendly.
1717
</docs>
1818

1919
<template>
20-
<a-alert message="showIcon = false" type="success">
21-
<template #icon><smile-outlined /></template>
22-
</a-alert>
23-
<a-alert message="Success Tips" type="success" show-icon>
24-
<template #icon><smile-outlined /></template>
25-
</a-alert>
26-
<a-alert message="Informational Notes" type="info" show-icon>
27-
<template #icon><smile-outlined /></template>
28-
</a-alert>
29-
<a-alert message="Warning" type="warning" show-icon>
30-
<template #icon><smile-outlined /></template>
31-
</a-alert>
32-
<a-alert message="Error" type="error" show-icon>
33-
<template #icon><smile-outlined /></template>
34-
</a-alert>
35-
<a-alert
36-
message="Success Tips"
37-
description="Detailed description and advices about successful copywriting."
38-
type="success"
39-
show-icon
40-
>
41-
<template #icon><smile-outlined /></template>
42-
</a-alert>
43-
<a-alert
44-
message="Informational Notes"
45-
description="Additional description and informations about copywriting."
46-
type="info"
47-
show-icon
48-
>
49-
<template #icon><smile-outlined /></template>
50-
</a-alert>
51-
<a-alert
52-
message="Warning"
53-
description="This is a warning notice about copywriting."
54-
type="warning"
55-
show-icon
56-
>
57-
<template #icon><smile-outlined /></template>
58-
</a-alert>
59-
<a-alert
60-
message="Error"
61-
description="This is an error message about copywriting."
62-
type="error"
63-
show-icon
64-
>
65-
<template #icon><smile-outlined /></template>
66-
</a-alert>
20+
<a-space direction="vertical" style="width: 100%">
21+
<a-alert message="showIcon = false" type="success">
22+
<template #icon><smile-outlined /></template>
23+
</a-alert>
24+
<a-alert message="Success Tips" type="success" show-icon>
25+
<template #icon><smile-outlined /></template>
26+
</a-alert>
27+
<a-alert message="Informational Notes" type="info" show-icon>
28+
<template #icon><smile-outlined /></template>
29+
</a-alert>
30+
<a-alert message="Warning" type="warning" show-icon>
31+
<template #icon><smile-outlined /></template>
32+
</a-alert>
33+
<a-alert message="Error" type="error" show-icon>
34+
<template #icon><smile-outlined /></template>
35+
</a-alert>
36+
<a-alert
37+
message="Success Tips"
38+
description="Detailed description and advices about successful copywriting."
39+
type="success"
40+
show-icon
41+
>
42+
<template #icon><smile-outlined /></template>
43+
</a-alert>
44+
<a-alert
45+
message="Informational Notes"
46+
description="Additional description and informations about copywriting."
47+
type="info"
48+
show-icon
49+
>
50+
<template #icon><smile-outlined /></template>
51+
</a-alert>
52+
<a-alert
53+
message="Warning"
54+
description="This is a warning notice about copywriting."
55+
type="warning"
56+
show-icon
57+
>
58+
<template #icon><smile-outlined /></template>
59+
</a-alert>
60+
<a-alert
61+
message="Error"
62+
description="This is an error message about copywriting."
63+
type="error"
64+
show-icon
65+
>
66+
<template #icon><smile-outlined /></template>
67+
</a-alert>
68+
</a-space>
6769
</template>
6870

6971
<script lang="ts" setup>

‎components/alert/demo/description.vue

+26-24
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,30 @@ Additional description for alert message.
1717
</docs>
1818

1919
<template>
20-
<a-alert message="Success Text" type="success">
21-
<template #description>
22-
<p>
23-
Success Description
24-
<span style="color: red">Success</span>
25-
Description Success Description
26-
</p>
27-
</template>
28-
</a-alert>
29-
<a-alert
30-
message="Info Text"
31-
description="Info Description Info Description Info Description Info Description"
32-
type="info"
33-
/>
34-
<a-alert
35-
message="Warning Text"
36-
description="Warning Description Warning Description Warning Description Warning Description"
37-
type="warning"
38-
/>
39-
<a-alert
40-
message="Error Text"
41-
description="Error Description Error Description Error Description Error Description"
42-
type="error"
43-
/>
20+
<a-space direction="vertical" style="width: 100%">
21+
<a-alert message="Success Text" type="success">
22+
<template #description>
23+
<p>
24+
Success Description
25+
<span style="color: red">Success</span>
26+
Description Success Description
27+
</p>
28+
</template>
29+
</a-alert>
30+
<a-alert
31+
message="Info Text"
32+
description="Info Description Info Description Info Description Info Description"
33+
type="info"
34+
/>
35+
<a-alert
36+
message="Warning Text"
37+
description="Warning Description Warning Description Warning Description Warning Description"
38+
type="warning"
39+
/>
40+
<a-alert
41+
message="Error Text"
42+
description="Error Description Error Description Error Description Error Description"
43+
type="error"
44+
/>
45+
</a-space>
4446
</template>

‎components/alert/demo/icon.vue

+30-28
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,34 @@ Decent icon make information more clear and more friendly.
1717
</docs>
1818

1919
<template>
20-
<a-alert message="Success Tips" type="success" show-icon />
21-
<a-alert message="Informational Notes" type="info" show-icon />
22-
<a-alert message="Warning" type="warning" show-icon />
23-
<a-alert message="Error" type="error" show-icon />
24-
<a-alert
25-
message="Success Tips"
26-
description="Detailed description and advices about successful copywriting."
27-
type="success"
28-
show-icon
29-
/>
30-
<a-alert
31-
message="Informational Notes"
32-
description="Additional description and informations about copywriting."
33-
type="info"
34-
show-icon
35-
/>
36-
<a-alert
37-
message="Warning"
38-
description="This is a warning notice about copywriting."
39-
type="warning"
40-
show-icon
41-
/>
42-
<a-alert
43-
message="Error"
44-
description="This is an error message about copywriting."
45-
type="error"
46-
show-icon
47-
/>
20+
<a-space direction="vertical" style="width: 100%">
21+
<a-alert message="Success Tips" type="success" show-icon />
22+
<a-alert message="Informational Notes" type="info" show-icon />
23+
<a-alert message="Warning" type="warning" show-icon />
24+
<a-alert message="Error" type="error" show-icon />
25+
<a-alert
26+
message="Success Tips"
27+
description="Detailed description and advices about successful copywriting."
28+
type="success"
29+
show-icon
30+
/>
31+
<a-alert
32+
message="Informational Notes"
33+
description="Additional description and informations about copywriting."
34+
type="info"
35+
show-icon
36+
/>
37+
<a-alert
38+
message="Warning"
39+
description="This is a warning notice about copywriting."
40+
type="warning"
41+
show-icon
42+
/>
43+
<a-alert
44+
message="Error"
45+
description="This is an error message about copywriting."
46+
type="error"
47+
show-icon
48+
/>
49+
</a-space>
4850
</template>

‎components/alert/demo/style.vue

+6-4
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
1717
</docs>
1818

1919
<template>
20-
<a-alert message="Success Text" type="success" />
21-
<a-alert message="Info Text" type="info" />
22-
<a-alert message="Warning Text" type="warning" />
23-
<a-alert message="Error Text" type="error" />
20+
<a-space direction="vertical" style="width: 100%">
21+
<a-alert message="Success Text" type="success" />
22+
<a-alert message="Info Text" type="info" />
23+
<a-alert message="Warning Text" type="warning" />
24+
<a-alert message="Error Text" type="error" />
25+
</a-space>
2426
</template>

0 commit comments

Comments
 (0)