@gitlab/ui 137.0.3 → 137.1.1

package/package.json

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

package/src/components/base/form/form_password_input/form_password_input.vue

@@ -61,6 +61,16 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * CSS class(es) applied to the inner input element, not the wrapper.
+     * Use it for hooks or styles that must target the input itself, since a
+     * `class` passed to this component lands on the wrapper under Vue 2.
+     */
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -98,6 +108,7 @@ export default {
     <gl-form-input
       v-bind="$attrs"
       class="gl-form-password-input-field"
+      :class="inputClass"
       :value="value"
       :type="type"
       :disabled="disabled"

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

@@ -29,7 +29,7 @@
 }
 
 .gl-link-external::after {
-  content: " ↗";
+  content: " ↗" / attr(data-alt);
   font-size: 1em;
 }
 

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

@@ -1,6 +1,7 @@
 <script>
 import { isFunction, isString, isObject, toString, isBoolean, concat } from 'lodash-es';
 import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
+import { translate } from '../../../utils/i18n';
 import { stopEvent } from '../../../utils/utils';
 import { buildQueryString } from '../../../utils/url_utils';
 import { isVue3, safeVueInstance } from '../../../utils/vue_utils';
@@ -161,6 +162,9 @@ export default {
     isVue3RouterLink() {
       return this.tag === VUE_ROUTER_LINK_TAG && isVue3(this);
     },
+    externalLinkLabel() {
+      return translate('GlLink.externalLink', '(external link)');
+    },
     shouldShowExternalIcon() {
       const allowedVariants = [linkVariantInline, linkVariantMeta, null]; // null represents default/UI variant
       return (
@@ -311,6 +315,7 @@ export default {
       :class="[computedClass, { [activeClass]: isActive, [exactActiveClass]: isExactActive }]"
       :href="routerLinkHref"
       v-bind="$attrs"
+      :data-alt="externalLinkLabel"
       v-on="computedListeners"
       @click="onClick($event, navigate)"
     >
@@ -323,6 +328,7 @@ export default {
     v-safe-link:[safeLinkConfig]
     v-bind="computedProps"
     :class="computedClass"
+    :data-alt="externalLinkLabel"
     v-on="computedListeners"
     @click.native="onClick"
   >
@@ -334,6 +340,7 @@ export default {
     v-safe-link:[safeLinkConfig]
     v-bind="computedProps"
     :class="computedClass"
+    :data-alt="externalLinkLabel"
     v-on="computedListeners"
     @click="onClick"
   >

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

@@ -102,6 +102,7 @@ export default {
   data() {
     return {
       sortingListboxId: uniqueId('sorting-listbox-'),
+      toggleId: uniqueId('sorting-toggle-'),
     };
   },
   computed: {
@@ -181,7 +182,8 @@ export default {
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"
-      :toggle-aria-labelled-by="sortingListboxId"
+      :toggle-id="toggleId"
+      :toggle-aria-labelled-by="`${sortingListboxId} ${toggleId}`"
       @select="onSortByChanged"
     />
     <span :id="sortingListboxId" class="gl-sr-only">{{ sortingListboxLabel }}</span>

package/translations.js

@@ -27,6 +27,7 @@ export default {
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',
   'GlLabel.removeButtonAriaLabel': 'Remove label - %{label}',
+  'GlLink.externalLink': '(external link)',
   'GlModal.closeButtonTitle': 'Close',
   'GlMultiStepFormTemplate.stepX': 'Step %{currentStep}',
   'GlMultiStepFormTemplate.stepXofY': 'Step %{currentStep} of %{stepsTotal}',