@gitlab/ui 71.1.0 → 71.1.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [71.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.1.0...v71.1.1) (2023-11-28)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Make close button keyboard accessible ([78d809c](https://gitlab.com/gitlab-org/gitlab-ui/commit/78d809ccd7065ee61c90e09f48daa014f697557a))
+
 # [71.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.0.0...v71.1.0) (2023-11-24)
 
 

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -122,7 +122,8 @@ var script = {
     },
     eventListeners() {
       return this.viewOnly ? {} : {
-        mousedown: this.destroyByClose
+        mousedown: this.stopMousedownOnCloseButton,
+        close: this.destroyByClose
       };
     }
   },
@@ -139,12 +140,14 @@ var script = {
         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/dist/components/base/filtered_search/filtered_search_token.js

@@ -1,6 +1,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
 import { tokenToOption, createTerm, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -116,7 +117,8 @@ var script = {
     },
     eventListeners() {
       return this.viewOnly ? {} : {
-        mousedown: this.destroyByClose
+        mousedown: this.stopMousedownOnCloseButton,
+        close: this.destroyByClose
       };
     }
   },
@@ -315,12 +317,13 @@ var script = {
        */
       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');
     }
   }
 };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Tue, 28 Nov 2023 15:59:58 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Tue, 28 Nov 2023 15:59:58 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Tue, 28 Nov 2023 15:59:58 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Tue, 28 Nov 2023 15:59:58 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 24 Nov 2023 01:03:35 GMT
+// Generated on Tue, 28 Nov 2023 15:59:58 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 24 Nov 2023 01:03:35 GMT
+// Generated on Tue, 28 Nov 2023 15:59:58 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.1.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>