@gitlab/ui 37.5.2 → 37.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "37.5.2",
+  "version": "37.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -1,5 +1,5 @@
 <script>
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
@@ -146,13 +146,21 @@ export default {
       deep: true,
       immediate: true,
     },
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue.length && !isEqual(newValue, oldValue)) {
+          this.applyNewValue(cloneDeep(newValue));
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   mounted() {
     if (this.value.length) {
       this.applyNewValue(cloneDeep(this.value));
     }
   },
-
   methods: {
     applyNewValue(newValue) {
       this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;

package/src/components/base/modal/modal.md

@@ -20,11 +20,11 @@ behave in the modals footer. The props receive an object as such:
 ```js
 {
   text: 'Save Changes',
-  attributes: [
-    { variant: 'confirm' },
-    { disabled: this.someState },
-    { class: 'some-class' },
+  attributes: {
+    variant: 'confirm',
+    disabled: this.someState,
+    class: 'some-class',
     ...
-  ]
+  }
 }
 ```

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

@@ -107,14 +107,14 @@ describe('Modal component', () => {
     const props = {
       actionPrimary: {
         text: 'Primary',
-        attributes: [{ variant: 'info' }],
+        attributes: { variant: 'info' },
       },
       actionSecondary: {
         text: 'Secondary',
       },
       actionCancel: {
         text: 'Cancel',
-        attributes: [{ variant: 'danger' }],
+        attributes: { variant: 'danger' },
       },
     };
 

package/src/components/base/tabs/tabs/tabs.md

@@ -48,12 +48,12 @@ behave and look. The props receive an object as such:
 ~~~js
 {
   text: 'Save Changes',
-  attributes: [
-    { variant: 'info' },
-    { disabled: this.someState },
-    { class: 'some-class' },
+  attributes: {
+    variant: 'info',
+    disabled: this.someState,
+    class: 'some-class',
     ...
-  ]
+  }
 }
 ~~~
 

package/src/components/regions/empty_state/empty_state.vue

@@ -78,6 +78,11 @@ export default {
       required: false,
       default: false,
     },
+    invertInDarkMode: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     height() {
@@ -108,7 +113,14 @@ export default {
       :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
     >
       <div v-if="svgPath" :class="{ 'svg-content': !compact }" class="svg-250">
-        <img :src="svgPath" alt="" role="img" class="gl-max-w-full" :height="height" />
+        <img
+          :src="svgPath"
+          alt=""
+          role="img"
+          :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
+          class="gl-max-w-full"
+          :height="height"
+        />
       </div>
     </div>
     <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">

package/src/scss/utilities.scss

@@ -1896,6 +1896,14 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600 !important
 }
 
+.gl-inset-border-l-3-red-600 {
+  box-shadow: inset $gl-border-size-3 0 0 0 $red-600
+}
+
+.gl-inset-border-l-3-red-600\! {
+  box-shadow: inset $gl-border-size-3 0 0 0 $red-600 !important
+}
+
 .gl-inset-border-b-2-theme-accent {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500)
 }
@@ -2448,6 +2456,18 @@
 .gl-text-theme-indigo-900\! {
   color: $theme-indigo-900 !important;
 }
+
+.gl-dark-invert-keep-hue {
+  .gl-dark & {
+    filter: invert(0.8) hue-rotate(180deg);
+  }
+}
+
+.gl-dark-invert-keep-hue\! {
+  .gl-dark & {
+    filter: invert(0.8) hue-rotate(180deg) !important;
+  }
+}
 .gl-content-empty {
   content: ''
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -104,6 +104,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
 }
 
+@mixin gl-inset-border-l-3-red-600 {
+  box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
+}
+
 @mixin gl-inset-border-b-2-theme-accent {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
 }

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

@@ -196,3 +196,9 @@
 @mixin gl-text-theme-indigo-900 {
   color: $theme-indigo-900;
 }
+
+@mixin gl-dark-invert-keep-hue {
+  .gl-dark & {
+    filter: invert(0.8) hue-rotate(180deg);
+  }
+}