@gitlab/ui 71.8.0 → 71.8.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [71.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.8.0...v71.8.1) (2023-12-11)
+
+
+### Bug Fixes
+
+* **GlAvatarInline:** Address MR feedback ([c139beb](https://gitlab.com/gitlab-org/gitlab-ui/commit/c139beb921af6de88c01ca3daab52022fe3ee1dc))
+* **GlAvatarInline:** Fix spacing in GlAvatarInlne ([4801ecd](https://gitlab.com/gitlab-org/gitlab-ui/commit/4801ecdf895ba47a7bf8a8b29bb31c5fc5027044))
+
 # [71.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.7.1...v71.8.0) (2023-12-11)
 
 

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

@@ -55,12 +55,6 @@ var script = {
     visibleAvatars() {
       return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
     },
-    containerSizeStyles() {
-      return {
-        width: `${this.avatarSize * this.visibleAvatars.length}px`,
-        height: `${this.avatarSize}px`
-      };
-    },
     badgeSize() {
       return this.avatarSize === 24 ? 'md' : 'lg';
     },
@@ -81,12 +75,12 @@ var script = {
     }
   },
   methods: {
-    calcAvatarPosition(avatarIndex) {
+    calcAvatarStyles(avatarIndex) {
       // According to pajamas, overlap is 25% of the avatar height
-      const overlapDistance = this.avatarSize * 0.75;
+      const overlap = this.avatarSize * 0.25;
+      const marginRight = avatarIndex === this.maxVisible || avatarIndex === this.avatars.length - 1 || !this.collapsed ? undefined : `-${overlap}px`;
       return {
-        left: `${overlapDistance * avatarIndex}px`,
-        zIndex: this.maxVisible + (avatarIndex - 1)
+        marginRight
       };
     }
   }
@@ -96,7 +90,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",function(){return [_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_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatars-inline"},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child",style:(_vm.calcAvatarStyles(index))},[_vm._t("avatar",function(){return [_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.calcAvatarStyles(_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 */