add `<DropdownMenu.Label />` (#583)

* add <DropdownMenu.Label />

* Create famous-maps-burn.md

.changeset/famous-maps-burn.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add `<DropdownMenu.Label />`

packages/components/src/dropdown-menu/dropdown-menu.stories.tsx

@@ -20,8 +20,12 @@ import { DropdownMenu } from '.'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-const meta: Meta = {
+const meta: Meta<{ label: boolean; search: boolean }> = {
   title: 'Components/Dropdown Menu',
+  args: {
+    label: true,
+    search: true,
+  },
   argTypes: {},
   parameters: {
     design: {
@@ -38,7 +42,9 @@ const meta: Meta = {
         <DropdownButton>Open</DropdownButton>
 
         <DropdownMenu.Content sideOffset={10}>
-          <DropdownMenu.Search placeholder="Search by" />
+          {args.label && <DropdownMenu.Label>Label</DropdownMenu.Label>}
+
+          {args.search && <DropdownMenu.Search placeholder="Search by" />}
 
           <DropdownMenu.Item
             icon={<EditIcon />}

packages/components/src/dropdown-menu/dropdown-menu.tsx

@@ -74,6 +74,25 @@ export const Content = forwardRef<
 
 Content.displayName = DropdownMenu.Content.displayName
 
+/**
+ * Label
+ */
+
+export const Label = forwardRef<
+  React.ElementRef<typeof DropdownMenu.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenu.Label>
+>((props, ref) => {
+  return (
+    <DropdownMenu.Label
+      {...props}
+      ref={ref}
+      className="p-2 text-13 font-medium text-neutral-50 dark:text-neutral-40"
+    />
+  )
+})
+
+Label.displayName = DropdownMenu.Label.displayName
+
 /**
  * Search
  */