@gitlab/ui 120.0.0 → 120.1.0

package/dist/components/base/illustration/illustration.js

@@ -45,7 +45,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('svg',_vm._g({key:_vm.spriteHref,attrs:{"data-testid":(_vm.name + "-illustration"),"aria-label":"","role":"presentation","width":_vm.illustrationSize,"height":_vm.illustrationSize}},_vm.$listeners),[_c('use',{attrs:{"href":_vm.spriteHref}})])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',_vm._g({key:_vm.spriteHref,attrs:{"data-testid":(_vm.name + "-illustration"),"role":"presentation","width":_vm.illustrationSize,"height":_vm.illustrationSize}},_vm.$listeners),[_c('use',{attrs:{"href":_vm.spriteHref}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,10 +1,12 @@
 import GlButton from '../../base/button/button';
+import GlIllustration from '../../base/illustration/illustration';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlEmptyState',
   components: {
-    GlButton
+    GlButton,
+    GlIllustration
   },
   props: {
     /**
@@ -28,6 +30,14 @@ var script = {
         return value > 0 && value <= 6;
       }
     },
+    /**
+     * The illustration's name.
+     */
+    illustrationName: {
+      type: String,
+      required: false,
+      default: null
+    },
     /**
      * The illustration's URL.
      */
@@ -115,7 +125,7 @@ var script = {
       return this.shouldPreventImageReflow ? this.svgHeight : null;
     },
     shouldPreventImageReflow() {
-      return Boolean(this.svgHeight);
+      return Boolean(this.svgHeight) && !this.illustrationName;
     },
     shouldRenderPrimaryButton() {
       return Boolean(this.primaryButtonLink && this.primaryButtonText);
@@ -136,7 +146,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-flex",class:{
     'gl-empty-state gl-flex-col gl-text-center': !_vm.compact,
     'gl-flex-row': _vm.compact,
-  }},[_c('div',{class:{ 'gl-hidden gl-px-4 @sm:gl-block': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","height":_vm.height}}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c(_vm.headerComponent,{tag:"component",staticClass:"gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-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-mb-0 gl-mt-4 gl-text-subtle"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mt-5 gl-flex gl-flex-wrap",class:{ 'gl-justify-center': !_vm.compact }},[_vm._t("actions",function(){return [(_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)],2)])};
+  }},[_c('div',{class:{ 'gl-hidden gl-px-4 @sm:gl-block': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.illustrationName)?_c('gl-illustration',{attrs:{"name":_vm.illustrationName}}):(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","height":_vm.height}}):_vm._e()],1),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c(_vm.headerComponent,{tag:"component",staticClass:"gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-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-mb-0 gl-mt-4 gl-text-subtle"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mt-5 gl-flex gl-flex-wrap",class:{ 'gl-justify-center': !_vm.compact }},[_vm._t("actions",function(){return [(_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)],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/vendor/bootstrap-vue/src/components/popover/helpers/bv-popover-template.js

@@ -40,7 +40,10 @@ const BVPopoverTemplate = /*#__PURE__*/extend({
         ref: 'arrow'
       }), isUndefinedOrNull($title) || $title === '' ? /* istanbul ignore next */h() : h('h3', {
         staticClass: 'popover-header',
-        domProps: titleDomProps
+        domProps: titleDomProps,
+        attrs: {
+          role: 'presentation'
+        }
       }, [$title]), isUndefinedOrNull($content) || $content === '' ? /* istanbul ignore next */h() : h('div', {
         staticClass: 'popover-body',
         domProps: contentDomProps

package/package.json

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

package/src/components/base/illustration/illustration.vue

@@ -45,7 +45,6 @@ export default {
   <svg
     :key="spriteHref"
     :data-testid="`${name}-illustration`"
-    aria-label=""
     role="presentation"
     :width="illustrationSize"
     :height="illustrationSize"

package/src/components/regions/empty_state/empty_state.vue

@@ -1,10 +1,12 @@
 <script>
 import GlButton from '../../base/button/button.vue';
+import GlIllustration from '../../base/illustration/illustration.vue';
 
 export default {
   name: 'GlEmptyState',
   components: {
     GlButton,
+    GlIllustration,
   },
   props: {
     /**
@@ -28,6 +30,14 @@ export default {
         return value > 0 && value <= 6;
       },
     },
+    /**
+     * The illustration's name.
+     */
+    illustrationName: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * The illustration's URL.
      */
@@ -115,7 +125,7 @@ export default {
       return this.shouldPreventImageReflow ? this.svgHeight : null;
     },
     shouldPreventImageReflow() {
-      return Boolean(this.svgHeight);
+      return Boolean(this.svgHeight) && !this.illustrationName;
     },
     shouldRenderPrimaryButton() {
       return Boolean(this.primaryButtonLink && this.primaryButtonText);
@@ -139,8 +149,9 @@ export default {
     }"
   >
     <div :class="{ 'gl-hidden gl-px-4 @sm:gl-block': compact, 'gl-max-w-full': !compact }">
+      <gl-illustration v-if="illustrationName" :name="illustrationName" />
       <img
-        v-if="svgPath"
+        v-else-if="svgPath"
         :src="svgPath"
         alt=""
         :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"

package/src/vendor/bootstrap-vue/src/components/popover/helpers/bv-popover-template.js

@@ -39,7 +39,15 @@ export const BVPopoverTemplate = /*#__PURE__*/ extend({
           }),
           isUndefinedOrNull($title) || $title === ''
             ? /* istanbul ignore next */ h()
-            : h('h3', { staticClass: 'popover-header', domProps: titleDomProps }, [$title]),
+            : h(
+                'h3',
+                {
+                  staticClass: 'popover-header',
+                  domProps: titleDomProps,
+                  attrs: { role: 'presentation' }
+                },
+                [$title]
+              ),
           isUndefinedOrNull($content) || $content === ''
             ? /* istanbul ignore next */ h()
             : h('div', { staticClass: 'popover-body', domProps: contentDomProps }, [$content])