@gitlab/ui 33.0.1 → 34.0.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# [34.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.1.2...v34.0.0) (2022-01-28)
+
+
+### Features
+
+* **GlAvatarsInline:** Add badgeSrOnlyText prop ([bcb0d29](https://gitlab.com/gitlab-org/gitlab-ui/commit/bcb0d299e9468e13cc7d565784388e3b9585e4a0))
+
+
+### BREAKING CHANGES
+
+* **GlAvatarsInline:** This change adds a required
+property named badgeSrOnlyText that ensures
+that badge displayed when avatars inline is
+collapsed, provides a screen reader only
+label that gives contextual information
+for users that use this form factor
+
+## [33.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.1.1...v33.1.2) (2022-01-27)
+
+
+### Bug Fixes
+
+* Add a workaround for GlAccordion compatibility with Vue Apollo ([55deabf](https://gitlab.com/gitlab-org/gitlab-ui/commit/55deabf3260643079e20db1ad2787980afdd8e56))
+
+## [33.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.1.0...v33.1.1) (2022-01-27)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.3.5 ([0bced05](https://gitlab.com/gitlab-org/gitlab-ui/commit/0bced051c61365c77cd4e4369b8838677217a46b))
+
+# [33.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.0.1...v33.1.0) (2022-01-26)
+
+
+### Features
+
+* **GlPopover:** add support for a close button ([583be0b](https://gitlab.com/gitlab-org/gitlab-ui/commit/583be0bd76f5c72384c19fe0eeeb4bc334eb58be))
+
 ## [33.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.0.0...v33.0.1) (2022-01-26)
 
 

package/dist/components/base/accordion/accordion.js

@@ -5,9 +5,13 @@ var script = {
   name: 'GlAccordion',
 
   provide() {
+    const accordionId = _uniqueId('accordion-set-'); // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
+
+
     return {
-      defaultHeaderLevel: this.headerLevel,
-      accordionSetId: this.autoCollapse && _uniqueId('accordion-set-')
+      defaultHeaderLevel: () => this.headerLevel,
+      accordionSetId: () => this.autoCollapse && accordionId
     };
   },
 

package/dist/components/base/accordion/accordion_item.js

@@ -57,12 +57,12 @@ var script = {
 
   computed: {
     headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel;
+      const level = this.headerLevel || this.defaultHeaderLevel();
       return `h${level}`;
     },
 
     accordion() {
-      return this.accordionSetId || undefined;
+      return this.accordionSetId() || undefined;
     },
 
     icon() {

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

@@ -1,4 +1,4 @@
-var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
+var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Badge description in screen readers\n\nThe `badgeSrOnlyText` property provides a meaningful description of the badge that appears\nwhen avatars are collapsed for screen reader users.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -30,6 +30,10 @@ var script = {
       required: false,
       default: false
     },
+    badgeSrOnlyText: {
+      type: String,
+      required: true
+    },
     badgeTooltipProp: {
       type: String,
       required: false,
@@ -100,7 +104,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',{class:['gl-avatars-inline', { collapsed: _vm.collapsed }],style:(_vm.containerSizeStyles)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(index))},[_vm._t("avatar",[_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))],{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(_vm.visibleAvatars.length))},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize]},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")])],1):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-avatars-inline', { collapsed: _vm.collapsed }],style:(_vm.containerSizeStyles)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(index))},[_vm._t("avatar",[_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))],{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarPosition(_vm.visibleAvatars.length))},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/popover/popover.js

@@ -1,11 +1,13 @@
 import { BPopover } from 'bootstrap-vue/esm/index.js';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const popoverRefName = 'bPopover';
 var script = {
   components: {
-    BPopover
+    BPopover,
+    CloseButton
   },
   mixins: [tooltipMixin(popoverRefName)],
   inheritAttrs: false,
@@ -19,11 +21,32 @@ var script = {
       type: String,
       required: false,
       default: 'hover focus'
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
     customClass() {
       return ['gl-popover', ...this.cssClasses].join(' ');
+    },
+
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    }
+
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      this.$emit('close-button-clicked', e);
     }
 
   },
@@ -34,7 +57,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('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */