@gitlab/ui 48.2.0 → 48.3.1

package/dist/utils/charts/theme.js

@@ -11,38 +11,38 @@ const gray500 = '#666';
 const gray600 = '#5e5e5e';
 const gray700 = '#525252';
 const gray900 = '#303030';
-const dataVizGreen500 = '#608b2f';
-const dataVizGreen600 = '#487900';
+const dataVizGreen500 = '#619025';
+const dataVizGreen600 = '#4e7f0e';
 const dataVizGreen700 = '#366800';
 const dataVizGreen800 = '#275600';
 const dataVizGreen900 = '#1a4500';
-const dataVizGreen950 = '#0f3300';
-const dataVizAqua500 = '#0094b6';
-const dataVizAqua600 = '#0080a1';
-const dataVizAqua700 = '#006887';
-const dataVizAqua800 = '#004d67';
-const dataVizAqua900 = '#003f57';
-const dataVizAqua950 = '#00293d';
+const dataVizGreen950 = '#133a03';
+const dataVizAqua500 = '#0090b1';
+const dataVizAqua600 = '#007b9b';
+const dataVizAqua700 = '#006381';
+const dataVizAqua800 = '#00516c';
+const dataVizAqua900 = '#004059';
+const dataVizAqua950 = '#00344b';
 const dataVizBlue200 = '#b7c6ff';
-const dataVizBlue400 = '#748eff';
-const dataVizBlue500 = '#5772ff';
-const dataVizBlue600 = '#445cf2';
-const dataVizBlue700 = '#3547de';
-const dataVizBlue800 = '#232fcf';
-const dataVizBlue900 = '#1e23a8';
-const dataVizBlue950 = '#11118a';
-const dataVizMagenta500 = '#d84280';
-const dataVizMagenta600 = '#c52c6b';
-const dataVizMagenta700 = '#b31756';
-const dataVizMagenta800 = '#950943';
-const dataVizMagenta900 = '#7a0033';
-const dataVizMagenta950 = '#570028';
-const dataVizOrange500 = '#d14e00';
-const dataVizOrange600 = '#b24800';
-const dataVizOrange700 = '#944100';
+const dataVizBlue400 = '#7992f5';
+const dataVizBlue500 = '#617ae2';
+const dataVizBlue600 = '#4e65cd';
+const dataVizBlue700 = '#3f51ae';
+const dataVizBlue800 = '#374291';
+const dataVizBlue900 = '#303470';
+const dataVizBlue950 = '#2a2b59';
+const dataVizMagenta500 = '#cf4d81';
+const dataVizMagenta600 = '#b93d71';
+const dataVizMagenta700 = '#9a2e5d';
+const dataVizMagenta800 = '#7c214f';
+const dataVizMagenta900 = '#661e3a';
+const dataVizMagenta950 = '#541d31';
+const dataVizOrange500 = '#c95d2e';
+const dataVizOrange600 = '#b14f18';
+const dataVizOrange700 = '#92430a';
 const dataVizOrange800 = '#6f3500';
-const dataVizOrange900 = '#5c2b00';
-const dataVizOrange950 = '#421e00';
+const dataVizOrange900 = '#5e2f05';
+const dataVizOrange950 = '#4b2707';
 
 const themeName = 'gitlab';
 const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, dataVizBlue800];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "48.2.0",
+  "version": "48.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,7 +81,7 @@
     "@babel/preset-env": "^7.19.4",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.4.0",
+    "@gitlab/svgs": "3.5.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

@@ -169,60 +169,60 @@ export const themeLightRed800 = '#8b2212'
 export const themeLightRed900 = '#751709'
 export const themeLightRed950 = '#5c1105'
 export const dataVizGreen50 = '#ddfab7'
-export const dataVizGreen100 = '#c9f097'
-export const dataVizGreen200 = '#b0de73'
+export const dataVizGreen100 = '#c6ed94'
+export const dataVizGreen200 = '#b0d97b'
 export const dataVizGreen300 = '#94c25e'
-export const dataVizGreen400 = '#83ab4a'
-export const dataVizGreen500 = '#608b2f'
-export const dataVizGreen600 = '#487900'
+export const dataVizGreen400 = '#81ac41'
+export const dataVizGreen500 = '#619025'
+export const dataVizGreen600 = '#4e7f0e'
 export const dataVizGreen700 = '#366800'
 export const dataVizGreen800 = '#275600'
 export const dataVizGreen900 = '#1a4500'
-export const dataVizGreen950 = '#0f3300'
-export const dataVizAqua50 = '#b8fff2'
-export const dataVizAqua100 = '#93fae7'
-export const dataVizAqua200 = '#5eebdf'
-export const dataVizAqua300 = '#25d2d2'
-export const dataVizAqua400 = '#0bb6c6'
-export const dataVizAqua500 = '#0094b6'
-export const dataVizAqua600 = '#0080a1'
-export const dataVizAqua700 = '#006887'
-export const dataVizAqua800 = '#004d67'
-export const dataVizAqua900 = '#003f57'
-export const dataVizAqua950 = '#00293d'
+export const dataVizGreen950 = '#133a03'
+export const dataVizAqua50 = '#b5fefd'
+export const dataVizAqua100 = '#93f2ef'
+export const dataVizAqua200 = '#5edee3'
+export const dataVizAqua300 = '#32c5d2'
+export const dataVizAqua400 = '#00acc4'
+export const dataVizAqua500 = '#0090b1'
+export const dataVizAqua600 = '#007b9b'
+export const dataVizAqua700 = '#006381'
+export const dataVizAqua800 = '#00516c'
+export const dataVizAqua900 = '#004059'
+export const dataVizAqua950 = '#00344b'
 export const dataVizBlue50 = '#e9ebff'
-export const dataVizBlue100 = '#d4dcfa'
+export const dataVizBlue100 = '#d2dcff'
 export const dataVizBlue200 = '#b7c6ff'
 export const dataVizBlue300 = '#97acff'
-export const dataVizBlue400 = '#748eff'
-export const dataVizBlue500 = '#5772ff'
-export const dataVizBlue600 = '#445cf2'
-export const dataVizBlue700 = '#3547de'
-export const dataVizBlue800 = '#232fcf'
-export const dataVizBlue900 = '#1e23a8'
-export const dataVizBlue950 = '#11118a'
+export const dataVizBlue400 = '#7992f5'
+export const dataVizBlue500 = '#617ae2'
+export const dataVizBlue600 = '#4e65cd'
+export const dataVizBlue700 = '#3f51ae'
+export const dataVizBlue800 = '#374291'
+export const dataVizBlue900 = '#303470'
+export const dataVizBlue950 = '#2a2b59'
 export const dataVizMagenta50 = '#ffe3eb'
-export const dataVizMagenta100 = '#ffc9d9'
+export const dataVizMagenta100 = '#ffccdb'
 export const dataVizMagenta200 = '#fcacc5'
-export const dataVizMagenta300 = '#ff85af'
-export const dataVizMagenta400 = '#f2639a'
-export const dataVizMagenta500 = '#d84280'
-export const dataVizMagenta600 = '#c52c6b'
-export const dataVizMagenta700 = '#b31756'
-export const dataVizMagenta800 = '#950943'
-export const dataVizMagenta900 = '#7a0033'
-export const dataVizMagenta950 = '#570028'
+export const dataVizMagenta300 = '#f88aaf'
+export const dataVizMagenta400 = '#e86e9a'
+export const dataVizMagenta500 = '#cf4d81'
+export const dataVizMagenta600 = '#b93d71'
+export const dataVizMagenta700 = '#9a2e5d'
+export const dataVizMagenta800 = '#7c214f'
+export const dataVizMagenta900 = '#661e3a'
+export const dataVizMagenta950 = '#541d31'
 export const dataVizOrange50 = '#fae8d1'
-export const dataVizOrange100 = '#f7d8b5'
-export const dataVizOrange200 = '#f3c291'
-export const dataVizOrange300 = '#eb9a5c'
-export const dataVizOrange400 = '#e17223'
-export const dataVizOrange500 = '#d14e00'
-export const dataVizOrange600 = '#b24800'
-export const dataVizOrange700 = '#944100'
+export const dataVizOrange100 = '#f5d6b3'
+export const dataVizOrange200 = '#eebd8c'
+export const dataVizOrange300 = '#e99b60'
+export const dataVizOrange400 = '#e07e41'
+export const dataVizOrange500 = '#c95d2e'
+export const dataVizOrange600 = '#b14f18'
+export const dataVizOrange700 = '#92430a'
 export const dataVizOrange800 = '#6f3500'
-export const dataVizOrange900 = '#5c2b00'
-export const dataVizOrange950 = '#421e00'
+export const dataVizOrange900 = '#5e2f05'
+export const dataVizOrange950 = '#4b2707'
 export const darkenNormalFactor = '7%'
 export const darkenDarkFactor = '10%'
 export const darkenBorderFactor = '5%'

package/scss_to_js/scss_variables.json

@@ -884,13 +884,13 @@
     },
     {
       "name": "$data-viz-green-100",
-      "value": "#c9f097",
-      "compiledValue": "#c9f097"
+      "value": "#c6ed94",
+      "compiledValue": "#c6ed94"
     },
     {
       "name": "$data-viz-green-200",
-      "value": "#b0de73",
-      "compiledValue": "#b0de73"
+      "value": "#b0d97b",
+      "compiledValue": "#b0d97b"
     },
     {
       "name": "$data-viz-green-300",
@@ -899,18 +899,18 @@
     },
     {
       "name": "$data-viz-green-400",
-      "value": "#83ab4a",
-      "compiledValue": "#83ab4a"
+      "value": "#81ac41",
+      "compiledValue": "#81ac41"
     },
     {
       "name": "$data-viz-green-500",
-      "value": "#608b2f",
-      "compiledValue": "#608b2f"
+      "value": "#619025",
+      "compiledValue": "#619025"
     },
     {
       "name": "$data-viz-green-600",
-      "value": "#487900",
-      "compiledValue": "#487900"
+      "value": "#4e7f0e",
+      "compiledValue": "#4e7f0e"
     },
     {
       "name": "$data-viz-green-700",
@@ -929,63 +929,63 @@
     },
     {
       "name": "$data-viz-green-950",
-      "value": "#0f3300",
-      "compiledValue": "#0f3300"
+      "value": "#133a03",
+      "compiledValue": "#133a03"
     },
     {
       "name": "$data-viz-aqua-50",
-      "value": "#b8fff2",
-      "compiledValue": "#b8fff2"
+      "value": "#b5fefd",
+      "compiledValue": "#b5fefd"
     },
     {
       "name": "$data-viz-aqua-100",
-      "value": "#93fae7",
-      "compiledValue": "#93fae7"
+      "value": "#93f2ef",
+      "compiledValue": "#93f2ef"
     },
     {
       "name": "$data-viz-aqua-200",
-      "value": "#5eebdf",
-      "compiledValue": "#5eebdf"
+      "value": "#5edee3",
+      "compiledValue": "#5edee3"
     },
     {
       "name": "$data-viz-aqua-300",
-      "value": "#25d2d2",
-      "compiledValue": "#25d2d2"
+      "value": "#32c5d2",
+      "compiledValue": "#32c5d2"
     },
     {
       "name": "$data-viz-aqua-400",
-      "value": "#0bb6c6",
-      "compiledValue": "#0bb6c6"
+      "value": "#00acc4",
+      "compiledValue": "#00acc4"
     },
     {
       "name": "$data-viz-aqua-500",
-      "value": "#0094b6",
-      "compiledValue": "#0094b6"
+      "value": "#0090b1",
+      "compiledValue": "#0090b1"
     },
     {
       "name": "$data-viz-aqua-600",
-      "value": "#0080a1",
-      "compiledValue": "#0080a1"
+      "value": "#007b9b",
+      "compiledValue": "#007b9b"
     },
     {
       "name": "$data-viz-aqua-700",
-      "value": "#006887",
-      "compiledValue": "#006887"
+      "value": "#006381",
+      "compiledValue": "#006381"
     },
     {
       "name": "$data-viz-aqua-800",
-      "value": "#004d67",
-      "compiledValue": "#004d67"
+      "value": "#00516c",
+      "compiledValue": "#00516c"
     },
     {
       "name": "$data-viz-aqua-900",
-      "value": "#003f57",
-      "compiledValue": "#003f57"
+      "value": "#004059",
+      "compiledValue": "#004059"
     },
     {
       "name": "$data-viz-aqua-950",
-      "value": "#00293d",
-      "compiledValue": "#00293d"
+      "value": "#00344b",
+      "compiledValue": "#00344b"
     },
     {
       "name": "$data-viz-blue-50",
@@ -994,8 +994,8 @@
     },
     {
       "name": "$data-viz-blue-100",
-      "value": "#d4dcfa",
-      "compiledValue": "#d4dcfa"
+      "value": "#d2dcff",
+      "compiledValue": "#d2dcff"
     },
     {
       "name": "$data-viz-blue-200",
@@ -1009,38 +1009,38 @@
     },
     {
       "name": "$data-viz-blue-400",
-      "value": "#748eff",
-      "compiledValue": "#748eff"
+      "value": "#7992f5",
+      "compiledValue": "#7992f5"
     },
     {
       "name": "$data-viz-blue-500",
-      "value": "#5772ff",
-      "compiledValue": "#5772ff"
+      "value": "#617ae2",
+      "compiledValue": "#617ae2"
     },
     {
       "name": "$data-viz-blue-600",
-      "value": "#445cf2",
-      "compiledValue": "#445cf2"
+      "value": "#4e65cd",
+      "compiledValue": "#4e65cd"
     },
     {
       "name": "$data-viz-blue-700",
-      "value": "#3547de",
-      "compiledValue": "#3547de"
+      "value": "#3f51ae",
+      "compiledValue": "#3f51ae"
     },
     {
       "name": "$data-viz-blue-800",
-      "value": "#232fcf",
-      "compiledValue": "#232fcf"
+      "value": "#374291",
+      "compiledValue": "#374291"
     },
     {
       "name": "$data-viz-blue-900",
-      "value": "#1e23a8",
-      "compiledValue": "#1e23a8"
+      "value": "#303470",
+      "compiledValue": "#303470"
     },
     {
       "name": "$data-viz-blue-950",
-      "value": "#11118a",
-      "compiledValue": "#11118a"
+      "value": "#2a2b59",
+      "compiledValue": "#2a2b59"
     },
     {
       "name": "$data-viz-magenta-50",
@@ -1049,8 +1049,8 @@
     },
     {
       "name": "$data-viz-magenta-100",
-      "value": "#ffc9d9",
-      "compiledValue": "#ffc9d9"
+      "value": "#ffccdb",
+      "compiledValue": "#ffccdb"
     },
     {
       "name": "$data-viz-magenta-200",
@@ -1059,43 +1059,43 @@
     },
     {
       "name": "$data-viz-magenta-300",
-      "value": "#ff85af",
-      "compiledValue": "#ff85af"
+      "value": "#f88aaf",
+      "compiledValue": "#f88aaf"
     },
     {
       "name": "$data-viz-magenta-400",
-      "value": "#f2639a",
-      "compiledValue": "#f2639a"
+      "value": "#e86e9a",
+      "compiledValue": "#e86e9a"
     },
     {
       "name": "$data-viz-magenta-500",
-      "value": "#d84280",
-      "compiledValue": "#d84280"
+      "value": "#cf4d81",
+      "compiledValue": "#cf4d81"
     },
     {
       "name": "$data-viz-magenta-600",
-      "value": "#c52c6b",
-      "compiledValue": "#c52c6b"
+      "value": "#b93d71",
+      "compiledValue": "#b93d71"
     },
     {
       "name": "$data-viz-magenta-700",
-      "value": "#b31756",
-      "compiledValue": "#b31756"
+      "value": "#9a2e5d",
+      "compiledValue": "#9a2e5d"
     },
     {
       "name": "$data-viz-magenta-800",
-      "value": "#950943",
-      "compiledValue": "#950943"
+      "value": "#7c214f",
+      "compiledValue": "#7c214f"
     },
     {
       "name": "$data-viz-magenta-900",
-      "value": "#7a0033",
-      "compiledValue": "#7a0033"
+      "value": "#661e3a",
+      "compiledValue": "#661e3a"
     },
     {
       "name": "$data-viz-magenta-950",
-      "value": "#570028",
-      "compiledValue": "#570028"
+      "value": "#541d31",
+      "compiledValue": "#541d31"
     },
     {
       "name": "$data-viz-orange-50",
@@ -1104,38 +1104,38 @@
     },
     {
       "name": "$data-viz-orange-100",
-      "value": "#f7d8b5",
-      "compiledValue": "#f7d8b5"
+      "value": "#f5d6b3",
+      "compiledValue": "#f5d6b3"
     },
     {
       "name": "$data-viz-orange-200",
-      "value": "#f3c291",
-      "compiledValue": "#f3c291"
+      "value": "#eebd8c",
+      "compiledValue": "#eebd8c"
     },
     {
       "name": "$data-viz-orange-300",
-      "value": "#eb9a5c",
-      "compiledValue": "#eb9a5c"
+      "value": "#e99b60",
+      "compiledValue": "#e99b60"
     },
     {
       "name": "$data-viz-orange-400",
-      "value": "#e17223",
-      "compiledValue": "#e17223"
+      "value": "#e07e41",
+      "compiledValue": "#e07e41"
     },
     {
       "name": "$data-viz-orange-500",
-      "value": "#d14e00",
-      "compiledValue": "#d14e00"
+      "value": "#c95d2e",
+      "compiledValue": "#c95d2e"
     },
     {
       "name": "$data-viz-orange-600",
-      "value": "#b24800",
-      "compiledValue": "#b24800"
+      "value": "#b14f18",
+      "compiledValue": "#b14f18"
     },
     {
       "name": "$data-viz-orange-700",
-      "value": "#944100",
-      "compiledValue": "#944100"
+      "value": "#92430a",
+      "compiledValue": "#92430a"
     },
     {
       "name": "$data-viz-orange-800",
@@ -1144,13 +1144,13 @@
     },
     {
       "name": "$data-viz-orange-900",
-      "value": "#5c2b00",
-      "compiledValue": "#5c2b00"
+      "value": "#5e2f05",
+      "compiledValue": "#5e2f05"
     },
     {
       "name": "$data-viz-orange-950",
-      "value": "#421e00",
-      "compiledValue": "#421e00"
+      "value": "#4b2707",
+      "compiledValue": "#4b2707"
     },
     {
       "name": "$darken-normal-factor",

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,