@gitlab/ui 67.4.0 → 67.5.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [67.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.4.0...v67.5.0) (2023-11-02)
+
+
+### Features
+
+* **css:** Add focus variant for gl-z-index-1 ([8c08f01](https://gitlab.com/gitlab-org/gitlab-ui/commit/8c08f01a7877dd2836fb1eb024a9bfc8ad37cc44))
+* **GlSorting:** Add opt-in for new dropdown design ([b4eb476](https://gitlab.com/gitlab-org/gitlab-ui/commit/b4eb476976ca488b89641404acd19c2029a5d27d))
+* **GlSorting:** Make strings translatable ([2964d55](https://gitlab.com/gitlab-org/gitlab-ui/commit/2964d55864b17022d62c294ebf6c7babab611407))
+
 # [67.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.3.3...v67.4.0) (2023-11-02)
 
 

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

@@ -1,7 +1,10 @@
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
+import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox';
+import { isOption } from '../new_dropdowns/listbox/utils';
 import GlDropdown from '../dropdown/dropdown';
+import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -9,6 +12,7 @@ var script = {
   components: {
     GlButton,
     GlButtonGroup,
+    GlCollapsibleListbox,
     GlDropdown
   },
   directives: {
@@ -23,6 +27,24 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * Sort options to display in the dropdown
+     */
+    sortOptions: {
+      type: Array,
+      required: false,
+      default: null,
+      validator: sortOptions => sortOptions.every(isOption)
+    },
+    /**
+     * The value of the item currently selected in the dropdown.
+     * Only to be used with the `sortOptions` prop.
+     */
+    sortBy: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
     /**
      * Determines the current sort order icon displayed.
      */
@@ -32,12 +54,13 @@ var script = {
       default: false
     },
     /**
-     * The text of the tool tip for the sort direction toggle button.
+     * The text for the tooltip and aria-label of the sort direction toggle
+     * button instead of the defaults for ascending/descending.
      */
     sortDirectionToolTip: {
       type: String,
       required: false,
-      default: 'Sort direction'
+      default: null
     },
     /**
      * Additional class(es) to apply to the root element of the GlDropdown.
@@ -68,8 +91,15 @@ var script = {
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
-    sortDirectionAriaLabel() {
-      return this.isAscending ? 'Sorting Direction: Ascending' : 'Sorting Direction: Descending';
+    sortDirectionText() {
+      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      return this.isAscending ? translate('GlSorting.sortAscending', 'Sort direction: ascending') : translate('GlSorting.sortDescending', 'Sort direction: descending');
+    },
+    useListbox() {
+      return Boolean(this.sortOptions);
+    },
+    listboxToggleClass() {
+      return [this.dropdownToggleClass, 'gl-rounded-top-right-none!', 'gl-rounded-bottom-right-none!', 'gl-focus-z-index-1'];
     }
   },
   methods: {
@@ -85,6 +115,18 @@ var script = {
        * @property {boolean} isAscending
        */
       this.$emit('sortDirectionChange', newDirection);
+    },
+    onSortByChanged(event) {
+      /**
+       * Emitted when the sort field is changed.
+       *
+       * The event's payload is the value of the selected sort field.
+       *
+       * Only emitted when using the `sortOptions` prop.
+       *
+       * @property {string|number} value
+       */
+      this.$emit('sortByChange', event);
     }
   }
 };
@@ -93,7 +135,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-dropdown',_vm._b({class:_vm.dropdownClass,attrs:{"text":_vm.text,"category":"secondary","toggle-class":_vm.dropdownToggleClass,"right":""}},'gl-dropdown',_vm.$props,false),[_vm._t("default")],2),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionToolTip,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionAriaLabel},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"},[(_vm.useListbox)?_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.listboxToggleClass,"placement":"right"},on:{"select":_vm.onSortByChanged}}):_c('gl-dropdown',_vm._b({class:_vm.dropdownClass,attrs:{"text":_vm.text,"category":"secondary","toggle-class":_vm.dropdownToggleClass,"right":""}},'gl-dropdown',_vm.$props,false),[_vm._t("default")],2),_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_staticRenderFns__ = [];
 
   /* style */

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

@@ -5,6 +5,9 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /**
  * Sorting Item
  *
+ * NOTE: This component is deprecated. Instead, use the `sortOptions` prop of
+ * `GlSorting`.
+ *
  * This is written as a functional component because it is a simple wrapper over
  * the GlDropdownItem component and does not use internal state. Functional
  * components are cheaper to render and often used as wrappers like this. We're

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 Nov 2023 13:13:04 GMT
+ * Generated on Thu, 02 Nov 2023 13:48:18 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 Nov 2023 13:13:04 GMT
+ * Generated on Thu, 02 Nov 2023 13:48:18 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 Nov 2023 13:13:04 GMT
+ * Generated on Thu, 02 Nov 2023 13:48:18 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 02 Nov 2023 13:13:04 GMT
+ * Generated on Thu, 02 Nov 2023 13:48:18 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 02 Nov 2023 13:13:04 GMT
+// Generated on Thu, 02 Nov 2023 13:48:18 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 02 Nov 2023 13:13:04 GMT
+// Generated on Thu, 02 Nov 2023 13:48:18 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;