@gitlab/ui 114.3.0 → 114.7.1

package/dist/utils/is_slot_empty.js

@@ -28,8 +28,6 @@ function isVnodeEmpty(vnode) {
 function isSlotEmpty(vueInstance, slot, slotArgs) {
   var _vueInstance$$scopedS, _vueInstance$$scopedS2;
   const slotContent = (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
-
-  // eslint-disable-next-line unicorn/no-array-callback-reference
   return isVnodeEmpty(slotContent);
 }
 

package/dist/utils/number_utils.js

@@ -1,9 +1,9 @@
 /**
  * Adds two numbers together
- * @param {Number} a
- * @param {Number} b
+ * @param {Number|String} a
+ * @param {Number|String} b
  */
-const addition = (a, b) => a + b;
+const addition = (a, b) => Number(a) + Number(b);
 
 /**
  * Returns the sum of all arguments

package/dist/utils/use_mock_intersection_observer.js

@@ -24,8 +24,6 @@ class MockObserver {
     this.$_observers = [];
   }
   takeRecords() {}
-
-  // eslint-disable-next-line camelcase
   $_triggerObserve(nodeParam) {
     let {
       entry = {},
@@ -41,8 +39,6 @@ class MockObserver {
       }
     });
   }
-
-  // eslint-disable-next-line camelcase
   $_hasObserver(node) {
     let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return this.$_observers.some(_ref => {

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js

@@ -66,7 +66,7 @@ const tableRendererMixin = extend({
       const {
         isResponsive
       } = this;
-      return [this.isStickyHeader ? 'b-table-sticky-header' : '', isResponsive === true ? 'table-responsive' : isResponsive ? `table-responsive-${this.responsive}` : ''].filter(identity);
+      return [this.isStickyHeader ? 'b-table-sticky-header' : '', isResponsive === true ? 'table-responsive' : isResponsive ? `table-responsive table-responsive-${this.responsive}` : ''].filter(identity);
     },
     wrapperStyles() {
       const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "114.3.0",
+  "version": "114.7.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -66,7 +66,7 @@
     "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}/iframe.html",
     "prettier": "prettier --check '**/*.{js,mjs,ts,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,mjs,ts,vue}'",
-    "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
+    "eslint": "eslint --max-warnings 0 .",
     "eslint:fix": "yarn eslint --fix",
     "stylelint": "stylelint 'src/**/*.scss'",
     "stylelint:fix": "yarn stylelint --fix",
@@ -102,7 +102,8 @@
     "jackspeak": "2.1.1",
     "postcss": "8.5.3",
     "json5": "2.2.3",
-    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2"
+    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2",
+    "eslint-plugin-import": "2.31.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -111,6 +112,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.0.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.28.0",
     "@gitlab/eslint-plugin": "20.7.1",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
@@ -154,10 +157,10 @@
     "emoji-regex": "^10.0.0",
     "entities": "^4.5.0",
     "esbuild": "^0.18.0",
-    "eslint": "8.57.1",
-    "eslint-formatter-gitlab": "^5.1.0",
+    "eslint": "9.28.0",
+    "eslint-formatter-gitlab": "^6.0.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.6.0",
+    "eslint-plugin-cypress": "5.0.1",
     "eslint-plugin-storybook": "0.12.0",
     "fuse.js": "^7.0.0",
     "gitlab-api-async-iterator": "^1.3.1",

package/src/components/base/button/button.md

@@ -110,7 +110,7 @@ sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
   href="data:text/plain;charset=utf-8,GitLab%20is%20awesome">Download</gl-button>
 ```
 
-[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default
+[SafeLinkDirective docs]: https://design.gitlab.com/storybook?path=/docs/directives-safe-link-directive--default
 [Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
 
 ## vue-bootstrap component

package/src/components/base/drawer/drawer.scss

@@ -51,7 +51,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
   .gl-drawer-body > * {
     @apply gl-border-b;
     @apply gl-mx-5;
-  
+
     &:last-child {
       @apply gl-border-none;
     }
@@ -112,6 +112,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 
 .gl-drawer-body {
   @apply gl-grow;
+  min-height: 0;
   // prevent safari bug where box shadow is visible
   // above the drawer when hovering interactive elements
   // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558

package/src/components/base/form/form_character_count/form_character_count.md

@@ -1,7 +1,7 @@
 ## Usage
 
 `GlFormCharacterCount` can be used to add a character count to an input.
-If you are using `GlFormTextarea` on its own see [with character count example](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-form-form-textarea--with-character-count).
+If you are using `GlFormTextarea` on its own see [with character count example](https://design.gitlab.com/storybook?path=/story/base-form-form-textarea--with-character-count).
 If you are wrapping your input, such as in a markdown component, and need the character
 count separate from the input, use `GlFormCharacterCount`.
 

package/src/components/base/form/form_combobox/form_combobox.md

@@ -46,7 +46,7 @@ The algorithm to match tokens with the input is very naive. If you need to use t
 very large list of matches, you may want to update the implementation or use one of the search
 inputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].
 
-[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default
-[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default
-[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default
-[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default
+[`GlSearchBoxByType`]: https://design.gitlab.com/storybook?path=/story/base-search-box-by-type--default
+[`GlSearchBoxByClick`]: https://design.gitlab.com/storybook?path=/story/base-search-box-by-click--default
+[`GlTokenSelector`]: https://design.gitlab.com/storybook?path=/story/base-token-selector--default
+[`GlFilteredSearch`]: https://design.gitlab.com/storybook?path=/story/base-filtered-search--default

package/src/components/base/link/link.md

@@ -25,6 +25,39 @@ and also Vue Router and Nuxt links.
 <gl-link href="#foo">Link</gl-link>
 ```
 
+## External link indicator
+
+The `show-external-icon` prop displays a "↗" character after the link text to indicate external links.
+This feature is available for **inline**, **UI (default)**, and **meta** variants only.
+
+```html
+<!-- External link with indicator -->
+<gl-link href="https://kubernetes.io/docs" target="_blank" show-external-icon>
+  Kubernetes documentation
+</gl-link>
+<!-- Renders as: Kubernetes documentation ↗ -->
+
+<!-- Different variants with external indicator -->
+<gl-link variant="inline" href="https://prometheus.io" target="_blank" show-external-icon>
+  Learn more about Prometheus monitoring
+</gl-link>
+
+<gl-link variant="meta" href="https://docker.com" target="_blank" show-external-icon>
+  Docker Hub
+</gl-link>
+```
+
+**Requirements for the external icon to appear:**
+
+- `show-external-icon` prop must be `true`.
+- `href` prop must be provided.
+- `target="_blank"` must be set.
+- Destination domain must be [determined as external](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/b5e4b0b4241455ed0fa45e0f6f5b83a3b76755ff/packages/gitlab-ui/src/directives/safe_link/safe_link.js#L12).
+- Link variant must be `inline`, `meta`, or default (UI).
+
+**Note:** The external icon is not available for `mention` or `unstyled` variants as these have
+specific design purposes that don't align with external link indication.
+
 ## Link type
 
 By specifying a value in the `href` prop, a standard link (`<a>`) element will be rendered. To
@@ -150,5 +183,5 @@ sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
 </gl-link>
 ```
 
-[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default
+[SafeLinkDirective docs]: https://design.gitlab.com/storybook?path=/docs/directives-safe-link-directive--default
 [Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

package/src/components/base/link/link.scss

@@ -28,7 +28,7 @@
   }
 }
 
-.gl-link-inline-external::after {
+.gl-link-external::after {
   content: ' ↗';
   font-size: 1em;
 }

package/src/components/base/link/link.vue

@@ -15,6 +15,7 @@ import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/uti
 import {
   linkVariantOptions,
   linkVariantInline,
+  linkVariantMeta,
   linkVariantUnstyled,
   isVue3,
 } from '../../../utils/constants';
@@ -130,7 +131,7 @@ export default {
       default: null,
     },
     /**
-     * If inline variant, controls ↗ character visibility
+     * Controls ↗ character visibility for external links
      */
     showExternalIcon: {
       type: Boolean,
@@ -169,10 +170,11 @@ export default {
     isVue3RouterLink() {
       return this.tag === VUE_ROUTER_LINK_TAG && isVue3;
     },
-    isInlineAndHasExternalIcon() {
+    shouldShowExternalIcon() {
+      const allowedVariants = [linkVariantInline, linkVariantMeta, null]; // null represents default/UI variant
       return (
         this.showExternalIcon &&
-        this.variant === linkVariantInline &&
+        allowedVariants.includes(this.variant) &&
         this.href &&
         isExternalURL(this.target, this.href)
       );
@@ -247,7 +249,7 @@ export default {
         {
           disabled: this.disabled,
           active: this.active,
-          'gl-link-inline-external': this.isInlineAndHasExternalIcon,
+          'gl-link-external': this.shouldShowExternalIcon,
         },
       ];
     },

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

@@ -1,4 +1,5 @@
 <script>
+import uniqueId from 'lodash/uniqueId';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
@@ -94,7 +95,15 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      sortingListboxId: uniqueId('sorting-listbox-'),
+    };
+  },
   computed: {
+    sortingListboxLabel() {
+      return translate('GlSorting.sortByLabel', 'Sort by:');
+    },
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
@@ -146,8 +155,10 @@ export default {
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"
+      :toggle-aria-labelled-by="sortingListboxId"
       @select="onSortByChanged"
     />
+    <span :id="sortingListboxId" class="gl-sr-only">{{ sortingListboxLabel }}</span>
     <gl-button
       v-gl-tooltip
       :title="sortDirectionText"

package/src/components/base/table/constants.js

@@ -45,4 +45,4 @@ export const tableFullProps = [
 ];
 
 export const glTableLiteWarning =
-  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';
+  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://design.gitlab.com/storybook?path=/docs/base-table-table-lite--default';

package/src/components/base/toast/toast.js

@@ -79,7 +79,7 @@ function showToast(message, options = {}) {
  * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
  * Once registered, the toast will be globally available throughout your app.
  *
- * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
+ * See https://design.gitlab.com/storybook for detailed documentation.
  */
 export default {
   install(Vue) {

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

@@ -92,7 +92,6 @@ export default {
   },
   computed: {
     shouldRenderDescription() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
     },
     shouldRenderHelp() {
@@ -164,7 +163,7 @@ export default {
       class="gl-description-label gl-mb-3"
       data-testid="toggle-description"
     >
-      <!-- @slot A description text to be shown below the label. -->
+      <!-- @slot A description text to be shown below the label. Unavailable when the label is positioned on the left. -->
       <slot name="description">{{ description }}</slot>
     </span>
     <input v-if="name" :name="name" :value="value" type="hidden" />
@@ -189,7 +188,7 @@ export default {
       </span>
     </button>
     <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
-      <!-- @slot A help text to be shown below the toggle. -->
+      <!-- @slot A help text to be shown below the toggle. Unavailable when the label is positioned on the left. -->
       <slot name="help">{{ help }}</slot>
     </span>
   </div>

package/src/components/charts/heatmap/heatmap.md

@@ -2,6 +2,6 @@
 
 **Note** This component uses `<gl-legend>`, which should allow a user to click on any data point(s)
 in the legend and make the corresponding data point(s) on the chart rendered disappear.
-_See [area chart](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)
+_See [area chart](https://design.gitlab.com/storybook?path=/story/charts-area-chart--default)
 for an example_ For this particular chart, there is a [known issue](https://gitlab.com/gitlab-org/gitlab-ui/issues/352)
 with the functionality of the legend, where clicking on it does nothing.

package/src/config.js

@@ -29,7 +29,7 @@ try {
   if (glTooltipDelay) {
     tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
   }
-} catch (e) {
+} catch {
   // localStorage doesn't exist (or the value is not properly formatted)
 }
 

package/src/directives/safe_link/mock_data.js

@@ -14,7 +14,7 @@ export const javascriptUrls = [
   'javascript:alert("XSS")',
   'jav\tascript:alert("XSS");',
 ];
-/* eslint-disable no-script-url */
+/* eslint-enable no-script-url */
 
 export const encodedJavaScriptUrls = [
   '&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041',

package/src/directives/safe_link/safe_link.js

@@ -29,7 +29,7 @@ const isSafeURL = (url) => {
   try {
     const parsedURL = new URL(url, getBaseURL());
     return ['http:', 'https:', 'mailto:', 'ftp:'].includes(parsedURL.protocol);
-  } catch (e) {
+  } catch {
     return false;
   }
 };

package/src/utils/is_slot_empty.js

@@ -30,6 +30,5 @@ export function isVnodeEmpty(vnode) {
 export function isSlotEmpty(vueInstance, slot, slotArgs) {
   const slotContent = vueInstance.$scopedSlots[slot]?.(slotArgs);
 
-  // eslint-disable-next-line unicorn/no-array-callback-reference
   return isVnodeEmpty(slotContent);
 }

package/src/utils/number_utils.js

@@ -1,9 +1,9 @@
 /**
  * Adds two numbers together
- * @param {Number} a
- * @param {Number} b
+ * @param {Number|String} a
+ * @param {Number|String} b
  */
-export const addition = (a, b) => a + b;
+export const addition = (a, b) => Number(a) + Number(b);
 
 /**
  * Returns the sum of all arguments

package/src/utils/use_mock_intersection_observer.js

@@ -1,5 +1,5 @@
 /* global jest, beforeEach, afterEach */
-/* eslint-disable class-methods-use-this, max-classes-per-file, camelcase */
+/* eslint-disable class-methods-use-this, max-classes-per-file */
 import isMatch from 'lodash/isMatch';
 
 /**
@@ -27,7 +27,6 @@ class MockObserver {
 
   takeRecords() {}
 
-  // eslint-disable-next-line camelcase
   $_triggerObserve(nodeParam, { entry = {}, options = {} } = {}) {
     const nodes = this.$_getNodesFromParam(nodeParam);
 
@@ -38,7 +37,6 @@ class MockObserver {
     });
   }
 
-  // eslint-disable-next-line camelcase
   $_hasObserver(node, options = {}) {
     return this.$_observers.some(
       ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions)

package/src/vendor/bootstrap-vue/src/components/table/_table.scss

@@ -93,8 +93,7 @@
 
 @if $bv-enable-table-sticky {
   .b-table-sticky-header,
-  .table-responsive,
-  [class*="table-responsive-"] {
+  .table-responsive {
     // Move the table bottom margin to the wrapper
     margin-bottom: $spacer;
 
@@ -137,8 +136,7 @@
     // Sticky columns only work when table has sticky
     // headers and/or is responsive
     .b-table-sticky-header,
-    .table-responsive,
-    [class*="table-responsive-"] {
+    .table-responsive {
       > .table.b-table {
         > thead,
         > tbody,

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js

@@ -70,7 +70,7 @@ export const tableRendererMixin = extend({
         isResponsive === true
           ? 'table-responsive'
           : isResponsive
-            ? `table-responsive-${this.responsive}`
+            ? `table-responsive table-responsive-${this.responsive}`
             : ''
       ].filter(identity)
     },

package/translations.js

@@ -31,6 +31,7 @@ export default {
   'GlProgressBar.ariaLabel': 'Progress bar',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
+  'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortAscending': 'Sort direction: ascending',
   'GlSorting.sortDescending': 'Sort direction: descending',
   'GlToken.closeButtonTitle': 'Remove',