Add wbr style for IE11 compatibility
What does this MR do?
This MR adds a CSS fix to ensure that <wbr>
elements work properly on IE11. This change is related to the addition of the gl-friendly-wrap
component to GitLab UI: gitlab-ui!246 (merged)
How to test this?
- Make sure your Node modules are up-to-date by running
yarn
. - Apply the patch below
- Open the
Set status
modal on IE11
Show the patch
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index c0659a0173a..ca4d7b4f237 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -5,7 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
import { __, s__ } from '~/locale';
import Api from '~/api';
-import { GlModal, GlTooltipDirective } from '@gitlab/ui';
+import { GlModal, GlTooltipDirective, GlFriendlyWrap } from '@gitlab/ui';
import eventHub from './event_hub';
import EmojiMenuInModal from './emoji_menu_in_modal';
@@ -15,6 +15,7 @@ export default {
components: {
Icon,
GlModal,
+ GlFriendlyWrap,
},
directives: {
GlTooltip: GlTooltipDirective,
@@ -170,6 +171,9 @@ export default {
@cancel="removeStatus"
>
<div>
+ <gl-friendly-wrap
+ text="/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/Aenean/tincidunt/urna/ac/tellus/cursus/laoreet/aenean/blandit/erat/vel/est/maximus/porta/Sed/id/nunc/non/sapien/cursus/ullamcorper"
+ />
<input
v-model="emoji"
class="js-status-emoji-field"
NOTE: there seem to be an issue with the modal's action buttons flowing out of the modal on IE11, which is not related to the present MR and will be treated separately: https://gitlab.com/gitlab-org/gitlab-ce/issues/61494
Here's what you should see:
Does this MR meet the acceptance criteria?
Conformity
Performance and testing
Edited by Paul Gascou-Vaillancourt