@gitlab/ui 66.27.0 → 66.29.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.29.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.28.0...v66.29.0) (2023-10-12)
+
+
+### Features
+
+* **Listbox:** Add startOpened prop ([5bb3d17](https://gitlab.com/gitlab-org/gitlab-ui/commit/5bb3d173f78f5a53d67430bbaf15c8a5366983be))
+
+# [66.28.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.27.0...v66.28.0) (2023-10-12)
+
+
+### Features
+
+* **GlDiscreteScatterChart:** Add disableTooltip prop ([cd430c2](https://gitlab.com/gitlab-org/gitlab-ui/commit/cd430c2ca17749af3c2fca21164141d80d1edd3a))
+
 # [66.27.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.26.0...v66.27.0) (2023-10-11)
 
 

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

@@ -314,6 +314,14 @@ var script = {
       required: false,
       default: POSITION_ABSOLUTE,
       validator: strategy => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy)
+    },
+    /**
+     * Opens dropdown on render
+     */
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -496,6 +504,9 @@ var script = {
     } : {})
   },
   mounted() {
+    if (this.startOpened) {
+      this.open();
+    }
     this.observeScroll();
   },
   beforeDestroy() {

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -45,6 +45,11 @@ var script = {
       required: false,
       default: null
     },
+    disableTooltip: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    },
     /**
      * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
      */
@@ -168,7 +173,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(!_vm.disableTooltip && _vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 16:10:59 GMT
+ * Generated on Thu, 12 Oct 2023 07:48:44 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 16:10:59 GMT
+ * Generated on Thu, 12 Oct 2023 07:48:44 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 16:10:59 GMT
+ * Generated on Thu, 12 Oct 2023 07:48:45 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Oct 2023 16:10:59 GMT
+ * Generated on Thu, 12 Oct 2023 07:48:44 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 11 Oct 2023 16:10:59 GMT
+// Generated on Thu, 12 Oct 2023 07:48:45 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 11 Oct 2023 16:10:59 GMT
+// Generated on Thu, 12 Oct 2023 07:48:44 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -57,6 +57,7 @@ describe('GlCollapsibleListbox', () => {
   const findResetButton = () => wrapper.find("[data-testid='listbox-reset-button']");
   const findSelectAllButton = () => wrapper.find("[data-testid='listbox-select-all-button']");
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findDropdownMenu = () => wrapper.find("[data-testid='base-dropdown-menu']");
 
   it('passes custom offset to the base dropdown', () => {
     const dropdownOffset = { mainAxis: 10, crossAxis: 40 };
@@ -878,4 +879,18 @@ describe('GlCollapsibleListbox', () => {
       }
     );
   });
+
+  describe('startOpened', () => {
+    it('should open dropdown on render when startOpened is true', async () => {
+      buildWrapper({ items: mockOptions, startOpened: true });
+      await nextTick();
+      expect(findDropdownMenu().classes()).toContain('gl-display-block!');
+    });
+
+    it('should not open dropdown on render as default', async () => {
+      buildWrapper({ items: mockOptions });
+      await nextTick();
+      expect(findDropdownMenu().classes()).not.toContain('gl-display-block!');
+    });
+  });
 });

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -122,17 +122,12 @@ const makeBindings = (overrides = {}) =>
     ':show-select-all-button-label': 'showSelectAllButtonLabel',
     ':fluid-width': 'fluidWidth',
     ':positioning-strategy': 'positioningStrategy',
+    ':startOpened': 'startOpened',
     ...overrides,
   })
     .map(([key, value]) => `${key}="${value}"`)
     .join('\n');
 
-function openListbox(component) {
-  component.$nextTick(() => {
-    component.$refs.listbox.open();
-  });
-}
-
 const template = (content, { label = '', bindingOverrides = {} } = {}) => `
   <div>
     ${label}
@@ -157,11 +152,6 @@ export const Default = (args, { argTypes }) => ({
       selected: mockOptions[1].value,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   template: template('', {
     label: `<span class="gl-my-0" id="listbox-label">Select a department</span>`,
   }),
@@ -182,11 +172,6 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
       selected: [],
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   methods: {
     selectAllItems() {
       const allValues = mockOptions.map(({ value }) => value);
@@ -243,11 +228,6 @@ export const HeaderActions = (args, { argTypes }) => ({
       return mockOptions.map(({ value }) => value);
     },
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   methods: {
     selectAllItems() {
       this.selected = [...this.allValues];
@@ -286,11 +266,6 @@ export const CustomListItem = (args, { argTypes }) => ({
     GlIcon,
     GlAvatar,
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   computed: {
     customToggleText() {
       if (this.selected.length === 0) return 'Select assignee(s)';
@@ -344,11 +319,6 @@ export const CustomToggle = (args, { argTypes }) => ({
       selected: mockUsers[1].value,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   template: template(
     `
     <template #toggle>
@@ -389,11 +359,6 @@ const makeGroupedExample = (changes) => {
         selected: 'v1.0',
       };
     },
-    mounted() {
-      if (this.startOpened) {
-        openListbox(this);
-      }
-    },
     ...changes,
   });
 
@@ -473,11 +438,6 @@ export const GroupWithoutLabel = (args, { argTypes }) => ({
       selected: mockGroupsWithTextSrOnly[1].options[1].value,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   template: template(`
     <template #list-item="{ item }">
       {{ item.text }} <gl-badge v-if="item.value === 'main'" size="sm">default</gl-badge>
@@ -649,11 +609,6 @@ export const Searchable = (args, { argTypes }) => ({
       timeoutId: null,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   methods: {
     filterList(searchTerm) {
       if (this.timeoutId) {
@@ -722,11 +677,6 @@ export const SearchableGroups = (args, { argTypes }) => ({
       timeoutId: null,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   computed: {
     flattenedOptions() {
       return flattenedOptions(this.items);
@@ -813,11 +763,6 @@ export const InfiniteScroll = (
       infiniteScroll: true,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   methods: {
     onBottomReached() {
       this.infiniteScrollLoading = true;
@@ -871,11 +816,6 @@ export const WithLongContent = (args, { argTypes: { items, ...argTypes } }) => (
       items: longItems,
     };
   },
-  mounted() {
-    if (this.startOpened) {
-      openListbox(this);
-    }
-  },
   computed: {
     customToggleText() {
       return this.items.find(({ value }) => value === this.selected).text;

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

@@ -331,6 +331,14 @@ export default {
       default: POSITION_ABSOLUTE,
       validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
     },
+    /**
+     * Opens dropdown on render
+     */
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -518,6 +526,9 @@ export default {
       : {}),
   },
   mounted() {
+    if (this.startOpened) {
+      this.open();
+    }
     this.observeScroll();
   },
   beforeDestroy() {

package/src/components/charts/discrete_scatter/discrete_scatter.spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
 import DiscreteScatterChart from './discrete_scatter.vue';
 
 let mockChartInstance;
@@ -38,4 +39,20 @@ describe('column chart component', () => {
       findChart,
     });
   });
+
+  describe('disable-tooltip', () => {
+    it('is set to false by default', async () => {
+      createComponent();
+
+      await findChart().vm.$emit('created', mockChartInstance);
+
+      expect(wrapper.findComponent(ChartTooltip).exists()).toBe(true);
+    });
+
+    it('disables the tooltip', () => {
+      createComponent({ disableTooltip: true });
+
+      expect(wrapper.findComponent(ChartTooltip).exists()).toBe(false);
+    });
+  });
 });

package/src/components/charts/discrete_scatter/discrete_scatter.stories.js

@@ -11,6 +11,7 @@ const Template = (args, { argTypes }) => ({
     :x-axis-title="xAxisTitle"
     data-testid="discrete-scatter-chart"
     :height="height"
+    :disableTooltip="disableTooltip"
   />
 `,
 });

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -49,6 +49,11 @@ export default {
       required: false,
       default: null,
     },
+    disableTooltip: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
     /**
      * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
      */
@@ -187,7 +192,7 @@ export default {
       @created="onCreated"
     />
     <chart-tooltip
-      v-if="chart"
+      v-if="!disableTooltip && chart"
       :show="showTooltip"
       :chart="chart"
       :top="tooltipPosition.top"