@gitlab/ui 66.14.0 → 66.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.14.0",
+  "version": "66.16.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -126,7 +126,7 @@
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.49.0",
+    "eslint": "8.50.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.14",

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

@@ -1,3 +1,4 @@
+import last from 'lodash/last';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';
@@ -525,13 +526,19 @@ export const WithMultiSelect = () => {
     data() {
       return {
         users: fakeUsers,
-        selectedUsernames: this.value.data ? this.value.data.split(',') : [],
+        selectedUsernames: this.value.data || [],
         activeUser: null,
       };
     },
     computed: {
       filteredUsers() {
-        return this.users.filter((user) => user.username.includes(this.value.data));
+        let term = this.value.data;
+
+        if (Array.isArray(this.value.data) && this.value.data.length > 1) {
+          term = last(this.value.data);
+        }
+
+        return this.users.filter((user) => user.username.includes(term));
       },
       selectedUsers() {
         return this.config.multiSelect
@@ -593,7 +600,7 @@ export const WithMultiSelect = () => {
       <template v-for="(user, index) in selectedUsers">
         <gl-avatar :size="16" :entity-name="user.username" shape="circle" />
         {{ user.name }}
-        <span v-if="!isLastUser(index)" class="gl-mx-2">,&nbsp;</span>
+        <span v-if="!isLastUser(index)">,&nbsp;</span>
       </template>
     </template>
     <template #suggestions>
@@ -635,7 +642,7 @@ export const WithMultiSelect = () => {
             multiSelect: true,
           },
         ],
-        value: [{ type: 'assignee', value: { data: 'alpha,beta', operator: '=' } }],
+        value: [{ type: 'assignee', value: { data: ['alpha', 'beta'], operator: '=' } }],
       };
     },
     template: `

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

@@ -334,14 +334,32 @@ describe('Filtered search token', () => {
         active: true,
         config: { multiSelect: true },
         multiSelectValues: ['alpha', 'beta'],
-        value: { operator: '=', data: 'alpha' },
+        value: { operator: '=', data: ['alpha', 'beta'] },
       });
     });
 
-    it('emits input event when data segment is completed', () => {
-      findDataSegment().vm.$emit('complete');
+    it('emits input event when active is false', async () => {
+      wrapper.setProps({ value: { data: 'user', operator: '=' } });
+      wrapper.setProps({ active: false });
 
-      expect(wrapper.emitted('input')).toEqual([[{ data: 'alpha,beta', operator: '=' }]]);
+      await nextTick();
+
+      expect(wrapper.emitted('input')).toEqual([
+        [{ data: 'user', operator: '=' }],
+        [{ data: ['alpha', 'beta'], operator: '=' }],
+      ]);
+    });
+
+    it('emits input event when active is false and search term empty', async () => {
+      wrapper.setProps({ value: { data: '', operator: '=' } });
+      wrapper.setProps({ active: false });
+
+      await nextTick();
+
+      expect(wrapper.emitted('input')).toEqual([
+        [{ data: '', operator: '=' }],
+        [{ data: ['alpha', 'beta'], operator: '=' }],
+      ]);
     });
 
     it('emits empty input event when data segment is activated, so blank text input shows all suggestions', () => {
@@ -352,14 +370,14 @@ describe('Filtered search token', () => {
 
     it('passes down the value prop to the data segment if it changes', async () => {
       createComponent({
-        value: { operator: '=', data: 'alpha' },
+        value: { operator: '=', data: ['alpha'] },
       });
 
       await wrapper.setProps({
-        value: { operator: '=', data: 'gamma' },
+        value: { operator: '=', data: ['gamma'] },
       });
 
-      expect(findDataSegment().props('value')).toEqual('gamma');
+      expect(findDataSegment().props('value')).toEqual(['gamma']);
     });
   });
 

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

@@ -1,6 +1,6 @@
 <script>
 import cloneDeep from 'lodash/cloneDeep';
-import { COMMA } from '../../../utils/constants';
+import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 import { createTerm, tokenToOption, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
@@ -97,8 +97,13 @@ export default {
       return this.config.operators || DEFAULT_OPERATORS;
     },
 
+    tokenEmpty() {
+      return this.tokenValue.data?.length === 0;
+    },
+
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      const hasData = !this.tokenEmpty;
+      return hasData || this.isSegmentActive(SEGMENT_DATA);
     },
 
     availableTokensWithSelf() {
@@ -137,7 +142,7 @@ export default {
 
     value: {
       handler(newValue, oldValue) {
-        if (newValue?.data === oldValue?.data && newValue?.operator === oldValue?.operator) {
+        if (isEqual(newValue?.data, oldValue?.data) && newValue?.operator === oldValue?.operator) {
           return;
         }
 
@@ -147,20 +152,29 @@ export default {
 
     active: {
       immediate: true,
-      handler(newValue) {
-        if (newValue) {
+      handler(tokenIsActive) {
+        if (tokenIsActive) {
           this.intendedCursorPosition = this.cursorPosition;
           if (!this.activeSegment) {
-            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenEmpty ? SEGMENT_OPERATOR : SEGMENT_DATA);
           }
-        } else if (this.tokenValue.data === '') {
+        } else {
           this.activeSegment = null;
-          /**
-           * Emitted when token is about to be destroyed.
-           *
-           * @event destroy
-           */
-          this.$emit('destroy');
+
+          // restore multi select values if we have them
+          // otherwise destroy the token
+          if (this.config.multiSelect) {
+            this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues || '' });
+          }
+
+          if (this.tokenEmpty && this.multiSelectValues.length === 0) {
+            /**
+             * Emitted when token is about to be destroyed.
+             *
+             * @event destroy
+             */
+            this.$emit('destroy');
+          }
         }
       },
     },
@@ -206,7 +220,7 @@ export default {
     },
 
     replaceWithTermIfEmpty() {
-      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
+      if (this.tokenValue.operator === '' && this.tokenEmpty) {
         /**
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
@@ -252,7 +266,7 @@ export default {
         key.length === 1 &&
         !this.operators.find(({ value }) => value.startsWith(potentialValue))
       ) {
-        if (this.tokenValue.data === '') {
+        if (this.tokenEmpty) {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -288,9 +302,6 @@ export default {
     },
 
     handleComplete() {
-      if (this.config.multiSelect) {
-        this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues.join(COMMA) });
-      }
       /**
        * Emitted when the token entry has been completed.
        *

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

@@ -275,7 +275,7 @@ describe('Filtered search token segment', () => {
       createComponent({
         active: true,
         multiSelect: true,
-        value: 'beta',
+        value: ['alpha', 'beta'],
       });
     });
 

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

@@ -1,7 +1,7 @@
 <script>
 import last from 'lodash/last';
 import { Portal } from 'portal-vue';
-import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
+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';
@@ -152,7 +152,7 @@ export default {
     },
 
     nonMultipleValue() {
-      return this.multiSelect ? last(this.value.split(COMMA)) : this.value;
+      return Array.isArray(this.value) ? last(this.value) : this.value;
     },
 
     inputValue: {
@@ -228,6 +228,8 @@ export default {
     inputValue(newValue) {
       if (this.termsAsTokens()) return;
 
+      if (this.multiSelect) return;
+
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;

package/src/scss/mixins.scss

@@ -123,9 +123,14 @@
   }
 }
 
-// Helper functions to aid maintenance of heading styles
 
-// Because we can't interpolate into a variable name we have to do some stuff
+/**
+* Helper function to resolve font-size value from $gl-font-sizes and
+* $gl-font-sizes-fixed maps.
+*
+* @param $size Number font-size scale
+* @param $fixed Boolean toggle default and fixed font size scales
+*/
 @function get-font-size-variable($size, $fixed) {
   @if $fixed == true {
     @if map-has-key($gl-font-sizes-fixed, $size) {
@@ -144,17 +149,22 @@
   }
 }
 
-// Set fixed as false by default, matching desired usage in the product
-// Headings do not have margin included, margin is determined by the context
-@mixin gl-heading($size, $fixed: false) {
-  // These settings apply to all headings
+/**
+* Defines default properties for heading typography based on font-size
+* scale value and default or fixed sizing.
+*
+* Note: overrides Bootstrap margin-top, other margin is determined by
+* individual context
+*
+* @param $size Number font-size scale
+* @param $fixed Boolean toggle default and fixed font size scales
+*/
+@mixin gl-heading-scale($size, $fixed: false) {
   font-weight: $gl-font-weight-heading;
   margin-top: 0; // override bootstrap reset in GitLab
-
-  // Because we can't interpolate into a variable name we have to do some stuff
   font-size: get-font-size-variable($size, $fixed);
 
-  // Larger headings have less letter spacing
+  // Larger headings have reduced letter spacing
   @if ($size <= 500) {
     letter-spacing: $gl-letter-spacing-heading;
   } @else {