Improve modal prop interface47049-performance-modal

2 files changed, 41 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index 409ff440437..7ba58bd5959 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -1,9 +1,9 @@
 <script>
 const buttonVariants = ['danger', 'primary', 'success', 'warning'];
+const sizeVariants = ['sm', 'md', 'lg'];
 
 export default {
   name: 'GlModal',
-
   props: {
     id: {
       type: String,
@@ -14,6 +14,7 @@ export default {
       type: String,
       required: false,
       default: 'md',
+      validator: value => sizeVariants.includes(value),
     },
     headerTitleText: {
       type: String,
@@ -32,7 +33,11 @@ export default {
       default: '',
     },
   },
-
+  computed: {
+    modalSizeClass() {
+      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
+    },
+  },
   methods: {
     emitCancel(event) {
       this.$emit('cancel', event);
@@ -53,7 +58,7 @@ export default {
   >
     <div
       class="modal-dialog"
-      :class="`modal-${modalSize}`"
+      :class="modalSizeClass"
       role="document"
     >
       <div class="modal-content">
diff --git a/spec/javascripts/vue_shared/components/gl_modal_spec.js b/spec/javascripts/vue_shared/components/gl_modal_spec.js
index 85cb1b90fc6..23be8d93b81 100644
--- a/spec/javascripts/vue_shared/components/gl_modal_spec.js
+++ b/spec/javascripts/vue_shared/components/gl_modal_spec.js
@@ -190,4 +190,37 @@ describe('GlModal', () => {
       });
     });
   });
+
+  describe('handling sizes', () => {
+    it('should render modal-sm', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'sm',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true);
+    });
+
+    it('should render modal-lg', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'lg',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true);
+    });
+
+    it('should not add modal size classes when md size is passed', () => {
+      vm = mountComponent(modalComponent, {
+        modalSize: 'md',
+      });
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false);
+    });
+
+    it('should not add modal size classes by default', () => {
+      vm = mountComponent(modalComponent, {});
+
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false);
+      expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false);
+    });
+  });
 });