@gitlab/ui 32.29.2 → 32.33.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Features
+
+* **GlIcon:** remove support for deprecated icons sizes ([5ea2461](https://gitlab.com/gitlab-org/gitlab-ui/commit/5ea2461cfc1d3e2fd5f5c7f51f5e351e6b79ce5d))
+
+# [32.31.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.30.0...v32.31.0) (2021-11-02)
+
+
+### Features
+
+* **GlToggle:** Use uniqueId for toggle labels ([2ba11fb](https://gitlab.com/gitlab-org/gitlab-ui/commit/2ba11fbd5023233e4581507f24660a9ffa874f86))
+
+# [32.30.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.29.2...v32.30.0) (2021-11-01)
+
+
+### Features
+
+* **css:** Add `dashed` & `dotted` border styles ([a44161c](https://gitlab.com/gitlab-org/gitlab-ui/commit/a44161c7fddf6388e6fba635da8b47e1079be0b6))
+
 ## [32.29.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.29.1...v32.29.2) (2021-11-01)
 
 

package/dist/components/base/icon/icon.js

@@ -63,17 +63,8 @@ var script = {
     size: {
       type: Number,
       required: false,
-      default: 16
-    },
-
-    /**
-     * Is used to deprecate 10&18 icon sizes iteratively.
-     * More info here https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1232
-     */
-    useDeprecatedSizes: {
-      type: Boolean,
-      required: false,
-      default: false
+      default: 16,
+      validator: value => iconSizeOptions.includes(value)
     }
   },
   computed: {
@@ -85,15 +76,7 @@ var script = {
       return this.size ? `s${this.size}` : '';
     }
 
-  },
-
-  created() {
-    if (!iconSizeOptions.includes(this.size) && !this.useDeprecatedSizes) {
-      // eslint-disable-next-line no-console
-      console.warn(`[gitlab-ui] Unexpected value '${this.size}' was provided for the icon size`);
-    }
   }
-
 };
 
 /* script */

package/dist/components/base/toggle/toggle.js

@@ -1,3 +1,4 @@
+import _uniqueId from 'lodash/uniqueId';
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
@@ -65,14 +66,6 @@ var script = {
       default: undefined
     },
 
-    /**
-     * The id for the label. This id is used by the aria-labelledby attribute on the toggle button.
-     */
-    labelId: {
-      type: String,
-      required: true
-    },
-
     /**
      * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
      */
@@ -87,6 +80,13 @@ var script = {
 
     }
   },
+
+  data() {
+    return {
+      labelId: _uniqueId('toggle-label-')
+    };
+  },
+
   computed: {
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';

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 };