@gitlab/ui 127.0.0 → 127.1.1

package/package.json

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

package/src/components/base/alert/alert.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { translate } from '../../../utils/i18n';
 import {

package/src/components/base/avatar/avatar.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isNumber from 'lodash/isNumber';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';

package/src/components/base/badge/badge.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import GlLink from '../link/link.vue';
 import {

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import debounce from 'lodash/debounce';
 import { translate } from '../../../utils/i18n';

package/src/components/base/button/button.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import GlLink from '../link/link.vue';
 import {

package/src/components/base/card/card.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlCard',

package/src/components/base/collapse/collapse.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlCollapse',

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';

package/src/components/base/drawer/drawer.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isEmpty from 'lodash/isEmpty';
 import { maxZIndex, drawerVariants } from '../../../utils/constants';

package/src/components/base/dropdown/dropdown.vue

@@ -1,4 +1,4 @@
-<!-- eslint-disable vue/multi-word-component-names vue/one-component-per-file -->
+<!-- eslint-disable vue/one-component-per-file -->
 <script>
 import Vue from 'vue';
 import merge from 'lodash/merge';

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

@@ -24,6 +24,11 @@ function initialState() {
   return [createTerm()];
 }
 
+function computeTokens(value, termsAsTokens) {
+  const resolved = value?.length ? cloneDeep(value) : initialState();
+  return needDenormalization(resolved) ? denormalizeTokens(resolved, termsAsTokens) : resolved;
+}
+
 export default {
   name: 'GlFilteredSearch',
   components: {
@@ -174,7 +179,7 @@ export default {
   },
   data() {
     return {
-      tokens: initialState(),
+      tokens: computeTokens(this.value, this.termsAsTokens),
       activeTokenIdx: null,
       suggestionsStyle: {},
       intendedCursorPosition: 'end',
@@ -239,20 +244,16 @@ export default {
     value: {
       handler(newValue, oldValue) {
         if (!isEqual(newValue, oldValue)) {
-          const value = newValue.length ? newValue : initialState();
-          this.applyNewValue(cloneDeep(value));
+          this.applyNewValue(newValue);
         }
       },
       deep: true,
-      immediate: true,
     },
   },
 
   methods: {
     applyNewValue(newValue) {
-      this.tokens = needDenormalization(newValue)
-        ? denormalizeTokens(newValue, this.termsAsTokens)
-        : newValue;
+      this.tokens = computeTokens(newValue, this.termsAsTokens);
     },
 
     isActiveToken(idx) {

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

@@ -1,5 +1,5 @@
 <script>
-import { stepIndexAndWrap } from './filtered_search_utils';
+import { stepIndexAndWrap, FILTERED_SEARCH_SUGGESTIONS_CLASS } from './filtered_search_utils';
 
 const DEFER_TO_INITIAL_VALUE = -1;
 const NO_ACTIVE_ITEM = -2;
@@ -45,7 +45,7 @@ export default {
       return this.registeredItems[this.activeIdx];
     },
     listClasses() {
-      return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
+      return [this.suggestionsListClass(), `dropdown-menu ${FILTERED_SEARCH_SUGGESTIONS_CLASS}`];
     },
   },
 

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

@@ -4,7 +4,13 @@ import { Portal } from 'portal-vue';
 import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
-import { splitOnQuotes, wrapTokenInQuotes, match, TERM_TOKEN_TYPE } from './filtered_search_utils';
+import {
+  splitOnQuotes,
+  wrapTokenInQuotes,
+  match,
+  TERM_TOKEN_TYPE,
+  FILTERED_SEARCH_SUGGESTIONS_CLASS,
+} 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
@@ -410,7 +416,14 @@ export default {
       });
     },
 
-    handleBlur() {
+    handleBlur(e) {
+      // Keep focus on input when blur event is on same element
+      // (e.g. scrollbar in filtered search suggestions list)
+      if (e.relatedTarget?.classList.contains(FILTERED_SEARCH_SUGGESTIONS_CLASS)) {
+        this.$refs.input?.focus();
+        return;
+      }
+
       if (this.multiSelect) {
         this.$emit('complete');
       } else if (this.active) {

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

@@ -9,6 +9,8 @@ export const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
 
 export const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 
+export const FILTERED_SEARCH_SUGGESTIONS_CLASS = 'gl-filtered-search-suggestion-list';
+
 export function isEmptyTerm(token) {
   return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
 }

package/src/components/base/form/form.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlForm',

package/src/components/base/icon/icon.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconsPath from '@gitlab/svgs/dist/icons.svg';
 import iconsInfo from '@gitlab/svgs/dist/icons.json';

package/src/components/base/illustration/illustration.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import illustrationsPath from '@gitlab/svgs/dist/illustrations.svg';
 import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';

package/src/components/base/label/label.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { labelColorOptions } from '../../../utils/constants';
 import { colorFromBackground } from '../../../utils/utils';

package/src/components/base/link/link.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';

package/src/components/base/markdown/markdown.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   name: 'GlMarkdown',

package/src/components/base/modal/modal.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BModal } from '../../../vendor/bootstrap-vue/src/components/modal/modal';
 import { translate } from '../../../utils/i18n';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';

package/src/components/base/pagination/pagination.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import debounce from 'lodash/debounce';
 import isFunction from 'lodash/isFunction';
@@ -12,7 +11,7 @@ import GlLink from '../link/link.vue';
 const pageRange = (from, to) => range(from, to + 1, 1);
 
 export default {
-  name: 'Pagination',
+  name: 'GlPagination',
   components: {
     GlLink,
     GlIcon,

package/src/components/base/path/path.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import uniqueId from 'lodash/uniqueId';

package/src/components/base/popover/popover.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BPopover } from '../../../vendor/bootstrap-vue/src/components/popover/popover';
 import tooltipMixin from '../../mixins/tooltip_mixin';

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
 import { logWarning, isDev } from '../../../utils/utils';

package/src/components/base/tabs/tab/tab.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import isPlainObject from 'lodash/isPlainObject';
 import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';

package/src/components/base/tabs/tabs/tabs.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTabs } from '../../../../vendor/bootstrap-vue/src/components/tabs/tabs';
 import { tabsButtonDefaults } from '../../../../utils/constants';

package/src/components/base/toast/toast.js

@@ -9,6 +9,7 @@ const DEFAULT_OPTIONS = {
   toastClass: 'gl-toast',
   isStatus: true,
   toaster: 'b-toaster-bottom-left',
+  appendToast: true,
 };
 
 let toastsCount = 0;

package/src/components/base/toast/toast.scss

@@ -7,13 +7,20 @@
     .b-toaster-slot {
       @apply gl-w-auto;
       @apply gl-flex;
+      @apply gl-flex-col;
+      @apply gl-gap-4;
       bottom: $gl-spacing-scale-6;
       left: $gl-spacing-scale-6;
       right: auto;
-      flex-direction: column-reverse;
-      gap: $gl-spacing-scale-4;
       view-transition-name: gl-toast;
 
+      // Fallback for Firefox
+      // Fixes a bug where the view transition
+      // doesn’t work properly
+      @supports (-moz-appearance:none) {
+        view-transition-name: unset;
+      }
+
       @include media-breakpoint-down(xs) {
         @apply gl-w-full;
         left: 0;
@@ -22,6 +29,15 @@
     }
   }
 
+  .b-toast {
+    // Fallback for Firefox
+    // Fixes a bug where the view transition
+    // doesn’t work properly
+    @supports (-moz-appearance:none) {
+      transition: all $gl-transition-duration-medium $gl-easing-out-cubic;
+    }
+  }
+
   .gl-toast {
     @apply gl-text-base;
     @apply gl-py-5;

package/src/components/base/toggle/toggle.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import uniqueId from 'lodash/uniqueId';
 

package/src/components/base/token/token.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { tokenVariants } from '../../../utils/constants';
 import { translate } from '../../../utils/i18n';

package/src/components/base/tooltip/tooltip.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
 import { tooltipDelay } from '../../../utils/constants';

package/src/components/charts/area/area.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /**
  * Area charts as of %12.10 support annotations.

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';

package/src/components/charts/chart/chart.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import merge from 'lodash/merge';

package/src/components/charts/column/column.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import {

package/src/components/charts/gauge/gauge.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import uniq from 'lodash/uniq';

package/src/components/charts/heatmap/heatmap.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import { GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_100 } from '../../../tokens/build/js/tokens';

package/src/components/charts/legend/legend.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { defaultFontSize } from '../../../utils/charts/config';

package/src/components/charts/line/line.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /**
  * Line charts as of %12.10 support annotations.

package/src/components/charts/shared/tooltip/tooltip.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { uid, debounceByAnimationFrame } from '../../../../utils/utils';

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import isNil from 'lodash/isNil';

package/src/components/utilities/intersperse/intersperse.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import Vue from 'vue';
 import compose from 'lodash/fp/compose';

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /* eslint-disable no-continue */
 import has from 'lodash/has';

package/src/components/utilities/truncate/truncate.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';

package/tailwind.defaults.js

@@ -44,6 +44,18 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
         'border-color': 'var(--gl-action-neutral-border-color-active)',
       },
     },
+    '.bg-action-neutral': {
+      'background-color': 'var(--gl-action-neutral-background-color-default)',
+      '&:hover': {
+        'background-color': 'var(--gl-action-neutral-background-color-hover)',
+      },
+      '&:focus': {
+        'background-color': 'var(--gl-action-neutral-background-color-focus)',
+      },
+      '&:active': {
+        'background-color': 'var(--gl-action-neutral-background-color-active)',
+      },
+    },
     '.animate-skeleton-loader': {
       overflow: 'hidden',
       'max-width': '32rem',