refactor(dropdown): unstyled trigger, separate button

leather-io · Feb 27, 2024 · 38146b3 · 38146b3
1 parent 5b6bbfc
commit 38146b3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 21 deletions.
diff --git a/...end/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx b/...end/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
@@ -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
@@ -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
@@ -42,7 +42,6 @@ export function Flag({
   return (
     <Flex
       flexDirection={reverse ? 'row-reverse' : 'row'}
-      data-reversed={reverse}
       width="100%"
       data-align={align}
       className={flagStyles}