@gitlab/ui 64.2.3 → 64.4.0

package/package.json

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

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -11,6 +11,12 @@
     @include gl-text-gray-900;
   }
 
+  &-labels.inline-labels {
+    @include gl-flex-direction-row;
+    @include gl-align-items-center;
+    @include gl-gap-2;
+  }
+
   &-label {
     @include gl-font-weight-bold;
     @include gl-p-1;

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

@@ -58,6 +58,14 @@ describe('avatar labeled', () => {
     expect(wrapper.find('[data-testid="default-slot"]').exists()).toBe(true);
   });
 
+  describe('with labels as rows', () => {
+    it('adds the correct css classes', () => {
+      buildWrapper({ label, subLabel, inlineLabels: true });
+
+      expect(wrapper.find('.gl-avatar-labeled-labels').classes('inline-labels')).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

@@ -18,6 +18,7 @@ const generateProps = ({
   size = 32,
   shape = 'circle',
   src = avatarPath,
+  inlineLabels = false,
   labelLink,
 } = {}) => ({
   label,
@@ -25,6 +26,7 @@ const generateProps = ({
   size,
   shape,
   src,
+  inlineLabels,
   labelLink,
 });
 
@@ -48,6 +50,22 @@ export const Default = (args, { argTypes }) => ({
 });
 Default.args = generateProps();
 
+export const WithInlineLabels = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar-labeled
+        :shape="shape"
+        :size="size"
+        :src="src"
+        :label="label"
+        :sub-label="subLabel"
+        :inline-labels="inlineLabels"
+      />
+    `,
+});
+WithInlineLabels.args = generateProps({ inlineLabels: true });
+
 export const WithTooltip = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),

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

@@ -28,6 +28,11 @@ export default {
       required: false,
       default: '',
     },
+    inlineLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     hasLabelLink() {
@@ -51,6 +56,11 @@ export default {
         'gl-cursor-pointer': this.hasLabelLink,
       };
     },
+    avatarRowLayoutClass() {
+      return {
+        'inline-labels': this.inlineLabels,
+      };
+    },
   },
   methods: {
     onAvatarClick() {
@@ -62,7 +72,7 @@ export default {
 <template>
   <div class="gl-avatar-labeled">
     <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
-    <div class="gl-avatar-labeled-labels gl-text-left!">
+    <div class="gl-avatar-labeled-labels gl-text-left!" :class="avatarRowLayoutClass">
       <div
         class="gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"
       >

package/src/scss/utilities.scss

@@ -3319,6 +3319,18 @@
   }
 }
 
+.gl-lg-align-items-flex-start {
+  @include gl-media-breakpoint-up(lg) {
+  align-items: flex-start;
+  }
+}
+
+.gl-lg-align-items-flex-start\! {
+  @include gl-media-breakpoint-up(lg) {
+  align-items: flex-start !important;
+  }
+}
+
 .gl-lg-align-items-flex-end {
   @include gl-media-breakpoint-up(lg) {
   align-items: flex-end;

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

@@ -59,6 +59,12 @@
   }
 }
 
+@mixin gl-lg-align-items-flex-start {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-align-items-flex-start;
+  }
+}
+
 @mixin gl-lg-align-items-flex-end {
   @include gl-media-breakpoint-up(lg) {
     @include gl-align-items-flex-end;