@gitlab/ui 134.5.0 → 134.6.0

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

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

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/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',