Merge pull request #22297 from overleaf/dp-bs5-dropdown-description-icon

Fix display of leading icons in dropdown items with a description

GitOrigin-RevId: bdb7bca62abef9d599a23364656b32599a909a90

services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx

@@ -78,19 +78,23 @@ function DropdownItem(
   return (
     <BS5DropdownItem
       active={active}
-      className={classnames(className, {
-        'dropdown-item-description-container': description,
-      })}
+      className={className}
       role="menuitem"
       {...props}
       ref={ref}
     >
       {leadingIconComponent}
-      {children}
-      {trailingIconComponent}
-      {description && (
-        <span className="dropdown-item-description">{description}</span>
-      )}
+      <div
+        className={classnames({
+          'dropdown-item-description-container': description,
+        })}
+      >
+        {children}
+        {trailingIconComponent}
+        {description && (
+          <span className="dropdown-item-description">{description}</span>
+        )}
+      </div>
     </BS5DropdownItem>
   )
 }

services/web/frontend/stories/ui/dropdown-menu.stories.tsx

@@ -138,7 +138,7 @@ export const Description = (args: Args) => {
   )
 }
 
-export const Icon = (args: Args) => {
+export const LeadingIcon = (args: Args) => {
   return (
     <DropdownMenu show>
       <OLDropdownMenuItem
@@ -175,6 +175,14 @@ export const Icon = (args: Args) => {
         eventKey="5"
         href="#/action-5"
         leadingIcon="align_space_even"
+        description="Some description"
+      >
+        With a description
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        eventKey="6"
+        href="#/action-6"
+        leadingIcon="align_space_even"
         className="dropdown-item-material-icon-small"
       >
         Small icon
@@ -183,6 +191,33 @@ export const Icon = (args: Args) => {
   )
 }
 
+export const TrailingIcon = (args: Args) => {
+  return (
+    <DropdownMenu show>
+      <OLDropdownMenuItem eventKey="1" href="#/action-1" trailingIcon="check">
+        Tick
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        eventKey="2"
+        href="#/action-2"
+        trailingIcon="check"
+        description="Some description"
+      >
+        With a description
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        eventKey="3"
+        href="#/action-3"
+        leadingIcon="align_space_even"
+        trailingIcon="check"
+        description="Some description"
+      >
+        With a leading icon
+      </OLDropdownMenuItem>
+    </DropdownMenu>
+  )
+}
+
 const meta: Meta<typeof DropdownMenu> = {
   title: 'Shared / Components / Bootstrap 5 / DropdownMenu',
   component: DropdownMenu,

services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss

@@ -113,7 +113,9 @@
 
 .dropdown-item-description-container {
   grid-auto-flow: row;
-  min-height: 60px;
+  min-height: 44px;
+  display: grid;
+  place-content: center start;
 }
 
 .dropdown-item-trailing-icon {
@@ -124,6 +126,8 @@
 }
 
 .dropdown-item-leading-icon {
+  display: flex;
+  align-items: center;
   padding-right: var(--spacing-04);
 
   &.spinner {