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) => (
));
+const dropdownItemStyles = css({ p: 'space.03' });
const Item: typeof RadixDropdownMenu.Item = forwardRef((props, ref) => (
-
+
+
+
));
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 = {
export default meta;
type Story = StoryObj;
+function ExampleInteractiveItemContent() {
+ return (
+ }
+ 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: (
- }
- titleLeft="Label"
- captionLeft="Caption"
- titleRight="1,000.00 ABC"
- captionRight="$1,000.00"
- />
- ),
+ children: ,
},
};
@@ -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 => (
+
+
+ Left aligned header
+
+
+
+ ),
+ ],
+ args: {
+ onClick: () => {},
+ children: ,
+ },
+};
+
+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 => (
+
+
+
+ ),
+ ],
+ args: {
+ onClick: () => {},
+ children: ,
+ },
+};