@gitlab/ui 41.4.0 → 41.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [41.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.4.0...v41.5.0) (2022-06-06)
+
+
+### Features
+
+* **GlAvatarLabeled:** Add default slot ([ba69571](https://gitlab.com/gitlab-org/gitlab-ui/commit/ba69571945032ef5e27a49da40444180b786a651))
+
 # [41.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.3.0...v41.4.0) (2022-06-06)
 
 

package/dist/components/base/avatar_labeled/avatar_labeled.js

@@ -44,7 +44,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:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels gl-text-left!"},[_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"},[(_vm.hasLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])],1)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels gl-text-left!"},[_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"},[(_vm.hasLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/base/avatar_labeled/avatar_labeled.spec.js

@@ -49,6 +49,15 @@ describe('avatar labeled', () => {
     expect(wrapper.find('[data-testid="user-meta"]').exists()).toBe(true);
   });
 
+  it('displays `default` slot', () => {
+    buildWrapper(
+      { label, subLabel },
+      { default: '<span data-testid="default-slot">Foo Bar</span>' }
+    );
+
+    expect(wrapper.find('[data-testid="default-slot"]').exists()).toBe(true);
+  });
+
   describe('with label links', () => {
     beforeEach(() => {
       buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });

package/src/components/base/avatar_labeled/avatar_labeled.stories.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { GlAvatarLabeled, GlBadge } from '../../../index';
+import { GlAvatarLabeled, GlBadge, GlButton } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import avatarPath from '../../../../static/img/avatar.png';
@@ -90,6 +90,25 @@ export const WithBadges = (args, { argTypes }) => ({
 });
 WithBadges.args = generateProps();
 
+export const WithDefaultSlot = (args, { argTypes }) => ({
+  components: { GlAvatarLabeled, GlButton },
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar-labeled
+        :shape="shape"
+        :size="size"
+        :src="src"
+        :label="label"
+        :sub-label="subLabel"
+      >
+        <template>
+          <gl-button class="gl-mt-3 gl-align-self-start" size="small">Follow</gl-button>
+        </template>
+      </gl-avatar-labeled>
+    `,
+});
+WithDefaultSlot.args = generateProps({ size: 64 });
+
 export default {
   title: 'base/avatar/labeled',
   component: GlAvatarLabeled,

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -56,6 +56,8 @@ export default {
         <span class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
       </gl-link>
       <span v-else class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
+      <!-- @slot Add additional information below the avatar label. -->
+      <slot></slot>
     </div>
   </div>
 </template>