@gitlab/ui 54.4.1 → 55.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "54.4.1",
+  "version": "55.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,7 +87,7 @@
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.18.0",
+    "@gitlab/svgs": "3.19.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -36,7 +36,7 @@ const generateProps = ({
   loading = defaultValue('loading'),
   noCaret = defaultValue('noCaret'),
   placement = defaultValue('placement'),
-  toggleId = defaultValue('toggleId'),
+  toggleId = defaultValue('toggleId')(),
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
   icon = '',

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

@@ -111,12 +111,12 @@ export default {
     },
     /**
      * Custom toggle id.
-     * Fot instance, it can be referenced by tooltip or popover
+     * For instance, it can be referenced by tooltip or popover
      */
     toggleId: {
       type: String,
       required: false,
-      default: uniqueId('dropdown-toggle-btn-'),
+      default: () => uniqueId('dropdown-toggle-btn-'),
     },
     /**
      * Additional CSS classes to customize toggle appearance

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

@@ -57,22 +57,30 @@ describe('search box by type component', () => {
       expect(wrapper.emitted('input')).toEqual([['']]);
     });
 
-    it('emits clearButtonFocus when focused', () => {
-      findClearIcon().vm.$emit('focus', { stopPropagation: jest.fn() });
+    it('emits `focusin` event when focus inside the component', () => {
+      findInput().vm.$emit('focusin', { preventDefault: jest.fn() });
 
-      expect(wrapper.emitted('clearButtonFocus')).toHaveLength(1);
+      expect(wrapper.emitted('focus')).toBe(undefined);
+      expect(wrapper.emitted('focusin')).toHaveLength(1);
     });
+    it('emits `focusout` event when focus moves outside the component', () => {
+      findInput().vm.$emit('focusout', { preventDefault: jest.fn() });
+      expect(wrapper.emitted('blur')).toBe(undefined);
 
-    it('emits clearButtonBlur when blur', () => {
-      findClearIcon().vm.$emit('blur', { stopPropagation: jest.fn() });
-
-      expect(wrapper.emitted('clearButtonBlur')).toHaveLength(1);
+      expect(wrapper.emitted('focusout')).toHaveLength(1);
     });
 
-    it('emits clearButtonRelease when released', () => {
-      findClearIcon().vm.$emit('release', { stopPropagation: jest.fn() });
+    it('does NOT emit `focusout` event when tabbing inside the component back and forth', () => {
+      findInput().vm.$emit('focusout', {
+        preventDefault: jest.fn(),
+        relatedTarget: wrapper.vm.$refs.input.$el,
+      });
+      findClearIcon().vm.$emit('focusout', {
+        preventDefault: jest.fn(),
+        relatedTarget: wrapper.vm.$refs.clearButton.$el,
+      });
 
-      expect(wrapper.emitted('clearButtonRelease')).toHaveLength(1);
+      expect(wrapper.emitted('focusout')).toBe(undefined);
     });
   });
 

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -81,9 +81,9 @@ export default {
     inputListeners() {
       return {
         ...this.$listeners,
-        input: (value) => {
-          this.$emit('input', value);
-        },
+        input: this.onInput,
+        focusin: this.onFocusin,
+        focusout: this.onFocusout,
       };
     },
     showClearButton() {
@@ -91,21 +91,36 @@ export default {
     },
   },
   methods: {
+    isInputOrClearButton(element) {
+      return element === this.$refs.input?.$el || element === this.$refs.clearButton?.$el;
+    },
     clearInput() {
-      this.$emit('input', '');
+      this.onInput('');
       this.focusInput();
     },
     focusInput() {
       this.$refs.input.$el.focus();
     },
-    onClearButtonFocus() {
-      this.$emit('clearButtonFocus');
+    onInput(value) {
+      this.$emit('input', value);
     },
-    onClearButtonBlur() {
-      this.$emit('clearButtonBlur');
+    onFocusout(event) {
+      const { relatedTarget } = event;
+
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+
+      this.$emit('focusout', event);
     },
-    onClearButtonRelease() {
-      this.$emit('clearButtonRelease');
+    onFocusin(event) {
+      const { relatedTarget } = event;
+
+      if (this.isInputOrClearButton(relatedTarget)) {
+        return;
+      }
+
+      this.$emit('focusin', event);
     },
   },
 };
@@ -129,13 +144,13 @@ export default {
       <gl-loading-icon v-if="isLoading" class="gl-search-box-by-type-loading-icon" />
       <gl-clear-icon-button
         v-if="showClearButton"
+        ref="clearButton"
         :title="clearButtonTitle"
         :tooltip-container="tooltipContainer"
         class="gl-search-box-by-type-clear gl-clear-icon-button"
         @click.stop="clearInput"
-        @focus="onClearButtonFocus"
-        @blur="onClearButtonBlur"
-        @release="onClearButtonRelease"
+        @focusin="onFocusin"
+        @focusout="onFocusout"
       />
     </div>
   </div>

package/src/scss/utilities.scss

@@ -219,11 +219,11 @@
 }
 
 .gl-bg-gray-500 {
-  background-color: $gray-600
+  background-color: $gray-500
 }
 
 .gl-bg-gray-500\! {
-  background-color: $gray-600 !important
+  background-color: $gray-500 !important
 }
 
 .gl-bg-gray-600 {

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

@@ -51,7 +51,7 @@
 }
 
 @mixin gl-bg-gray-500 {
-  background-color: $gray-600;
+  background-color: $gray-500;
 }
 
 @mixin gl-bg-gray-600 {