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 { ...@@ -56,6 +56,7 @@ export default {
<gl-modal <gl-modal
:id="`modal-peek-${metric}-details`" :id="`modal-peek-${metric}-details`"
:header-title-text="header" :header-title-text="header"
modal-size="lg"
class="performance-bar-modal" class="performance-bar-modal"
> >
<table <table
...@@ -70,7 +71,7 @@ export default { ...@@ -70,7 +71,7 @@ export default {
<td <td
v-for="key in keys" v-for="key in keys"
:key="key" :key="key"
class="break-word" class="break-word all-words"
> >
{{ item[key] }} {{ item[key] }}
</td> </td>
......
<script> <script>
const buttonVariants = ['danger', 'primary', 'success', 'warning']; const buttonVariants = ['danger', 'primary', 'success', 'warning'];
const sizeVariants = ['sm', 'md', 'lg'];
export default { export default {
name: 'GlModal', name: 'GlModal',
props: { props: {
id: { id: {
type: String, type: String,
required: false, required: false,
default: null, default: null,
}, },
modalSize: {
type: String,
required: false,
default: 'md',
validator: value => sizeVariants.includes(value),
},
headerTitleText: { headerTitleText: {
type: String, type: String,
required: false, required: false,
...@@ -27,7 +33,11 @@ export default { ...@@ -27,7 +33,11 @@ export default {
default: '', default: '',
}, },
}, },
computed: {
modalSizeClass() {
return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
},
},
methods: { methods: {
emitCancel(event) { emitCancel(event) {
this.$emit('cancel', event); this.$emit('cancel', event);
...@@ -48,6 +58,7 @@ export default { ...@@ -48,6 +58,7 @@ export default {
> >
<div <div
class="modal-dialog" class="modal-dialog"
:class="modalSizeClass"
role="document" role="document"
> >
<div class="modal-content"> <div class="modal-content">
......
...@@ -448,6 +448,10 @@ img.emoji { ...@@ -448,6 +448,10 @@ img.emoji {
.break-word { .break-word {
word-wrap: break-word; word-wrap: break-word;
&.all-words {
word-break: break-word;
}
} }
/** COMMON CLASSES **/ /** COMMON CLASSES **/
......
...@@ -190,4 +190,37 @@ describe('GlModal', () => { ...@@ -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