@gitlab/ui 32.29.2 → 32.33.0

package/package.json

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

@@ -295,7 +295,6 @@ export const glIconChevronRight = '#{'data:image/svg+xml}'
 export const glIconChevronDown = '#{'data:image/svg+xml}'
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
-export const glDeprecatedIconSizes = '8 12 14 16 24 32 48 72 10 18'
 export const glDropdownWidth = '15rem'
 export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'

package/scss_to_js/scss_variables.json

@@ -1557,11 +1557,6 @@
       "value": "8 12 14 16 24 32 48 72",
       "compiledValue": "8 12 14 16 24 32 48 72"
     },
-    {
-      "name": "$gl-deprecated-icon-sizes",
-      "value": "join($gl-icon-sizes, 10 18)",
-      "compiledValue": "8 12 14 16 24 32 48 72 10 18"
-    },
     {
       "name": "$gl-dropdown-width",
       "value": "px-to-rem(240px)",

package/src/components/base/icon/icon.scss

@@ -1,6 +1,6 @@
 .gl-icon {
   fill: currentColor;
-  @each $size in $gl-deprecated-icon-sizes {
+  @each $size in $gl-icon-sizes {
     &.s#{$size} {
       width: #{$size}px;
       height: #{$size}px;

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

@@ -25,6 +25,7 @@ describe('Icon component', () => {
     });
   };
 
+  const validateSize = (size) => Icon.props.size.validator(size);
   const validateName = (name) => Icon.props.name.validator(name);
 
   afterEach(() => {
@@ -52,35 +53,14 @@ describe('Icon component', () => {
   });
 
   describe('size validator', () => {
-    beforeEach(() => {
-      consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
-    });
-
     const maxSize = Math.max(...iconSizeOptions);
 
-    it('fails with size outside options', async () => {
-      createComponent({
-        size: maxSize + 10,
-      });
-
-      expect(consoleSpy).toBeCalledWith(
-        `[gitlab-ui] Unexpected value '${maxSize + 10}' was provided for the icon size`
-      );
-    });
-
-    it('passes with use-deprecated-sizes', () => {
-      createComponent({
-        size: maxSize + 10,
-        useDeprecatedSizes: true,
-      });
-
-      expect(consoleSpy).not.toBeCalled();
+    it('fails with size outside options', () => {
+      expect(validateSize(maxSize + 10)).toBe(false);
     });
 
     it('passes with size in options', () => {
-      createComponent({ size: maxSize });
-
-      expect(consoleSpy).not.toBeCalled();
+      expect(validateSize(maxSize)).toBe(true);
     });
   });
 

package/src/components/base/icon/icon.vue

@@ -55,15 +55,7 @@ export default {
       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,
+      validator: (value) => iconSizeOptions.includes(value),
     },
   },
   computed: {
@@ -74,13 +66,6 @@ export default {
       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/src/components/base/toggle/toggle.spec.js

@@ -8,14 +8,12 @@ describe('toggle', () => {
   let wrapper;
 
   const label = 'toggle label';
-  const labelId = 'toggle-label-id';
   const helpText = 'help text';
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMount(Toggle, {
       propsData: {
         label,
-        labelId,
         ...props,
       },
     });
@@ -131,7 +129,7 @@ describe('toggle', () => {
       });
 
       it('has accessible name for the button', () => {
-        expect(findButton().attributes('aria-labelledby')).toBe(labelId);
+        expect(findButton().attributes('aria-labelledby')).toBeDefined();
       });
     });
   });

package/src/components/base/toggle/toggle.vue

@@ -1,4 +1,6 @@
 <script>
+import { uniqueId } from 'lodash';
+
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -60,13 +62,6 @@ export default {
       required: false,
       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.
      */
@@ -79,7 +74,11 @@ export default {
       },
     },
   },
-
+  data() {
+    return {
+      labelId: uniqueId('toggle-label-'),
+    };
+  },
   computed: {
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';

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();
 

package/src/scss/utilities.scss

@@ -889,6 +889,38 @@
   border-style: solid !important;
 }
 
+.gl-border-dashed {
+  border-style: dashed;
+}
+
+.gl-hover-border-dashed:hover {
+  border-style: dashed;
+}
+
+.gl-border-dashed\! {
+  border-style: dashed !important;
+}
+
+.gl-hover-border-dashed\!:hover {
+  border-style: dashed !important;
+}
+
+.gl-border-dotted {
+  border-style: dotted;
+}
+
+.gl-hover-border-dotted:hover {
+  border-style: dotted;
+}
+
+.gl-border-dotted\! {
+  border-style: dotted !important;
+}
+
+.gl-hover-border-dotted\!:hover {
+  border-style: dotted !important;
+}
+
 .gl-border-t-solid {
   border-top-style: solid;
 }

package/src/scss/utility-mixins/border.scss

@@ -15,6 +15,14 @@
   border-style: solid;
 }
 
+@mixin gl-border-dashed($hover: true) {
+  border-style: dashed;
+}
+
+@mixin gl-border-dotted($hover: true) {
+  border-style: dotted;
+}
+
 @mixin gl-border-t-solid($hover: true) {
   border-top-style: solid;
 }

package/src/scss/variables.scss

@@ -427,12 +427,7 @@ $gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="
 
 // Icons
 $default-icon-size: px-to-rem(16px);
-// $gl-deprecated-icon-sizes is used for css classes generation as there are still instances around codebase
-// where $gl-icon-sizes is a new list of supported icon sizes and will be used for icon size validation
-// $gl-deprecated-icon-sizes should be replaced with $gl-icon-sizes in scope
-// of this issue https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1232
 $gl-icon-sizes: 8 12 14 16 24 32 48 72;
-$gl-deprecated-icon-sizes: join($gl-icon-sizes, 10 18);
 
 // Dropdowns
 $gl-dropdown-width: px-to-rem(240px);