refactor: CButton, CBadge: turn shape props to one 'shape' prop

Author: woothu

src/components/badge/CBadge.vue

@@ -8,7 +8,10 @@ const props = Object.assign(linkProps, {
     default: 'span'
   },
   color: String,
-  pill: Boolean
+  shape: {
+    type: String,
+    validator: shape => ['', 'pill'].includes(shape)
+  }
 })
 
 export default {
@@ -21,7 +24,7 @@ export default {
       staticClass: 'badge',
       class: {
         [`badge-${props.color}`]: props.color,
-        'badge-pill': props.pill,
+        'badge-pill': props.shape === 'pill',
         'active': props.active,
         'disabled': props.disabled
       },

src/components/badge/tests/CBadge.spec.js

@@ -7,7 +7,7 @@ const customWrapper = mount(Component, {
   propsData: {
     color: 'success',
     active: true,
-    pill: true,
+    shape: 'pill',
     disabled: true,
     href: 'someLink'
   },

src/components/button/CButton.vue

@@ -5,8 +5,10 @@ import CLink, { propsFactory as linkPropsFactory } from '../link/CLink'
 
 const btnProps = {
   block: Boolean,
-  pill: Boolean,
-  square: Boolean,
+  shape: {
+    type: String,
+    validator: shape => ['','pill', 'square'].includes(shape)
+  },
   variant: {
     type: String,
     validator: val => ['', 'ghost', 'outline'].includes(val)
@@ -42,8 +44,8 @@ function computeClasses (props) {
     [`btn-${props.size}`]: Boolean(props.size),
     [`btn-ghost-${props.color}`]: props.variant === 'ghost',
     'btn-block': props.block,
-    'btn-pill': props.pill,
-    'btn-square': props.square && !props.pill,
+    'btn-pill': props.shape === 'pill',
+    'btn-square': props.shape === 'square',
     'disabled': props.disabled,
     'active': props.pressed
   }

src/components/button/tests/CButton.spec.js

@@ -14,7 +14,7 @@ const toggleWrapper = mount(Component, {
       color: 'info',
       variant: 'outline',
       block: true,
-      square: true
+      shape: 'square'
     }
   },
   listeners: {
@@ -32,7 +32,7 @@ const routerLinkWrapper = mount(Component, {
       size: 'sm',
       color: 'success',
       variant: 'ghost',
-      pill: true
+      shape: 'pill'
     }
   },
   listeners: {

src/components/index.d.ts

@@ -9,7 +9,7 @@ export declare class CAlert extends Vue {
 export declare class CBadge extends CLink {
   tag: string
   color: string
-  pill: boolean
+  shape: string
 }
 
 export declare class CBreadcrumb extends Vue {
@@ -27,8 +27,7 @@ export declare class CBreadcrumbRouter extends Vue {
 
 export declare class CButton extends CLink {
   block: boolean
-  pill: boolean
-  square: boolean
+  shape: string
   variant: string
   size: string
   color: string