@gitlab/ui 108.3.1 → 108.4.1

package/dist/utils/constants.js

@@ -171,6 +171,12 @@ const animatedIconVariantOptions = {
   danger: 'gl-animated-icon-danger',
   success: 'gl-animated-icon-success'
 };
+const linkVariantOptions = {
+  inline: 'gl-link-inline',
+  meta: 'gl-link-meta',
+  mention: 'gl-link-mention',
+  mentionCurrent: 'gl-link-mention-current'
+};
 const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',
@@ -311,4 +317,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, linkVariantOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "108.3.1",
+  "version": "108.4.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -100,10 +100,10 @@
     "jackspeak": "2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.8",
+    "@babel/core": "^7.26.9",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.26.8",
+    "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "20.7.1",
@@ -155,7 +155,7 @@
     "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.11.2",
+    "eslint-plugin-storybook": "0.11.3",
     "fuse.js": "^7.0.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -74,14 +74,20 @@ export default {
     <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
     <div class="gl-avatar-labeled-labels !gl-text-left" :class="avatarRowLayoutClass">
       <div class="-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left">
-        <gl-link v-if="hasLabelLink" ref="labelLink" :href="labelLink" class="gl-avatar-link">
+        <gl-link
+          v-if="hasLabelLink"
+          ref="labelLink"
+          :href="labelLink"
+          class="gl-avatar-link"
+          variant="meta"
+        >
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>
         <!-- @slot Metadata to add to the avatar. Generally used for badges or user status emoji. -->
         <slot name="meta"></slot>
       </div>
-      <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link">
+      <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link" variant="meta">
         <span class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
       </gl-link>
       <span v-else class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>

package/src/components/base/avatar_link/avatar_link.vue

@@ -9,7 +9,7 @@ export default {
 };
 </script>
 <template>
-  <gl-link class="gl-avatar-link" v-bind="$attrs" v-on="$listeners">
+  <gl-link class="gl-avatar-link" v-bind="$attrs" variant="meta" v-on="$listeners">
     <slot></slot>
   </gl-link>
 </template>

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -201,6 +201,12 @@ export default {
       }
       this.resetItems();
     },
+    hideItemClass(item) {
+      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
+      // - Remove this hiding of empty breadcrumbs.
+      // - Tighten `items` validator to require non-empty `text`.
+      return !item.text ? 'gl-hidden' : '';
+    },
   },
 };
 </script>
@@ -229,6 +235,7 @@ export default {
         :to="item.to"
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
+        :class="hideItemClass(item)"
         ><gl-avatar
           v-if="item.avatarPath"
           :src="item.avatarPath"

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,4 +1,5 @@
 <script>
+import uniqueId from 'lodash/uniqueId';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';
@@ -33,6 +34,16 @@ export default {
       required: false,
       default: 'To',
     },
+    fromAriaLabel: {
+      type: String,
+      required: false,
+      default: 'From date',
+    },
+    toAriaLabel: {
+      type: String,
+      required: false,
+      default: 'To date',
+    },
     value: {
       type: Object,
       required: false,
@@ -208,6 +219,12 @@ export default {
     showIndicator() {
       return Boolean(this.$scopedSlots.default || this.tooltip);
     },
+    fromId() {
+      return uniqueId('date-from-field-');
+    },
+    toId() {
+      return uniqueId('date-to-field-');
+    },
   },
   watch: {
     value(val) {
@@ -274,10 +291,12 @@ export default {
 <template>
   <div class="gl-daterange-picker gl-flex gl-gap-5">
     <div :class="startContainerClasses" data-testid="daterange-picker-start-container">
-      <label :class="labelClass">{{ fromLabel }}</label>
+      <label :class="labelClass" :for="fromId">{{ fromLabel }}</label>
 
       <gl-datepicker
         v-model="startDate"
+        :input-id="fromId"
+        :input-label="fromAriaLabel"
         :min-date="defaultMinDate"
         :max-date="fromCalendarMaxDate"
         :start-range="defaultMinDate"
@@ -299,10 +318,12 @@ export default {
       </gl-datepicker>
     </div>
     <div :class="endContainerClasses" data-testid="daterange-picker-end-container">
-      <label :class="labelClass">{{ toLabel }}</label>
+      <label :class="labelClass" :for="toId">{{ toLabel }}</label>
       <gl-datepicker
         :key="numericStartTime"
         v-model="endDate"
+        :input-id="toId"
+        :input-label="toAriaLabel"
         :min-date="toCalendarMinDate"
         :max-date="toCalendarMaxDate"
         :start-range="toCalendarMinDate"

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

@@ -1,3 +1,23 @@
+## Variants
+
+- **Inline**: Link that appears within body text, like a paragraph or sentence. In order to
+  distinguish a linked reference from surrounding content, a link within body copy must be
+  underlined. Inline text links can be user-generated, for example, referencing an issue with
+  "#3126" in the markdown editor of a merge request description where the link's primary function
+  is linking to the referred issue. They can also be in text generated from a source file, for
+  example, a "learn more about pipelines" link in the paragraph of an empty state template.
+- **User interface (UI)**: Standalone link in the UI. User interface links are not user-generated.
+  For example, a link in the system notes that compares the changes in a new commit to a previous
+  one. The placement, color, and actionable text all provide link affordance. A link button has a
+  similar style, but is used for an action and not a link.
+- **Meta**: Standalone text or text within a short string of system-generated content may contain
+  multiple meta links. Meta links share a meaningful datapoint or reference, and are only links
+  secondarily. For example, the primary function of including "%15.8" in a string is to
+  communicate the milestone, though it can also link to more information about it. Meta links represent
+  a wide variety of content and should be styled specifically for the contexts in which they appear.
+- **Mention**: Indicates when a user is "@" mentioned in the content. The username links to the
+  user's profile. A mention link can be within body or meta content.
+
 ## Security
 
 This component implements a few security measures to make it as safe as possible by default.
@@ -15,7 +35,10 @@ sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
 <gl-link
   is-unsafe-link
   download="file.txt"
-  href="data:text/plain;charset=utf-8,GitLab%20is%20awesome">Download</gl-link>
+  href="data:text/plain;charset=utf-8,GitLab%20is%20awesome"
+>
+  Download
+</gl-link>
 ```
 
 [SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default

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

@@ -1,6 +1,14 @@
 .gl-link {
-  &,
+  text-underline-offset: 0.125em;
+
   &:hover {
+    @apply gl-cursor-pointer;
+  }
+
+  &,
+  &:hover,
+  &:active,
+  &:focus {
     @apply gl-text-link;
   }
 
@@ -11,3 +19,72 @@
     @include gl-focus($outline: true, $outline-offset: $outline-width);
   }
 }
+
+.gl-link-inline {
+  @apply gl-underline;
+
+  &:hover {
+    @apply gl-underline;
+  }
+}
+
+.gl-link-inline-external::after {
+  content: ' ↗';
+  font-size: 1em;
+}
+
+.gl-link-meta {
+  @apply gl-no-underline;
+
+  &:hover {
+    @apply gl-underline;
+  }
+
+  &,
+  &:hover,
+  &:focus,
+  &:focus:hover {
+    @apply gl-text-inherit;
+  }
+}
+
+.gl-link-mention,
+.gl-link-mention-current {
+  @apply gl-px-1;
+  @apply gl-rounded-base;
+  @apply gl-no-underline;
+
+  &:hover {
+    @apply gl-underline;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    @apply gl-no-underline;
+  }
+}
+
+.gl-link-mention {
+  background-color: var(--gl-link-mention-background-color-default);
+
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus:active {
+    color: var(--gl-link-mention-text-color-default);
+  }
+}
+
+.gl-link-mention-current {
+  background-color: var(--gl-link-mention-background-color-current);
+
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus:active {
+    color: var(--gl-link-mention-text-color-current);
+  }
+}

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

@@ -2,6 +2,8 @@
 <script>
 import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import { isExternalURL } from '../../../directives/safe_link/safe_link';
+import { linkVariantOptions } from '../../../utils/constants';
 
 export default {
   name: 'GlLink',
@@ -9,6 +11,42 @@ export default {
     BLink,
   },
   mixins: [SafeLinkMixin],
+  props: {
+    /**
+     * If inline variant, controls ↗ character visibility
+     */
+    showExternalIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Link variant
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: null,
+      validator: (value) => value && Object.hasOwn(linkVariantOptions, value),
+    },
+  },
+  computed: {
+    isInlineAndHasExternalIcon() {
+      return (
+        this.showExternalIcon &&
+        this.variant === 'inline' &&
+        this.$attrs.href &&
+        isExternalURL(this.target, this.$attrs.href)
+      );
+    },
+    linkClasses() {
+      return [
+        'gl-link',
+        linkVariantOptions[this.variant],
+        { 'gl-link-inline-external': this.isInlineAndHasExternalIcon },
+      ];
+    },
+  },
 };
 </script>
 <template>
@@ -16,7 +54,7 @@ export default {
     v-safe-link:[safeLinkConfig]
     v-bind="$attrs"
     :target="target"
-    class="gl-link"
+    :class="linkClasses"
     v-on="$listeners"
   >
     <!-- @slot The link to display. -->

package/src/directives/safe_link/safe_link.js

@@ -5,7 +5,7 @@ const getBaseURL = () => {
   return `${protocol}//${host}`;
 };
 
-const isExternalURL = (target, hostname) => {
+export const isExternalURL = (target, hostname) => {
   return target === '_blank' && hostname !== window.location.hostname;
 };
 

package/src/utils/constants.js

@@ -203,6 +203,13 @@ export const animatedIconVariantOptions = {
   success: 'gl-animated-icon-success',
 };
 
+export const linkVariantOptions = {
+  inline: 'gl-link-inline',
+  meta: 'gl-link-meta',
+  mention: 'gl-link-mention',
+  mentionCurrent: 'gl-link-mention-current',
+};
+
 export const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',