@gitlab/ui 114.8.0 → 115.0.0

package/dist/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -4,7 +4,7 @@ import { IS_BROWSER } from '../../constants/env';
 import { EVENT_NAME_CLICK, EVENT_NAME_FIRST, EVENT_NAME_PREV, EVENT_NAME_LAST, EVENT_NAME_NEXT, EVENT_NAME_CHANGED, EVENT_NAME_ACTIVATE_TAB } from '../../constants/events';
 import { CODE_SPACE, CODE_UP, CODE_LEFT, CODE_HOME, CODE_DOWN, CODE_RIGHT, CODE_END } from '../../constants/key-codes';
 import { PROP_TYPE_NUMBER, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../constants/props';
-import { SLOT_NAME_TITLE, SLOT_NAME_TABS_START, SLOT_NAME_TABS_END, SLOT_NAME_EMPTY } from '../../constants/slots';
+import { SLOT_NAME_TITLE, SLOT_NAME_TABS_START, SLOT_NAME_TABS_END, SLOT_NAME_TOOLBAR_START, SLOT_NAME_TOOLBAR_END, SLOT_NAME_EMPTY } from '../../constants/slots';
 import { arrayIncludes } from '../../utils/array';
 import { BvEvent } from '../../utils/bv-event.class';
 import { attemptFocus, selectAll, requestAF } from '../../utils/dom';
@@ -561,7 +561,7 @@ const BTabs = /*#__PURE__*/extend({
     $nav = h('div', {
       class: this.navWrapperClass,
       key: 'bv-tabs-nav'
-    }, [$nav]);
+    }, [this.normalizeSlot(SLOT_NAME_TOOLBAR_START) || h(), $nav, this.normalizeSlot(SLOT_NAME_TOOLBAR_END) || h()]);
     const $children = this.normalizeSlot() || [];
     let $empty = h();
     if ($children.length === 0) {

package/dist/vendor/bootstrap-vue/src/constants/slots.js

@@ -24,6 +24,8 @@ const SLOT_NAME_TABLE_CAPTION = 'table-caption';
 const SLOT_NAME_TABLE_COLGROUP = 'table-colgroup';
 const SLOT_NAME_TABS_END = 'tabs-end';
 const SLOT_NAME_TABS_START = 'tabs-start';
+const SLOT_NAME_TOOLBAR_END = 'toolbar-end';
+const SLOT_NAME_TOOLBAR_START = 'toolbar-start';
 const SLOT_NAME_TEXT = 'text';
 const SLOT_NAME_THEAD_TOP = 'thead-top';
 const SLOT_NAME_TITLE = 'title';
@@ -31,4 +33,4 @@ const SLOT_NAME_TOAST_TITLE = 'toast-title';
 const SLOT_NAME_TOP_ROW = 'top-row';
 const SLOT_NAME_VALID_FEEDBACK = 'valid-feedback';
 
-export { SLOT_NAME_APPEND, SLOT_NAME_BOTTOM_ROW, SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_CUSTOM_FOOT, SLOT_NAME_DEFAULT, SLOT_NAME_DESCRIPTION, SLOT_NAME_EMPTY, SLOT_NAME_EMPTYFILTERED, SLOT_NAME_FIRST, SLOT_NAME_HEADER, SLOT_NAME_INVALID_FEEDBACK, SLOT_NAME_LABEL, SLOT_NAME_MODAL_BACKDROP, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_TITLE, SLOT_NAME_PREPEND, SLOT_NAME_ROW_DETAILS, SLOT_NAME_TABLE_BUSY, SLOT_NAME_TABLE_CAPTION, SLOT_NAME_TABLE_COLGROUP, SLOT_NAME_TABS_END, SLOT_NAME_TABS_START, SLOT_NAME_TEXT, SLOT_NAME_THEAD_TOP, SLOT_NAME_TITLE, SLOT_NAME_TOAST_TITLE, SLOT_NAME_TOP_ROW, SLOT_NAME_VALID_FEEDBACK };
+export { SLOT_NAME_APPEND, SLOT_NAME_BOTTOM_ROW, SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_CUSTOM_FOOT, SLOT_NAME_DEFAULT, SLOT_NAME_DESCRIPTION, SLOT_NAME_EMPTY, SLOT_NAME_EMPTYFILTERED, SLOT_NAME_FIRST, SLOT_NAME_HEADER, SLOT_NAME_INVALID_FEEDBACK, SLOT_NAME_LABEL, SLOT_NAME_MODAL_BACKDROP, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_TITLE, SLOT_NAME_PREPEND, SLOT_NAME_ROW_DETAILS, SLOT_NAME_TABLE_BUSY, SLOT_NAME_TABLE_CAPTION, SLOT_NAME_TABLE_COLGROUP, SLOT_NAME_TABS_END, SLOT_NAME_TABS_START, SLOT_NAME_TEXT, SLOT_NAME_THEAD_TOP, SLOT_NAME_TITLE, SLOT_NAME_TOAST_TITLE, SLOT_NAME_TOOLBAR_END, SLOT_NAME_TOOLBAR_START, SLOT_NAME_TOP_ROW, SLOT_NAME_VALID_FEEDBACK };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "114.8.0",
+  "version": "115.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,7 +81,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.1",
     "echarts": "^5.6.0",
-    "iframe-resizer": "^4.3.2",
+    "iframe-resizer": "^4.4.5",
     "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
@@ -103,7 +103,7 @@
     "postcss": "8.5.3",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2",
-    "eslint-plugin-import": "2.31.0"
+    "eslint-plugin-import": "2.32.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -114,13 +114,13 @@
     "@cypress/grep": "^4.0.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.29.0",
-    "@gitlab/eslint-plugin": "20.7.1",
+    "@gitlab/eslint-plugin": "21.1.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "3.131.0",
-    "@jest/test-sequencer": "^29.7.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@jest/test-sequencer": "^30.0.2",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
@@ -151,18 +151,18 @@
     "axe-playwright": "^2.1.0",
     "babel-jest": "29.7.0",
     "babel-loader": "^8.4.1",
-    "cypress": "14.3.3",
+    "cypress": "14.5.0",
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
     "entities": "^4.5.0",
     "esbuild": "^0.18.0",
-    "eslint": "9.28.0",
-    "eslint-formatter-gitlab": "^6.0.0",
+    "eslint": "9.29.0",
+    "eslint-formatter-gitlab": "^6.0.1",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "5.0.1",
+    "eslint-plugin-cypress": "5.1.0",
     "eslint-plugin-storybook": "0.12.0",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.4.5",
     "globby": "^11.1.0",
@@ -179,14 +179,14 @@
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
-    "playwright": "^1.52.0",
-    "playwright-core": "^1.52.0",
+    "playwright": "^1.53.1",
+    "playwright-core": "^1.53.1",
     "postcss": "8.5.3",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
     "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
@@ -195,22 +195,22 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
     "sass": "^1.49.9",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^10.5.2",
     "sass-true": "^6.1.0",
-    "start-server-and-test": "^1.10.6",
+    "start-server-and-test": "^1.15.4",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^4.4.0",
-    "stylelint": "16.8.1",
+    "style-dictionary": "^5.0.0",
+    "stylelint": "16.21.0",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",
     "vue": "2.7.16",
     "vue-loader": "^15.11.1",
-    "vue-loader-vue3": "npm:vue-loader@17",
+    "vue-loader-vue3": "npm:vue-loader@17.4.2",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.7.16",
     "vue-test-utils-compat": "^0.0.15",
-    "webpack": "^5.9.0",
+    "webpack": "^5.99.9",
     "yargs": "^17.7.2",
     "yarn-deduplicate": "^6.0.2"
   }

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

@@ -14,8 +14,8 @@ $clear-button-size: 24px;
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
     @apply gl-py-4;
     @apply gl-text-base;
+    @apply gl-text-default;
     background-color: var(--gl-dropdown-search-background-color);
-    color: var(--gl-control-text-color);
 
     &:focus {
       @include gl-focus($inset: true);

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

@@ -2,6 +2,7 @@
 import debounce from 'lodash/debounce';
 import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon.vue';
+import { translate } from '../../../../utils/i18n';
 import GlTabs from './tabs.vue';
 
 const NAV_CLASS = 'gl-scrollable-tabs-nav';
@@ -16,6 +17,24 @@ export default {
     GlResizeObserverDirective,
   },
   inheritAttrs: false,
+  props: {
+    /**
+     * The aria-label that will be rendered inside for the scroll to left button.
+     */
+    scrollLeftLabel: {
+      type: String,
+      required: false,
+      default: translate('GlTabs.GlScrollableTabs.scrollLeftLabel', 'Scroll left'),
+    },
+    /**
+     * The aria-label that will be rendered inside for the scroll to right button.
+     */
+    scrollRightLabel: {
+      type: String,
+      required: false,
+      default: translate('GlTabs.GlScrollableTabs.scrollRightLabel', 'Scroll right'),
+    },
+  },
   data() {
     return {
       width: 0,
@@ -112,29 +131,27 @@ export default {
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>
-    <template #tabs-start>
-      <li v-show="displayScrollLeft" class="gl-tabs-fade gl-tabs-fade-left">
+    <template #toolbar-start>
+      <div v-show="displayScrollLeft" class="gl-tabs-fade gl-tabs-fade-left">
         <button
           class="gl-tabs-fade-icon-button"
-          aria-label="Scroll left"
-          tabindex="-1"
+          :aria-label="scrollLeftLabel"
           @click="scrollTabsLeft"
         >
           <gl-icon :size="16" name="chevron-lg-left" />
         </button>
-      </li>
+      </div>
     </template>
-    <template #tabs-end>
-      <li v-show="displayScrollRight" class="gl-tabs-fade gl-tabs-fade-right">
+    <template #toolbar-end>
+      <div v-show="displayScrollRight" class="gl-tabs-fade gl-tabs-fade-right">
         <button
           class="gl-tabs-fade-icon-button"
-          aria-label="Scroll right"
-          tabindex="-1"
+          :aria-label="scrollRightLabel"
           @click="scrollTabsRight"
         >
           <gl-icon :size="16" name="chevron-lg-right" />
         </button>
-      </li>
+      </div>
     </template>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/tabs.md

@@ -41,7 +41,8 @@ tab, when active, will reveal it’s own unique content.
 
 ## Adding Action Buttons to the Tabs
 
-Tabs start and end slot can be populated via props: `action-primary`, `action-secondary` and
+Action buttons are rendered in separate toolbar slots (`#toolbar-start` & `#toolbar-end`) and can
+be populated via props: `action-primary`, `action-secondary` and
 `action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will
 behave and look. The props receive an object as such:
 
@@ -70,7 +71,10 @@ component. This is a separate Vue component because of some limitations:
 exceptions).
 
 ~~~html
-<gl-scrollable-tabs>
+<gl-scrollable-tabs
+  scroll-left-label="Custom scroll left text"
+  scroll-right-label="Custom scroll right text"
+>
   <gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title"> {{ tab.content }} </gl-tab>
 </gl-scrollable-tabs>
 ~~~

package/src/components/base/tabs/tabs/tabs.scss

@@ -1,5 +1,9 @@
+.gl-tabs-wrapper {
+  @apply gl-relative gl-flex gl-flex-wrap gl-border-b;
+}
+
 .gl-tabs-nav {
-  @apply gl-border-b;
+  @apply gl-grow;
 }
 
 .gl-tab-nav-item {
@@ -107,13 +111,14 @@
   @apply gl-w-full;
   @apply gl-flex;
   @apply gl-flex-col;
+  @apply gl-grow-0;
   @apply gl-mt-3;
   @apply md:gl-hidden;
 }
 
 .gl-actions-tabs-end {
   @apply gl-hidden;
-  @apply gl-grow;
+  @apply gl-grow-0;
   @apply gl-justify-end;
   @apply gl-items-center;
   @apply gl-flex-row;
@@ -135,19 +140,19 @@
 }
 
 .gl-tabs-fade {
+  @apply gl-absolute gl-top-0 gl-bottom-0 gl-z-2;
   @apply gl-w-8;
-  bottom: 0;
-  position: sticky;
   @apply gl-p-2;
+  @apply gl-flex;
 }
 
 .gl-tabs-fade-left {
-  left: 0;
+  @apply gl-left-0;
   @include gl-bg-gradient-blur(left, var(--gl-background-color-default));
 }
 
 .gl-tabs-fade-right {
-  right: 0;
+  @apply gl-justify-end gl-right-0;
   @include gl-bg-gradient-blur(right, var(--gl-background-color-default));
 }
 

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

@@ -210,6 +210,7 @@ export default {
     :no-fade="true"
     active-nav-item-class="gl-tab-nav-item-active"
     :content-class="[contentClass, 'gl-tab-content']"
+    nav-wrapper-class="gl-tabs-wrapper"
     :nav-class="[navClass, 'gl-tabs-nav']"
     :justified="justified"
     :value="activeTabIndex"
@@ -222,8 +223,8 @@ export default {
       <slot :name="slot"></slot>
     </template>
 
-    <template v-if="hasActions" #tabs-start>
-      <div data-testid="actions-tabs-start" class="gl-actions-tabs-start">
+    <template v-if="hasActions" #toolbar-start>
+      <div role="toolbar" data-testid="actions-tabs-start" class="gl-actions-tabs-start">
         <gl-button
           v-if="actionPrimary"
           data-testid="action-primary"
@@ -250,8 +251,8 @@ export default {
         </gl-button>
       </div>
     </template>
-    <template v-if="hasActions" #tabs-end>
-      <div data-testid="actions-tabs-end" class="gl-actions-tabs-end">
+    <template v-if="hasActions" #toolbar-end>
+      <div role="toolbar" data-testid="actions-tabs-end" class="gl-actions-tabs-end">
         <gl-button
           v-if="actionPrimary"
           data-testid="action-primary"