@gitlab/ui 79.3.0 → 79.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [79.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.3.0...v79.4.0) (2024-04-25)
+
+
+### Bug Fixes
+
+* **GlBreadcrumb:** Fix containerWidth calc with ResizeObserver ([daa8013](https://gitlab.com/gitlab-org/gitlab-ui/commit/daa80133e1e56383fb857c12cc9384c553a2b389))
+* **GlBreadcrumb:** Fix details in resize calc ([4025e2e](https://gitlab.com/gitlab-org/gitlab-ui/commit/4025e2e0af2a41aa843ccd7c6f1fae25fd2ac170))
+* **GlBreadcrumb:** Watch autoResize prop and react to change ([b4808bf](https://gitlab.com/gitlab-org/gitlab-ui/commit/b4808bfaa59646a6155b394d4c22d4a1c85c6cfb))
+
+
+### Features
+
+* **GlBreadcrumb:** Add boolean prop to disable auto-resize ([0dad528](https://gitlab.com/gitlab-org/gitlab-ui/commit/0dad528cb2774c3c7bd9ccdafb7f9c8b00a88c23))
+
 # [79.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.2.0...v79.3.0) (2024-04-25)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -50,6 +50,14 @@ var script = {
       type: String,
       required: false,
       default: () => translate('GlBreadcrumb.showMoreLabel', 'Show more breadcrumbs')
+    },
+    /**
+     * Allows to disable auto-resize behavior. Items will then overflow their container instead of being collapsed into a dropdown.
+     */
+    autoResize: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -97,17 +105,23 @@ var script = {
     items: {
       handler: 'measureAndMakeBreadcrumbsFit',
       deep: true
+    },
+    autoResize(newValue) {
+      if (newValue) this.enableAutoResize();else this.disableAutoResize();
     }
   },
   created() {
     this.debounceMakeBreadcrumbsFit = debounce(this.makeBreadcrumbsFit, 25);
   },
   mounted() {
-    window.addEventListener('resize', this.debounceMakeBreadcrumbsFit);
-    this.measureAndMakeBreadcrumbsFit();
+    if (this.autoResize) {
+      this.enableAutoResize();
+    } else {
+      this.resizeDone = true;
+    }
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.debounceMakeBreadcrumbsFit);
+    this.disableAutoResize();
   },
   methods: {
     resetItems() {
@@ -132,9 +146,9 @@ var script = {
       this.resizeDone = false;
       this.resetItems();
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = 50; // px
+      const buttonWidth = 40; // px
 
-      if (this.totalBreadcrumbsWidth + buttonWidth > containerWidth) {
+      if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.
         const startSlicingAt = 0;
 
@@ -158,6 +172,18 @@ var script = {
     },
     getAriaCurrentAttr(index) {
       return this.isLastItem(index) ? 'page' : false;
+    },
+    enableAutoResize() {
+      this.resizeObserver || (this.resizeObserver = new ResizeObserver(this.debounceMakeBreadcrumbsFit));
+      this.resizeObserver.observe(this.$el);
+      this.measureAndMakeBreadcrumbsFit();
+    },
+    disableAutoResize() {
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(this.$el);
+        this.resizeObserver = null;
+      }
+      this.resetItems();
     }
   }
 };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 08:42:27 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 08:42:27 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 08:42:27 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 08:42:27 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 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 Thu, 25 Apr 2024 08:42:27 GMT
+// Generated on Thu, 25 Apr 2024 15:30:17 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 25 Apr 2024 08:42:27 GMT
+// Generated on Thu, 25 Apr 2024 15:30:17 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "79.3.0",
+  "version": "79.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -29,6 +29,7 @@ describe('Breadcrumb component', () => {
   const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
   const findOverflowDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findOverflowingItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
 
   const findVisibleBreadcrumbItems = () =>
     findBreadcrumbItems().wrappers.filter((item) => item.isVisible());
@@ -43,21 +44,24 @@ describe('Breadcrumb component', () => {
     });
   };
 
-  const mockWrapperWidth = (widthInPx) => {
-    wrapper.element.style.width = `${widthInPx}px`;
-
-    Object.defineProperty(wrapper.element, 'clientWidth', {
+  const mockElementWidth = (element, widthInPx) => {
+    Object.defineProperty(element, 'clientWidth', {
       get: () => widthInPx,
-      configurable: true,
     });
   };
 
   const mockWideWrapperWidth = () => {
-    mockWrapperWidth(1000);
+    mockElementWidth(wrapper.element, 1000);
   };
 
   const mockSmallWrapperWidth = () => {
-    mockWrapperWidth(1);
+    mockElementWidth(wrapper.element, 1);
+  };
+
+  const mockItemsWidths = () => {
+    findBreadcrumbItems().wrappers.forEach((item) => {
+      mockElementWidth(item.element, 100);
+    });
   };
 
   describe('items', () => {
@@ -88,6 +92,7 @@ describe('Breadcrumb component', () => {
       beforeEach(async () => {
         createComponent({ items, showMoreLabel: 'More...' });
         mockSmallWrapperWidth();
+        mockItemsWidths();
         await wrapper.vm.$nextTick();
       });
 
@@ -100,6 +105,7 @@ describe('Breadcrumb component', () => {
       beforeEach(async () => {
         createComponent();
         mockSmallWrapperWidth();
+        mockItemsWidths();
         await wrapper.vm.$nextTick();
       });
 
@@ -109,6 +115,53 @@ describe('Breadcrumb component', () => {
     });
   });
 
+  describe('autoResize', () => {
+    describe('by default', () => {
+      beforeEach(async () => {
+        createComponent();
+        mockSmallWrapperWidth();
+        mockItemsWidths();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('moves overflowing items into dropdown', () => {
+        expect(findOverflowDropdown().exists()).toBe(true);
+        expect(findOverflowingItems().length).toBeGreaterThan(0);
+      });
+
+      it('reacts to prop changing to false', async () => {
+        expect(findOverflowDropdown().exists()).toBe(true);
+        await wrapper.setProps({ autoResize: false });
+        await wrapper.vm.$nextTick();
+        expect(findOverflowDropdown().exists()).toBe(false);
+        expect(findBreadcrumbItems().length).toEqual(items.length);
+      });
+    });
+
+    describe('when set to false', () => {
+      beforeEach(async () => {
+        createComponent({ items, autoResize: false });
+        mockSmallWrapperWidth();
+        mockItemsWidths();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('keeps all items visible', () => {
+        expect(findOverflowDropdown().exists()).toBe(false);
+        expect(findBreadcrumbItems().length).toEqual(items.length);
+      });
+
+      it('reacts to prop changing to true', async () => {
+        expect(findOverflowDropdown().exists()).toBe(false);
+        await wrapper.setProps({ autoResize: true });
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick(); // otherwise test fails with VUE_VERSION=3
+        expect(findOverflowDropdown().exists()).toBe(true);
+        expect(findOverflowingItems().length).toBeGreaterThan(0);
+      });
+    });
+  });
+
   describe('avatars', () => {
     it('renders 2 avatars when 2 avatarPaths are passed', async () => {
       createComponent();
@@ -169,6 +222,7 @@ describe('Breadcrumb component', () => {
       beforeEach(async () => {
         createComponent();
         mockSmallWrapperWidth();
+        mockItemsWidths();
         await wrapper.vm.$nextTick();
       });
 

package/src/components/base/breadcrumb/breadcrumb.stories.js

@@ -7,6 +7,7 @@ const template = `
     <gl-breadcrumb
         :items="items"
         :aria-label="ariaLabel"
+        :auto-resize="autoResize"
     />
   `;
 
@@ -15,6 +16,7 @@ const collapsedTemplate = `
     <gl-breadcrumb
         :items="items"
         :aria-label="ariaLabel"
+        :auto-resize="autoResize"
     />
   </div>
 `;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -48,6 +48,14 @@ export default {
       required: false,
       default: () => translate('GlBreadcrumb.showMoreLabel', 'Show more breadcrumbs'),
     },
+    /**
+     * Allows to disable auto-resize behavior. Items will then overflow their container instead of being collapsed into a dropdown.
+     */
+    autoResize: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -89,16 +97,23 @@ export default {
       handler: 'measureAndMakeBreadcrumbsFit',
       deep: true,
     },
+    autoResize(newValue) {
+      if (newValue) this.enableAutoResize();
+      else this.disableAutoResize();
+    },
   },
   created() {
     this.debounceMakeBreadcrumbsFit = debounce(this.makeBreadcrumbsFit, 25);
   },
   mounted() {
-    window.addEventListener('resize', this.debounceMakeBreadcrumbsFit);
-    this.measureAndMakeBreadcrumbsFit();
+    if (this.autoResize) {
+      this.enableAutoResize();
+    } else {
+      this.resizeDone = true;
+    }
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.debounceMakeBreadcrumbsFit);
+    this.disableAutoResize();
   },
   methods: {
     resetItems() {
@@ -126,9 +141,9 @@ export default {
       this.resetItems();
 
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = 50; // px
+      const buttonWidth = 40; // px
 
-      if (this.totalBreadcrumbsWidth + buttonWidth > containerWidth) {
+      if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.
         const startSlicingAt = 0;
 
@@ -156,6 +171,18 @@ export default {
     getAriaCurrentAttr(index) {
       return this.isLastItem(index) ? 'page' : false;
     },
+    enableAutoResize() {
+      this.resizeObserver ||= new ResizeObserver(this.debounceMakeBreadcrumbsFit);
+      this.resizeObserver.observe(this.$el);
+      this.measureAndMakeBreadcrumbsFit();
+    },
+    disableAutoResize() {
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(this.$el);
+        this.resizeObserver = null;
+      }
+      this.resetItems();
+    },
   },
 };
 </script>

package/src/components/base/form/form_date/form_date.stories.js

@@ -1,10 +1,13 @@
+import GlFormGroup from '../form_group/form_group.vue';
 import readme from './form_date.md';
 import GlFormDate from './form_date.vue';
 
 const defaultValue = (prop) => GlFormDate.props[prop].default;
 
 const template = `
+<gl-form-group :label="labelText" :label-for="inputId">
   <gl-form-date
+    :id="inputId"
     v-model="localValue"
     :disabled="disabled"
     :min="min"
@@ -13,9 +16,12 @@ const template = `
     :max-invalid-feedback="maxInvalidFeedback"
     :readonly="readonly"
     :value="value"
-  />`;
+  />
+</gl-form-group>`;
 
 const generateProps = ({
+  inputId = 'input-id',
+  labelText = 'Label',
   disabled = false,
   min = '',
   max = '',
@@ -24,6 +30,8 @@ const generateProps = ({
   readonly = false,
   value = '',
 } = {}) => ({
+  inputId,
+  labelText,
   disabled,
   min,
   max,
@@ -34,7 +42,7 @@ const generateProps = ({
 });
 
 const Template = (args) => ({
-  components: { GlFormDate },
+  components: { GlFormDate, GlFormGroup },
   props: Object.keys(args),
   watch: {
     value(newValue) {