@gitlab/ui 134.4.0 → 134.6.0

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -86,7 +86,7 @@ const mockGroups = [{
   name: 'This project',
   items: [{
     text: 'New issue',
-    href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/work_items/new',
     extraAttrs: {
       target: '_blank',
       rel: 'nofollow'

package/dist/components/base/sorting/sorting.js

@@ -27,7 +27,11 @@ var script = {
       default: ''
     },
     /**
-     * Sort options to display in the dropdown
+     * Sort options to display in the dropdown.
+     *
+     * Each option is `{ value, text }`. Set `directionToggleDisabled: true` on
+     * an option that has no ascending/descending meaning (e.g. "Most relevant")
+     * to disable the sort direction toggle whenever that option is selected.
      */
     sortOptions: {
       type: Array,
@@ -107,13 +111,30 @@ var script = {
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
+    selectedSortOption() {
+      return this.sortOptions.find(option => option.value === this.sortBy);
+    },
+    selectedSortText() {
+      var _this$selectedSortOpt, _this$selectedSortOpt2;
+      return (_this$selectedSortOpt = (_this$selectedSortOpt2 = this.selectedSortOption) === null || _this$selectedSortOpt2 === void 0 ? void 0 : _this$selectedSortOpt2.text) !== null && _this$selectedSortOpt !== void 0 ? _this$selectedSortOpt : '';
+    },
+    isDirectionToggleDisabled() {
+      var _this$selectedSortOpt3;
+      return Boolean((_this$selectedSortOpt3 = this.selectedSortOption) === null || _this$selectedSortOpt3 === void 0 ? void 0 : _this$selectedSortOpt3.directionToggleDisabled);
+    },
     sortDirectionText() {
       if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      if (this.isDirectionToggleDisabled) {
+        return this.selectedSortText ? translate('GlSorting.sortDirectionUnavailableFor', 'Sort direction unavailable for %{sortField}', {
+          sortField: this.selectedSortText
+        }) : translate('GlSorting.sortDirectionUnavailable', 'Sort direction unavailable');
+      }
       return this.isAscending ? translate('GlSorting.sortAscending', 'Sort direction: ascending') : translate('GlSorting.sortDescending', 'Sort direction: descending');
     }
   },
   methods: {
     toggleSortDirection() {
+      if (this.isDirectionToggleDisabled) return;
       const newDirection = !this.isAscending;
 
       /**
@@ -145,7 +166,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-aria-labelled-by":_vm.sortingListboxId},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-aria-labelled-by":_vm.sortingListboxId},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/single_stat/single_stat.js

@@ -2,6 +2,7 @@ import { badgeVariantOptions, badgeVariantToIconVariantMap } from '../../../util
 import GlBadge from '../../base/badge/badge';
 import GlIcon from '../../base/icon/icon';
 import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
+import GlTruncate from '../../utilities/truncate/truncate';
 import { formatNumberToLocale } from '../../../utils/number_utils';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -11,7 +12,8 @@ var script = {
   components: {
     GlIcon,
     GlBadge,
-    GlAnimatedNumber
+    GlAnimatedNumber,
+    GlTruncate
   },
   directives: {
     GlTooltip: GlTooltipDirective
@@ -84,6 +86,11 @@ var script = {
       type: Number,
       required: false,
       default: 0
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   data() {
@@ -129,7 +136,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-mb-2 gl-flex gl-items-center gl-text-heading"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-text-base gl-font-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-strong"},[_c('span',{staticClass:"gl-single-stat-number gl-leading-1",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all",class:{ '!gl-opacity-0': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{attrs:{"variant":_vm.iconVariant,"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge && _vm.metaTooltip)?_c('button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.viewport",modifiers:{"viewport":true}}],staticClass:"!gl-cursor-default gl-border-0 gl-bg-transparent gl-p-0 gl-leading-0",attrs:{"type":"button","title":_vm.metaTooltip,"data-testid":"meta-badge-button"}},[_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))])],1):(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-gap-2 gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-flex gl-items-center gl-text-heading"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-text-base gl-font-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-strong"},[_c('span',{staticClass:"gl-single-stat-number gl-leading-1",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all",class:{ '!gl-opacity-0': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{attrs:{"variant":_vm.iconVariant,"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge && _vm.metaTooltip)?_c('button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.viewport",modifiers:{"viewport":true}}],staticClass:"!gl-cursor-default gl-border-0 gl-bg-transparent gl-p-0 gl-leading-0",attrs:{"type":"button","title":_vm.metaTooltip,"data-testid":"meta-badge-button"}},[_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))])],1):(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1),_vm._v(" "),_vm._t("default"),_vm._v(" "),(_vm.description)?_c('gl-truncate',{staticClass:"gl-text-sm gl-text-subtle",attrs:{"data-testid":"description","text":_vm.description,"with-tooltip":""}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -106,7 +106,7 @@ export const mockGroups = [
     items: [
       {
         text: 'New issue',
-        href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/work_items/new',
         extraAttrs: {
           target: '_blank',
           rel: 'nofollow',

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

@@ -27,7 +27,11 @@ export default {
       default: '',
     },
     /**
-     * Sort options to display in the dropdown
+     * Sort options to display in the dropdown.
+     *
+     * Each option is `{ value, text }`. Set `directionToggleDisabled: true` on
+     * an option that has no ascending/descending meaning (e.g. "Most relevant")
+     * to disable the sort direction toggle whenever that option is selected.
      */
     sortOptions: {
       type: Array,
@@ -107,9 +111,28 @@ export default {
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
+    selectedSortOption() {
+      return this.sortOptions.find((option) => option.value === this.sortBy);
+    },
+    selectedSortText() {
+      return this.selectedSortOption?.text ?? '';
+    },
+    isDirectionToggleDisabled() {
+      return Boolean(this.selectedSortOption?.directionToggleDisabled);
+    },
     sortDirectionText() {
       if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
 
+      if (this.isDirectionToggleDisabled) {
+        return this.selectedSortText
+          ? translate(
+              'GlSorting.sortDirectionUnavailableFor',
+              'Sort direction unavailable for %{sortField}',
+              { sortField: this.selectedSortText },
+            )
+          : translate('GlSorting.sortDirectionUnavailable', 'Sort direction unavailable');
+      }
+
       return this.isAscending
         ? translate('GlSorting.sortAscending', 'Sort direction: ascending')
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
@@ -117,6 +140,8 @@ export default {
   },
   methods: {
     toggleSortDirection() {
+      if (this.isDirectionToggleDisabled) return;
+
       const newDirection = !this.isAscending;
 
       /**
@@ -164,6 +189,8 @@ export default {
       :title="sortDirectionText"
       :icon="localSortDirection"
       :aria-label="sortDirectionText"
+      :disabled="isDirectionToggleDisabled"
+      :accessible-disabled="isDirectionToggleDisabled"
       :class="['sorting-direction-button', sortDirectionToggleClass]"
       @click="toggleSortDirection"
     />

package/src/components/charts/single_stat/single_stat.vue

@@ -3,6 +3,7 @@ import { badgeVariantOptions, badgeVariantToIconVariantMap } from '../../../util
 import GlBadge from '../../base/badge/badge.vue';
 import GlIcon from '../../base/icon/icon.vue';
 import GlAnimatedNumber from '../../utilities/animated_number/animated_number.vue';
+import GlTruncate from '../../utilities/truncate/truncate.vue';
 import { formatNumberToLocale } from '../../../utils/number_utils';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 
@@ -12,6 +13,7 @@ export default {
     GlIcon,
     GlBadge,
     GlAnimatedNumber,
+    GlTruncate,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -85,6 +87,11 @@ export default {
       required: false,
       default: 0,
     },
+    description: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -128,8 +135,8 @@ export default {
 </script>
 
 <template>
-  <div class="gl-single-stat gl-flex gl-flex-col gl-p-2" v-bind="$attrs" v-on="$listeners">
-    <div class="gl-mb-2 gl-flex gl-items-center gl-text-heading">
+  <div class="gl-single-stat gl-flex gl-flex-col gl-gap-2 gl-p-2" v-bind="$attrs" v-on="$listeners">
+    <div class="gl-flex gl-items-center gl-text-heading">
       <gl-icon
         v-if="showTitleIcon"
         :name="titleIcon"
@@ -187,5 +194,14 @@ export default {
         >{{ metaText }}</gl-badge
       >
     </div>
+    <!-- @slot Supplementary content displayed below the value. -->
+    <slot></slot>
+    <gl-truncate
+      v-if="description"
+      data-testid="description"
+      class="gl-text-sm gl-text-subtle"
+      :text="description"
+      with-tooltip
+    />
   </div>
 </template>

package/translations.js

@@ -40,6 +40,8 @@ export default {
   'GlSorting.sortAscending': 'Sort direction: ascending',
   'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortDescending': 'Sort direction: descending',
+  'GlSorting.sortDirectionUnavailable': 'Sort direction unavailable',
+  'GlSorting.sortDirectionUnavailableFor': 'Sort direction unavailable for %{sortField}',
   'GlTabs.GlScrollableTabs.scrollLeftLabel': 'Scroll left',
   'GlTabs.GlScrollableTabs.scrollRightLabel': 'Scroll right',
   'GlToken.closeButtonTitle': 'Remove',