Commit 5ef0e1c3 authored by Mike Greiling's avatar Mike Greiling

Merge branch '47049-performance-modal' into 'master'

Resolve "Performance bar modal is hard to read"

Closes #47049

See merge request gitlab-org/gitlab-ce!19334
parents 6f2cd9bc c07ee641
......@@ -56,6 +56,7 @@ export default {
<gl-modal
:id="`modal-peek-${metric}-details`"
:header-title-text="header"
modal-size="lg"
class="performance-bar-modal"
>
<table
......@@ -70,7 +71,7 @@ export default {
<td
v-for="key in keys"
:key="key"
class="break-word"
class="break-word all-words"
>
{{ item[key] }}
</td>
......
<script>
const buttonVariants = ['danger', 'primary', 'success', 'warning'];
const sizeVariants = ['sm', 'md', 'lg'];
export default {
name: 'GlModal',
props: {
id: {
type: String,
required: false,
default: null,
},
modalSize: {
type: String,
required: false,
default: 'md',
validator: value => sizeVariants.includes(value),
},
headerTitleText: {
type: String,
required: false,
......@@ -27,7 +33,11 @@ export default {
default: '',
},
},
computed: {
modalSizeClass() {
return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
},
},
methods: {
emitCancel(event) {
this.$emit('cancel', event);
......@@ -48,6 +58,7 @@ export default {
>
<div
class="modal-dialog"
:class="modalSizeClass"
role="document"
>
<div class="modal-content">
......
......@@ -448,6 +448,10 @@ img.emoji {
.break-word {
word-wrap: break-word;
&.all-words {
word-break: break-word;
}
}
/** COMMON CLASSES **/
......
......@@ -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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment