fix(Message): resolved icon (#812)

* feat: message modify demo icon * style(message): modify default icon * feat: message modify button size * fix: use default icon * fix(Message): remove useless code --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Jun 6, 2023 · 7f4d2e3 · 7f4d2e3
1 parent 1785af2
commit 7f4d2e3
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 101 deletions.
diff --git a/src/message/__test__/__snapshots__/demo.test.jsx.snap b/src/message/__test__/__snapshots__/demo.test.jsx.snap
@@ -8,7 +8,6 @@ exports[`Message > Message baseVue demo works fine 1`] = `
   <div
     class="button-demo"
     data-v-e60c559e=""
-    style="margin: 0px 16px;"
   >
     <button
       aria-disabled="false"
@@ -143,14 +142,13 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
       
       <div
         class="button-demo"
         data-v-e60c559e=""
-        style="margin: 0px 16px;"
       >
         <button
           aria-disabled="false"
@@ -270,18 +268,15 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
       <div
         class="button-demo"
-        data-v-fba28ece=""
-        style="margin: 0px 16px;"
       >
         <button
           aria-disabled="false"
           class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          data-v-fba28ece=""
           role="button"
           type="button"
         >
@@ -298,7 +293,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
         <button
           aria-disabled="false"
           class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          data-v-fba28ece=""
           role="button"
           type="button"
         >
@@ -315,7 +309,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
         <button
           aria-disabled="false"
           class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          data-v-fba28ece=""
           role="button"
           type="button"
         >
@@ -332,7 +325,6 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
         <button
           aria-disabled="false"
           class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          data-v-fba28ece=""
           role="button"
           type="button"
         >
@@ -356,13 +348,10 @@ exports[`Message > Message mobileVue demo works fine 1`] = `
 exports[`Message > Message themeVue demo works fine 1`] = `
 <div
   class="button-demo"
-  data-v-fba28ece=""
-  style="margin: 0px 16px;"
 >
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-fba28ece=""
     role="button"
     type="button"
   >
@@ -379,7 +368,6 @@ exports[`Message > Message themeVue demo works fine 1`] = `
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-fba28ece=""
     role="button"
     type="button"
   >
@@ -396,7 +384,6 @@ exports[`Message > Message themeVue demo works fine 1`] = `
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-fba28ece=""
     role="button"
     type="button"
   >
@@ -413,7 +400,6 @@ exports[`Message > Message themeVue demo works fine 1`] = `
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-fba28ece=""
     role="button"
     type="button"
   >

diff --git a/src/message/demos/base.vue b/src/message/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="button-demo" style="margin: 0 16px">
+  <div class="button-demo">
     <t-button block size="large" variant="outline" theme="primary" @click="showTextMessage">纯文字的通知</t-button>
     <t-button block size="large" variant="outline" theme="primary" @click="showIconMessage">带图标的通知</t-button>
     <t-button block size="large" variant="outline" theme="primary" @click="showCloseMessage">带关闭的通知</t-button>
@@ -11,22 +11,10 @@
   <t-message v-model="visible" :icon="false" :offset="[10, 16]" :duration="5000" content="这是一条普通的通知信息" />
 
   <!-- 带图标通知 -->
-  <t-message
-    v-model="visible1"
-    :icon="prefixIcon"
-    :offset="['10px', '16px']"
-    :duration="5000"
-    content="这是一条普通的通知信息"
-  />
+  <t-message v-model="visible1" :offset="['10px', '16px']" :duration="5000" content="这是一条普通的通知信息" />
 
   <!-- 带关闭通知 -->
-  <t-message
-    v-model="visible2"
-    :icon="prefixIcon"
-    :offset="['10px', 16]"
-    :duration="-1"
-    content="这是一条普通的通知信息"
-  >
+  <t-message v-model="visible2" :offset="['10px', 16]" :duration="-1" content="这是一条普通的通知信息">
     <template #closeBtn>
       <t-button class="close-btn" variant="text">按钮</t-button>
       <closeIcon class="t-message__icon--right" />
@@ -43,13 +31,7 @@
   />
 
   <!-- 带按钮通知 -->
-  <t-message
-    v-model="visible4"
-    :icon="notificationIcon"
-    :offset="[10, 16]"
-    :duration="-1"
-    content="这是一条普通的通知信息"
-  >
+  <t-message v-model="visible4" :offset="[10, 16]" :duration="-1" content="这是一条普通的通知信息">
     <template #closeBtn>
       <t-button class="close-btn" variant="text">按钮</t-button>
     </template>
@@ -58,7 +40,7 @@
 
 <script lang="ts" setup>
 import { h, ref } from 'vue';
-import { ErrorCircleFilledIcon, CloseIcon, NotificationFilledIcon } from 'tdesign-icons-vue-next';
+import { CloseIcon } from 'tdesign-icons-vue-next';
 
 const visible = ref(false);
 const visible1 = ref(false);
@@ -71,8 +53,6 @@ const suffixIconStyle = {
   cursor: 'pointer',
 };
 
-const prefixIcon = () => h(ErrorCircleFilledIcon, { color: '#0052D9' });
-const notificationIcon = () => h(NotificationFilledIcon, { color: '#0052D9' });
 const closeIcon = () => h(CloseIcon, { ...suffixIconStyle });
 
 const showTextMessage = () => {
@@ -108,31 +88,15 @@ const cleanMessage = () => {
 };
 </script>
 
-<script lang="ts">
-export default {
-  name: 'BaseDemo',
-};
-</script>
-
 <style lang="less" scoped>
-.tdesign-mobile-demo-block .button-demo {
-  .t-button {
-    border-radius: 6px;
-    &.t-size-l {
-      height: 48px;
-      font-size: 16px;
-      font-weight: bold;
-    }
-  }
-}
-
 .close-btn {
   margin-left: 8px;
   height: 22px;
   line-height: 22px;
   color: #0052d9;
+  font-size: 14px;
 
-  &:active {
+  &::after {
     background: none;
   }
 }

diff --git a/src/message/demos/mobile.vue b/src/message/demos/mobile.vue
@@ -2,11 +2,11 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Message 消息通知</h1>
     <p class="summary" style="margin: 8px 16px 0">用于轻量级反馈或提示，不会打断用户操作。</p>
-    <tdesign-demo-block title="01 组件类型" summary="消息通知内容为文本、带操作按钮">
+    <tdesign-demo-block title="01 组件类型" summary="消息通知内容为文本、带操作按钮" :padding="true">
       <baseDemo />
     </tdesign-demo-block>
 
-    <tdesign-demo-block title="02 组件风格" summary="消息组件风格">
+    <tdesign-demo-block title="02 组件风格" summary="消息组件风格" :padding="true">
       <themeDemo />
     </tdesign-demo-block>
   </div>
@@ -16,19 +16,3 @@
 import themeDemo from './theme.vue';
 import baseDemo from './base.vue';
 </script>
-
-<style lang="less">
-.tdesign-demo-main {
-  position: fixed;
-  transform: translate(0, 0);
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.tdesign-mobile-demo {
-  position: fixed;
-  width: 100%;
-  height: calc(100% - 78px);
-  overflow: scroll;
-}
-</style>
diff --git a/src/message/demos/theme.vue b/src/message/demos/theme.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="button-demo" style="margin: 0 16px">
+  <div class="button-demo">
     <t-button block size="large" variant="outline" theme="primary" @click="showInfoMessage">普通通知</t-button>
     <t-button block size="large" variant="outline" theme="primary" @click="showSuccessMessage">成功通知</t-button>
     <t-button block size="large" variant="outline" theme="primary" @click="showWarnMessage">警示通知</t-button>
@@ -31,22 +31,3 @@ const showSuccessMessage = () => showMessage('success', '这是一条成功的
 
 const showErrorMessage = () => showMessage('error', '这是一条错误提示通知');
 </script>
-
-<script lang="ts">
-export default {
-  name: 'ThemeDemo',
-};
-</script>
-
-<style lang="less" scoped>
-.tdesign-mobile-demo-block .button-demo {
-  .t-button {
-    border-radius: 6px;
-    &.t-size-l {
-      height: 48px;
-      font-size: 16px;
-      font-weight: bold;
-    }
-  }
-}
-</style>
diff --git a/src/message/message.vue b/src/message/message.vue
@@ -32,7 +32,7 @@ import {
   nextTick,
   onMounted,
 } from 'vue';
-import { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseIcon } from 'tdesign-icons-vue-next';
+import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-vue-next';
 import { isFunction } from 'lodash';
 import messageProps from './props';
 import { DrawMarquee } from './type';
@@ -42,10 +42,10 @@ import { renderContent, renderTNode, TNode, useEmitEvent, useVModel } from '../s
 const { prefix } = config;
 const name = `${prefix}-message`;
 const iconDefault = {
-  info: h(ErrorCircleFilledIcon),
+  info: h(InfoCircleFilledIcon),
   success: h(CheckCircleFilledIcon),
-  warning: h(ErrorCircleFilledIcon),
-  error: h(ErrorCircleFilledIcon),
+  warning: h(InfoCircleFilledIcon),
+  error: h(InfoCircleFilledIcon),
 };
 
 export default defineComponent({