From e72a3cbc28e693511b9cb538e04a8a438720e176 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:07:34 +0000
Subject: [PATCH] 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
---
 .../components/bootstrap-5/dropdown-menu.tsx  | 20 ++++++----
 .../stories/ui/dropdown-menu.stories.tsx      | 37 ++++++++++++++++++-
 .../bootstrap-5/components/dropdown-menu.scss |  6 ++-
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
index 83f6b44bff..aa35c158d9 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
+++ b/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>
   )
 }
diff --git a/services/web/frontend/stories/ui/dropdown-menu.stories.tsx b/services/web/frontend/stories/ui/dropdown-menu.stories.tsx
index 3426299cc3..fcd0cf9855 100644
--- a/services/web/frontend/stories/ui/dropdown-menu.stories.tsx
+++ b/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,
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
index ac36298510..b603c0093e 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
+++ b/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 {