@gitlab/ui 71.0.0 → 71.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.0.0",
+  "version": "71.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.5.1",
+    "cypress": "13.6.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

package/src/components/base/filtered_search/filtered_search.spec.js

@@ -809,7 +809,7 @@ describe('Filtered search integration tests', () => {
       wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))
     ).toEqual([false, false, false]);
 
-    await wrapper.find('.gl-token-close').trigger('mousedown');
+    await wrapper.find('.gl-token-close').trigger('click');
 
     expect(
       wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -125,7 +125,9 @@ export default {
       },
     },
     eventListeners() {
-      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+      return this.viewOnly
+        ? {}
+        : { mousedown: this.stopMousedownOnCloseButton, close: this.destroyByClose };
     },
   },
   methods: {
@@ -139,12 +141,14 @@ export default {
        */
       this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
     },
-    destroyByClose(event) {
+    stopMousedownOnCloseButton(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         stopEvent(event);
-        this.$emit('destroy');
       }
     },
+    destroyByClose() {
+      this.$emit('destroy');
+    },
     onComplete(type) {
       if (type === TERM_TOKEN_TYPE) {
         // We've completed this term token

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -274,6 +274,7 @@ describe('Filtered search token', () => {
         preventDefault: preventDefaultSpy,
         stopPropagation: stopPropagationSpy,
       });
+      closeWrapper.trigger('click');
 
       expect(preventDefaultSpy).toHaveBeenCalled();
       expect(stopPropagationSpy).toHaveBeenCalled();

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -2,6 +2,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token.vue';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 import { createTerm, tokenToOption, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
 
@@ -118,7 +119,9 @@ export default {
     },
 
     eventListeners() {
-      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+      return this.viewOnly
+        ? {}
+        : { mousedown: this.stopMousedownOnCloseButton, close: this.destroyByClose };
     },
   },
   segments: {
@@ -310,13 +313,15 @@ export default {
       this.$emit('complete');
     },
 
-    destroyByClose(event) {
+    stopMousedownOnCloseButton(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.$emit('destroy');
+        stopEvent(event);
       }
     },
+
+    destroyByClose() {
+      this.$emit('destroy');
+    },
   },
 };
 </script>

package/src/scss/utilities.scss

@@ -8361,6 +8361,48 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-text-overflow-ellipsis\! {
   text-overflow: ellipsis !important;
 }
+.gl-line-clamp-1 {
+  white-space: normal;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.gl-line-clamp-1\! {
+  white-space: normal !important;
+  -webkit-line-clamp: 1 !important;
+  -webkit-box-orient: vertical !important;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+}
+.gl-line-clamp-2 {
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.gl-line-clamp-2\! {
+  white-space: normal !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+}
+.gl-line-clamp-3 {
+  white-space: normal;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.gl-line-clamp-3\! {
+  white-space: normal !important;
+  -webkit-line-clamp: 3 !important;
+  -webkit-box-orient: vertical !important;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+}
 .gl-text-indent-0 {
   text-indent: 0;
 }

package/src/scss/utility-mixins/text.scss

@@ -67,6 +67,38 @@
   text-overflow: ellipsis;
 }
 
+/**
+* Line clamp utilities
+*
+* Naming convention: gl-line-clamp-{value}
+*/
+@mixin gl-line-clamp-1 {
+  white-space: normal;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@mixin gl-line-clamp-2 {
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@mixin gl-line-clamp-3 {
+  white-space: normal;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+}
+
 /**
 * Text indent utilities
 *