@gitlab/ui 48.2.0 → 48.3.1

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/base/new_dropdowns/listbox/listbox.stories.js

@@ -249,7 +249,6 @@ const makeGroupedExample = (changes) => {
         openListbox(this);
       }
     },
-    template: template(''),
     ...changes,
   });
 
@@ -259,7 +258,53 @@ const makeGroupedExample = (changes) => {
   return story;
 };
 
-export const Groups = makeGroupedExample();
+export const Groups = makeGroupedExample({
+  template: template('', {
+    bindingOverrides: {
+      ':toggle-text': 'customToggleText',
+      ':items': 'computedItems',
+    },
+  }),
+  data() {
+    return {
+      selected: ['v1.0'],
+    };
+  },
+  computed: {
+    customToggleText() {
+      return this.selected.length ? `${this.selected.length} refs selected` : 'Select refs';
+    },
+    computedItems() {
+      const isSelected = (option) => this.selected.includes(option.value);
+      const notSelected = (option) => !isSelected(option);
+
+      const selectedBranches = mockGroups[0].options.filter(isSelected);
+      const availableBranches = mockGroups[0].options.filter(notSelected);
+      const selectedTags = mockGroups[1].options.filter(isSelected);
+      const availableTags = mockGroups[1].options.filter(notSelected);
+
+      return [
+        {
+          text: 'Selected branches',
+          options: selectedBranches,
+        },
+        {
+          text: 'Selected tags',
+          options: selectedTags,
+        },
+        {
+          text: 'Branches',
+          options: availableBranches,
+        },
+        {
+          text: 'Tags',
+          options: availableTags,
+        },
+      ].filter((group) => group.options.length);
+    },
+  },
+});
+Groups.args = generateProps({ multiple: true });
 
 export const CustomGroupsAndItems = makeGroupedExample({
   template: template(`

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/directives/outside/outside.js

@@ -37,7 +37,7 @@ const startListening = () => {
     return;
   }
 
-  document.addEventListener('click', globalListener);
+  document.addEventListener('click', globalListener, { capture: true });
   listening = true;
 };
 

package/src/directives/outside/outside.spec.js

@@ -129,7 +129,9 @@ describe('outside directive', () => {
     it('attaches the global listener on first initialisation', async () => {
       await createComponent();
 
-      expect(document.addEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      expect(document.addEventListener.mock.calls).toEqual([
+        ['click', expect.any(Function), { capture: true }],
+      ]);
     });
 
     it('detaches the global listener when last binding is removed', async () => {
@@ -150,7 +152,9 @@ describe('outside directive', () => {
         `,
       });
 
-      expect(document.addEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      expect(document.addEventListener.mock.calls).toEqual([
+        ['click', expect.any(Function), { capture: true }],
+      ]);
     });
 
     it('only unbinds once there are no instances', async () => {

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