Design after discussion with Cheeks and Joe.

packages/bbui/src/Badge/Badge.svelte

@@ -11,7 +11,7 @@
   export let active = false
   export let inactive = false
   export let hoverable = false
-  export let customColor = null
+  export let outlineColor = null
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -30,7 +30,7 @@
   class:spectrum-Label--seafoam={seafoam}
   class:spectrum-Label--active={active}
   class:spectrum-Label--inactive={inactive}
-  style={customColor ? `background-color: ${customColor}` : ""}
+  style={outlineColor ? `border: 2px solid ${outlineColor}` : ""}
 >
   <slot />
 </span>

packages/builder/src/pages/builder/app/[application]/_components/BuilderGroupPopover.svelte

@@ -1,49 +1,22 @@
 <script>
-  import { Icon, Popover } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
-  import GroupBadge from "./GroupBadge.svelte"
+  import { helpers } from "@budibase/shared-core"
 
   export let groups = []
-
+  function tooltip(groups) {
-  let anchor, popover
+    const sortedNames = groups.sort((a, b) => a.name.localeCompare(b.name)).map(group => group.name)
-
+    return `Member of ${helpers.lists.punctuateList(sortedNames)}`
-  function show() {
-    popover.show()
-  }
-
-  function hide() {
-    popover.hide()
   }
 </script>
 
-<div class="icon" bind:this={anchor}>
+<div class="icon">
-  <Icon name="More" size="S" hoverable on:mouseover={show} on:mouseleave={hide} />
+  <Icon name="Info" size="XS" color="grey" hoverable tooltip={tooltip(groups)} tooltipPosition="top" />
 </div>
 
-<Popover
-  customZIndex={1002}
-  bind:this={popover}
-  align="center"
-  {anchor}
-  showPopover={true}
-  minWidth={0}
->
-  <div class="badges">
-    {#each groups as group}
-      <GroupBadge color={group.color} name={group.name} />
-    {/each}
-  </div>
-</Popover>
-
 <style>
   .icon {
     height: auto;
     display: flex;
     justify-content: center;
   }
-  .badges {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-s);
-    padding: var(--spacing-m);
-  }
 </style>

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -13,7 +13,6 @@
     FancyInput,
     Button,
     FancySelect,
-    Badge,
   } from "@budibase/bbui"
   import { builderStore, appStore, roles, appPublished } from "@/stores/builder"
   import {
@@ -39,7 +38,6 @@
   import { fly } from "svelte/transition"
   import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import BuilderGroupPopover from "./BuilderGroupPopover.svelte"
-  import GroupBadge from "./GroupBadge.svelte"
 
   let query = null
   let loaded = false
@@ -542,6 +540,12 @@
       creationAccessType = Constants.Roles.CREATOR
     }
   }
+
+  const itemCountText = (word, count) => {
+    return `${count} ${word}${
+      count !== 1 ? "s" : ""
+    }`
+  }
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
@@ -708,9 +712,7 @@
                       {group.name}
                     </div>
                     <div class="auth-entity-meta">
-                      {`${group.users?.length} user${
+                      {itemCountText("user", group.users?.length)}
-                        group.users?.length != 1 ? "s" : ""
-                      }`}
                     </div>
                   </div>
                   <div class="auth-entity-access">
@@ -755,20 +757,20 @@
                       <div class="user-email" title={user.email}>
                         {user.email}
                       </div>
-                      <div class="group-badges">
+                      {#if userGroups.length}
-                        {#each userGroups.slice(0, 3) as group}
+                        <div class="group-info">
-                          <GroupBadge color={group.color} name={group.name} />
+                          <div class="auth-entity-meta">
-                        {/each}
+                            {itemCountText("group", userGroups.length)}
-                        {#if userGroups.length > 3}
+                          </div>
-                          <BuilderGroupPopover groups={userGroups.slice(3)} />
+                          <BuilderGroupPopover groups={userGroups} />
-                        {/if}
+                        </div>
-                      </div>
+                      {/if}
                     </div>
                   </div>
                   <div class="auth-entity-access" class:muted={user.group}>
                     <RoleSelect
                       footer={getRoleFooter(user)}
-                      placeholder={userGroups?.length ? "Override" : false}
+                      placeholder={userGroups?.length ? "Controlled by group" : false}
                       value={parseRole(user)}
                       allowRemove={user.role && !user.group}
                       allowPublic={false}
@@ -949,7 +951,7 @@
 
   .auth-entity,
   .auth-entity-header {
-    padding: 0px var(--spacing-xl);
+    padding: 0 var(--spacing-xl);
   }
 
   .auth-entity,
@@ -958,8 +960,6 @@
     grid-template-columns: 1fr 220px;
     align-items: center;
     gap: var(--spacing-xl);
-    border-bottom: var(--border-light);
-    padding-bottom: var(--spacing-s);
   }
 
   .auth-entity .details {
@@ -1071,12 +1071,16 @@
 
   .user-groups {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-m);
   }
-  .group-badges {
+
-    padding-top: var(--spacing-s);
+  .group-info {
     display: flex;
-    gap: var(--spacing-s);
+    flex-direction: row;
-    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+    justify-content: center;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/_components/GroupBadge.svelte

@@ -1,10 +0,0 @@
-<script>
-  import { Badge } from "@budibase/bbui"
-
-  export let color
-  export let name
-</script>
-
-<Badge size="S" customColor={`color-mix(in srgb, ${color} 30%, transparent)`}
-  >{name}</Badge
->

packages/shared-core/src/helpers/index.ts

@@ -6,3 +6,4 @@ export * as cron from "./cron"
 export * as schema from "./schema"
 export * as views from "./views"
 export * as roles from "./roles"
+export * as lists from "./lists"

packages/shared-core/src/helpers/lists.ts

@@ -0,0 +1,7 @@
+export function punctuateList(list: string[]) {
+  if (list.length === 0) return ""
+  if (list.length === 1) return list[0]
+  if (list.length === 2) return list.join(" and ")
+  // For more than 2 elements: join all but the last with commas, then add "and" before the last element.
+  return list.slice(0, -1).join(", ") + " and " + list[list.length - 1]
+}