limit icon component size to valid valuesicon-sizes

2 files changed, 18 insertions, 5 deletions

diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 8f116233e72..4216660da8c 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -12,6 +12,9 @@
   />
 
 */
+  // only allow classes in images.scss e.g. s12
+  const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
+
   export default {
     props: {
       name: {
@@ -22,7 +25,10 @@
       size: {
         type: Number,
         required: false,
-        default: 0,
+        default: 16,
+        validator(value) {
+          return validSizes.includes(value);
+        },
       },
 
       cssClasses: {
@@ -42,10 +48,11 @@
     },
   };
 </script>
+
 <template>
   <svg
     :class="[iconSizeClass, cssClasses]">
-    <use 
+    <use
       v-bind="{'xlink:href':spriteHref}"/>
   </svg>
 </template>
diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js
index 104da4473ce..a22b6bd3a67 100644
--- a/spec/javascripts/vue_shared/components/icon_spec.js
+++ b/spec/javascripts/vue_shared/components/icon_spec.js
@@ -11,7 +11,7 @@ describe('Sprite Icon Component', function () {
 
       icon = mountComponent(IconComponent, {
         name: 'test',
-        size: 99,
+        size: 32,
         cssClasses: 'extraclasses',
       });
     });
@@ -34,12 +34,18 @@ describe('Sprite Icon Component', function () {
     });
 
     it('should properly compute iconSizeClass', function () {
-      expect(icon.iconSizeClass).toBe('s99');
+      expect(icon.iconSizeClass).toBe('s32');
+    });
+
+    it('forbids invalid size prop', () => {
+      expect(icon.$options.props.size.validator(NaN)).toBeFalsy();
+      expect(icon.$options.props.size.validator(0)).toBeFalsy();
+      expect(icon.$options.props.size.validator(9001)).toBeFalsy();
     });
 
     it('should properly render img css', function () {
       const classList = icon.$el.classList;
-      const containsSizeClass = classList.contains('s99');
+      const containsSizeClass = classList.contains('s32');
       const containsCustomClass = classList.contains('extraclasses');
       expect(containsSizeClass).toBe(true);
       expect(containsCustomClass).toBe(true);