From c29c81d990edb57dee763563d6b2967701d4eb82 Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 24 Mar 2023 12:15:02 +1100
Subject: [PATCH] fix: profile dropdown width

---
 .../atoms/DynamicPopover/DynamicPopover.tsx   | 15 ++--
 .../molecules/Dropdown/Dropdown.tsx           |  4 +-
 .../components/molecules/Profile/Profile.tsx  | 20 +++--
 .../reference/mdx/molecules/Profile.docs.mdx  | 83 ++++++++++++-------
 4 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
index d851d6c5..5ab860c7 100644
--- a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
+++ b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx
@@ -42,9 +42,9 @@ export interface DynamicPopoverProps {
   /** Function that will be called when the DynamicPopover is shown */
   onShowCallback?: () => void
   /** Width of the DynamicPopover*/
-  width?: number
+  width?: number | string
   /** Width of the DynamicPopover on mobile*/
-  mobileWidth?: number
+  mobileWidth?: number | string
   /** Dynamic popover will switch sides if there is not enough room*/
   useIdealPlacement?: boolean
   /** Add to the default gap between the popover and its target */
@@ -121,12 +121,15 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = (
   return { translate, mobileTranslate }
 }
 
+const makeWidth = (width: number | string) =>
+  typeof width === 'number' ? `${width}px` : width
+
 const PopoverContainer = styled.div<{
   $state: TransitionState
   $translate: string
   $mobileTranslate: string
-  $width: number
-  $mobileWidth: number
+  $width: number | string
+  $mobileWidth: number | string
   $x: number
   $y: number
   $isControlled: boolean
@@ -159,7 +162,7 @@ const PopoverContainer = styled.div<{
       visibility: hidden;
       position: absolute;
       z-index: 99999;
-      width: ${$mobileWidth}px;
+      width: ${makeWidth($mobileWidth)};
       transform: translate3d(0, 0, 0) ${$mobileTranslate};
       transition: none;
       opacity: 0;
@@ -216,7 +219,7 @@ const PopoverContainer = styled.div<{
       `}
     `,
     mq.sm.min(css`
-      width: ${$width}px;
+      width: ${makeWidth($width)};
       transform: translate3d(0, 0, 0) ${$translate};
     `),
   ],
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index e6e52a8a..3800eda1 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -51,7 +51,7 @@ type Props = {
   /** The direction that the dropdown menu will open from */
   direction?: Direction
   /** The width of the dropdown menu, in px */
-  width?: number
+  width?: string | number
 } & NativeDivProps
 
 type PropsWithIsOpen = {
@@ -76,7 +76,7 @@ type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 type DropdownMenuProps = {
   items: DropdownItem[]
   setIsOpen: (isOpen: boolean) => void
-  width?: number
+  width?: number | string
   shortThrow: boolean
   labelAlign?: LabelAlign
   direction: Direction
diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 1b574f36..18d73852 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css, useTheme } from 'styled-components'
+
+import { Tokens } from '@/src/tokens'
 
 import { getTestId, shortenAddress } from '../../../utils/utils'
 
@@ -33,6 +35,12 @@ interface ContainerProps {
   $open: boolean
 }
 
+const calculateWidth = (space: Tokens['space'], size: Size) => {
+  if (size === 'small') return space['10']
+  if (size === 'medium') return space['45']
+  return space['80']
+}
+
 const Container = styled.div<ContainerProps>(
   ({ theme, $size, $hasDropdown, $open }) => css`
     align-items: center;
@@ -65,10 +73,11 @@ const Container = styled.div<ContainerProps>(
       background-color: ${theme.colors.border};
     `}
 
+    width: ${calculateWidth(theme.space, $size)};
+
     ${$size === 'small' &&
     css`
       height: ${theme.space['10']};
-      width: ${theme.space['10']};
       padding: 0;
       border: none;
     `}
@@ -76,12 +85,12 @@ const Container = styled.div<ContainerProps>(
     ${$size === 'medium' &&
     css`
       height: ${theme.space['12']};
-      width: ${theme.space['45']};
       padding-right: ${theme.space['4']};
     `}
 
     ${$size === 'large' &&
     css`
+      width: fit-content;
       height: ${theme.space['14']};
       max-width: ${theme.space['80']};
       padding-right: ${theme.space['5']};
@@ -152,20 +161,21 @@ export const Profile = ({
   dropdownItems,
   address,
   ensName,
-  alignDropdown = 'right',
+  alignDropdown = 'left',
   ...props
 }: Props) => {
+  const { space } = useTheme()
   const [isOpen, setIsOpen] = React.useState(false)
 
   if (dropdownItems) {
     return (
       <Dropdown
+        width={calculateWidth(space, size)}
         {...{
           items: dropdownItems,
           isOpen,
           setIsOpen,
           align: alignDropdown,
-          inheritContentWidth: true,
         }}
       >
         <Container
diff --git a/docs/src/reference/mdx/molecules/Profile.docs.mdx b/docs/src/reference/mdx/molecules/Profile.docs.mdx
index d4f69316..0fc6b919 100644
--- a/docs/src/reference/mdx/molecules/Profile.docs.mdx
+++ b/docs/src/reference/mdx/molecules/Profile.docs.mdx
@@ -55,16 +55,10 @@ import { Profile } from '@ensdomains/thorin'
   }}
 />
 
-## Variants
+## With Dropdown
 
 ```tsx live=true minHeight=300px
-<DeleteMe flexDirection="row" flexWrap="wrap">
-  <Profile address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9" />
-  <Profile
-    address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
-    avatar="https://i.imgur.com/BSJBpQE.jpg"
-    ensName="frontend.ens.eth"
-  />
+<Card style={{ backgroundColor: 'grey' }}>
   <Profile
     address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
     avatar="https://i.imgur.com/BSJBpQE.jpg"
@@ -79,30 +73,61 @@ import { Profile } from '@ensdomains/thorin'
     ]}
     ensName="frontend.ens.eth"
   />
-</DeleteMe>
+</Card>
+```
+
+## Variants
+
+```tsx live=true minHeight=300px
+<Card style={{ backgroundColor: 'grey' }}>
+  <DeleteMe flexDirection="row" flexWrap="wrap">
+    <Profile address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9" />
+    <Profile
+      address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
+      avatar="https://i.imgur.com/BSJBpQE.jpg"
+      ensName="frontend.ens.eth"
+    />
+    <Profile
+      address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
+      avatar="https://i.imgur.com/BSJBpQE.jpg"
+      dropdownItems={[
+        { label: 'Dashboard', onClick: () => null, icon: <DotGridSVG /> },
+        {
+          label: 'Disconnect',
+          onClick: () => null,
+          color: 'red',
+          icon: <ExitSVG />,
+        },
+      ]}
+      ensName="frontend.ens.eth"
+    />
+  </DeleteMe>
+</Card>
 ```
 
 ## Sizes
 
 ```tsx live=true
-<DeleteMe flexWrap="wrap">
-  <Profile
-    address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
-    avatar="https://i.imgur.com/BSJBpQE.jpg"
-    ensName="frontend.ens.eth"
-    size="small"
-  />
-  <Profile
-    address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
-    avatar="https://i.imgur.com/BSJBpQE.jpg"
-    ensName="frontend.ens.eth"
-    size="medium"
-  />
-  <Profile
-    address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
-    avatar="https://i.imgur.com/BSJBpQE.jpg"
-    ensName="frontend.ens.eth"
-    size="large"
-  />
-</DeleteMe>
+<Card style={{ backgroundColor: 'grey' }}>
+  <DeleteMe flexWrap="wrap">
+    <Profile
+      address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
+      avatar="https://i.imgur.com/BSJBpQE.jpg"
+      ensName="frontend.ens.eth"
+      size="small"
+    />
+    <Profile
+      address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
+      avatar="https://i.imgur.com/BSJBpQE.jpg"
+      ensName="frontend.ens.eth"
+      size="medium"
+    />
+    <Profile
+      address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
+      avatar="https://i.imgur.com/BSJBpQE.jpg"
+      ensName="frontend.ens.eth"
+      size="large"
+    />
+  </DeleteMe>
+</Card>
 ```