From 277661d9d15958fbdb9d38bdad9c996ee0475ea2 Mon Sep 17 00:00:00 2001
From: zazzaz <izazzaz@hotmail.com>
Date: Tue, 4 Aug 2020 11:20:52 +0800
Subject: [PATCH] feat: add button group

---
 packages/button/__tests__/button.spec.ts      | 21 ++++++++++++++++++-
 packages/button/doc/index.stories.ts          |  4 ++++
 packages/button/index.ts                      |  4 +++-
 packages/button/src/button-group.vue          | 10 +++++++++
 packages/button/src/{index.vue => button.vue} |  0
 5 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 packages/button/src/button-group.vue
 rename packages/button/src/{index.vue => button.vue} (100%)

diff --git a/packages/button/__tests__/button.spec.ts b/packages/button/__tests__/button.spec.ts
index 3e753348d8..9f40983bbe 100644
--- a/packages/button/__tests__/button.spec.ts
+++ b/packages/button/__tests__/button.spec.ts
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
-import Button from '../src/index.vue'
+import Button from '../src/button.vue'
+import ButtonGroup from '../src/button-group.vue'
 
 const AXIOM = 'Rem is the best girl'
 const COMMON_CONFIG = {
@@ -127,3 +128,21 @@ describe('Button.vue', () => {
   })
 
 })
+describe('Button Group', () => {
+  const TestComponent = {
+    template: `<el-button-group>
+      <el-button type="primary">上一页</el-button>
+      <el-button type="primary">下一页</el-button>
+    </el-button-group>`,
+    components: {
+      'el-button-group': ButtonGroup,
+      'el-button': Button,
+    },
+  }
+
+  it('create', () => {
+    const wrapper = mount(TestComponent)
+    expect(wrapper.classes()).toContain('el-button-group')
+    expect(wrapper.findAll('button').length).toBe(2)
+  })
+})
diff --git a/packages/button/doc/index.stories.ts b/packages/button/doc/index.stories.ts
index c2b9e9ea83..dff6bcdee9 100644
--- a/packages/button/doc/index.stories.ts
+++ b/packages/button/doc/index.stories.ts
@@ -4,3 +4,7 @@ export default {
 
 export const NormalButton = (): string => '<el-button>With Text</el-button>'
 export const ButtonTwo = (): string => '<el-button>button two</el-button>'
+export const ButtonGroup = (): string => `<el-button-group>
+<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
+<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+</el-button-group>`
diff --git a/packages/button/index.ts b/packages/button/index.ts
index 27a113346d..f8549ec2b2 100644
--- a/packages/button/index.ts
+++ b/packages/button/index.ts
@@ -1,6 +1,8 @@
 import { App } from 'vue'
-import Button from './src/index.vue'
+import Button from './src/button.vue'
+import ButtonGroup from './src/button-group.vue'
 
 export default (app: App): void => {
   app.component(Button.name, Button)
+  app.component(ButtonGroup.name, ButtonGroup)
 }
diff --git a/packages/button/src/button-group.vue b/packages/button/src/button-group.vue
new file mode 100644
index 0000000000..ec2e4b8f0f
--- /dev/null
+++ b/packages/button/src/button-group.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script lang='ts'>
+export default {
+  name: 'ElButtonGroup',
+}
+</script>
diff --git a/packages/button/src/index.vue b/packages/button/src/button.vue
similarity index 100%
rename from packages/button/src/index.vue
rename to packages/button/src/button.vue