Skip to content

Add wbr style for IE11 compatibility

Paul Gascou-Vaillancourt requested to merge friendly-wrap-component into master

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:

WrappedPath

Does this MR meet the acceptance criteria?

Conformity

Performance and testing

Edited by Paul Gascou-Vaillancourt

Merge request reports