@gitlab/ui 32.32.0 → 32.35.0

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

@@ -4201,6 +4201,18 @@
   }
 }
 
+.gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
+.gl-lg-w-1px\! {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px !important;
+  }
+}
+
 .gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;

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

@@ -212,6 +212,12 @@
   }
 }
 
+@mixin gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
 @mixin gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;

package/src/utils/charts/config.js

@@ -12,6 +12,7 @@ import { ANNOTATIONS_SERIES_NAME, arrowSymbol, CHART_TYPE_BAR, CHART_TYPE_LINE }
 export const defaultAreaOpacity = 0.2;
 export const defaultFontSize = 12;
 export const defaultHeight = 400;
+export const defaultWidth = 300;
 export const validRenderers = ['canvas', 'svg'];
 
 export const axes = {
@@ -433,8 +434,8 @@ export const generateBarSeries = ({
   yAxisIndex,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1,
+    borderColor: color,
+    borderWidth: 1,
   },
   emphasis: {
     itemStyle: {

package/src/utils/charts/mock_data.js

@@ -43,6 +43,9 @@ export const mockDefaultChartOptions = {
     axisPointer: {
       show: true,
       label: {},
+      lineStyle: {
+        type: 'solid',
+      },
     },
   },
   yAxis: {
@@ -204,8 +207,8 @@ export const mockDefaultBarChartConfig = {
   yAxisIndex: 0,
   itemStyle: {
     color: hexToRgba(color, 0.2),
-    barBorderColor: color,
-    barBorderWidth: 1,
+    borderColor: color,
+    borderWidth: 1,
   },
   emphasis: {
     itemStyle: {

package/src/utils/charts/theme.js

@@ -105,15 +105,14 @@ const axes = {
     margin: 8,
     show: true,
     color: gray600,
-    textStyle: {
-      color: gray600,
-    },
+    hideOverlap: true,
   },
   axisLine: {
     show: false,
   },
   axisPointer: {
     lineStyle: {
+      type: 'solid',
       color: gray600,
     },
     label: {
@@ -175,6 +174,7 @@ const createTheme = (options = {}) => ({
   dataZoom: {
     borderColor: 'transparent',
     filterMode: 'none',
+    brushSelect: false,
     dataBackground: {
       lineStyle: {
         width: 2,
@@ -184,7 +184,7 @@ const createTheme = (options = {}) => ({
       // render unfilled zoom-graph if the series is a line chart without area styles
       // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
       areaStyle: isLineChartWithoutArea(options)
-        ? null
+        ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
         : {
             color: gray50,
             opacity: 1,
@@ -192,7 +192,10 @@ const createTheme = (options = {}) => ({
     },
     fillerColor: hexToRgba(gray200, 0.23),
     handleIcon: scrollHandleSvgPath,
-    handleColor: gray500,
+    handleStyle: {
+      borderColor: 'transparent',
+      color: gray500,
+    },
     handleSize: '50%',
     labelFormatter: () => null,
     textStyle: {
@@ -203,14 +206,16 @@ const createTheme = (options = {}) => ({
     top: '-5',
     left: 'center',
     itemSize: 14,
-    iconStyle: {
-      color: gray200,
-      borderWidth: 0,
-      emphasis: {
+    emphasis: {
+      iconStyle: {
         borderWidth: 0,
         color: gray700,
       },
     },
+    iconStyle: {
+      color: gray200,
+      borderWidth: 0,
+    },
     itemGap: 8,
     feature: {
       dataZoom: {