From d2bfd3bfade7c30f91ba0ebe78551106f961d39e Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Tue, 5 Mar 2024 10:33:40 +0100
Subject: [PATCH] fix: dropdown item padding

---
 .../dowpdown-menu/dropdown-menu.tsx           | 13 +--
 .../item/item-interactive.stories.tsx         | 79 ++++++++++++++++---
 2 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
index f19ca68a091..e53cdf06634 100644
--- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
+++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx
@@ -72,12 +72,15 @@ const Label: typeof RadixDropdownMenu.Label = forwardRef((props, ref) => (
   <RadixDropdownMenu.Label className={dropdownMenuLabelStyles} ref={ref} {...props} />
 ));
 
+const dropdownItemStyles = css({ p: 'space.03' });
 const Item: typeof RadixDropdownMenu.Item = forwardRef((props, ref) => (
-  <RadixDropdownMenu.Item
-    className={css(itemBaseStyles, itemInteractiveStyles)}
-    ref={ref}
-    {...props}
-  />
+  <styled.div className={dropdownItemStyles}>
+    <RadixDropdownMenu.Item
+      ref={ref}
+      className={css(itemBaseStyles, itemInteractiveStyles)}
+      {...props}
+    />
+  </styled.div>
 ));
 
 const dropdownMenuSeparatorStyles = css({
diff --git a/src/app/ui/components/item/item-interactive.stories.tsx b/src/app/ui/components/item/item-interactive.stories.tsx
index eaf20004a57..556c8544c16 100644
--- a/src/app/ui/components/item/item-interactive.stories.tsx
+++ b/src/app/ui/components/item/item-interactive.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { styled } from 'leather-styles/jsx';
 
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { CopyIcon } from '@app/ui/icons/copy-icon';
@@ -21,19 +22,31 @@ const meta: Meta<typeof Component> = {
 export default meta;
 type Story = StoryObj<typeof Component>;
 
+function ExampleInteractiveItemContent() {
+  return (
+    <ItemLayout
+      showChevron
+      flagImg={<BtcAvatarIcon />}
+      titleLeft="Label"
+      captionLeft="Caption"
+      titleRight="1,000.00 ABC"
+      captionRight="$1,000.00"
+    />
+  );
+}
+
 export const ItemInteractive: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`InteractiveItem` has its hover state applied with a before pseudo element, so the content aligns independently from its hover state background.',
+      },
+    },
+  },
   args: {
     onClick: () => {},
-    children: (
-      <ItemLayout
-        showChevron
-        flagImg={<BtcAvatarIcon />}
-        titleLeft="Label"
-        captionLeft="Caption"
-        titleRight="1,000.00 ABC"
-        captionRight="$1,000.00"
-      />
-    ),
+    children: <ExampleInteractiveItemContent />,
   },
 };
 
@@ -71,3 +84,49 @@ export const WithButtons: Story = {
     ),
   },
 };
+
+export const AlignmentExample: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the component alignment in combination with its hover state',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <styled.div borderLeft="2px solid" borderColor="red.background-secondary" py="space.06">
+        <styled.h1 textStyle="heading.04" mb="space.04">
+          Left aligned header
+        </styled.h1>
+        <Story />
+      </styled.div>
+    ),
+  ],
+  args: {
+    onClick: () => {},
+    children: <ExampleInteractiveItemContent />,
+  },
+};
+
+export const WithPadding: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "In some layouts, it's necessary to contain the bounds of the element's pseudo element hover background. Wrap the component in a div with padding `space.03` to achieve this",
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <styled.div border="2px solid" borderColor="red.background-secondary" p="space.03">
+        <Story />
+      </styled.div>
+    ),
+  ],
+  args: {
+    onClick: () => {},
+    children: <ExampleInteractiveItemContent />,
+  },
+};