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
element-plus · Sep 7, 2021 · 6408d3c · 6408d3c
1 parent 8d1a4c5
commit 6408d3c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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)
       },