From 6408d3cce61354f26e241efa0030670a54fe1afc Mon Sep 17 00:00:00 2001
From: Aex <spryti@qq.com>
Date: Tue, 7 Sep 2021 17:17:39 +0800
Subject: [PATCH] feat(components): [el-badge] support color of type when
 is-dot (#3279)

* feat(components): [el-badge] apply color of type when isDot

* fix(components): [el-badge] change default type to danger
---
 packages/components/badge/__tests__/badge.spec.ts | 14 ++++++++++++++
 packages/components/badge/src/index.vue           |  5 +++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/components/badge/__tests__/badge.spec.ts b/packages/components/badge/__tests__/badge.spec.ts
index cace46081f..946c1d68f2 100644
--- a/packages/components/badge/__tests__/badge.spec.ts
+++ b/packages/components/badge/__tests__/badge.spec.ts
@@ -24,6 +24,20 @@ describe('Badge', () => {
       slots: { default: AXIOM },
     })
     expect(wrapper.find('.el-badge__content.is-dot').exists()).toBe(true)
+    expect(
+      wrapper.find('.el-badge__content.el-badge__content--danger').exists()
+    ).toBe(true)
+  })
+
+  test('is dot with type', () => {
+    const wrapper = mount(Badge, {
+      props: { isDot: true, type: 'success' },
+      slots: { default: AXIOM },
+    })
+    expect(wrapper.find('.el-badge__content.is-dot').exists()).toBe(true)
+    expect(
+      wrapper.find('.el-badge__content.el-badge__content--success').exists()
+    ).toBe(true)
   })
 
   test('max', async () => {
diff --git a/packages/components/badge/src/index.vue b/packages/components/badge/src/index.vue
index 5b7153f76e..2722020bb4 100644
--- a/packages/components/badge/src/index.vue
+++ b/packages/components/badge/src/index.vue
@@ -6,9 +6,10 @@
         v-show="!hidden && (content || content === 0 || isDot)"
         class="el-badge__content"
         :class="[
-          isDot ? 'is-dot' : 'el-badge__content--' + type,
+          'el-badge__content--' + type,
           {
             'is-fixed': $slots.default,
+            'is-dot': isDot,
           },
         ]"
         v-text="content"
@@ -36,7 +37,7 @@ export default defineComponent({
     hidden: Boolean,
     type: {
       type: String,
-      default: 'primary',
+      default: 'danger',
       validator: (val: string) => {
         return ['primary', 'success', 'warning', 'info', 'danger'].includes(val)
       },