From 9301e20c67580b11b78497413b384c96cd2b7892 Mon Sep 17 00:00:00 2001
From: Shlok Amin <shlokamin@me.com>
Date: Mon, 28 Oct 2024 14:25:54 -0400
Subject: [PATCH 1/2] feat(components): update dropdown menu title styles

---
 components/src/molecules/DropdownMenu/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index af336737fa5..28d047d37d2 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -204,7 +204,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     >
       {title !== null ? (
         <Flex gridGap={SPACING.spacing8} paddingBottom={SPACING.spacing8}>
-          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
             {title}
           </StyledText>
           {tooltipText != null ? (

From 2f6e36ededffbc3ee5c97c3dd1597793143ef8d9 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Tue, 29 Oct 2024 14:36:24 -0400
Subject: [PATCH 2/2] update padding and remove caption

---
 .../__tests__/DropdownMenu.test.tsx           |  2 --
 .../src/molecules/DropdownMenu/index.tsx      | 21 ++++++-------------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx b/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx
index ee1de9643e5..34ca88339f9 100644
--- a/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx
+++ b/components/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx
@@ -41,13 +41,11 @@ describe('DropdownMenu', () => {
       currentOption: mockOptions[0],
       dropdownType: 'neutral',
       title: 'Custom Dropdown',
-      caption: 'Select an option',
       tooltipText: 'This is a tooltip',
     }
     render(props)
 
     expect(screen.getByText('Custom Dropdown')).toBeInTheDocument()
-    expect(screen.getByText('Select an option')).toBeInTheDocument()
     expect(screen.getByText('Option 1')).toBeInTheDocument()
   })
 
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index 28d047d37d2..c891eb2c93b 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -19,7 +19,6 @@ import { Flex } from '../../primitives'
 import { Icon } from '../../icons'
 import { useHoverTooltip } from '../../tooltips'
 import { useOnClickOutside } from '../../interaction-enhancers'
-import { LegacyStyledText } from '../../atoms/StyledText/LegacyStyledText'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { Tooltip } from '../../atoms/Tooltip'
 import { StyledText } from '../../atoms/StyledText'
@@ -55,8 +54,6 @@ export interface DropdownMenuProps {
   dropdownType?: DropdownBorder
   /** dropdown title */
   title?: string
-  /** dropdown item caption */
-  caption?: string | null
   /** text for tooltip */
   tooltipText?: string | null
   /** html tabindex property */
@@ -79,7 +76,6 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     width = '9.125rem',
     dropdownType = 'rounded',
     title,
-    caption,
     tooltipText,
     tabIndex = 0,
     error,
@@ -197,11 +193,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     }
   `
   return (
-    <Flex
-      flexDirection={DIRECTION_COLUMN}
-      ref={dropDownMenuWrapperRef}
-      gridGap={SPACING.spacing4}
-    >
+    <Flex flexDirection={DIRECTION_COLUMN} ref={dropDownMenuWrapperRef}>
       {title !== null ? (
         <Flex gridGap={SPACING.spacing8} paddingBottom={SPACING.spacing8}>
           <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
@@ -222,7 +214,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           ) : null}
         </Flex>
       ) : null}
-      <Flex flexDirection={DIRECTION_COLUMN} position={POSITION_RELATIVE}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        position={POSITION_RELATIVE}
+        paddingBottom={SPACING.spacing4}
+      >
         <Flex
           onClick={(e: MouseEvent) => {
             e.preventDefault()
@@ -302,11 +298,6 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           </Flex>
         )}
       </Flex>
-      {caption != null ? (
-        <LegacyStyledText as="label" color={COLORS.grey60}>
-          {caption}
-        </LegacyStyledText>
-      ) : null}
       {error != null ? (
         <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.red50}>
           {error}