feat(components): [el-button-group] add type prop (#3702)

* feat(components): [el-button-group] add type prop

* fix breadcrumb import

packages/components/button/__tests__/button.spec.ts

@@ -152,4 +152,23 @@ describe('Button Group', () => {
       wrapper.findAll('.el-button-group button.el-button--mini').length
     ).toBe(1)
   })
+
+  it('button group type', async () => {
+    const wrapper = mount({
+      setup() {
+        return () =>
+          h(ButtonGroup, { type: 'warning' }, () => [
+            h(Button, { type: 'primary' }, () => 'Prev'),
+            h(Button, {}, () => 'Next'),
+          ])
+      },
+    })
+    expect(wrapper.classes()).toContain('el-button-group')
+    expect(
+      wrapper.findAll('.el-button-group button.el-button--primary').length
+    ).toBe(1)
+    expect(
+      wrapper.findAll('.el-button-group button.el-button--warning').length
+    ).toBe(1)
+  })
 })

packages/components/button/src/button-group.ts

@@ -0,0 +1,9 @@
+import { buttonProps } from './button'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const buttonGroupProps = {
+  size: buttonProps.size,
+  type: buttonProps.type,
+} as const
+export type ButtonGroupProps = ExtractPropTypes<typeof buttonGroupProps>

packages/components/button/src/button-group.vue

@@ -6,24 +6,18 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, toRef } from 'vue'
 import { elButtonGroupKey } from '@element-plus/tokens'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { buttonGroupProps } from './button-group'
-
-import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
 
 export default defineComponent({
   name: 'ElButtonGroup',
-  props: {
+  props: buttonGroupProps,
-    size: {
+
-      type: String as PropType<ComponentSize>,
-      validator: isValidComponentSize,
-    },
-  },
   setup(props) {
     provide(
       elButtonGroupKey,
       reactive({
         size: toRef(props, 'size'),
+        type: toRef(props, 'type'),
       })
     )
   },

packages/components/button/src/button.ts

@@ -11,6 +11,7 @@ export const buttonType = [
   'info',
   'danger',
   'text',
+  '',
 ] as const
 export const buttonSize = ['', 'large', 'medium', 'small', 'mini'] as const
 export const buttonNativeType = ['button', 'submit', 'reset'] as const
@@ -20,7 +21,7 @@ export const buttonProps = {
   type: buildProp({
     type: String,
     values: buttonType,
-    default: 'default',
+    default: '',
   } as const),
   icon: {
     type: String,

packages/components/button/src/button.vue

@@ -2,7 +2,7 @@
   <button
     :class="[
       'el-button',
-      type ? 'el-button--' + type : '',
+      buttonType ? 'el-button--' + buttonType : '',
       buttonSize ? 'el-button--' + buttonSize : '',
       {
         'is-disabled': buttonDisabled,
@@ -40,6 +40,9 @@ export default defineComponent({
     const { size: buttonSize, disabled: buttonDisabled } = useFormItem({
       size: computed(() => elBtnGroup?.size),
     })
+    const buttonType = computed(
+      () => props.type || elBtnGroup?.type || 'default'
+    )
 
     const elForm = inject(elFormKey, undefined)
 
@@ -52,7 +55,9 @@ export default defineComponent({
 
     return {
       buttonSize,
+      buttonType,
       buttonDisabled,
+
       handleClick,
     }
   },

packages/tokens/breadcrumb.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue'
-import type { BreadcrumbProps } from '@element-plus/components/breadcrumb/src/breadcrumb'
+import type { BreadcrumbProps } from '@element-plus/components/breadcrumb'
 
 export const elBreadcrumbKey: InjectionKey<BreadcrumbProps> =
   Symbol('elBreadcrumbKey')

packages/tokens/button.ts

@@ -1,9 +1,10 @@
 import type { InjectionKey } from 'vue'
 
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ButtonProps } from '@element-plus/components/button'
 
 export interface ElButtonGroupContext {
-  size?: ComponentSize
+  size?: ButtonProps['size']
+  type?: ButtonProps['type']
 }
 
 export const elButtonGroupKey: InjectionKey<ElButtonGroupContext> = Symbol()