fix: correct button small deprecation behaviour (#818)

carbon-design-system · Feb 5, 2020 · d704b48 · d704b48
1 parent 91e28f8
commit d704b48
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 47 deletions.
diff --git a/packages/core/src/components/cv-button/button-mixin.js b/packages/core/src/components/cv-button/button-mixin.js
@@ -1,3 +1,5 @@
+import { settings as carbonSettings } from 'carbon-components';
+
 export default {
   props: {
     icon: {
@@ -27,7 +29,7 @@ export default {
     },
     small: {
       type: Boolean,
-      default: false,
+      default: undefined,
       validator(val) {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvButton: small deprecated in favour of size.');
@@ -46,5 +48,31 @@ export default {
         click: event => this.$emit('click', event),
       });
     },
+    buttonClassOpts() {
+      return (opts = {}) => {
+        let classes = [`${carbonSettings.prefix}--btn`];
+
+        if (opts.skeleton) {
+          classes.push(`${carbonSettings.prefix}--skeleton`);
+        }
+
+        if (opts.iconOnly) {
+          classes.push(`${carbonSettings.prefix}--btn--icon-only`);
+        }
+
+        if (this.kind && !opts.skeleton) {
+          classes.push(`${carbonSettings.prefix}--btn--${this.kind.toLowerCase()}`);
+        }
+
+        if (this.size === 'small' || (this.size === undefined && this.small)) {
+          classes.push(`${carbonSettings.prefix}--btn--sm`);
+        }
+        if (this.size === 'field') {
+          classes.push(`${carbonSettings.prefix}--btn--field`);
+        }
+
+        return classes;
+      };
+    },
   },
 };
diff --git a/packages/core/src/components/cv-button/cv-button-skeleton.vue b/packages/core/src/components/cv-button/cv-button-skeleton.vue
@@ -4,35 +4,14 @@
 
 <script>
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import buttonMixin from './button-mixin';
 
 export default {
   name: 'CvButtonSkeleton',
-  mixins: [carbonPrefixMixin],
-
-  props: {
-    small: {
-      type: Boolean,
-      default: false,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvButton: small deprecated in favour of size.');
-        }
-        return true;
-      },
-    },
-    size: { type: String, default: undefined, validator: val => ['', 'field', 'small'].includes(val) },
-  },
+  mixins: [buttonMixin, carbonPrefixMixin],
   computed: {
     buttonClasses() {
-      let classes = [`${this.carbonPrefix}--btn`, `${this.carbonPrefix}--skeleton`];
-
-      if (this.size === 'small' || (this.size === undefined && this.small)) {
-        classes.push(`${this.carbonPrefix}--btn--sm`);
-      }
-      if (this.size === 'field') {
-        classes.push(`${this.carbonPrefix}--btn--field`);
-      }
-      return classes;
+      return this.buttonClassOpts({ skeleton: true });
     },
   },
 };

diff --git a/packages/core/src/components/cv-button/cv-button.vue b/packages/core/src/components/cv-button/cv-button.vue
@@ -18,15 +18,7 @@ export default {
   mixins: [buttonMixin, carbonPrefixMixin],
   computed: {
     buttonClasses() {
-      let classes = [`${this.carbonPrefix}--btn`, `${this.carbonPrefix}--btn--${this.kind.toLowerCase()}`];
-
-      if (this.size === 'small' || (this.size === undefined && this.small)) {
-        classes.push(`${this.carbonPrefix}--btn--sm`);
-      }
-      if (this.size === 'field') {
-        classes.push(`${this.carbonPrefix}--btn--field`);
-      }
-      return classes;
+      return this.buttonClassOpts();
     },
   },
 };

diff --git a/packages/core/src/components/cv-button/cv-icon-button.vue b/packages/core/src/components/cv-button/cv-icon-button.vue
@@ -27,19 +27,7 @@ export default {
   },
   computed: {
     buttonClasses() {
-      let classes = [
-        `${this.carbonPrefix}--btn`,
-        `${this.carbonPrefix}--btn--icon-only`,
-        `${this.carbonPrefix}--btn--${this.kind.toLowerCase()}`,
-      ];
-
-      if (this.size === 'small' || (this.size === undefined && this.small)) {
-        classes.push(`${this.carbonPrefix}--btn--sm`);
-      }
-      if (this.size === 'field') {
-        classes.push(`${this.carbonPrefix}--btn--field`);
-      }
-      return classes;
+      return this.buttonClassOpts({ iconOnly: true });
     },
     tipClasses() {
       const tipPosition = this.tipPosition || 'bottom';