Add title support in dropdown (#448)

* add title support in dropdown

* replace text with flex

---------

Co-authored-by: Panos Christophides <panos@netdata.cloud>

Author: christophidesp

src/components/drops/menu/dropdown.js

@@ -4,6 +4,7 @@ import { useVirtualizer } from "@tanstack/react-virtual"
 import Flex from "src/components/templates/flex"
 import Search from "src/components/search"
 import Box from "src/components/templates/box"
+import { TextSmall } from "src/components/typography"
 
 const Container = styled(Flex)`
   ${({ hideShadow }) =>
@@ -19,6 +20,8 @@ const Dropdown = ({
   itemProps,
   items,
   onItemClick,
+  dropTitle,
+  dropTitlePadding = [3, 3, 0],
   Item,
   value,
   hasSearch,
@@ -71,6 +74,7 @@ const Dropdown = ({
       width="auto"
       {...rest}
     >
+      {dropTitle && <Flex padding={dropTitlePadding}>{dropTitle}</Flex>}
       {hasSearch && (
         <Box margin={searchMargin}>
           <Search

src/components/drops/menu/index.js

@@ -28,6 +28,8 @@ const Menu = forwardRef(
       Item = DropdownItem,
       Dropdown = DefaultDropdown,
       animation,
+      dropTitle,
+      dropTitlePadding,
       hasSearch = false,
       ...rest
     },
@@ -96,6 +98,8 @@ const Menu = forwardRef(
             {...dropProps}
           >
             <Dropdown
+              dropTitle={dropTitle}
+              dropTitlePadding={dropTitlePadding}
               value={value}
               onItemClick={onItemClick}
               items={items}

src/components/drops/menu/index.stories.js

@@ -7,6 +7,8 @@ import Flex from "src/components/templates/flex"
 import Tooltip from "src/components/drops/tooltip"
 import { Button } from "src/components/button"
 import { Icon } from "src/components/icon"
+import { Text } from "src/components/typography"
+
 import readme from "./README.md"
 import Menu from "./index"
 
@@ -18,9 +20,10 @@ const subData = {
   },
   jest: ["index.test.js"],
 }
-
 const Simple = props => (
   <Menu
+    dropTitle={<Text>Fight Club characters</Text>}
+    dropTitlePadding={[2]}
     label="Character"
     items={[
       { value: "narrator", label: "The Narrator", onClick: action("narrator") },