From 1ce026c526207e689b8767c8ac6b67e20a15eecd Mon Sep 17 00:00:00 2001
From: pavel <14926950+prichodko@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:51:57 +0200
Subject: [PATCH] add `<DropdownMenu.Label />` (#583)

* add <DropdownMenu.Label />

* Create famous-maps-burn.md
---
 .changeset/famous-maps-burn.md                |  5 +++++
 .../dropdown-menu/dropdown-menu.stories.tsx   | 10 ++++++++--
 .../src/dropdown-menu/dropdown-menu.tsx       | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/famous-maps-burn.md

diff --git a/.changeset/famous-maps-burn.md b/.changeset/famous-maps-burn.md
new file mode 100644
index 00000000..793d6ae2
--- /dev/null
+++ b/.changeset/famous-maps-burn.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+add `<DropdownMenu.Label />`
diff --git a/packages/components/src/dropdown-menu/dropdown-menu.stories.tsx b/packages/components/src/dropdown-menu/dropdown-menu.stories.tsx
index 407e8902..2d520fcc 100644
--- a/packages/components/src/dropdown-menu/dropdown-menu.stories.tsx
+++ b/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 />}
diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx
index 02838b30..07859111 100644
--- a/packages/components/src/dropdown-menu/dropdown-menu.tsx
+++ b/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
  */