@gitlab/ui 71.7.1 → 71.8.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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)
+
+
+### Features
+
+* **GlBanner:** remove embedded property ([b024100](https://gitlab.com/gitlab-org/gitlab-ui/commit/b02410025fbb4efa7704081e0c0c2a9bd01e3216))
+
 ## [71.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.7.0...v71.7.1) (2023-12-08)
 
 

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 */

package/dist/components/base/banner/banner.js

@@ -68,14 +68,6 @@ var script = {
       type: String,
       required: false,
       default: 'Dismiss'
-    },
-    /**
-     * Removes the border for banners embedded in content.
-     */
-    embedded: {
-      type: Boolean,
-      required: false,
-      default: null
     }
   },
   computed: {
@@ -111,7 +103,6 @@ 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-card',{staticClass:"gl-pl-6 gl-pr-8 gl-py-6",class:{
     'gl-banner-introduction': _vm.isIntroducing,
-    'gl-border-none!': _vm.embedded,
     'gl-bg-gray-10!': !_vm.isIntroducing,
   },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',_vm._b({attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},'gl-button',_vm.buttonAttributes,false),[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],1)};
 var __vue_staticRenderFns__ = [];