@gitlab/ui 32.32.0 → 32.33.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.33.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.32.0...v32.33.0) (2021-11-04)
+
+
+### Features
+
+* **GlTruncate:** show full text in a tooltip ([168c532](https://gitlab.com/gitlab-org/gitlab-ui/commit/168c5325c1fab5174cfa5ad092d829ad11c85363))
+
 # [32.32.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.31.0...v32.32.0) (2021-11-03)
 
 

package/dist/components/utilities/truncate/truncate.documentation.js

@@ -12,6 +12,9 @@ var truncate_documentation = {
     position: {
       additionalInfo: 'Ellipsis position',
       enum: 'truncateOptions'
+    },
+    withTooltip: {
+      additionalInfo: 'Display the full text in a tooltip only if it is being truncated'
     }
   }
 };

package/dist/components/utilities/truncate/truncate.js

@@ -1,7 +1,14 @@
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  POSITION,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlResizeObserver: GlResizeObserverDirective
+  },
   props: {
     text: {
       type: String,
@@ -12,12 +19,17 @@ var script = {
       required: false,
       default: POSITION.END,
       validator: value => Object.values(POSITION).includes(value)
+    },
+    withTooltip: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
   data() {
     return {
-      POSITION
+      isTruncated: false
     };
   },
 
@@ -32,6 +44,26 @@ var script = {
 
     last() {
       return this.text.slice(this.middleIndex);
+    },
+
+    isTooltipDisabled() {
+      return !this.withTooltip || !this.isTruncated;
+    }
+
+  },
+  watch: {
+    withTooltip(withTooltip) {
+      if (withTooltip) {
+        this.checkTruncationState();
+      }
+    }
+
+  },
+  methods: {
+    checkTruncationState() {
+      if (this.withTooltip) {
+        this.isTruncated = this.$refs.text.scrollWidth > this.$refs.text.offsetWidth;
+      }
     }
 
   }
@@ -41,7 +73,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.position === _vm.POSITION.START)?_c('span',{staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{staticClass:"gl-truncate-start gl-text-overflow-ellipsis!"},[_vm._v("‎"+_vm._s(_vm.text)+"‎")])]):(_vm.position === _vm.POSITION.MIDDLE)?_c('span',{staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.first))]),_c('span',{staticClass:"gl-truncate-start"},[_vm._v("‎"+_vm._s(_vm.last)+"‎")])]):_c('span',{staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.text))])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.position === _vm.$options.POSITION.START)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-start gl-text-overflow-ellipsis!"},[_vm._v("‎"+_vm._s(_vm.text)+"‎")])]):(_vm.position === _vm.$options.POSITION.MIDDLE)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.first))]),_c('span',{staticClass:"gl-truncate-start"},[_vm._v("‎"+_vm._s(_vm.last)+"‎")])]):_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"data-testid":"truncate-end-container","title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.text))])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/resize_observer/resize_observer.documentation.js

@@ -1,6 +1,6 @@
 import examples from './examples';
 
-var description = "# Resize Observer\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n";
+var description = "# Resize Observer\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
 
 var resize_observer_documentation = {
   followsDesignSystem: false,

package/dist/directives/resize_observer/resize_observer.js

@@ -1,37 +1,57 @@
 import isFunction from 'lodash/isFunction';
 
 let observer = null;
+
+const attachObserver = (el, resizeHandler) => {
+  if (!isFunction(resizeHandler)) {
+    throw TypeError('directive value must be a function');
+  }
+
+  if (!observer) {
+    // the observer instance is shared for performance reasons
+    // more information: https://github.com/WICG/ResizeObserver/issues/59
+    observer = new ResizeObserver(entries => {
+      entries.forEach(event => {
+        event.target.glResizeHandler(event);
+      });
+    });
+  }
+
+  el.glResizeHandler = resizeHandler;
+  observer.observe(el);
+};
+
+const detachObserver = el => {
+  if (el.glResizeHandler) {
+    var _observer;
+
+    delete el.glResizeHandler;
+    (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(el);
+  }
+};
+
 const GlResizeObserverDirective = {
   bind(el, {
-    value: resizeHandler
+    value: resizeHandler,
+    arg: enabled = true
   }) {
-    if (!isFunction(resizeHandler)) {
-      throw TypeError('directive value must be a function');
-    }
-
-    if (!observer) {
-      // the observer instance is shared for performance reasons
-      // more information: https://github.com/WICG/ResizeObserver/issues/59
-      observer = new ResizeObserver(entries => {
-        entries.forEach(event => {
-          event.target.glResizeHandler(event);
-        });
-      });
+    if (enabled) {
+      attachObserver(el, resizeHandler);
     }
-
-    el.glResizeHandler = resizeHandler;
-    observer.observe(el);
   },
 
-  unbind(el) {
-    if (el.glResizeHandler) {
-      var _observer;
-
-      delete el.glResizeHandler;
-      (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(el);
+  update(el, {
+    value: resizeHandler,
+    arg: enabled = true
+  }) {
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    } else {
+      detachObserver(el);
     }
-  }
+  },
 
+  unbind: detachObserver
 };
 
 export { GlResizeObserverDirective };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.32.0",
+  "version": "32.33.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.218.0",
+    "@gitlab/svgs": "1.219.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/utilities/truncate/truncate.documentation.js

@@ -12,5 +12,8 @@ export default {
       additionalInfo: 'Ellipsis position',
       enum: 'truncateOptions',
     },
+    withTooltip: {
+      additionalInfo: 'Display the full text in a tooltip only if it is being truncated',
+    },
   },
 };

package/src/components/utilities/truncate/truncate.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { POSITION } from './constants';
 import Truncate from './truncate.vue';
+import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
 
 const removeSpecialChar = (text) => {
   return text.replace(/‎|\u200E/gi, '');
@@ -18,6 +19,9 @@ describe('Truncate component', () => {
   const createComponent = (props) => {
     wrapper = shallowMount(Truncate, {
       propsData: { ...defaultProps, ...props },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -45,6 +49,10 @@ describe('Truncate component', () => {
     it('should have the default position', () => {
       expect(wrapper.props('position')).toBe('end');
     });
+
+    it('disables the tooltip by default', () => {
+      expect(getBinding(wrapper.element, 'gl-tooltip').value.disabled).toBe(true);
+    });
   });
 
   describe('start truncation', () => {

package/src/components/utilities/truncate/truncate.stories.js

@@ -1,4 +1,4 @@
-import { withKnobs, text, select } from '@storybook/addon-knobs';
+import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTruncate } from '../../../../index';
 import { POSITION } from './constants';
@@ -8,11 +8,12 @@ const components = {
   GlTruncate,
 };
 
-const template = '<gl-truncate :text="text" :position="position" />';
+const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
 
 function generateProps({
   longText = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
   position = 'middle',
+  withTooltip = false,
 } = {}) {
   return {
     text: {
@@ -23,6 +24,9 @@ function generateProps({
       type: String,
       default: select('position', Object.values(POSITION), position),
     },
+    withTooltip: {
+      default: boolean('withTooltip', withTooltip),
+    },
   };
 }
 

package/src/components/utilities/truncate/truncate.vue

@@ -1,7 +1,14 @@
 <script>
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION } from './constants';
 
 export default {
+  POSITION,
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlResizeObserver: GlResizeObserverDirective,
+  },
   props: {
     text: {
       type: String,
@@ -13,10 +20,15 @@ export default {
       default: POSITION.END,
       validator: (value) => Object.values(POSITION).includes(value),
     },
+    withTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
-      POSITION,
+      isTruncated: false,
     };
   },
   computed: {
@@ -30,24 +42,62 @@ export default {
     last() {
       return this.text.slice(this.middleIndex);
     },
+    isTooltipDisabled() {
+      return !this.withTooltip || !this.isTruncated;
+    },
+  },
+  watch: {
+    withTooltip(withTooltip) {
+      if (withTooltip) {
+        this.checkTruncationState();
+      }
+    },
+  },
+  methods: {
+    checkTruncationState() {
+      if (this.withTooltip) {
+        this.isTruncated = this.$refs.text.scrollWidth > this.$refs.text.offsetWidth;
+      }
+    },
   },
 };
 </script>
 
 <template>
   <!-- START  -->
-  <span v-if="position === POSITION.START" class="gl-truncate" :title="text">
-    <span class="gl-truncate-start gl-text-overflow-ellipsis!">&lrm;{{ text }}&lrm;</span>
+  <span
+    v-if="position === $options.POSITION.START"
+    v-gl-tooltip="{ disabled: isTooltipDisabled }"
+    v-gl-resize-observer:[withTooltip]="checkTruncationState"
+    class="gl-truncate"
+    :title="text"
+  >
+    <span ref="text" class="gl-truncate-start gl-text-overflow-ellipsis!"
+      >&lrm;{{ text }}&lrm;</span
+    >
   </span>
 
   <!-- MIDDLE  -->
-  <span v-else-if="position === POSITION.MIDDLE" class="gl-truncate" :title="text">
-    <span class="gl-truncate-end">{{ first }}</span
+  <span
+    v-else-if="position === $options.POSITION.MIDDLE"
+    v-gl-tooltip="{ disabled: isTooltipDisabled }"
+    v-gl-resize-observer:[withTooltip]="checkTruncationState"
+    class="gl-truncate"
+    :title="text"
+  >
+    <span ref="text" class="gl-truncate-end">{{ first }}</span
     ><span class="gl-truncate-start">&lrm;{{ last }}&lrm;</span>
   </span>
 
   <!-- END  -->
-  <span v-else class="gl-truncate" :title="text">
-    <span class="gl-truncate-end">{{ text }}</span>
+  <span
+    v-else
+    v-gl-tooltip="{ disabled: isTooltipDisabled }"
+    v-gl-resize-observer:[withTooltip]="checkTruncationState"
+    class="gl-truncate"
+    data-testid="truncate-end-container"
+    :title="text"
+  >
+    <span ref="text" class="gl-truncate-end">{{ text }}</span>
   </span>
 </template>

package/src/directives/resize_observer/resize_observer.js

@@ -2,29 +2,44 @@ import isFunction from 'lodash/isFunction';
 
 let observer = null;
 
-export const GlResizeObserverDirective = {
-  bind(el, { value: resizeHandler }) {
-    if (!isFunction(resizeHandler)) {
-      throw TypeError('directive value must be a function');
-    }
+const attachObserver = (el, resizeHandler) => {
+  if (!isFunction(resizeHandler)) {
+    throw TypeError('directive value must be a function');
+  }
 
-    if (!observer) {
-      // the observer instance is shared for performance reasons
-      // more information: https://github.com/WICG/ResizeObserver/issues/59
-      observer = new ResizeObserver((entries) => {
-        entries.forEach((event) => {
-          event.target.glResizeHandler(event);
-        });
+  if (!observer) {
+    // the observer instance is shared for performance reasons
+    // more information: https://github.com/WICG/ResizeObserver/issues/59
+    observer = new ResizeObserver((entries) => {
+      entries.forEach((event) => {
+        event.target.glResizeHandler(event);
       });
-    }
+    });
+  }
+
+  el.glResizeHandler = resizeHandler;
+  observer.observe(el);
+};
 
-    el.glResizeHandler = resizeHandler;
-    observer.observe(el);
+const detachObserver = (el) => {
+  if (el.glResizeHandler) {
+    delete el.glResizeHandler;
+    observer?.unobserve(el);
+  }
+};
+
+export const GlResizeObserverDirective = {
+  bind(el, { value: resizeHandler, arg: enabled = true }) {
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    }
   },
-  unbind(el) {
-    if (el.glResizeHandler) {
-      delete el.glResizeHandler;
-      observer?.unobserve(el);
+  update(el, { value: resizeHandler, arg: enabled = true }) {
+    if (enabled) {
+      attachObserver(el, resizeHandler);
+    } else {
+      detachObserver(el);
     }
   },
+  unbind: detachObserver,
 };

package/src/directives/resize_observer/resize_observer.md

@@ -38,3 +38,23 @@ export default {
   </div>
 </template>
 ```
+
+The observer can be toggled on or off by passing a boolean argument to the directive:
+
+```html
+<script>
+export default {
+  data() {
+    return {
+      shouldObserve: true,
+    };
+  },
+  methods: {
+    handleResize() {},
+  },
+};
+</script>
+<template>
+  <div v-gl-resize-observer-directive[shouldObserve]="handleResize"></div>
+</template>
+```

package/src/directives/resize_observer/resize_observer.spec.js

@@ -10,7 +10,7 @@ describe('resize observer directive', () => {
   const localVue = createLocalVue();
   let wrapper;
 
-  const createComponent = ({ template } = {}) => {
+  const createComponent = ({ template, data = {} } = {}) => {
     const defaultTemplate = `<div v-resize-observer="handleResize"></div>`;
 
     const component = {
@@ -21,6 +21,9 @@ describe('resize observer directive', () => {
         handleResize: mockHandleResize,
       },
       template: template || defaultTemplate,
+      data() {
+        return data;
+      },
     };
 
     wrapper = shallowMount(component, { localVue });
@@ -52,6 +55,13 @@ describe('resize observer directive', () => {
     expect(observesElement(wrapper.element)).toBe(true);
   });
 
+  it('does not subscribe if the argument is false', () => {
+    createComponent({ template: '<div v-resize-observer:[false]="handleResize"></div>' });
+
+    expect(observersCount()).toBe(0);
+    expect(observesElement(wrapper.element)).toBe(false);
+  });
+
   it('passes the first entries "contentRect" and "target" to the given handler', () => {
     createComponent();
 
@@ -61,6 +71,28 @@ describe('resize observer directive', () => {
     expect(mockHandleResize).toHaveBeenCalledWith({ contentRect: {}, target: wrapper.element });
   });
 
+  it("detaches then reattaches observer based on argument's value", async () => {
+    expect(observersCount()).toBe(0);
+
+    createComponent({
+      template: '<div v-resize-observer:[isEnabled]="handleResize"></div>',
+      data: {
+        isEnabled: true,
+      },
+    });
+
+    expect(observersCount()).toBe(1);
+    expect(wrapper.element.glResizeHandler).not.toBeFalsy();
+
+    await wrapper.setData({ isEnabled: false });
+
+    expect(wrapper.element.glResizeHandler).toBeFalsy();
+
+    await wrapper.setData({ isEnabled: true });
+
+    expect(wrapper.element.glResizeHandler).not.toBeFalsy();
+  });
+
   it('does a clean up when the component is destroyed', () => {
     createComponent();