@gitlab/ui 32.36.0 → 32.40.0

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

@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import { logWarning } from '../../../utils/utils';
+import { waitForAnimationFrame } from '../../../utils/test_utils';
+import { glTableLiteWarning } from './constants';
+import Table from './table.vue';
+
+jest.mock('../../../utils/utils', () => ({
+  isDev: () => true,
+  logWarning: jest.fn(),
+}));
+
+describe('GlTable', () => {
+  const slotsTemplate = {
+    empty: `
+      <p>Placeholder empty text</p>`,
+  };
+
+  const factory = ({ props = {}, scopedSlots = {} } = {}) => {
+    shallowMount(Table, {
+      scopedSlots,
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    logWarning.mockClear();
+  });
+
+  it('should log a warning when not given any props or slots which qualifies for the usage of GlTable', async () => {
+    factory();
+    await waitForAnimationFrame();
+
+    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning);
+  });
+
+  it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {
+    factory({ props: { busy: true } });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+
+  it('should not log a warning when given a slot which qualifies for the usage of GlTable', async () => {
+    factory({ scopedSlots: slotsTemplate });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+});

package/src/components/base/table/table.vue

@@ -1,11 +1,27 @@
 <script>
 import { BTable } from 'bootstrap-vue';
+import { logWarning, isDev } from '../../../utils/utils';
+import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
+
+const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
+  return (
+    tableFullProps.some((prop) => $attrs[prop] !== undefined) ||
+    tableFullSlots.some((slot) => $scopedSlots[slot] !== undefined)
+  );
+};
 
 export default {
   components: {
     BTable,
   },
   inheritAttrs: false,
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning);
+    }
+  },
 };
 </script>
 

package/src/components/charts/bar/bar.spec.js

@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import BarChart from './bar.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
 const mockChartInstance = {
@@ -34,7 +33,6 @@ describe('Bar chart component', () => {
   let wrapper;
 
   const findChart = () => wrapper.findComponent(Chart);
-  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -123,19 +121,6 @@ describe('Bar chart component', () => {
           );
         });
       });
-
-      it('render accurate tooltip title and content', () => {
-        const expectedTooltipTitle = `${labelParams.value} (${defaultChartProps.yAxisTitle})`;
-
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-        return wrapper.vm.$nextTick(() => {
-          const tooltipTextContent = findChartTooltip().element.textContent;
-
-          expect(tooltipTextContent).toContain(expectedTooltipTitle);
-          expect(tooltipTextContent).toContain(defaultChartProps.xAxisTitle);
-          expect(tooltipTextContent).toContain(labelParams.seriesData[0].data[0]);
-        });
-      });
     });
   });
 });

package/src/components/charts/bar/bar.vue

@@ -238,8 +238,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

package/src/components/charts/sparkline/sparkline.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
 
@@ -12,18 +11,6 @@ const mockChartInstance = {
   resize: mockResize,
 };
 
-// echarts need to be mocked to prevent prop-validation in chart-tooltips to fail
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-jest.mock('~/utils/charts/theme', () => ({
-  sparkline: {
-    variants: { foo: 'foo', bar: 'bar' },
-    defaultVariant: 'foo',
-  },
-}));
-
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
   GlResizeObserverDirective: {
@@ -35,6 +22,11 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
 
 const localVue = createLocalVue();
 
+const ChartToolTipStub = {
+  name: 'chart-tooltip-stub',
+  template: '<div><slot name="default"></slot><slot name="title"></slot></div>',
+};
+
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
@@ -46,19 +38,23 @@ describe('sparkline chart component', () => {
         variant: null,
       },
       scopedSlots: { latestSeriesEntry: jest.fn() },
+      stubs: {
+        'chart-tooltip': ChartToolTipStub,
+      },
     };
 
     wrapper = shallowMount(SparklineChart, componentOptions);
   };
 
   // helpers
+  const getByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
   const getChart = () => wrapper.findComponent(Chart);
 
-  const getTooltip = () => wrapper.findComponent(ChartTooltip);
-  const getTooltipTitle = () => getTooltip().find('.js-tooltip-title');
-  const getTooltipContent = () => getTooltip().find('.js-tooltip-content');
+  const getTooltip = () => wrapper.findComponent(ChartToolTipStub);
+  const getTooltipTitle = () => getByTestId('tooltip-title');
+  const getTooltipContent = () => getByTestId('tooltip-content');
 
-  const getLastYValue = () => wrapper.find('.js-last-y-value');
+  const getLastYValue = () => getByTestId('last-y-value');
 
   const getChartOptions = () => getChart().props('options');
   const getXAxisLabelFormatter = () => {
@@ -87,7 +83,7 @@ describe('sparkline chart component', () => {
   });
 
   it('emits `chartCreated`, which passes on the chart instance', () => {
-    expect(wrapper.emitted('chartCreated').length).toBe(1);
+    expect(wrapper.emitted('chartCreated')).toHaveLength(1);
     expect(wrapper.emitted('chartCreated')[0][0]).toBe(mockChartInstance);
   });
 
@@ -153,7 +149,7 @@ describe('sparkline chart component', () => {
     expect(getTooltip().attributes('show')).toBeFalsy();
   });
 
-  it('adds the right content to the tooltip', () => {
+  it('adds the right content to the tooltip', async () => {
     const xValue = 'foo';
     const yValue = 'bar';
     const mockData = { seriesData: [{ data: [xValue, yValue] }] };
@@ -163,10 +159,9 @@ describe('sparkline chart component', () => {
     expect(getTooltipTitle().text()).toBe('');
     expect(getTooltipContent().text()).toBe('');
 
-    return waitForAnimationFrame().then(() => {
-      expect(getTooltipTitle().text()).toBe(xValue);
-      expect(getTooltipContent().text()).toBe(yValue);
-    });
+    await waitForAnimationFrame();
+    expect(getTooltipTitle().text()).toBe(xValue);
+    expect(getTooltipContent().text()).toBe(yValue);
   });
 
   it(`shows the last entry's y-value per default`, async () => {
@@ -182,13 +177,12 @@ describe('sparkline chart component', () => {
     expect(getLastYValue().text()).toBe(latestEntryYValue);
   });
 
-  it(`does not show the last entry's y-value if 'showLastYValue' is false`, () => {
+  it(`does not show the last entry's y-value if 'showLastYValue' is false`, async () => {
     expect(getLastYValue().exists()).toBe(true);
 
     wrapper.setProps({ showLastYValue: false });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(getLastYValue().exists()).toBe(false);
-    });
+    await wrapper.vm.$nextTick();
+    expect(getLastYValue().exists()).toBe(false);
   });
 });

package/src/components/charts/sparkline/sparkline.vue

@@ -174,9 +174,13 @@ export default {
 </script>
 
 <template>
-  <div v-resize-observer="handleResize" class="d-flex align-items-center" @mouseleave="hideTooltip">
+  <div
+    v-resize-observer="handleResize"
+    class="gl-display-flex gl-align-items-center"
+    @mouseleave="hideTooltip"
+  >
     <slot name="default"></slot>
-    <div class="flex-grow-1 position-relative">
+    <div class="gl-flex-grow-1 gl-relative">
       <chart :height="height" :options="options" @created="onChartCreated" />
       <chart-tooltip
         v-if="chartInstance"
@@ -187,17 +191,25 @@ export default {
         :style="{ pointerEvents: 'none' }"
         placement="top"
       >
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title" class="js-tooltip-title text-nowrap">{{ tooltip.title }}</div>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="default" class="js-tooltip-content d-flex">
-          <span v-if="tooltipLabel" class="pr-4 mr-auto">{{ tooltipLabel }}</span>
-          <strong>{{ tooltip.content }}</strong>
-        </div>
+        <template #title>
+          <div data-testid="tooltip-title" class="gl-white-space-nowrap">
+            {{ tooltip.title }}
+          </div>
+        </template>
+        <template #default>
+          <div class="gl-display-flex" data-testid="tooltip-content">
+            <span v-if="tooltipLabel" class="gl-pr-6 gl-mr-auto">{{ tooltipLabel }}</span>
+            <strong>{{ tooltip.content }}</strong>
+          </div>
+        </template>
       </chart-tooltip>
     </div>
-    <span v-if="showLastYValue" class="js-last-y-value d-inline-flex justify-content-center ml-3">{{
-      lastYValue
-    }}</span>
+    <span
+      v-if="showLastYValue"
+      class="gl-display-inline-flex gl-justify-content-center gl-ml-5"
+      data-testid="last-y-value"
+    >
+      {{ lastYValue }}
+    </span>
   </div>
 </template>

package/src/components/charts/stacked_column/stacked_column.spec.js

@@ -29,6 +29,15 @@ const defaultChartProps = {
   yAxisTitle: 'Commits',
 };
 
+const ChartTooltipStub = {
+  props: ChartTooltip.props,
+  template: `
+     <div>
+       <slot name="title" />
+       <slot />
+     </div>`,
+};
+
 describe('stacked column chart component', () => {
   let wrapper;
   let options;
@@ -36,7 +45,7 @@ describe('stacked column chart component', () => {
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
   const getOptions = () => findChart().props('options');
-  const findDataTooltip = () => wrapper.findComponent(ChartTooltip);
+  const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub);
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -45,6 +54,7 @@ describe('stacked column chart component', () => {
       propsData: { ...defaultChartProps, ...props },
       stubs: {
         'tooltip-default-format': TooltipDefaultFormat,
+        ChartTooltip: ChartTooltipStub,
       },
       slots,
     });

package/src/components/charts/stacked_column/stacked_column.vue

@@ -308,16 +308,13 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
+      <template #title>
+        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
       </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+
+      <slot name="tooltip-content">
         <tooltip-default-format :tooltip-content="tooltipContent" />
-      </template>
+      </slot>
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

package/src/scss/utilities.scss

@@ -1997,6 +1997,14 @@
   color: $body-color !important;
 }
 
+.gl-text-secondary {
+  color: $gl-text-color-secondary;
+}
+
+.gl-text-secondary\! {
+  color: $gl-text-color-secondary !important;
+}
+
 .gl-sm-text-body {
   @include gl-media-breakpoint-up(sm) {
   color: $body-color;

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

@@ -19,6 +19,10 @@
   color: $body-color;
 }
 
+@mixin gl-text-secondary {
+  color: $gl-text-color-secondary;
+}
+
 @mixin gl-sm-text-body {
   @include gl-media-breakpoint-up(sm) {
     @include gl-text-body;

package/src/scss/variables.scss

@@ -295,6 +295,9 @@ $t-gray-a-08: rgba(#000, 0.08);
 $t-gray-a-24: rgba(#000, 0.24);
 
 // Text
+$gl-text-color: $gray-900 !default;
+$gl-text-color-secondary: $gray-500 !default;
+
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
@@ -453,7 +456,7 @@ $modal-backdrop-opacity: 0.64;
 // Bootstrap overrides
 // these should ideally be moved further up in the file to the compoent-relevant sections
 // but they can wait here for now
-$body-color: $gray-900 !default;
+$body-color: $gl-text-color !default;
 
 $secondary: $gray-50;
 $success: $green-500;

package/src/utils/constants.js

@@ -115,7 +115,7 @@ export const badgeForButtonOptions = {
   [buttonVariantOptions.danger]: badgeVariantOptions.danger,
 };
 
-export const newDropdownVariantOptions = {
+export const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',

package/src/utils/utils.js

@@ -103,12 +103,22 @@ export function focusFirstFocusableElement(elts) {
   if (focusableElt) focusableElt.focus();
 }
 
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+export function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
+
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
  */
 export function logWarning(message = '') {
-  if (message.length && !['test', 'production'].includes(process.env.NODE_ENV)) {
+  if (message.length && isDev()) {
     console.warn(message); // eslint-disable-line no-console
   }
 }

package/dist/components/base/carousel/examples/carousel.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-carousel',{staticStyle:{"text-shadow":"1px 1px 2px #333"},attrs:{"interval":4000,"controls":"","indicators":"","background":"#ababab","img-width":"1024","img-height":"480"}},[_c('gl-carousel-slide',{attrs:{"caption":"First slide","text":"Nulla vitae elit libero, a pharetra augue mollis interdum.","img-src":"https://picsum.photos/1024/480/?image=52"}}),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=54"}},[_c('h1',[_vm._v("Hello world!")])]),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=58"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/carousel/examples/index.js

@@ -1,13 +0,0 @@
-import CarouselBasicExample from './carousel.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'carousel-basic',
-    name: 'Basic',
-    description: 'Basic Carousel',
-    component: CarouselBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/markdown/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './markdown.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'markdown-basic',
-    name: 'Basic',
-    description: 'Basic Markdown',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/markdown/examples/markdown.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-markdown',[_c('h1',[_vm._v("MD Doc h1 • GitLab uses \"GitLab Flavored Markdown\" (GFM)")]),_vm._v(" "),_c('p',[_vm._v("\n    MD Doc Paragraph • GitLab uses \"GitLab Flavored Markdown\" (GFM). It extends the standard\n    Markdown in a few significant ways to add some useful functionality. You can use GFM in the\n    following areas: comments, issues, merge requests, milestones, snippets and more.\n  ")]),_vm._v(" "),_c('p',{staticClass:"sm"},[_vm._v("\n    MD Doc Small Paragraph • GitLab uses \"GitLab Flavored Markdown\" (GFM). It extends the standard\n    Markdown in a few significant ways to add some useful functionality. You can use GFM in the\n    following areas: comments, issues, merge requests, milestones, snippets and more.\n  ")])])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/carousel/examples/carousel.basic.example.vue

@@ -1,26 +0,0 @@
-<template>
-  <gl-carousel
-    :interval="4000"
-    controls
-    indicators
-    background="#ababab"
-    img-width="1024"
-    img-height="480"
-    style="text-shadow: 1px 1px 2px #333"
-  >
-    <!-- Text slides with image -->
-    <gl-carousel-slide
-      caption="First slide"
-      text="Nulla vitae elit libero, a pharetra augue mollis interdum."
-      img-src="https://picsum.photos/1024/480/?image=52"
-    />
-
-    <!-- Slides with custom text -->
-    <gl-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
-      <h1>Hello world!</h1>
-    </gl-carousel-slide>
-
-    <!-- Slides with image only -->
-    <gl-carousel-slide img-src="https://picsum.photos/1024/480/?image=58" />
-  </gl-carousel>
-</template>

package/src/components/base/carousel/examples/index.js

@@ -1,15 +0,0 @@
-import CarouselBasicExample from './carousel.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'carousel-basic',
-        name: 'Basic',
-        description: 'Basic Carousel',
-        component: CarouselBasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/markdown/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './markdown.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'markdown-basic',
-        name: 'Basic',
-        description: 'Basic Markdown',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/markdown/examples/markdown.basic.example.vue

@@ -1,15 +0,0 @@
-<template>
-  <gl-markdown>
-    <h1>MD Doc h1 • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
-    <p>
-      MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
-      Markdown in a few significant ways to add some useful functionality. You can use GFM in the
-      following areas: comments, issues, merge requests, milestones, snippets and more.
-    </p>
-    <p class="sm">
-      MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
-      Markdown in a few significant ways to add some useful functionality. You can use GFM in the
-      following areas: comments, issues, merge requests, milestones, snippets and more.
-    </p>
-  </gl-markdown>
-</template>