Skip to content

Commit

Permalink
test(alert): update demo with space (#6541)
Browse files Browse the repository at this point in the history 
* docs(alert): update demo with space

* docs(alert): update alert test snap

---------

Co-authored-by: zhuzhengjian <zhuzhengjian@hoteamsoft.com>
  • Loading branch information
@aibayanyu20
aibayanyu20 and zhuzhengjian authored May 11, 2023
1 parent 8bf8515 commit 149cedd
Show file tree
Hide file tree
Showing 7 changed files with 432 additions and 321 deletions.
490 changes: 296 additions & 194 deletions components/alert/__tests__/__snapshots__/demo.test.js.snap
View file

Large diffs are not rendered by default.

21 changes: 10 additions & 11 deletions components/alert/demo/banner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@ Display Alert as a banner at top of page.
</docs>

<template>
<a-alert message="Warning text" banner />
<br />
<a-alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<br />
<a-alert :show-icon="false" message="Warning text without icon" banner />
<br />
<a-alert type="error" message="Error text" banner />
<a-space direction="vertical" style="width: 100%">
<a-alert message="Warning text" banner />
<a-alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<a-alert :show-icon="false" message="Warning text without icon" banner />
<a-alert type="error" message="Error text" banner />
</a-space>
</template>
28 changes: 15 additions & 13 deletions components/alert/demo/closable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,21 @@ To show close button.
</docs>

<template>
<a-alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
@close="onClose"
/>
<a-alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error"
closable
@close="onClose"
/>
<a-space direction="vertical" style="width: 100%">
<a-alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
closable
@close="onClose"
/>
<a-alert
message="Error Text"
description="Error Description Error Description Error Description Error Description Error Description Error Description"
type="error"
closable
@close="onClose"
/>
</a-space>
</template>

<script lang="ts" setup>
Expand Down
96 changes: 49 additions & 47 deletions components/alert/demo/custom-icon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,53 +17,55 @@ Custom Icon make information more clear and more friendly.
</docs>

<template>
<a-alert message="showIcon = false" type="success">
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Success Tips" type="success" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Informational Notes" type="info" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Warning" type="warning" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Error" type="error" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Error"
description="This is an error message about copywriting."
type="error"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-space direction="vertical" style="width: 100%">
<a-alert message="showIcon = false" type="success">
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Success Tips" type="success" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Informational Notes" type="info" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Warning" type="warning" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert message="Error" type="error" show-icon>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
<a-alert
message="Error"
description="This is an error message about copywriting."
type="error"
show-icon
>
<template #icon><smile-outlined /></template>
</a-alert>
</a-space>
</template>

<script lang="ts" setup>
Expand Down
50 changes: 26 additions & 24 deletions components/alert/demo/description.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,30 @@ Additional description for alert message.
</docs>

<template>
<a-alert message="Success Text" type="success">
<template #description>
<p>
Success Description
<span style="color: red">Success</span>
Description Success Description
</p>
</template>
</a-alert>
<a-alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<a-alert
message="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<a-alert
message="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
<a-space direction="vertical" style="width: 100%">
<a-alert message="Success Text" type="success">
<template #description>
<p>
Success Description
<span style="color: red">Success</span>
Description Success Description
</p>
</template>
</a-alert>
<a-alert
message="Info Text"
description="Info Description Info Description Info Description Info Description"
type="info"
/>
<a-alert
message="Warning Text"
description="Warning Description Warning Description Warning Description Warning Description"
type="warning"
/>
<a-alert
message="Error Text"
description="Error Description Error Description Error Description Error Description"
type="error"
/>
</a-space>
</template>
58 changes: 30 additions & 28 deletions components/alert/demo/icon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,32 +17,34 @@ Decent icon make information more clear and more friendly.
</docs>

<template>
<a-alert message="Success Tips" type="success" show-icon />
<a-alert message="Informational Notes" type="info" show-icon />
<a-alert message="Warning" type="warning" show-icon />
<a-alert message="Error" type="error" show-icon />
<a-alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
show-icon
/>
<a-alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
show-icon
/>
<a-alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
/>
<a-alert
message="Error"
description="This is an error message about copywriting."
type="error"
show-icon
/>
<a-space direction="vertical" style="width: 100%">
<a-alert message="Success Tips" type="success" show-icon />
<a-alert message="Informational Notes" type="info" show-icon />
<a-alert message="Warning" type="warning" show-icon />
<a-alert message="Error" type="error" show-icon />
<a-alert
message="Success Tips"
description="Detailed description and advices about successful copywriting."
type="success"
show-icon
/>
<a-alert
message="Informational Notes"
description="Additional description and informations about copywriting."
type="info"
show-icon
/>
<a-alert
message="Warning"
description="This is a warning notice about copywriting."
type="warning"
show-icon
/>
<a-alert
message="Error"
description="This is an error message about copywriting."
type="error"
show-icon
/>
</a-space>
</template>
10 changes: 6 additions & 4 deletions components/alert/demo/style.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
</docs>

<template>
<a-alert message="Success Text" type="success" />
<a-alert message="Info Text" type="info" />
<a-alert message="Warning Text" type="warning" />
<a-alert message="Error Text" type="error" />
<a-space direction="vertical" style="width: 100%">
<a-alert message="Success Text" type="success" />
<a-alert message="Info Text" type="info" />
<a-alert message="Warning Text" type="warning" />
<a-alert message="Error Text" type="error" />
</a-space>
</template>

0 comments on commit 149cedd

Please sign in to comment.