@gitlab/ui 41.2.0 → 41.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.2.0",
+  "version": "41.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.3.0",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.15.0",
+    "@gitlab/svgs": "2.16.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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>

package/src/scss/utilities.scss

@@ -2997,6 +2997,18 @@
   display: grid !important;
 }
 
+.gl-md-display-table-cell {
+  @include gl-media-breakpoint-up(md) {
+  display: table-cell;
+  }
+}
+
+.gl-md-display-table-cell\! {
+  @include gl-media-breakpoint-up(md) {
+  display: table-cell !important;
+  }
+}
+
 .gl-lg-display-table-cell {
   @include gl-media-breakpoint-up(lg) {
   display: table-cell;
@@ -5722,6 +5734,12 @@
 .gl-ml-3\! {
   margin-left: $gl-spacing-scale-3 !important;
 }
+.gl-ml-n3 {
+  margin-left: -$gl-spacing-scale-3;
+}
+.gl-ml-n3\! {
+  margin-left: -$gl-spacing-scale-3 !important;
+}
 .gl-ml-4 {
   margin-left: $gl-spacing-scale-4;
 }

package/src/scss/utility-mixins/display.scss

@@ -187,6 +187,12 @@
   display: grid;
 }
 
+@mixin gl-md-display-table-cell {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-display-table-cell;
+  }
+}
+
 @mixin gl-lg-display-table-cell {
   @include gl-media-breakpoint-up(lg) {
     @include gl-display-table-cell;

package/src/scss/utility-mixins/spacing.scss

@@ -552,6 +552,10 @@
   margin-left: $gl-spacing-scale-3;
 }
 
+@mixin gl-ml-n3 {
+  margin-left: -$gl-spacing-scale-3;
+}
+
 @mixin gl-ml-4 {
   margin-left: $gl-spacing-scale-4;
 }