@gitlab/ui 114.6.0 → 114.7.1

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/package.json

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

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

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/toggle/toggle.vue

@@ -163,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" />
@@ -188,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/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