@gitlab/ui 87.6.1 → 87.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [87.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.6.1...v87.7.0) (2024-08-01)
+
+
+### Features
+
+* Add boolean flag for improvedHideHeuristics in Config ([1fa7037](https://gitlab.com/gitlab-org/gitlab-ui/commit/1fa703735f10a3cfa3539c3c7d5d7950a6c6257e))
+
 ## [87.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.6.0...v87.6.1) (2024-08-01)
 
 

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

@@ -1,6 +1,7 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlBaseDropdown, { BASE_DROPDOWN_CLASS } from '../base_dropdown/base_dropdown';
@@ -215,7 +216,9 @@ var script = {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      }
     }
   },
   data() {

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -2,6 +2,7 @@ import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import isNil from 'lodash/isNil';
 import { stopEvent } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, HOME, END, ARROW_UP, ARROW_DOWN } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlButton from '../../button/button';
@@ -336,7 +337,9 @@ var script = {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      }
     }
   },
   data() {

package/dist/config.js

@@ -35,6 +35,7 @@ try {
   // localStorage doesn't exist (or the value is not properly formatted)
 }
 const i18n = translationKeys;
+const glDropdownConfig = {};
 let configured = false;
 
 /**
@@ -43,11 +44,12 @@ let configured = false;
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
- * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ * @property {boolean} [useImprovedHideHeuristics] Temporary flag to enable improved hide heuristics for dropdowns.
  */
 const setConfigs = function () {
   let {
-    translations
+    translations,
+    useImprovedHideHeuristics
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
@@ -80,7 +82,24 @@ const setConfigs = function () {
     }
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the improved hide heuristics feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `useImprovedHideHeuristics` is set to a boolean value
+  // to indicate whether the improved hide heuristics should be used.
+
+  // Future Plan:
+  // Once the improved hide heuristics feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof useImprovedHideHeuristics === 'boolean') {
+    Object.assign(glDropdownConfig, {
+      useImprovedHideHeuristics
+    });
+  }
 };
 
 export default setConfigs;
-export { i18n };
+export { glDropdownConfig, i18n };

package/package.json

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

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -3,6 +3,7 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -235,7 +236,9 @@ export default {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false,
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      },
     },
   },
   data() {

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -4,6 +4,7 @@ import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import isNil from 'lodash/isNil';
 import { stopEvent } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -356,7 +357,9 @@ export default {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false,
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      },
     },
   },
   data() {

package/src/config.js

@@ -39,6 +39,8 @@ try {
 
 export const i18n = translationKeys;
 
+export const glDropdownConfig = {};
+
 let configured = false;
 
 /**
@@ -47,9 +49,9 @@ let configured = false;
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
- * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ * @property {boolean} [useImprovedHideHeuristics] Temporary flag to enable improved hide heuristics for dropdowns.
  */
-const setConfigs = ({ translations } = {}) => {
+const setConfigs = ({ translations, useImprovedHideHeuristics } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -87,6 +89,23 @@ const setConfigs = ({ translations } = {}) => {
 
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the improved hide heuristics feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `useImprovedHideHeuristics` is set to a boolean value
+  // to indicate whether the improved hide heuristics should be used.
+
+  // Future Plan:
+  // Once the improved hide heuristics feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof useImprovedHideHeuristics === 'boolean') {
+    Object.assign(glDropdownConfig, {
+      useImprovedHideHeuristics,
+    });
+  }
 };
 
 export default setConfigs;