From 38146b3ee5c5a02edbbf5b7f908c0bb163c7b345 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Fri, 23 Feb 2024 15:50:31 +0100
Subject: [PATCH] refactor(dropdown): unstyled trigger, separate button

---
 .../recipient-type-dropdown.tsx               |  4 +--
 .../dowpdown-menu/dropdown-menu.stories.tsx   |  4 +--
 .../dowpdown-menu/dropdown-menu.tsx           | 27 ++++++++-----------
 src/app/ui/components/flag/flag.tsx           |  1 -
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx
index f95b16f9252..3e5aa059aa8 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx
@@ -28,7 +28,7 @@ export function RecipientIdentifierTypeDropdown(props: RecipientIdentifierTypeDr
   const { activeRecipientIdentifierType, onSelectRecipientIdentifierType } = props;
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.UnstyledTrigger>
+      <DropdownMenu.Trigger>
         <Flag
           reverse
           img={<ChevronDownIcon variant="small" />}
@@ -38,7 +38,7 @@ export function RecipientIdentifierTypeDropdown(props: RecipientIdentifierTypeDr
         >
           {activeRecipientIdentifierType}
         </Flag>
-      </DropdownMenu.UnstyledTrigger>
+      </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content>
           <DropdownMenu.Group>
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx
index dc4a27f9ce7..520f8db74c4 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx
@@ -21,12 +21,12 @@ export const DropdownMenu: Story = {
   render: () => (
     <Component.Root>
       <Component.Trigger>
-        <styled.button>
+        <Component.Button>
           <HStack gap="space.02" width="100%">
             <styled.span textStyle="label.02">Options</styled.span>
             <ChevronDownIcon variant="small" />
           </HStack>
-        </styled.button>
+        </Component.Button>
       </Component.Trigger>
       <Component.Portal>
         <Component.Content align="start" sideOffset={8}>
diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
index 83343e3e8fb..f761b491516 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -2,6 +2,7 @@ import { ReactNode, forwardRef } from 'react';
 
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { css } from 'leather-styles/css';
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
 import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive';
 
@@ -11,9 +12,7 @@ export interface DropdownMenuItem {
   label: string;
 }
 
-const Root = RadixDropdownMenu.Root;
-
-const dropdownTriggerStyles = css({
+const dropdownButtonStyles = css({
   bg: 'ink.background-primary',
   borderRadius: 'xs',
   fontWeight: 500,
@@ -22,15 +21,13 @@ const dropdownTriggerStyles = css({
   px: 'space.04',
   py: 'space.03',
   textStyle: 'label.02',
-  '&[data-state=open]': {
+  '[data-state=open] &': {
     bg: 'ink.component-background-pressed',
   },
 });
-const Trigger: typeof RadixDropdownMenu.Trigger = forwardRef((props, ref) => (
-  <RadixDropdownMenu.Trigger className={dropdownTriggerStyles} ref={ref} {...props} />
-));
-
-const Portal = RadixDropdownMenu.Portal;
+function Button(props: HTMLStyledProps<'button'>) {
+  return <styled.button className={dropdownButtonStyles} {...props} />;
+}
 
 const dropdownContentStyles = css({
   alignItems: 'center',
@@ -54,8 +51,6 @@ const Content: typeof RadixDropdownMenu.Content = forwardRef((props, ref) => (
   <RadixDropdownMenu.Content className={dropdownContentStyles} ref={ref} {...props} />
 ));
 
-const Group = RadixDropdownMenu.Group;
-
 const dropdownMenuLabelStyles = css({
   color: 'ink.text-subdued',
   height: 'auto',
@@ -87,12 +82,12 @@ const Separator: typeof RadixDropdownMenu.Separator = forwardRef((props, ref) =>
 ));
 
 export const DropdownMenu = {
-  Root,
-  Trigger,
-  UnstyledTrigger: RadixDropdownMenu.Trigger,
-  Portal,
+  Root: RadixDropdownMenu.Root,
+  Trigger: RadixDropdownMenu.Trigger,
+  Group: RadixDropdownMenu.Group,
+  Portal: RadixDropdownMenu.Portal,
+  Button,
   Content,
-  Group,
   Label,
   Item,
   Separator,
diff --git a/src/app/ui/components/flag/flag.tsx b/src/app/ui/components/flag/flag.tsx
index 7739a07bcec..32c2688bd03 100644
--- a/src/app/ui/components/flag/flag.tsx
+++ b/src/app/ui/components/flag/flag.tsx
@@ -42,7 +42,6 @@ export function Flag({
   return (
     <Flex
       flexDirection={reverse ? 'row-reverse' : 'row'}
-      data-reversed={reverse}
       width="100%"
       data-align={align}
       className={flagStyles}