@gitlab/ui 136.3.0 → 136.3.2

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

@@ -247,18 +247,17 @@ export default {
       }
     },
 
-    replaceToken(newType) {
+    async replaceToken(newType) {
       const newTokenConfig = this.availableTokens.find(({ type }) => type === newType);
 
       if (newTokenConfig === this.config) {
-        this.$nextTick(() => {
-          /**
-           * Emitted when this term token will lose its focus.
-           *
-           * @event deactivate
-           */
-          this.$emit('deactivate');
-        });
+        await this.$nextTick();
+        /**
+         * Emitted when this term token will lose its focus.
+         *
+         * @event deactivate
+         */
+        this.$emit('deactivate');
         return;
       }
 

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

@@ -316,20 +316,19 @@ export default {
       );
     },
 
-    activate() {
+    async activate() {
       this.fallbackValue = this.value;
 
-      this.$nextTick(() => {
-        const { input } = this.$refs;
-        if (input) {
-          input.focus();
-          input.scrollIntoView({ block: 'nearest', inline: 'end' });
-          this.alignSuggestions(input);
-          if (this.cursorPosition === 'start') {
-            input?.setSelectionRange(0, 0);
-          }
+      await this.$nextTick();
+      const { input } = this.$refs;
+      if (input) {
+        input.focus();
+        input.scrollIntoView({ block: 'nearest', inline: 'end' });
+        this.alignSuggestions(input);
+        if (this.cursorPosition === 'start') {
+          input?.setSelectionRange(0, 0);
         }
-      });
+      }
     },
 
     deactivate() {

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

@@ -221,7 +221,7 @@ export default {
         }
       }
     },
-    handleChange({ target: { checked, indeterminate } }) {
+    async handleChange({ target: { checked, indeterminate } }) {
       const { value, uncheckedValue } = this;
 
       // Update `computedLocalChecked`
@@ -241,26 +241,25 @@ export default {
       this.computedLocalChecked = localChecked;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', localChecked);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when selected value(s) is changed due to user interaction.
          *
          * @event change
          */
-        this.$emit('change', localChecked);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when selected value(s) is changed due to user interaction.
-           *
-           * @event change
-           */
-          this.group.$emit('change', localChecked);
-        }
+        this.group.$emit('change', localChecked);
+      }
 
-        this.$emit('indeterminate', indeterminate);
-      });
+      this.$emit('indeterminate', indeterminate);
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode

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

@@ -373,14 +373,13 @@ export default {
     // Create private non-reactive props
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.setWheelStopper(this.noWheel);
     this.handleAutofocus();
-    this.$nextTick(() => {
-      // Update DOM with auto-generated ID after mount
-      // to prevent SSR hydration errors
-      this.localId = uniqueId('gl-form-input-');
-    });
+    await this.$nextTick();
+    // Update DOM with auto-generated ID after mount
+    // to prevent SSR hydration errors
+    this.localId = uniqueId('gl-form-input-');
   },
   deactivated() {
     // Turn off listeners when keep-alive component deactivated
@@ -534,11 +533,10 @@ export default {
       stopEvent(event, { propagation: false });
       this.blur();
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) this.focus();
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) this.focus();
       });
     },
     select(...args) {

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

@@ -171,33 +171,32 @@ export default {
         this.$emit('input', newValue);
       }
     },
-    handleChange() {
+    async handleChange() {
       const { value } = this;
 
       // Update `computedLocalChecked`
       this.computedLocalChecked = value;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when the selected value is changed due to user interaction
+       *
+       * @event change
+       * @type {boolean} current selected value of radio group
+       */
+      this.$emit('change', value);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when the selected value is changed due to user interaction
          *
          * @event change
          * @type {boolean} current selected value of radio group
          */
-        this.$emit('change', value);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when the selected value is changed due to user interaction
-           *
-           * @event change
-           * @type {boolean} current selected value of radio group
-           */
-          this.group.$emit('change', value);
-        }
-      });
+        this.group.$emit('change', value);
+      }
     },
     focus() {
       if (!this.disabled) {

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

@@ -315,11 +315,10 @@ export default {
   created() {
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.handleAutofocus();
-    this.$nextTick(() => {
-      this.localId = uniqueId('gl-form-textarea-');
-    });
+    await this.$nextTick();
+    this.localId = uniqueId('gl-form-textarea-');
   },
   beforeDestroy() {
     this.clearDebounce();
@@ -424,13 +423,12 @@ export default {
        */
       this.$emit('blur', event);
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) {
-            this.focus();
-          }
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) {
+          this.focus();
+        }
       });
     },
     handleKeyPress(e) {
@@ -443,11 +441,10 @@ export default {
         this.$emit('submit');
       }
     },
-    setHeight() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          this.heightInPx = this.computeHeight();
-        });
+    async setHeight() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        this.heightInPx = this.computeHeight();
       });
     },
     computeHeight() {

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -51,39 +51,37 @@ export default {
     },
   },
   watch: {
-    fetchedItems(newVal, oldVal) {
+    async fetchedItems(newVal, oldVal) {
       // Re-adjust scroll to the current item if more items are added
       if (newVal > oldVal) {
         const { scrollHeight, scrollTop } = this.$refs.infiniteContainer;
         // Only when scrolled to the top
         if (scrollHeight !== 0 && scrollTop === 0) {
           // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
+          await this.$nextTick();
+          const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
 
-            // New scrollTop is the new height, minus the old height
-            // minus a small space to allow the user to trigger a scroll once more
-            let top = newScrollHeight - scrollHeight - adjustScrollGap;
+          // New scrollTop is the new height, minus the old height
+          // minus a small space to allow the user to trigger a scroll once more
+          let top = newScrollHeight - scrollHeight - adjustScrollGap;
 
-            // Never adjust to 0, or a new event may be be triggered
-            if (top < 1) {
-              top = 1;
-            }
+          // Never adjust to 0, or a new event may be be triggered
+          if (top < 1) {
+            top = 1;
+          }
 
-            this.scrollTo({ top });
-          });
+          this.scrollTo({ top });
         }
       }
     },
   },
 
-  mounted() {
+  async mounted() {
     // Scroll to bottom for reverse effect
-    this.$nextTick(() => {
-      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
-        this.scrollDown();
-      }
-    });
+    await this.$nextTick();
+    if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+      this.scrollDown();
+    }
   },
 
   methods: {

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

@@ -610,22 +610,21 @@ export default {
       },
     },
     items: {
-      handler() {
-        this.$nextTick(() => {
-          /* Every time the list of items changes (on search),
-           * the observed elements are recreated, thus we need to start obesrving them again */
-          this.observeScroll();
+      async handler() {
+        await this.$nextTick();
+        /* Every time the list of items changes (on search),
+         * the observed elements are recreated, thus we need to start obesrving them again */
+        this.observeScroll();
 
-          /**
-           * Every time the list of items changes, and there is a search string,
-           * we want to visually highlight the first enabled item
-           */
-          if (this.searchHasOptions) {
-            this.nextFocusedItemIndex = this.getFirstEnabledIndex();
-          } else {
-            this.nextFocusedItemIndex = null;
-          }
-        });
+        /**
+         * Every time the list of items changes, and there is a search string,
+         * we want to visually highlight the first enabled item
+         */
+        if (this.searchHasOptions) {
+          this.nextFocusedItemIndex = this.getFirstEnabledIndex();
+        } else {
+          this.nextFocusedItemIndex = null;
+        }
       },
     },
     ...(process.env.NODE_ENV !== 'production'
@@ -831,7 +830,7 @@ export default {
 
       this.focusItem(nextIndex, elements);
     },
-    focusItem(index, elements, keepSearchFocused = false) {
+    async focusItem(index, elements, keepSearchFocused = false) {
       this.nextFocusedItemIndex = index;
 
       // Always update the activeItemId when focus changes
@@ -847,9 +846,8 @@ export default {
         elements[index]?.focus();
       }
 
-      this.$nextTick(() => {
-        this.scrollActiveItemIntoView();
-      });
+      await this.$nextTick();
+      this.scrollActiveItemIntoView();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

package/src/components/base/sorting/sorting.vue

@@ -96,7 +96,7 @@ export default {
     block: {
       type: Boolean,
       required: false,
-      default: false,
+      default: true,
     },
   },
   data() {
@@ -171,12 +171,13 @@ export default {
 </script>
 
 <template>
-  <gl-button-group class="gl-sorting">
+  <gl-button-group class="gl-sorting gl-flex">
     <gl-collapsible-listbox
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
       :toggle-class="dropdownToggleClass"
+      class="gl-w-full"
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"

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

@@ -72,25 +72,23 @@ export default {
         .reduce((acc, key) => Object.assign(acc, { [key]: this.$attrs[key] }), {});
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
-
+  async mounted() {
     this.handleNavScroll = debounce((e) => {
       this.scrollLeft = e.target.scrollLeft;
     }, 100);
 
     this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   beforeDestroy() {
     this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
   },
-  updated() {
+  async updated() {
     // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   methods: {
     handleResize({ contentRect: { width } }) {

package/src/components/base/toggle/toggle.scss

@@ -71,7 +71,8 @@ $toggle-height: 2.5 * $grid-size;
   width: $toggle-width;
   height: $toggle-height;
   user-select: none;
-  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+  box-shadow: inset 0 0 0 $gl-border-size-1
+    var(--gl-toggle-switch-track-border-color-unchecked-default);
   @apply gl-rounded-pill;
   @apply gl-leading-normal;
   transition:
@@ -93,23 +94,33 @@ $toggle-height: 2.5 * $grid-size;
   &:hover {
     color: var(--gl-toggle-switch-icon-color-unchecked-hover);
     background-color: var(--gl-toggle-switch-track-color-unchecked-hover);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
-
-    .toggle-icon::before {
-      transform: scale(0.875);
-    }
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-unchecked-hover);
   }
 
   &:focus-visible {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
     background-color: var(--gl-toggle-switch-track-color-unchecked-focus);
-    @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
+    @include gl-focus(
+      $color: var(--gl-toggle-switch-track-border-color-unchecked-focus),
+      $important: true
+    );
   }
 
   &:active {
     color: var(--gl-toggle-switch-icon-color-unchecked-active);
     background-color: var(--gl-toggle-switch-track-color-unchecked-active);
-    @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
+    @include gl-focus(
+      $color: var(--gl-toggle-switch-track-border-color-unchecked-active),
+      $important: true
+    );
+  }
+
+  // The thumb grows on hover and focus so the interaction reads on the thumb as
+  // well as on the track.
+  &:hover .toggle-icon::before,
+  &:focus-visible .toggle-icon::before {
+    transform: scale(0.875);
   }
 
   .toggle-loading {
@@ -159,24 +170,32 @@ $toggle-height: 2.5 * $grid-size;
   &.is-checked {
     color: var(--gl-toggle-switch-icon-color-checked-default);
     background-color: var(--gl-toggle-switch-track-color-checked-default);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-checked-default);
 
     &:hover {
       color: var(--gl-toggle-switch-icon-color-checked-hover);
       background-color: var(--gl-toggle-switch-track-color-checked-hover);
-      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1
+        var(--gl-toggle-switch-track-border-color-checked-hover);
     }
 
     &:focus-visible {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
       background-color: var(--gl-toggle-switch-track-color-checked-focus);
-      @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-checked-focus),
+        $important: true
+      );
     }
 
     &:active {
       color: var(--gl-toggle-switch-icon-color-checked-active);
       background-color: var(--gl-toggle-switch-track-color-checked-active);
-      @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-checked-active),
+        $important: true
+      );
     }
 
     .toggle-icon {
@@ -189,34 +208,83 @@ $toggle-height: 2.5 * $grid-size;
     }
   }
 
-  &.is-disabled,
-  &.is-checked.is-disabled {
+  // Both disabled blocks must stay last. `.gl-toggle.is-checked` and
+  // `.gl-toggle.is-disabled` carry equal specificity, so source order is what
+  // lets the disabled styles win over the checked ones.
+  &.is-disabled {
     @apply gl-cursor-not-allowed;
-    color: var(--gl-action-disabled-background-color);
-    background-color: var(--gl-action-disabled-background-color);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);
+    background-color: var(--gl-toggle-switch-track-color-unchecked-disabled);
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-unchecked-disabled);
 
     .toggle-icon {
       color: var(--gl-toggle-switch-icon-color-disabled);
     }
 
     .toggle-icon::before {
-      background-color: var(--gl-toggle-switch-background-color-disabled);
+      background-color: var(--gl-toggle-switch-background-color-unchecked-disabled);
     }
 
-    &:hover .toggle-icon::before {
+    &:hover .toggle-icon::before,
+    &:focus-visible .toggle-icon::before {
       transform: scale(0.75);
     }
 
-    &.is-checked .toggle-icon::before,
-    &.is-checked:hover .toggle-icon::before {
+    &:active,
+    &:focus-visible,
+    &:focus-visible:active {
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-unchecked-disabled),
+        $important: true
+      );
+    }
+  }
+
+  &.is-checked.is-disabled {
+    background-color: var(--gl-toggle-switch-track-color-checked-disabled);
+    box-shadow: inset 0 0 0 $gl-border-size-1
+      var(--gl-toggle-switch-track-border-color-checked-disabled);
+
+    .toggle-icon::before {
+      background-color: var(--gl-toggle-switch-background-color-checked-disabled);
+      transform: scale(1);
+    }
+
+    &:hover .toggle-icon::before,
+    &:focus-visible .toggle-icon::before {
       transform: scale(1);
     }
 
     &:active,
     &:focus-visible,
     &:focus-visible:active {
-      @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-checked-disabled),
+        $important: true
+      );
+    }
+  }
+
+  // A loading toggle renders a spinner in place of the thumb, so the track is
+  // the only thing left to look at and its value is still in flight. It gets a
+  // flat fill that ignores the checked state, which also keeps the spinner
+  // legible in both color modes.
+  //
+  // `.is-loading` is always accompanied by `.is-disabled`, so this block has to
+  // stay after both disabled blocks: the checked pairs tie on specificity and
+  // source order is what settles them.
+  &.is-loading,
+  &.is-checked.is-loading {
+    background-color: var(--gl-toggle-switch-track-color-loading);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-toggle-switch-track-border-color-loading);
+
+    &:active,
+    &:focus-visible,
+    &:focus-visible:active {
+      @include gl-focus(
+        $color: var(--gl-toggle-switch-track-border-color-loading),
+        $important: true
+      );
     }
   }
 }

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

@@ -178,6 +178,7 @@ export default {
       :class="{
         'is-checked': value,
         'is-disabled': disabled || isLoading,
+        'is-loading': isLoading,
       }"
       class="gl-toggle gl-shrink-0"
       type="button"

package/src/components/base/token_selector/token_selector.vue

@@ -222,7 +222,7 @@ export default {
     },
   },
   watch: {
-    inputText(newValue, oldValue) {
+    async inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
         /**
          * Fired when user types in the token selector
@@ -242,13 +242,12 @@ export default {
         // Wait a tick so `text-input` event can be used to validate
         // the value and change the `allowUserDefinedTokens` and/or
         // `hideDropdownWithNoItems` props
-        this.$nextTick(() => {
-          if (this.hideDropdown) {
-            this.closeDropdown();
-          } else if (newValue !== '') {
-            this.openDropdown();
-          }
-        });
+        await this.$nextTick();
+        if (this.hideDropdown) {
+          this.closeDropdown();
+        } else if (newValue !== '') {
+          this.openDropdown();
+        }
       }
     },
   },
@@ -286,7 +285,7 @@ export default {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-    handleBlur(event) {
+    async handleBlur(event) {
       /**
        * Fired when the token selector is blurred
        *
@@ -300,11 +299,10 @@ export default {
       // Workaround is to:
       // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
       // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-      this.$nextTick(() => {
-        if (!event.relatedTarget?.closest?.('.dropdown-item')) {
-          this.closeDropdown();
-        }
-      });
+      await this.$nextTick();
+      if (!event.relatedTarget?.closest?.('.dropdown-item')) {
+        this.closeDropdown();
+      }
     },
     handleEnter() {
       if (this.focusedDropdownItem && this.dropdownIsOpen) {