@gitlab/ui 77.5.0 → 77.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [77.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.6.0...v77.7.0) (2024-03-04)
+
+
+### Features
+
+* **GlLink:** adding deprecated export for upcoming breaking changes ([4a633ce](https://gitlab.com/gitlab-org/gitlab-ui/commit/4a633ce456e7a6dd4675365fddf0df83216ffc30))
+
+# [77.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.5.0...v77.6.0) (2024-03-01)
+
+
+### Features
+
+* **GlDisclosureDropdownItem:** Support Vue router links ([2bff76d](https://gitlab.com/gitlab-org/gitlab-ui/commit/2bff76de9f1c675eea407d92b646018395be0b2e))
+
 # [77.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.4.0...v77.5.0) (2024-03-01)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -1,3 +1,4 @@
+import { BLink } from 'bootstrap-vue/esm/index.js';
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 import { isItem } from './utils';
@@ -8,6 +9,9 @@ const ITEM_CLASS = 'gl-new-dropdown-item';
 var script = {
   name: DISCLOSURE_DROPDOWN_ITEM_NAME,
   ITEM_CLASS,
+  components: {
+    BLink
+  },
   props: {
     item: {
       type: Object,
@@ -18,8 +22,8 @@ var script = {
   },
   computed: {
     isLink() {
-      var _this$item;
-      return typeof ((_this$item = this.item) === null || _this$item === void 0 ? void 0 : _this$item.href) === 'string';
+      var _this$item, _this$item2;
+      return typeof ((_this$item = this.item) === null || _this$item === void 0 ? void 0 : _this$item.href) === 'string' || typeof ((_this$item2 = this.item) === null || _this$item2 === void 0 ? void 0 : _this$item2.to) === 'string';
     },
     isCustomContent() {
       return Boolean(this.$scopedSlots.default);
@@ -29,9 +33,10 @@ var script = {
         item
       } = this;
       if (this.isLink) return {
-        is: 'a',
+        is: BLink,
         attrs: {
           href: item.href,
+          to: item.to,
           ...item.extraAttrs
         },
         listeners: {
@@ -54,16 +59,16 @@ var script = {
       };
     },
     listIndex() {
-      var _this$item2, _this$item2$extraAttr;
-      return (_this$item2 = this.item) !== null && _this$item2 !== void 0 && (_this$item2$extraAttr = _this$item2.extraAttrs) !== null && _this$item2$extraAttr !== void 0 && _this$item2$extraAttr.disabled ? null : 0;
+      var _this$item3, _this$item3$extraAttr;
+      return (_this$item3 = this.item) !== null && _this$item3 !== void 0 && (_this$item3$extraAttr = _this$item3.extraAttrs) !== null && _this$item3$extraAttr !== void 0 && _this$item3$extraAttr.disabled ? null : 0;
     },
     componentIndex() {
-      var _this$item3, _this$item3$extraAttr;
-      return (_this$item3 = this.item) !== null && _this$item3 !== void 0 && (_this$item3$extraAttr = _this$item3.extraAttrs) !== null && _this$item3$extraAttr !== void 0 && _this$item3$extraAttr.disabled ? null : -1;
+      var _this$item4, _this$item4$extraAttr;
+      return (_this$item4 = this.item) !== null && _this$item4 !== void 0 && (_this$item4$extraAttr = _this$item4.extraAttrs) !== null && _this$item4$extraAttr !== void 0 && _this$item4$extraAttr.disabled ? null : -1;
     },
     wrapperClass() {
-      var _this$item$wrapperCla, _this$item4;
-      return (_this$item$wrapperCla = (_this$item4 = this.item) === null || _this$item4 === void 0 ? void 0 : _this$item4.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '';
+      var _this$item$wrapperCla, _this$item5;
+      return (_this$item$wrapperCla = (_this$item5 = this.item) === null || _this$item5 === void 0 ? void 0 : _this$item5.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '';
     },
     wrapperListeners() {
       const listeners = {
@@ -84,16 +89,21 @@ var script = {
         if (this.isCustomContent) {
           this.action();
         } else {
-          var _this$$refs$item;
           stopEvent(event);
           /** Instead of simply navigating or calling the action, we want
            * the `a/button` to be the target of the event as it might have additional attributes.
            * E.g. `a` might have `target` attribute.
            */
-          (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(new MouseEvent('click', {
+          const e = new MouseEvent('click', {
             bubbles: true,
             cancelable: true
-          }));
+          });
+          if (this.isLink) {
+            this.$refs.item.$el.dispatchEvent(e);
+          } else {
+            var _this$$refs$item;
+            (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(e);
+          }
         }
       }
     },

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -24,6 +24,12 @@ const mockItems = [{
     rel: 'nofollow',
     target: '_blank'
   }
+}, {
+  text: 'Edit merge request',
+  to: '/edit',
+  extraAttrs: {
+    'data-uuid': '1234'
+  }
 }];
 const mockItemsCustomItem = [{
   text: 'Assigned to you',

package/dist/index.js

@@ -12,7 +12,7 @@ export { default as GlFormCheckboxTree } from './components/base/form/form_check
 export { default as GlMarkdown } from './components/base/markdown/markdown';
 export { default as GlNavbar } from './components/base/navbar/navbar';
 export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer';
-export { default as GlLink } from './components/base/link/link';
+export { default as GlDeprecatedLink, default as GlLink } from './components/base/link/link';
 export { default as GlIcon } from './components/base/icon/icon';
 export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon';
 export { default as GlModal } from './components/base/modal/modal';

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Mar 2024 12:16:54 GMT
+ * Generated on Mon, 04 Mar 2024 19:50:55 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Mar 2024 12:16:54 GMT
+ * Generated on Mon, 04 Mar 2024 19:50:55 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Mar 2024 12:16:54 GMT
+ * Generated on Mon, 04 Mar 2024 19:50:55 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Mar 2024 12:16:54 GMT
+ * Generated on Mon, 04 Mar 2024 19:50:55 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, 01 Mar 2024 12:16:54 GMT
+// Generated on Mon, 04 Mar 2024 19:50:55 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 01 Mar 2024 12:16:54 GMT
+// Generated on Mon, 04 Mar 2024 19:50:55 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "77.5.0",
+  "version": "77.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -93,16 +93,16 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.85.0",
+    "@gitlab/svgs": "3.88.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -64,7 +64,7 @@ After closing, `GlDisclosureDropdown` emits a `hidden` event.
 ## Setting disclosure dropdown items
 
 Use the `items` prop to provide actions/links to the disclosure dropdown. Each
-item can be either an item or a group. For `Item`s, provide an `href` string to
+item can be either an item or a group. For `Item`s, provide an `href` or `to` string to
 make them render as links. Otherwise, they will be buttons. Provide an `action`
 function to items to be called when they are pressed, or, listen for the
 `action` event on the top-level component. Both will receive the given item as
@@ -81,6 +81,8 @@ type Item = {
   text: string;
   // href link
   href?: string;
+  // or, a Vue router link with `to`
+  to?: string;
   // Item action
   action?: (item: Item) => void;
   // Set of extra attributes applied directly to the element

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -140,6 +140,7 @@ describe('GlDisclosureDropdown', () => {
     let firstItem;
     let secondItem;
     let thirdItem;
+    let fourthItem;
 
     beforeEach(() => {
       buildWrapper({ items: mockItems });
@@ -147,6 +148,7 @@ describe('GlDisclosureDropdown', () => {
       firstItem = findListItem(0);
       secondItem = findListItem(1);
       thirdItem = findListItem(2);
+      fourthItem = findListItem(3);
     });
 
     it('should move the focus from toggle and down the list of items on `ARROW_DOWN` and stop on the last item', async () => {
@@ -160,7 +162,9 @@ describe('GlDisclosureDropdown', () => {
       await secondItem.trigger('keydown', { code: ARROW_DOWN });
       expect(thirdItem.element).toHaveFocus();
       await thirdItem.trigger('keydown', { code: ARROW_DOWN });
-      expect(thirdItem.element).toHaveFocus();
+      expect(fourthItem.element).toHaveFocus();
+      await fourthItem.trigger('keydown', { code: ARROW_DOWN });
+      expect(fourthItem.element).toHaveFocus();
     });
 
     it('should move the focus up the list of items on `ARROW_UP` and stop on the first item', async () => {
@@ -182,9 +186,9 @@ describe('GlDisclosureDropdown', () => {
       );
       expect(firstItem.element).toHaveFocus();
       await firstItem.trigger('keydown', { code: END });
-      expect(thirdItem.element).toHaveFocus();
-      await thirdItem.trigger('keydown', { code: END });
-      expect(thirdItem.element).toHaveFocus();
+      expect(fourthItem.element).toHaveFocus();
+      await fourthItem.trigger('keydown', { code: END });
+      expect(fourthItem.element).toHaveFocus();
     });
 
     it('should move focus to the first item on `HOME` keydown', async () => {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { BLink } from 'bootstrap-vue';
 import { ENTER, SPACE } from '../constants';
 import { mockItems } from './mock_data';
 
@@ -47,21 +48,29 @@ describe('GlDisclosureDropdownItem', () => {
     });
   });
 
-  describe('when item has a `href`', () => {
-    const item = mockItems[0];
+  describe.each`
+    prop      | mockItem
+    ${'href'} | ${0}
+    ${'to'}   | ${3}
+  `('when item has a `$prop`', ({ prop, mockItem }) => {
+    const item = mockItems[mockItem];
 
     beforeEach(() => {
       buildWrapper({ item });
     });
 
-    const findLink = () => wrapper.find('a.gl-new-dropdown-item-content');
+    const findLink = () => wrapper.findComponent(BLink);
 
     it('should render a link', () => {
       expect(findLink().exists()).toBe(true);
     });
 
-    it('should set correct attributes', () => {
-      expect(findLink().attributes('href')).toBe(item.href);
+    it('should set correct class', () => {
+      expect(findLink().classes()).toContain('gl-new-dropdown-item-content');
+    });
+
+    it('should set correct props and attributes', () => {
+      expect(findLink().props(prop)).toBe(item[prop]);
       expect(findLink().attributes()).toEqual(expect.objectContaining(item.extraAttrs));
     });
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -1,4 +1,5 @@
 <script>
+import { BLink } from 'bootstrap-vue';
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 import { isItem } from './utils';
@@ -9,6 +10,7 @@ export const ITEM_CLASS = 'gl-new-dropdown-item';
 export default {
   name: DISCLOSURE_DROPDOWN_ITEM_NAME,
   ITEM_CLASS,
+  components: { BLink },
   props: {
     item: {
       type: Object,
@@ -19,7 +21,7 @@ export default {
   },
   computed: {
     isLink() {
-      return typeof this.item?.href === 'string';
+      return typeof this.item?.href === 'string' || typeof this.item?.to === 'string';
     },
     isCustomContent() {
       return Boolean(this.$scopedSlots.default);
@@ -29,9 +31,10 @@ export default {
 
       if (this.isLink)
         return {
-          is: 'a',
+          is: BLink,
           attrs: {
             href: item.href,
+            to: item.to,
             ...item.extraAttrs,
           },
           listeners: {
@@ -85,9 +88,12 @@ export default {
            * the `a/button` to be the target of the event as it might have additional attributes.
            * E.g. `a` might have `target` attribute.
            */
-          this.$refs.item?.dispatchEvent(
-            new MouseEvent('click', { bubbles: true, cancelable: true })
-          );
+          const e = new MouseEvent('click', { bubbles: true, cancelable: true });
+          if (this.isLink) {
+            this.$refs.item.$el.dispatchEvent(e);
+          } else {
+            this.$refs.item?.dispatchEvent(e);
+          }
         }
       }
     },

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -28,6 +28,13 @@ export const mockItems = [
       target: '_blank',
     },
   },
+  {
+    text: 'Edit merge request',
+    to: '/edit',
+    extraAttrs: {
+      'data-uuid': '1234',
+    },
+  },
 ];
 
 export const mockItemsCustomItem = [

package/src/index.js

@@ -19,7 +19,7 @@ export { default as GlFormCheckboxTree } from './components/base/form/form_check
 export { default as GlMarkdown } from './components/base/markdown/markdown.vue';
 export { default as GlNavbar } from './components/base/navbar/navbar.vue';
 export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
-export { default as GlLink } from './components/base/link/link.vue';
+export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
 export { default as GlIcon } from './components/base/icon/icon.vue';
 export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon.vue';
 export { default as GlModal } from './components/base/modal/modal.vue';