@gitlab/ui 64.3.0 → 64.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.3.0",
+  "version": "64.5.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/components/base/drawer/drawer.scss

@@ -9,7 +9,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
   @include gl-h-full;
   @include gl-w-full;
   @include gl-overflow-y-auto;
-  @include gl-shadow-drawer;
+  @include gl-shadow-lg;
   @include gl-font-base;
   @include gl-line-height-normal;
   @include gl-display-flex;

package/src/scss/utilities.scss

@@ -2232,14 +2232,6 @@
   box-shadow: 0 0 4px 2px $blue-200 !important
 }
 
-.gl-shadow-drawer {
-  box-shadow: -4px 0 8px $gray-200
-}
-
-.gl-shadow-drawer\! {
-  box-shadow: -4px 0 8px $gray-200 !important
-}
-
 .gl-shadow-x0-y0-b3-s1-blue-500 {
   box-shadow: inset 0 0 3px 1px $blue-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -186,10 +186,6 @@
   box-shadow: 0 0 4px 2px $blue-200;
 }
 
-@mixin gl-shadow-drawer {
-  box-shadow: -4px 0 8px $gray-200;
-}
-
 @mixin gl-shadow-x0-y0-b3-s1-blue-500 {
   box-shadow: inset 0 0 3px 1px $blue-500;
 }