@gitlab/ui 32.41.0 → 32.43.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [32.43.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.1...v32.43.2) (2021-12-07)
+
+
+### Bug Fixes
+
+* **UI text:** Removed "Please," added period, and updated examples ([eabcb67](https://gitlab.com/gitlab-org/gitlab-ui/commit/eabcb6712a54c4b9e8bd175c7df117523824f89f))
+
+## [32.43.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.0...v32.43.1) (2021-12-06)
+
+
+### Bug Fixes
+
+* **GlEmptyState:** update styles to match design specs ([c0812f5](https://gitlab.com/gitlab-org/gitlab-ui/commit/c0812f53664b5db03e643878d7894c9d448a736b))
+
+# [32.43.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.42.0...v32.43.0) (2021-12-06)
+
+
+### Features
+
+* **CSS:** Add `gl-md-max-w-70p` utility class ([502cd65](https://gitlab.com/gitlab-org/gitlab-ui/commit/502cd650d0b2124a3cdfb26ad7f9364f75292650))
+
+# [32.42.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.41.0...v32.42.0) (2021-12-03)
+
+
+### Features
+
+* Add gl-z-index-200 util class ([c53d23b](https://gitlab.com/gitlab-org/gitlab-ui/commit/c53d23b6e060434ed9055aea2b4f6f9c9e697a45))
+
 # [32.41.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.40.0...v32.41.0) (2021-11-23)
 
 

package/dist/components/base/form/form_group/examples/form_group/form_group.validation.example.js

@@ -13,12 +13,12 @@ var script = {
     },
 
     invalidFeedback() {
-      let feedbackText = 'Please enter something';
+      let feedbackText = 'This field is required.';
 
       if (this.name.length > 4) {
         feedbackText = '';
       } else if (this.name.length > 0) {
-        feedbackText = 'Enter at least 4 characters';
+        feedbackText = 'Enter at least 4 characters.';
       }
 
       return feedbackText;
@@ -31,7 +31,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-form-group',{attrs:{"label":"Name","description":"Please enter your name","invalid-feedback":_vm.invalidFeedback,"state":_vm.state,"label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1","state":_vm.state},model:{value:(_vm.name),callback:function ($$v) {_vm.name=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"name"}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"label":"Name","description":"Enter a first and last name.","invalid-feedback":_vm.invalidFeedback,"state":_vm.state,"label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1","state":_vm.state},model:{value:(_vm.name),callback:function ($$v) {_vm.name=(typeof $$v === 'string'? $$v.trim(): $$v);},expression:"name"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/token_selector/token_selector.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var token_selector = "# GlTokenSelector\n\n<!-- STORY -->\n\n## Usage\n\nChoose from a provided list of tokens or add a user defined token.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selectedTokens: [\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-token-selector\n      v-model=\"selectedTokens\"\n      :dropdown-items=\"[\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n        {\n          id: 2,\n          name: 'Ruby On Rails',\n        },\n        {\n          id: 3,\n          name: 'GraphQL',\n        },\n        {\n          id: 4,\n          name: 'Redis',\n        },\n      ]\"\n    />\n    {{ selectedTokens }}\n  </div>\n</template>\n```\n";
+var token_selector = "Choose from a provided list of tokens or add a user defined token.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selectedTokens: [\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-token-selector\n      v-model=\"selectedTokens\"\n      :dropdown-items=\"[\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n        {\n          id: 2,\n          name: 'Ruby On Rails',\n        },\n        {\n          id: 3,\n          name: 'GraphQL',\n        },\n        {\n          id: 4,\n          name: 'Redis',\n        },\n      ]\"\n    />\n    {{ selectedTokens }}\n  </div>\n</template>\n```\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8,109 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var token_selector_documentation = {
-  description,
-  examples,
-  propsInfo: {
-    dropdownItems: {
-      additionalInfo: 'Items to display in dropdown'
-    },
-    selectedTokens: {
-      additionalInfo: 'Tokens that are selected. This prop will automatically be added when using `v-model`'
-    },
-    allowUserDefinedTokens: {
-      additionalInfo: 'Should users be allowed to add tokens that are not in `dropdown-items`'
-    },
-    loading: {
-      additionalInfo: 'Dropdown items are loading, can be used when requesting new dropdown items'
-    },
-    hideDropdownWithNoItems: {
-      additionalInfo: 'Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`'
-    },
-    containerClass: {
-      additionalInfo: 'CSS classes to add to the main token selector container (`.gl-token-selector`)'
-    },
-    menuClass: {
-      additionalInfo: 'CSS classes to add to dropdown menu `ul` element'
-    },
-    textInputAttrs: {
-      additionalInfo: 'HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes'
-    },
-    state: {
-      additionalInfo: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state'
-    }
-  },
-  slots: [{
-    name: 'no-results-content',
-    description: 'Content to display when `dropdown-items` is empty and `allow-user-defined-tokens` is `false`',
-    default: 'No matches found',
-    scopedProps: ''
-  }, {
-    name: 'user-defined-token-content',
-    description: 'Content to display when adding a user defined token',
-    default: 'Add "{{ inputText }}"',
-    scopedProps: 'inputText (String)'
-  }, {
-    name: 'token-content',
-    description: 'Content to pass to the token component slot. Can be used to add an avatar to the token',
-    default: '{{ token.name }}',
-    scopedProps: 'token (Object)'
-  }, {
-    name: 'dropdown-item-content',
-    description: 'Dropdown item content',
-    default: '{{ dropdownItem.name }}',
-    scopedProps: 'dropdownItem (Object)'
-  }, {
-    name: 'dropdown-footer',
-    description: 'Content to add to the bottom of the dropdown. Can be used in conjunction with `gl-intersection-observer` to load more items as the user scrolls'
-  }, {
-    name: 'loading-content',
-    description: 'Content to display when `loading` prop is `true`',
-    default: 'Searching...',
-    scopedProps: ''
-  }],
-  events: [{
-    event: 'text-input',
-    args: [{
-      arg: 'inputText',
-      description: '(String)'
-    }],
-    description: 'Fired when user types in the token selector'
-  }, {
-    event: 'input',
-    args: [{
-      arg: 'selectedTokens',
-      description: '(Array)'
-    }],
-    description: 'Fired when a token is added or removed'
-  }, {
-    event: 'focus',
-    args: [{
-      arg: 'event',
-      description: '(FocusEvent)'
-    }],
-    description: 'Fired when the token selector is focused'
-  }, {
-    event: 'blur',
-    args: [{
-      arg: 'event',
-      description: '(FocusEvent)'
-    }],
-    description: 'Fired when the token selector is blurred'
-  }, {
-    event: 'token-add',
-    args: [{
-      arg: 'token',
-      description: '(Object)'
-    }],
-    description: 'Fired when a token is added'
-  }, {
-    event: 'token-remove',
-    args: [{
-      arg: 'token',
-      description: '(Object)'
-    }],
-    description: 'Fired when a token is removed'
-  }]
+  description
 };
 
 export default token_selector_documentation;

package/dist/components/base/token_selector/token_selector.js

@@ -16,6 +16,9 @@ var script = {
     event: 'input'
   },
   props: {
+    /**
+     * Items to display in dropdown
+     */
     dropdownItems: {
       type: Array,
       // All items need to have an `id` key
@@ -23,57 +26,100 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Should users be allowed to add tokens that are not in `dropdown-items`
+     */
     allowUserDefinedTokens: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Dropdown items are loading, can be used when requesting new dropdown items
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
+     */
     hideDropdownWithNoItems: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * CSS classes to add to the main token selector container (`.gl-token-selector`)
+     */
     containerClass: {
       type: String,
       required: false,
       default: ''
     },
+
+    /**
+     * CSS classes to add to dropdown menu `ul` element
+     */
     menuClass: {
       type: [String, Array, Object],
       required: false,
       default: ''
     },
+
+    /**
+     * The autocomplete attribute value for the underlying `input` element
+     */
     autocomplete: {
       type: String,
       required: false,
       default: 'off'
     },
+
+    /**
+     * The `aria-labelledby` attribute value for the underlying `input` element
+     */
     ariaLabelledby: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * The `placeholder` attribute value for the underlying `input` element
+     */
     placeholder: {
       type: String,
       required: false,
       default: null
     },
+
+    /**
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     */
     textInputAttrs: {
       type: Object,
       required: false,
       default: null
     },
+
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
     state: {
       type: Boolean,
       required: false,
       default: null
     },
-    // Used for custom `v-model`
+
+    /**
+     * Tokens that are selected. This prop will automatically be added when using `v-model`
+     */
     selectedTokens: {
       type: Array,
       // All tokens need to have an `id` key
@@ -138,6 +184,11 @@ var script = {
   watch: {
     inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
+        /**
+         * Fired when user types in the token selector
+         *
+         * @property {string} inputText
+         */
         this.$emit('text-input', newValue);
         this.resetFocusedDropdownItem();
 
@@ -163,6 +214,11 @@ var script = {
   },
   methods: {
     handleFocus(event) {
+      /**
+       * Fired when the token selector is focused
+       *
+       * @property {FocusEvent} event
+       */
       this.$emit('focus', event);
       this.openDropdown();
       this.inputFocused = true;
@@ -174,6 +230,11 @@ var script = {
     },
 
     handleBlur(event) {
+      /**
+       * Fired when the token selector is blurred
+       *
+       * @property {FocusEvent} event
+       */
       this.$emit('blur', event);
       this.inputFocused = false; // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Workaround is to:
@@ -243,14 +304,37 @@ var script = {
         id: _uniqueId('user-defined-token'),
         name: this.inputText
       };
+      /**
+       * Fired when a token is added or removed
+       *
+       * @property {array} selectedTokens
+       */
+
       this.$emit('input', [...this.selectedTokens, token]);
       this.inputText = '';
       this.closeDropdown();
+      /**
+       * Fired when a token is added
+       *
+       * @property {object} token
+       */
+
       this.$emit('token-add', token);
     },
 
     removeToken(token) {
+      /**
+       * Fired when user types in the token selector
+       *
+       * @property {string} inputText
+       */
       this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
+      /**
+       * Fired when a token is removed
+       *
+       * @property {object} token
+       */
+
       this.$emit('token-remove', token);
     },
 

package/dist/components/base/tooltip/tooltip.documentation.js

@@ -1,12 +1,8 @@
-import examples from './examples';
-
-var description = "## Usage\n\nUsing the tooltip component is recommended if you have HTML content.\nIt is also currently required if the tooltip content needs to change while it's visible\n(see [this upstream issue]). In all other cases, please use the directive.\n\n[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142\n\n## Using the component\n\n~~~html\n<gl-button ref=\"someButton\">\n  ...\n</gl-button>\n\n<gl-tooltip :target=\"() => $refs.someButton\">\n  some <em>tooltip<em/> text\n</gl-tooltip>\n~~~\n\n## Using the directive\n\nYou will need to import and register `GlTooltipDirective` before you can use it.\n\n~~~html\n<script>\nimport { GlTooltipDirective } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    GlTooltip: GlTooltipDirective,\n  },\n};\n</script>\n\n<element\n  v-gl-tooltip.${modifier}\n  title=\"some tooltip text\"\n>\n  ...\n</element>\n~~~\n\n## Directive attributes\n\n`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`].\n\n## Under the hood\n\nTooltip uses [`<b-tooltip>`] and [`v-b-tooltip`] internally.\n\n[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip\n\n[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip\n";
+var description = "Using the tooltip component is recommended if you have HTML content.\nIt is also currently required if the tooltip content needs to change while it's visible\n(see [this upstream issue][this upstream issue]). In all other cases, please use the directive.\n\n[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142\n\n## Using the component\n\n~~~html\n<gl-button ref=\"someButton\">\n  ...\n</gl-button>\n\n<gl-tooltip :target=\"() => $refs.someButton\">\n  some <em>tooltip<em/> text\n</gl-tooltip>\n~~~\n\n## Using the directive\n\nYou will need to import and register `GlTooltipDirective` before you can use it.\n\n~~~html\n<script>\nimport { GlTooltipDirective } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    GlTooltip: GlTooltipDirective,\n  },\n};\n</script>\n\n<element\n  v-gl-tooltip.${modifier}\n  title=\"some tooltip text\"\n>\n  ...\n</element>\n~~~\n\n## Directive attributes\n\n`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`][`v-b-tooltip`].\n\n## Under the hood\n\nTooltip uses [`<b-tooltip>`][`<b-tooltip>`] and [`v-b-tooltip`][`v-b-tooltip`] internally.\n\n[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip\n\n[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip\n";
 
 var tooltip_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  bootstrapComponent: 'b-tooltip'
+  description
 };
 
 export default tooltip_documentation;

package/dist/components/charts/area/area.js

@@ -329,7 +329,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',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.annotationsTooltipTitle))]),_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()]]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -166,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('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"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}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"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",[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",[_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})])],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/line/line.js

@@ -327,7 +327,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',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.annotationsTooltipTitle))]),_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/regions/empty_state/empty_state.js

@@ -110,7 +110,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('section',{staticClass:"row",class:{ 'empty-state text-center': !_vm.compact }},[_c('div',{class:{ 'col-3 d-none d-sm-block': _vm.compact, 'col-12': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'col-sm-9' : 'col-12'},[_c('div',{staticClass:"text-content gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_c('h1',{ref:"title",class:_vm.compact ? 'h5' : 'h4'},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)])])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"row",class:{ 'empty-state text-center': !_vm.compact }},[_c('div',{class:{ 'col-3 d-none d-sm-block': _vm.compact, 'col-12': !_vm.compact }},[(_vm.svgPath)?_c('div',{staticClass:"svg-250",class:{ 'svg-content': !_vm.compact }},[_c('img',{staticClass:"gl-max-w-full",attrs:{"src":_vm.svgPath,"alt":"","role":"img","height":_vm.height}})]):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.compact ? 'col-sm-9' : 'col-12'},[_c('div',{staticClass:"text-content gl-mx-auto gl-my-0",class:{ 'gl-p-5': !_vm.compact }},[_c('h1',{ref:"title",staticClass:"gl-font-size-h-display gl-line-height-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")]),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mt-3"},[_vm._t("description",[_vm._v("\n          "+_vm._s(_vm.description)+"\n        ")])],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-wrap",class:{ 'gl-justify-content-center': !_vm.compact }},[_vm._t("actions",[(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ 'gl-mx-2!': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n          ")]):_vm._e()])],2)])])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */