@gitlab/ui 122.12.1 → 122.14.0

package/dist/tokens/json/tokens.json

@@ -7472,6 +7472,176 @@
       ]
     }
   },
+  "zindex": {
+    "0": {
+      "key": "{zindex.0}",
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.0}"
+      },
+      "name": "ZINDEX_0",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "0"
+      ]
+    },
+    "1": {
+      "key": "{zindex.1}",
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.1}"
+      },
+      "name": "ZINDEX_1",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "1"
+      ]
+    },
+    "2": {
+      "key": "{zindex.2}",
+      "$value": "2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "2",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.2}"
+      },
+      "name": "ZINDEX_2",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "2"
+      ]
+    },
+    "3": {
+      "key": "{zindex.3}",
+      "$value": "3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "3",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.3}"
+      },
+      "name": "ZINDEX_3",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "3"
+      ]
+    },
+    "4": {
+      "key": "{zindex.4}",
+      "$value": "4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "4",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.4}"
+      },
+      "name": "ZINDEX_4",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "4"
+      ]
+    },
+    "200": {
+      "key": "{zindex.200}",
+      "$value": "200",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "200",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.200}"
+      },
+      "name": "ZINDEX_200",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "200"
+      ]
+    },
+    "9999": {
+      "key": "{zindex.9999}",
+      "$value": "9999",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "9999",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.9999}"
+      },
+      "name": "ZINDEX_9999",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "9999"
+      ]
+    }
+  },
   "alert": {
     "border": {
       "radius": {

package/dist/tokens/scss/_tokens.dark.scss

@@ -281,6 +281,13 @@ $gl-spacing-scale-88: 44rem;
 $gl-spacing-scale-px: 1px;
 $gl-spacing-scale-2-5: 0.375rem;
 $gl-spacing-scale-11-5: 4.5rem;
+$gl-zindex-0: 0;
+$gl-zindex-1: 1;
+$gl-zindex-2: 2;
+$gl-zindex-3: 3;
+$gl-zindex-4: 4;
+$gl-zindex-200: 200;
+$gl-zindex-9999: 9999;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens.scss

@@ -281,6 +281,13 @@ $gl-spacing-scale-88: 44rem;
 $gl-spacing-scale-px: 1px;
 $gl-spacing-scale-2-5: 0.375rem;
 $gl-spacing-scale-11-5: 4.5rem;
+$gl-zindex-0: 0;
+$gl-zindex-1: 1;
+$gl-zindex-2: 2;
+$gl-zindex-3: 3;
+$gl-zindex-4: 4;
+$gl-zindex-200: 200;
+$gl-zindex-9999: 9999;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -296,6 +296,13 @@ $gl-spacing-scale-88: var(--gl-spacing-scale-88);
 $gl-spacing-scale-px: var(--gl-spacing-scale-px);
 $gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
 $gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
+$gl-zindex-0: var(--gl-zindex-0);
+$gl-zindex-1: var(--gl-zindex-1);
+$gl-zindex-2: var(--gl-zindex-2);
+$gl-zindex-3: var(--gl-zindex-3);
+$gl-zindex-4: var(--gl-zindex-4);
+$gl-zindex-200: var(--gl-zindex-200);
+$gl-zindex-9999: var(--gl-zindex-9999);
 $gl-alert-border-radius: var(--gl-alert-border-radius);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);

package/dist/tokens/tailwind/tokens.cjs

@@ -23,6 +23,7 @@
   const spacingScale = {"0":"var(--gl-spacing-scale-0, 0)","1":"var(--gl-spacing-scale-1, 0.125rem)","2":"var(--gl-spacing-scale-2, 0.25rem)","3":"var(--gl-spacing-scale-3, 0.5rem)","4":"var(--gl-spacing-scale-4, 0.75rem)","5":"var(--gl-spacing-scale-5, 1rem)","6":"var(--gl-spacing-scale-6, 1.5rem)","7":"var(--gl-spacing-scale-7, 2rem)","8":"var(--gl-spacing-scale-8, 2.5rem)","9":"var(--gl-spacing-scale-9, 3rem)","10":"var(--gl-spacing-scale-10, 3.5rem)","11":"var(--gl-spacing-scale-11, 4rem)","12":"var(--gl-spacing-scale-12, 5rem)","13":"var(--gl-spacing-scale-13, 6rem)","15":"var(--gl-spacing-scale-15, 7.5rem)","18":"var(--gl-spacing-scale-18, 9rem)","20":"var(--gl-spacing-scale-20, 10rem)","26":"var(--gl-spacing-scale-26, 13rem)","28":"var(--gl-spacing-scale-28, 14rem)","30":"var(--gl-spacing-scale-30, 15rem)","31":"var(--gl-spacing-scale-31, 15.5rem)","33":"var(--gl-spacing-scale-33, 16.5rem)","34":"var(--gl-spacing-scale-34, 17rem)","37":"var(--gl-spacing-scale-37, 18.5rem)","48":"var(--gl-spacing-scale-48, 24rem)","62":"var(--gl-spacing-scale-62, 31rem)","75":"var(--gl-spacing-scale-75, 37.5rem)","80":"var(--gl-spacing-scale-80, 40rem)","88":"var(--gl-spacing-scale-88, 44rem)","px":"var(--gl-spacing-scale-px, 1px)","2-5":"var(--gl-spacing-scale-2-5, 0.375rem)","11-5":"var(--gl-spacing-scale-11-5, 4.5rem)"};
   const borderRadius = {"none":"var(--gl-border-radius-none, var(--gl-spacing-scale-0, 0))","xs":"var(--gl-border-radius-xs, var(--gl-spacing-scale-px, 1px))","sm":"var(--gl-border-radius-sm, var(--gl-spacing-scale-1, 0.125rem))","md":"var(--gl-border-radius-md, var(--gl-spacing-scale-2, 0.25rem))","lg":"var(--gl-border-radius-lg, var(--gl-spacing-scale-3, 0.5rem))","xl":"var(--gl-border-radius-xl, var(--gl-spacing-scale-4, 0.75rem))","2xl":"var(--gl-border-radius-2xl, var(--gl-spacing-scale-5, 1rem))","3xl":"var(--gl-border-radius-3xl, var(--gl-spacing-scale-6, 1.5rem))","full":"var(--gl-border-radius-full, 9999px)","default":"var(--gl-border-radius-default, var(--gl-border-radius-md, 0.25rem))","control":"var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))"};
   const opacity = {"0":"var(--gl-opacity-0, 0)","1":"var(--gl-opacity-1, .1)","2":"var(--gl-opacity-2, .2)","3":"var(--gl-opacity-3, .3)","4":"var(--gl-opacity-4, .4)","5":"var(--gl-opacity-5, .5)","6":"var(--gl-opacity-6, .6)","7":"var(--gl-opacity-7, .7)","8":"var(--gl-opacity-8, .8)","9":"var(--gl-opacity-9, .9)","10":"var(--gl-opacity-10, 1)"};
+  const zindexes = {"0":"var(--gl-zindex-0, 0)","1":"var(--gl-zindex-1, 1)","2":"var(--gl-zindex-2, 2)","3":"var(--gl-zindex-3, 3)","4":"var(--gl-zindex-4, 4)","200":"var(--gl-zindex-200, 200)","9999":"var(--gl-zindex-9999, 9999)"};
 
   const colors = {
     inherit: 'inherit',
@@ -105,5 +106,6 @@
     spacing: spacingScale,
     borderRadius,
     opacity,
+    zIndex: zindexes,
   }
   

package/package.json

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

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

@@ -13,6 +13,11 @@ export default {
       validator: tokensValidator,
       required: true,
     },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     registerFocusOnToken: {
       type: Function,
       required: true,
@@ -128,6 +133,11 @@ export default {
       <div
         ref="tokenContainer"
         class="-gl-mx-1 -gl-my-1 gl-flex gl-w-auto gl-list-none gl-flex-wrap gl-items-center gl-p-0"
+        role="listbox"
+        aria-multiselectable="false"
+        aria-orientation="horizontal"
+        :aria-invalid="state === false && 'true'"
+        aria-label="token list"
         @keydown.left="handleLeftArrow"
         @keydown.right="handleRightArrow"
         @keydown.home="handleHome"
@@ -142,7 +152,7 @@ export default {
           :key="token.id"
           :data-token-id="token.id"
           class="gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none"
-          data-testid="gl-token-selector-tokens"
+          role="option"
           tabindex="-1"
           @focus="bindFocusEvent ? handleTokenFocus(index) : null"
         >

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

@@ -1,12 +1,12 @@
 <script>
-import { GlUniqueId } from '../../../utils/unique_id';
+import uniqueId from 'lodash/uniqueId';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container.vue';
 import GlTokenSelectorDropdown from './token_selector_dropdown.vue';
 
 export default {
   name: 'GlTokenSelector',
-  componentId: `token-selector-${GlUniqueId()}`,
+  componentId: uniqueId('token-selector'),
   components: {
     GlTokenContainer,
     GlTokenSelectorDropdown,
@@ -75,7 +75,7 @@ export default {
       default: '',
     },
     /**
-     * The HTML5 autocomplete attribute value for the underlying `input` element.
+     * The autocomplete attribute value for the underlying `input` element
      */
     autocomplete: {
       type: String,
@@ -83,21 +83,7 @@ export default {
       default: 'off',
     },
     /**
-     * The `aria-label` attribute value for the underlying `input` element.
-     * Input must have an aria-label or aria-labelledby prop or it will be inaccessible.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
-     */
-    ariaLabel: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The `aria-labelledby` attribute value for the underlying `input` element.
-     * String must match the unique ID on a text element to create an accessible label.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby
+     * The `aria-labelledby` attribute value for the underlying `input` element
      */
     ariaLabelledby: {
       type: String,
@@ -396,13 +382,6 @@ export default {
       this.$emit('input', []);
       this.focusTextInput();
     },
-    handleAriaInvalid() {
-      const { state } = this;
-      return state === false ? 'true' : null;
-    },
-    handleAriaActiveDescendent(value) {
-      return value ? `${this.$options.componentId}-dropdown-item-${value.id}` : null;
-    },
   },
 };
 </script>
@@ -449,17 +428,10 @@ export default {
             type="text"
             class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
-            :aria-activedescendant="handleAriaActiveDescendent(focusedDropdownItem)"
             :autocomplete="autocomplete"
-            :aria-controls="$options.componentId"
-            :aria-expanded="dropdownIsOpen.toString()"
-            :aria-invalid="handleAriaInvalid()"
-            :aria-label="ariaLabelledby ? null : ariaLabel"
             :aria-labelledby="ariaLabelledby"
             :placeholder="placeholder"
             :disabled="viewOnly"
-            aria-autocomplete="list"
-            role="combobox"
             v-bind="textInputAttrs"
             @input="inputText = $event.target.value"
             @focus="handleFocus"
@@ -490,7 +462,6 @@ export default {
       :register-dropdown-event-handlers="registerDropdownEventHandlers"
       :register-reset-focused-dropdown-item="registerResetFocusedDropdownItem"
       @dropdown-item-click="addToken"
-      @input="handleAriaActiveDescendent"
       @show="openDropdown"
     >
       <template #loading-content

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

@@ -199,10 +199,10 @@ export default {
 <template>
   <div class="dropdown b-dropdown gl-dropdown gl-relative" :class="{ show }">
     <ul
-      :id="componentId"
       ref="dropdownMenu"
-      role="listbox"
+      role="menu"
       class="dropdown-menu gl-absolute"
+      :aria-activedescendant="dropdownItemIdAttribute(focusedDropdownItem)"
       :class="[{ show }, menuClass]"
     >
       <gl-dropdown-item v-if="loading" disabled>
@@ -216,9 +216,7 @@ export default {
         :key="dropdownItem.id"
         :data-dropdown-item-id="dropdownItem.id"
         :active="dropdownItemIsFocused(dropdownItem)"
-        :aria-selected="dropdownItemIsFocused(dropdownItem).toString()"
         active-class="is-focused"
-        role="option"
         tabindex="-1"
         @click="handleDropdownItemClick(dropdownItem)"
       >

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -86,6 +86,14 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
+     */
+    titlePopoverClasses: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     /**
      * Set to `true` to show the loading state.
      */
@@ -218,6 +226,7 @@ export default {
               data-testid="panel-title-popover"
               boundary="viewport"
               :target="titlePopoverId"
+              :css-classes="titlePopoverClasses"
             >
               <!-- @slot The title of the info popover. -->
               <template v-if="hasInfoPopoverTitleSlot" #title>

package/src/tokens/build/css/tokens.css

@@ -283,6 +283,13 @@
   --gl-spacing-scale-px: 1px;
   --gl-spacing-scale-2-5: 0.375rem;
   --gl-spacing-scale-11-5: 4.5rem;
+  --gl-zindex-0: 0;
+  --gl-zindex-1: 1;
+  --gl-zindex-2: 2;
+  --gl-zindex-3: 3;
+  --gl-zindex-4: 4;
+  --gl-zindex-200: 200;
+  --gl-zindex-9999: 9999;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */

package/src/tokens/build/css/tokens.dark.css

@@ -283,6 +283,13 @@
   --gl-spacing-scale-px: 1px;
   --gl-spacing-scale-2-5: 0.375rem;
   --gl-spacing-scale-11-5: 4.5rem;
+  --gl-zindex-0: 0;
+  --gl-zindex-1: 1;
+  --gl-zindex-2: 2;
+  --gl-zindex-3: 3;
+  --gl-zindex-4: 4;
+  --gl-zindex-200: 200;
+  --gl-zindex-9999: 9999;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -44335,5 +44335,182 @@
       ],
       "cssWithValue": "var(--gl-opacity-10, 1)"
     }
+  },
+  "zIndex": {
+    "0": {
+      "key": "{zindex.0}",
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.0}"
+      },
+      "name": "ZINDEX_0",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "0"
+      ],
+      "cssWithValue": "var(--gl-zindex-0, 0)"
+    },
+    "1": {
+      "key": "{zindex.1}",
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.1}"
+      },
+      "name": "ZINDEX_1",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "1"
+      ],
+      "cssWithValue": "var(--gl-zindex-1, 1)"
+    },
+    "2": {
+      "key": "{zindex.2}",
+      "$value": "2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "2",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.2}"
+      },
+      "name": "ZINDEX_2",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "2"
+      ],
+      "cssWithValue": "var(--gl-zindex-2, 2)"
+    },
+    "3": {
+      "key": "{zindex.3}",
+      "$value": "3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "3",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.3}"
+      },
+      "name": "ZINDEX_3",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "3"
+      ],
+      "cssWithValue": "var(--gl-zindex-3, 3)"
+    },
+    "4": {
+      "key": "{zindex.4}",
+      "$value": "4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "4",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.4}"
+      },
+      "name": "ZINDEX_4",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "4"
+      ],
+      "cssWithValue": "var(--gl-zindex-4, 4)"
+    },
+    "200": {
+      "key": "{zindex.200}",
+      "$value": "200",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "200",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.200}"
+      },
+      "name": "ZINDEX_200",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "200"
+      ],
+      "cssWithValue": "var(--gl-zindex-200, 200)"
+    },
+    "9999": {
+      "key": "{zindex.9999}",
+      "$value": "9999",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "9999",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.9999}"
+      },
+      "name": "ZINDEX_9999",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "9999"
+      ],
+      "cssWithValue": "var(--gl-zindex-9999, 9999)"
+    }
   }
 }