@gitlab/ui 111.1.0 → 111.2.0

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -2,93 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
-$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
-$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
-$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
-$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
-$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
-$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
-$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
-$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
-$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
-$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
-$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
-$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
-$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
-$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
-$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
-$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
-$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
-$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
-$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
-$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
-$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
-$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
-$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
-$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
-$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
-$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
-$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
-$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
-$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
-$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
-$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
-$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
-$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
-$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
-$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
-$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
-$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
-$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
-$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
-$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
-$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
-$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
-$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
-$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
-$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
-$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
-$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
-$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
-$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
-$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
-$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
-$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
-$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
-$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
-$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
-$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
-$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
-$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
-$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
-$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
-$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
-$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
-$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
-$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
-$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
-$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
-$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
-$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
-$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
-$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
-$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
-$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
-$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
-$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
-$gl-background-color-default: var(--gl-background-color-default);
-$gl-background-color-subtle: var(--gl-background-color-subtle);
-$gl-background-color-strong: var(--gl-background-color-strong);
-$gl-background-color-disabled: var(--gl-background-color-disabled);
-$gl-background-color-overlap: var(--gl-background-color-overlap);
-$gl-background-color-section: var(--gl-background-color-section);
-$gl-background-color-overlay: var(--gl-background-color-overlay);
-$gl-border-color-default: var(--gl-border-color-default);
-$gl-border-color-subtle: var(--gl-border-color-subtle);
-$gl-border-color-strong: var(--gl-border-color-strong);
-$gl-border-color-section: var(--gl-border-color-section);
-$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);
@@ -315,6 +228,16 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
+$gl-line-height-12: var(--gl-line-height-12);
+$gl-line-height-16: var(--gl-line-height-16);
+$gl-line-height-20: var(--gl-line-height-20);
+$gl-line-height-24: var(--gl-line-height-24);
+$gl-line-height-28: var(--gl-line-height-28);
+$gl-line-height-32: var(--gl-line-height-32);
+$gl-line-height-36: var(--gl-line-height-36);
+$gl-line-height-42: var(--gl-line-height-42);
+$gl-line-height-44: var(--gl-line-height-44);
+$gl-line-height-52: var(--gl-line-height-52);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
@@ -734,26 +657,6 @@ $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disable
 $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
-$gl-control-background-color-default: var(--gl-control-background-color-default);
-$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
-$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
-$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
-$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
-$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
-$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
-$gl-control-border-color-default: var(--gl-control-border-color-default);
-$gl-control-border-color-hover: var(--gl-control-border-color-hover);
-$gl-control-border-color-focus: var(--gl-control-border-color-focus);
-$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
-$gl-control-border-color-error: var(--gl-control-border-color-error);
-$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
-$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
-$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
-$gl-control-text-color-error: var(--gl-control-text-color-error);
-$gl-control-text-color-valid: var(--gl-control-text-color-valid);
-$gl-control-placeholder-color: var(--gl-control-placeholder-color);
-$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
-$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);
@@ -974,6 +877,113 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
+$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
+$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
+$gl-action-selected-foreground-color-default: var(--gl-action-selected-foreground-color-default);
+$gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-hover);
+$gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-focus);
+$gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-active);
+$gl-action-selected-background-color-default: var(--gl-action-selected-background-color-default);
+$gl-action-selected-background-color-hover: var(--gl-action-selected-background-color-hover);
+$gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-focus);
+$gl-action-selected-background-color-active: var(--gl-action-selected-background-color-active);
+$gl-action-selected-border-color-default: var(--gl-action-selected-border-color-default);
+$gl-action-selected-border-color-hover: var(--gl-action-selected-border-color-hover);
+$gl-action-selected-border-color-focus: var(--gl-action-selected-border-color-focus);
+$gl-action-selected-border-color-active: var(--gl-action-selected-border-color-active);
+$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
+$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
+$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
+$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
+$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
+$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
+$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
+$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
+$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
+$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
+$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
+$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
+$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
+$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
+$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
+$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
+$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
+$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
+$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
+$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
+$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
+$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
+$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
+$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
+$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
+$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
+$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
+$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
+$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
+$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
+$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
+$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
+$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
+$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
+$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
+$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
+$gl-action-strong-confirm-background-color-default: var(--gl-action-strong-confirm-background-color-default);
+$gl-action-strong-confirm-background-color-hover: var(--gl-action-strong-confirm-background-color-hover);
+$gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-focus);
+$gl-action-strong-confirm-background-color-active: var(--gl-action-strong-confirm-background-color-active);
+$gl-action-strong-confirm-foreground-color-default: var(--gl-action-strong-confirm-foreground-color-default);
+$gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-hover);
+$gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus);
+$gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active);
+$gl-action-strong-confirm-border-color-default: var(--gl-action-strong-confirm-border-color-default);
+$gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-hover);
+$gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-focus);
+$gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-active);
+$gl-action-strong-neutral-background-color-default: var(--gl-action-strong-neutral-background-color-default);
+$gl-action-strong-neutral-background-color-hover: var(--gl-action-strong-neutral-background-color-hover);
+$gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-focus);
+$gl-action-strong-neutral-background-color-active: var(--gl-action-strong-neutral-background-color-active);
+$gl-action-strong-neutral-foreground-color-default: var(--gl-action-strong-neutral-foreground-color-default);
+$gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-hover);
+$gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-focus);
+$gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-active);
+$gl-action-strong-neutral-border-color-default: var(--gl-action-strong-neutral-border-color-default);
+$gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-hover);
+$gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-focus);
+$gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-active);
+$gl-background-color-default: var(--gl-background-color-default);
+$gl-background-color-subtle: var(--gl-background-color-subtle);
+$gl-background-color-strong: var(--gl-background-color-strong);
+$gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-background-color-overlap: var(--gl-background-color-overlap);
+$gl-background-color-section: var(--gl-background-color-section);
+$gl-background-color-overlay: var(--gl-background-color-overlay);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-section: var(--gl-border-color-section);
+$gl-border-color-transparent: var(--gl-border-color-transparent);
+$gl-control-background-color-default: var(--gl-control-background-color-default);
+$gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
+$gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
+$gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
+$gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
+$gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
+$gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-border-color-default: var(--gl-control-border-color-default);
+$gl-control-border-color-hover: var(--gl-control-border-color-hover);
+$gl-control-border-color-focus: var(--gl-control-border-color-focus);
+$gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
+$gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
+$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
+$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
+$gl-control-text-color-error: var(--gl-control-text-color-error);
+$gl-control-text-color-valid: var(--gl-control-text-color-valid);
+$gl-control-placeholder-color: var(--gl-control-placeholder-color);
+$gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
+$gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
 $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);
@@ -1004,16 +1014,6 @@ $gl-icon-color-info: var(--gl-icon-color-info);
 $gl-icon-color-warning: var(--gl-icon-color-warning);
 $gl-icon-color-danger: var(--gl-icon-color-danger);
 $gl-icon-color-success: var(--gl-icon-color-success);
-$gl-line-height-12: var(--gl-line-height-12);
-$gl-line-height-16: var(--gl-line-height-16);
-$gl-line-height-20: var(--gl-line-height-20);
-$gl-line-height-24: var(--gl-line-height-24);
-$gl-line-height-28: var(--gl-line-height-28);
-$gl-line-height-32: var(--gl-line-height-32);
-$gl-line-height-36: var(--gl-line-height-36);
-$gl-line-height-42: var(--gl-line-height-42);
-$gl-line-height-44: var(--gl-line-height-44);
-$gl-line-height-52: var(--gl-line-height-52);
 $gl-shadow-color-default: var(--gl-shadow-color-default);
 $gl-status-neutral-background-color: var(--gl-status-neutral-background-color);
 $gl-status-neutral-text-color: var(--gl-status-neutral-text-color);

package/src/tokens/contextual/dropdown.tokens.json

@@ -23,6 +23,8 @@
           "default": "{border.color.default}",
           "dark": "{border.color.subtle}"
         },
+        "$type": "color",
+        "$description": "Used for the divider of a dropdown."
       }
     },
     "option": {

package/src/utils/is_slot_empty.js

@@ -1,13 +1,8 @@
 import Vue from 'vue';
-import { isVue3 } from './constants';
 
 // Fragment will be available only in Vue.js 3
 const { Fragment, Comment, Text } = Vue;
 
-function callIfNeeded(fnOrResult, args) {
-  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
-}
-
 export function isVnodeEmpty(vnode) {
   if (!vnode || (Comment && vnode.type === Comment)) {
     return true;
@@ -33,11 +28,7 @@ export function isVnodeEmpty(vnode) {
 }
 
 export function isSlotEmpty(vueInstance, slot, slotArgs) {
-  const slotContent = isVue3
-    ? // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
-      // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
-      callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs)
-    : vueInstance.$scopedSlots[slot]?.(slotArgs);
+  const slotContent = vueInstance.$scopedSlots[slot]?.(slotArgs);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
   return isVnodeEmpty(slotContent);