@gitlab/ui 72.5.1 → 72.6.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jan 2024 23:58:16 GMT
+ * Generated on Thu, 11 Jan 2024 13:05:25 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jan 2024 23:58:16 GMT
+ * Generated on Thu, 11 Jan 2024 13:05:25 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jan 2024 23:58:16 GMT
+ * Generated on Thu, 11 Jan 2024 13:05:25 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jan 2024 23:58:16 GMT
+ * Generated on Thu, 11 Jan 2024 13:05:25 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Jan 2024 23:58:16 GMT
+// Generated on Thu, 11 Jan 2024 13:05:25 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 10 Jan 2024 23:58:16 GMT
+// Generated on Thu, 11 Jan 2024 13:05:25 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/constants.js

@@ -58,7 +58,7 @@ const labelColorOptions = {
   ...viewModeOptions
 };
 const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
-const avatarsInlineSizeOptions = [32, 24];
+const avatarsInlineSizeOptions = [32, 24, 16];
 const avatarShapeOptions = {
   circle: 'circle',
   rect: 'rect'

package/package.json

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

package/src/components/base/avatar/avatar.scss

@@ -3,13 +3,12 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
 
 @mixin gl-avatar {
   @include gl-display-inline-flex;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-gray-a-08;
   @include gl-overflow-hidden;
   @include gl-flex-shrink-0;
   @include gl-line-height-ratio-1000;
   @include gl-object-fit-contain;
+  outline: 1px solid var(--t-gray-a-08, #{$t-gray-a-08});
+  outline-offset: -1px;
 }
 
 @mixin gl-avatar-s16 {

package/src/components/base/avatars_inline/avatars_inline.md

@@ -35,4 +35,4 @@ when avatars are collapsed for screen reader users.
 
 ### Supported sizes
 
-`<avatars-inline>` only supports avatars with `24` or `32` size.
+`<avatars-inline>` supports avatars with `16`, `24`, or `32` size.

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -1,28 +1,64 @@
 .gl-avatars-inline {
+  // Set a default and get the radius
+  --avatar-size: 24px;
+  --avatar-radius: calc(var(--avatar-size) * 0.5);
+  // Position the mask
+  --mask-offset: calc(var(--avatar-size) * -0.25);
+  // Mask size plus border cutout effect
+  --mask-cutout: calc(var(--avatar-radius) + 1.5px);
+
   @include gl-display-inline-flex;
+}
+
+.gl-avatars-inline-sm {
+  --avatar-size: 16px;
+}
 
-  &-child {
-    @include gl-display-inline-flex;
+.gl-avatars-inline-md {
+  --avatar-size: 24px;
+}
+
+.gl-avatars-inline-lg {
+  --avatar-size: 32px;
+}
 
-    &:not(:last-child) {
-      @include gl-mr-3;
+.gl-avatars-inline-child {
+  @include gl-display-inline-flex;
+
+  // Don't include the badge
+  &:not(:last-child) {
+    margin-right: var(--mask-offset);
+    mask: radial-gradient(circle at calc(var(--avatar-size) * 1.25) center, transparent var(--mask-cutout), white 0);
+
+    &:hover+.gl-avatars-inline-child>.gl-avatar-link,
+    &:hover+.gl-avatars-inline-child>.gl-avatars-inline-badge {
+      mask: radial-gradient(circle at var(--mask-offset) center, transparent var(--mask-cutout), white 0);
     }
   }
 
-  &-badge {
-    @include gl-bg-gray-100;
-    @include gl-text-gray-900;
-    @include gl-font-sm;
-    @include gl-py-2;
-    @include gl-px-3;
-    @include gl-line-height-normal;
-    @include gl-rounded-pill;
-    @include gl-font-weight-bold;
-
-    &.lg {
-      @include gl-font-base;
-      @include gl-p-3;
-      @include gl-rounded-full;
-    }
+  // Remove mask on hovered or focused avatar and bring it forward
+  &:not(:last-child):hover,
+  &:not(:last-child):focus-within {
+    @include gl-z-index-1;
+    mask: none;
+  }
+}
+
+.gl-avatars-inline-badge {
+  @include gl-display-inline-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center;
+  @include gl-bg-gray-100;
+  @include gl-text-gray-900;
+  @include gl-font-sm;
+  @include gl-px-2;
+  @include gl-line-height-normal;
+  @include gl-rounded-pill;
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+  
+  &.lg {
+    @include gl-font-base;
+    @include gl-rounded-6;
   }
 }

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -56,7 +56,13 @@ export default {
       return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
     },
     badgeSize() {
-      return this.avatarSize === 24 ? 'md' : 'lg';
+      return (
+        {
+          16: 'sm',
+          24: 'md',
+          32: 'lg',
+        }[this.avatarSize] || 'lg'
+      );
     },
     badgeLabel() {
       return `+${this.hiddenAvatars.length}`;
@@ -77,42 +83,16 @@ export default {
         : tooltipTitle;
     },
   },
-  methods: {
-    calcAvatarStyles(avatarIndex) {
-      // According to pajamas, overlap is 25% of the avatar height
-      const overlap = this.avatarSize * 0.25;
-
-      const marginRight =
-        avatarIndex === this.maxVisible ||
-        avatarIndex === this.avatars.length - 1 ||
-        !this.collapsed
-          ? undefined
-          : `-${overlap}px`;
-
-      return {
-        marginRight,
-      };
-    },
-  },
 };
 </script>
 <template>
-  <div class="gl-avatars-inline">
-    <div
-      v-for="(avatar, index) in visibleAvatars"
-      :key="index"
-      class="gl-avatars-inline-child"
-      :style="calcAvatarStyles(index)"
-    >
+  <div class="gl-avatars-inline" :class="`gl-avatars-inline-${badgeSize}`">
+    <div v-for="(avatar, index) in visibleAvatars" :key="index" class="gl-avatars-inline-child">
       <slot name="avatar" :avatar="avatar">
         <gl-avatar v-bind="avatar" :size="avatarSize" />
       </slot>
     </div>
-    <div
-      v-if="collapsed && collapsable"
-      class="gl-avatars-inline-child"
-      :style="calcAvatarStyles(visibleAvatars.length)"
-    >
+    <div v-if="collapsed && collapsable" class="gl-avatars-inline-child">
       <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
         {{ badgeTooltipTitle }}
       </gl-tooltip>

package/src/components/base/new_dropdowns/dropdown.scss

@@ -42,6 +42,10 @@
     @include gl-py-2;
     @include gl-list-style-none;
 
+    &:focus-visible {
+      @include gl-focus;
+    }
+
     ul {
       @include gl-list-style-none;
     }

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -831,7 +831,7 @@ export default {
       role="listbox"
       class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay"
       :class="listboxClasses"
-      tabindex="-1"
+      tabindex="0"
       @keydown="onKeydown"
     >
       <component :is="itemTag" class="top-scrim-wrapper" aria-hidden="true" data-testid="top-scrim">

package/src/utils/constants.js

@@ -69,7 +69,7 @@ export const labelColorOptions = {
 
 export const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
 
-export const avatarsInlineSizeOptions = [32, 24];
+export const avatarsInlineSizeOptions = [32, 24, 16];
 
 export const avatarShapeOptions = {
   circle: 'circle',