@gitlab/ui 48.1.2 → 48.3.0

package/src/components/base/datepicker/datepicker.vue

@@ -179,7 +179,7 @@ export default {
   },
   computed: {
     formattedDate() {
-      return this.$options.pikaday.calendar && this.$options.pikaday.calendar.toString();
+      return 'calendar' in this && this.calendar.toString();
     },
     customTrigger() {
       return isString(this.target) && this.target !== '';
@@ -207,21 +207,21 @@ export default {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.$options.pikaday.calendar.getDate())) {
-        this.$options.pikaday.calendar.setDate(val, true);
+      if (!areDatesEqual(val, this.calendar.getDate())) {
+        this.calendar.setDate(val, true);
       }
     },
     minDate(minDate) {
-      this.$options.pikaday.calendar.setMinDate(minDate);
+      this.calendar.setMinDate(minDate);
     },
     maxDate(maxDate) {
-      this.$options.pikaday.calendar.setMaxDate(maxDate);
+      this.calendar.setMaxDate(maxDate);
     },
     startRange(startRange) {
-      this.$options.pikaday.calendar.setStartRange(startRange);
+      this.calendar.setStartRange(startRange);
     },
     endRange(endRange) {
-      this.$options.pikaday.calendar.setEndRange(endRange);
+      this.calendar.setEndRange(endRange);
     },
   },
   mounted() {
@@ -279,16 +279,21 @@ export default {
       pikadayConfig.i18n = this.i18n;
     }
 
-    this.$options.pikaday.calendar = new Pikaday(pikadayConfig);
+    this.calendar = new Pikaday(pikadayConfig);
 
     if (this.startOpened) {
-      this.$options.pikaday.calendar.show();
+      this.calendar.show();
     }
   },
   beforeDestroy() {
-    this.$options.pikaday.calendar.destroy();
+    this.calendar.destroy();
   },
   methods: {
+    // is used to open datepicker programmatically
+    show() {
+      this.calendar.show();
+    },
+
     selected(date) {
       /**
        * Emitted when a new date has been selected.
@@ -324,18 +329,11 @@ export default {
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
-        this.$options.pikaday.calendar.setDate(resetDate);
+        this.calendar.setDate(resetDate);
         this.selected(resetDate);
       }
     },
   },
-
-  // Vue3 will make this.$options shallow-readonly
-  // that means that in order to store anything in $options
-  // we need an object as a container
-  pikaday: {
-    calendar: null,
-  },
 };
 </script>
 

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

@@ -10,11 +10,20 @@ import { TERM_TOKEN_TYPE, INTENT_ACTIVATE_PREVIOUS } from './filtered_search_uti
 
 jest.mock('~/directives/tooltip');
 
-const FakeToken = {
+// Vue3 is very agressive around making components reactive
+// While keeping Vue2 compatibility we avoid using `markRaw`
+function avoidReactivity(Component) {
+  // mutation of component is intentional
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  Component.__v_skip = true;
+  return Component;
+}
+
+const FakeToken = avoidReactivity({
   props: ['active'],
   inheritAttrs: false,
   render: (h) => h('div'),
-};
+});
 
 Vue.directive('GlTooltip', () => {});
 
@@ -541,7 +550,7 @@ describe('Filtered search integration tests', () => {
     {
       type: 'static',
       icon: 'label',
-      token: GlFilteredSearchToken,
+      token: avoidReactivity(GlFilteredSearchToken),
       title: 'Static-token',
       options: [
         { title: 'first', value: 'one' },
@@ -554,7 +563,7 @@ describe('Filtered search integration tests', () => {
       type: 'unique',
       unique: true,
       icon: 'document',
-      token: GlFilteredSearchToken,
+      token: avoidReactivity(GlFilteredSearchToken),
       title: 'Unique-token',
       options: [
         { title: 'first', value: 'one' },
@@ -692,7 +701,7 @@ describe('Filtered search integration tests', () => {
 
       await nextTick();
 
-      input.trigger('keydown', { key: 'Enter' });
+      await input.trigger('keydown', { key: 'Enter' });
 
       await nextTick();
 

package/src/components/base/filtered_search/filtered_search.vue

@@ -61,6 +61,24 @@ export default {
       type: Array,
       required: false,
       default: () => [],
+      validator(value) {
+        // eslint-disable-next-line no-underscore-dangle
+        if (!value.__v_raw) {
+          // This is Vue 2
+          return true;
+        }
+
+        // eslint-disable-next-line no-underscore-dangle
+        const isOk = Array.isArray(value) && value.every(({ token }) => token.__v_skip);
+        if (!isOk) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            'You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw'
+          );
+        }
+
+        return isOk;
+      },
     },
     /**
      * If provided, used as history items for this component
@@ -332,19 +350,6 @@ export default {
 </script>
 
 <template>
-  <!--
-  Emitted when search is cleared
-  @event clear
-  -->
-  <!--
-  Emitted when item from history is selected
-  @event history-item-selected
-  @property {object} value History item
-  -->
-  <!--
-  Emitted when clear history button is clicked
-  @event clear-history
-  -->
   <gl-search-box-by-click
     v-bind="$attrs"
     :value="tokens"
@@ -406,5 +411,18 @@ export default {
         :style="suggestionsStyle"
       />
     </template>
+    <!--
+  Emitted when search is cleared
+  @event clear
+  -->
+    <!--
+  Emitted when item from history is selected
+  @event history-item-selected
+  @property {object} value History item
+  -->
+    <!--
+  Emitted when clear history button is clicked
+  @event clear-history
+  -->
   </gl-search-box-by-click>
 </template>

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -17,6 +17,9 @@ const DEFAULT_OPERATORS = [
 
 export default {
   name: 'GlFilteredSearchToken',
+  // FIXME: temporary workaround to ensure compatibility with @vue/compat
+  __v_skip: true,
+
   components: {
     GlToken,
     GlFilteredSearchTokenSegment,

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -321,14 +321,14 @@ describe('Filtered search token segment', () => {
       );
     });
 
-    describe.each([true, false])('and viewOnly is %s', (viewOnly) => {
-      const readonly = viewOnly ? 'readonly' : undefined;
-
-      it(`sets the input \`readonly\` atttribute to ${readonly}`, () => {
-        createWrappedComponent({ value: 'test', active: true, viewOnly });
+    it('sets the input `readonly` atttribute when viewOnly is true', () => {
+      createWrappedComponent({ value: 'test', active: true, viewOnly: true });
+      expect(wrapper.find('input').attributes('readonly')).toBeDefined();
+    });
 
-        expect(wrapper.find('input').attributes('readonly')).toBe(readonly);
-      });
+    it('does not set the input `readonly` atttribute when viewOnly is false', () => {
+      createWrappedComponent({ value: 'test', active: true, viewOnly: false });
+      expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
     });
   });
 });

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -6,6 +6,44 @@ import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
 
+// We need some helpers to ensure @vue/compat compatibility
+// @vue/compat will render comment nodes for v-if and comments in HTML
+// Also it makes use of fragments - both comments and nodes are Symbols.
+// In Vue3 all of them (Comment, Fragment) are exposed as named exports on vue module
+// However we want to maintain compatibility with Vue2, so taking this hacky approach
+// relying on Symbol.toString()
+
+// I'm keeping this directly here instead of helper to increase probability of
+// fixing ASAP and because I don't want this helper to be reused
+// FIXME: replace with Symbols when we will switch to Vue3
+
+const isVue3Comment = (vnode) => vnode?.type?.toString?.() === 'Symbol(Comment)';
+const isVue3Fragment = (vnode) => vnode?.type?.toString?.() === 'Symbol(Fragment)';
+
+const isVNodeEmpty = (vnode) => {
+  if (isVue3Fragment(vnode)) {
+    // vnode.children might be an array or single node in edge cases
+    return Array.isArray(vnode.children)
+      ? vnode.children.every(isVNodeEmpty)
+      : isVNodeEmpty(vnode.children);
+  }
+
+  if (isVue3Comment(vnode)) {
+    return true;
+  }
+
+  return false;
+};
+
+const isSlotNotEmpty = (slot) => {
+  if (!slot) {
+    return false;
+  }
+
+  const vnodes = typeof slot === 'function' ? slot() : slot;
+  return !(Array.isArray(vnodes) ? vnodes.every(isVNodeEmpty) : isVNodeEmpty(vnodes));
+};
+
 export default {
   name: 'GlFilteredSearchTokenSegment',
   components: {
@@ -124,7 +162,7 @@ export default {
 
     hasOptionsOrSuggestions() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return this.options?.length || this.$slots.suggestions;
+      return this.options?.length || isSlotNotEmpty(this.$slots.suggestions);
     },
 
     defaultSuggestedValue() {

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

@@ -30,13 +30,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(87, 114, 255, 0.4)",
+          "color": "rgba(97, 122, 226, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#5772ff",
+        "borderColor": "#617ae2",
         "borderWidth": 1,
-        "color": "rgba(87, 114, 255, 0.2)",
+        "color": "rgba(97, 122, 226, 0.2)",
       },
       "name": "Office",
       "stack": "chart",

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -46,13 +46,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(87, 114, 255, 0.4)",
+          "color": "rgba(97, 122, 226, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#5772ff",
+        "borderColor": "#617ae2",
         "borderWidth": 1,
-        "color": "rgba(87, 114, 255, 0.2)",
+        "color": "rgba(97, 122, 226, 0.2)",
       },
       "name": "Full",
       "stack": "stacked",
@@ -142,10 +142,10 @@ Object {
         ],
       ],
       "itemStyle": Object {
-        "color": "#5772ff",
+        "color": "#617ae2",
       },
       "lineStyle": Object {
-        "color": "#5772ff",
+        "color": "#617ae2",
       },
       "name": "Median line",
       "type": "line",
@@ -236,13 +236,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(87, 114, 255, 0.4)",
+          "color": "rgba(97, 122, 226, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#5772ff",
+        "borderColor": "#617ae2",
         "borderWidth": 1,
-        "color": "rgba(87, 114, 255, 0.2)",
+        "color": "rgba(97, 122, 226, 0.2)",
       },
       "name": "Full",
       "stack": "stacked",
@@ -267,13 +267,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(178, 72, 0, 0.4)",
+          "color": "rgba(177, 79, 24, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#b24800",
+        "borderColor": "#b14f18",
         "borderWidth": 1,
-        "color": "rgba(178, 72, 0, 0.2)",
+        "color": "rgba(177, 79, 24, 0.2)",
       },
       "name": "Secondary 1",
       "stack": "tiled",

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

@@ -286,13 +286,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(87, 114, 255, 0.4)",
+          "color": "rgba(97, 122, 226, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#5772ff",
+        "borderColor": "#617ae2",
         "borderWidth": 1,
-        "color": "rgba(87, 114, 255, 0.2)",
+        "color": "rgba(97, 122, 226, 0.2)",
       },
       "name": "Fun 1",
       "stack": Array [
@@ -330,13 +330,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(178, 72, 0, 0.4)",
+          "color": "rgba(177, 79, 24, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#b24800",
+        "borderColor": "#b14f18",
         "borderWidth": 1,
-        "color": "rgba(178, 72, 0, 0.2)",
+        "color": "rgba(177, 79, 24, 0.2)",
       },
       "name": "Fun 2",
       "stack": Array [
@@ -374,13 +374,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(0, 148, 182, 0.4)",
+          "color": "rgba(0, 144, 177, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#0094b6",
+        "borderColor": "#0090b1",
         "borderWidth": 1,
-        "color": "rgba(0, 148, 182, 0.2)",
+        "color": "rgba(0, 144, 177, 0.2)",
       },
       "name": "Fun 3",
       "stack": Array [
@@ -540,10 +540,10 @@ Object {
         28,
       ],
       "itemStyle": Object {
-        "color": "#5772ff",
+        "color": "#617ae2",
       },
       "lineStyle": Object {
-        "color": "#5772ff",
+        "color": "#617ae2",
       },
       "name": "Stacked median line",
       "type": "line",
@@ -647,13 +647,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(87, 114, 255, 0.4)",
+          "color": "rgba(97, 122, 226, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#5772ff",
+        "borderColor": "#617ae2",
         "borderWidth": 1,
-        "color": "rgba(87, 114, 255, 0.2)",
+        "color": "rgba(97, 122, 226, 0.2)",
       },
       "name": "Fun 1",
       "stack": Array [
@@ -691,13 +691,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(178, 72, 0, 0.4)",
+          "color": "rgba(177, 79, 24, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#b24800",
+        "borderColor": "#b14f18",
         "borderWidth": 1,
-        "color": "rgba(178, 72, 0, 0.2)",
+        "color": "rgba(177, 79, 24, 0.2)",
       },
       "name": "Fun 2",
       "stack": Array [
@@ -735,13 +735,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(0, 148, 182, 0.4)",
+          "color": "rgba(0, 144, 177, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#0094b6",
+        "borderColor": "#0090b1",
         "borderWidth": 1,
-        "color": "rgba(0, 148, 182, 0.2)",
+        "color": "rgba(0, 144, 177, 0.2)",
       },
       "name": "Fun 3",
       "stack": Array [
@@ -823,13 +823,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(149, 9, 67, 0.4)",
+          "color": "rgba(124, 33, 79, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#950943",
+        "borderColor": "#7c214f",
         "borderWidth": 1,
-        "color": "rgba(149, 9, 67, 0.2)",
+        "color": "rgba(124, 33, 79, 0.2)",
       },
       "name": "Secondary 1",
       "stack": "tiled",

package/src/scss/variables.scss

@@ -227,64 +227,64 @@ $theme-light-red-950: #5c1105 !default;
 // Data visualization color palette
 
 $data-viz-green-50: #ddfab7;
-$data-viz-green-100: #c9f097;
-$data-viz-green-200: #b0de73;
+$data-viz-green-100: #c6ed94;
+$data-viz-green-200: #b0d97b;
 $data-viz-green-300: #94c25e;
-$data-viz-green-400: #83ab4a;
-$data-viz-green-500: #608b2f;
-$data-viz-green-600: #487900;
+$data-viz-green-400: #81ac41;
+$data-viz-green-500: #619025;
+$data-viz-green-600: #4e7f0e;
 $data-viz-green-700: #366800;
 $data-viz-green-800: #275600;
 $data-viz-green-900: #1a4500;
-$data-viz-green-950: #0f3300;
-
-$data-viz-aqua-50: #b8fff2;
-$data-viz-aqua-100: #93fae7;
-$data-viz-aqua-200: #5eebdf;
-$data-viz-aqua-300: #25d2d2;
-$data-viz-aqua-400: #0bb6c6;
-$data-viz-aqua-500: #0094b6;
-$data-viz-aqua-600: #0080a1;
-$data-viz-aqua-700: #006887;
-$data-viz-aqua-800: #004d67;
-$data-viz-aqua-900: #003f57;
-$data-viz-aqua-950: #00293d;
+$data-viz-green-950: #133a03;
+
+$data-viz-aqua-50: #b5fefd;
+$data-viz-aqua-100: #93f2ef;
+$data-viz-aqua-200: #5edee3;
+$data-viz-aqua-300: #32c5d2;
+$data-viz-aqua-400: #00acc4;
+$data-viz-aqua-500: #0090b1;
+$data-viz-aqua-600: #007b9b;
+$data-viz-aqua-700: #006381;
+$data-viz-aqua-800: #00516c;
+$data-viz-aqua-900: #004059;
+$data-viz-aqua-950: #00344b;
 
 $data-viz-blue-50: #e9ebff;
-$data-viz-blue-100: #d4dcfa;
+$data-viz-blue-100: #d2dcff;
 $data-viz-blue-200: #b7c6ff;
 $data-viz-blue-300: #97acff;
-$data-viz-blue-400: #748eff;
-$data-viz-blue-500: #5772ff;
-$data-viz-blue-600: #445cf2;
-$data-viz-blue-700: #3547de;
-$data-viz-blue-800: #232fcf;
-$data-viz-blue-900: #1e23a8;
-$data-viz-blue-950: #11118a;
+$data-viz-blue-400: #7992f5;
+$data-viz-blue-500: #617ae2;
+$data-viz-blue-600: #4e65cd;
+$data-viz-blue-700: #3f51ae;
+$data-viz-blue-800: #374291;
+$data-viz-blue-900: #303470;
+$data-viz-blue-950: #2a2b59;
 
 $data-viz-magenta-50: #ffe3eb;
-$data-viz-magenta-100: #ffc9d9;
+$data-viz-magenta-100: #ffccdb;
 $data-viz-magenta-200: #fcacc5;
-$data-viz-magenta-300: #ff85af;
-$data-viz-magenta-400: #f2639a;
-$data-viz-magenta-500: #d84280;
-$data-viz-magenta-600: #c52c6b;
-$data-viz-magenta-700: #b31756;
-$data-viz-magenta-800: #950943;
-$data-viz-magenta-900: #7a0033;
-$data-viz-magenta-950: #570028;
+$data-viz-magenta-300: #f88aaf;
+$data-viz-magenta-400: #e86e9a;
+$data-viz-magenta-500: #cf4d81;
+$data-viz-magenta-600: #b93d71;
+$data-viz-magenta-700: #9a2e5d;
+$data-viz-magenta-800: #7c214f;
+$data-viz-magenta-900: #661e3a;
+$data-viz-magenta-950: #541d31;
 
 $data-viz-orange-50: #fae8d1;
-$data-viz-orange-100: #f7d8b5;
-$data-viz-orange-200: #f3c291;
-$data-viz-orange-300: #eb9a5c;
-$data-viz-orange-400: #e17223;
-$data-viz-orange-500: #d14e00;
-$data-viz-orange-600: #b24800;
-$data-viz-orange-700: #944100;
+$data-viz-orange-100: #f5d6b3;
+$data-viz-orange-200: #eebd8c;
+$data-viz-orange-300: #e99b60;
+$data-viz-orange-400: #e07e41;
+$data-viz-orange-500: #c95d2e;
+$data-viz-orange-600: #b14f18;
+$data-viz-orange-700: #92430a;
 $data-viz-orange-800: #6f3500;
-$data-viz-orange-900: #5c2b00;
-$data-viz-orange-950: #421e00;
+$data-viz-orange-900: #5e2f05;
+$data-viz-orange-950: #4b2707;
 
 $darken-normal-factor: 7%;
 $darken-dark-factor: 10%;