From 7b4b120c2f5b87cc94a94b79b034bd0b0d54b50b Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Wed, 9 Nov 2022 09:09:37 +0800
Subject: [PATCH] [ui][dropdown] make button look like button

---
 .../offers/admin_temp/OffersTable.tsx         |  2 +-
 .../components/offers/table/OffersTable.tsx   |  2 +-
 .../stories/dropdown-menu.stories.tsx         | 11 ++----
 packages/ui/src/DropdownMenu/DropdownMenu.tsx | 39 ++++++++++++++++---
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/apps/portal/src/components/offers/admin_temp/OffersTable.tsx b/apps/portal/src/components/offers/admin_temp/OffersTable.tsx
index 39ce9b7c..56b1d81e 100644
--- a/apps/portal/src/components/offers/admin_temp/OffersTable.tsx
+++ b/apps/portal/src/components/offers/admin_temp/OffersTable.tsx
@@ -199,7 +199,7 @@ export default function OffersTable({
                 )[0].label
               : OfferTableYoeOptions[0].label
           }
-          size="inherit">
+          size="md">
           {OfferTableYoeOptions.map(({ label: itemLabel, value }) => (
             <DropdownMenu.Item
               key={value}
diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx
index e1f0440f..e95b399c 100644
--- a/apps/portal/src/components/offers/table/OffersTable.tsx
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@@ -184,7 +184,7 @@ export default function OffersTable({
                 )[0].label
               : OfferTableYoeOptions[0].label
           }
-          size="inherit">
+          size="md">
           {OfferTableYoeOptions.map(({ label: itemLabel, value }) => (
             <DropdownMenu.Item
               key={value}
diff --git a/apps/storybook/stories/dropdown-menu.stories.tsx b/apps/storybook/stories/dropdown-menu.stories.tsx
index 9a4fa01a..85cf20e0 100644
--- a/apps/storybook/stories/dropdown-menu.stories.tsx
+++ b/apps/storybook/stories/dropdown-menu.stories.tsx
@@ -7,10 +7,7 @@ const DropdownMenuAlignments: ReadonlyArray<DropdownMenuAlignment> = [
   'start',
   'end',
 ];
-const DropdownMenuSizes: ReadonlyArray<DropdownMenuSize> = [
-  'default',
-  'inherit',
-];
+const DropdownMenuSizes: ReadonlyArray<DropdownMenuSize> = ['sm', 'md', 'lg'];
 
 export default {
   argTypes: {
@@ -80,7 +77,7 @@ export function Basic({
 Basic.args = {
   align: 'start',
   label: 'More actions',
-  size: 'default',
+  size: 'md',
 };
 
 export function Align() {
@@ -103,7 +100,7 @@ export function Align() {
 
   return (
     <div className="flex justify-between">
-      <DropdownMenu align="start" label="Select an action" size="default">
+      <DropdownMenu align="start" label="Select an action" size="md">
         {menuItems.map(({ label, value }) => (
           <DropdownMenu.Item
             key={value}
@@ -115,7 +112,7 @@ export function Align() {
           />
         ))}
       </DropdownMenu>
-      <DropdownMenu align="end" label="Select an action" size="default">
+      <DropdownMenu align="end" label="Select an action" size="md">
         {menuItems.map(({ label, value }) => (
           <DropdownMenu.Item
             key={value}
diff --git a/packages/ui/src/DropdownMenu/DropdownMenu.tsx b/packages/ui/src/DropdownMenu/DropdownMenu.tsx
index 6a57d9e9..3556f519 100644
--- a/packages/ui/src/DropdownMenu/DropdownMenu.tsx
+++ b/packages/ui/src/DropdownMenu/DropdownMenu.tsx
@@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import DropdownMenuItem from './DropdownMenuItem';
 
 export type DropdownMenuAlignment = 'end' | 'start';
-export type DropdownMenuSize = 'default' | 'inherit';
+export type DropdownMenuSize = 'lg' | 'md' | 'sm';
 
 type Props = Readonly<{
   align?: DropdownMenuAlignment;
@@ -22,24 +22,53 @@ const alignmentClasses: Record<DropdownMenuAlignment, string> = {
   start: 'origin-top-left left-0',
 };
 
+const sizeClasses: Record<DropdownMenuSize, string> = {
+  lg: 'px-5 py-2.5',
+  md: 'px-4 py-2',
+  sm: 'px-2.5 py-1.5',
+};
+
+const baseClasses: Record<DropdownMenuSize, string> = {
+  lg: 'text-base rounded-xl',
+  md: 'text-sm rounded-lg',
+  sm: 'text-xs rounded-md',
+};
+
+const sizeIconSpacingEndClasses: Record<DropdownMenuSize, string> = {
+  lg: 'ml-3 -mr-1',
+  md: 'ml-2 -mr-1',
+  sm: 'ml-2 -mr-0.5',
+};
+
+const sizeIconClasses: Record<DropdownMenuSize, string> = {
+  lg: '!h-5 !w-5',
+  md: '!h-5 !w-5',
+  sm: '!h-4 !w-4',
+};
+
 export default function DropdownMenu({
   align = 'start',
   children,
   label,
-  size = 'default',
+  size = 'md',
 }: Props) {
   return (
     <Menu as="div" className="relative inline-block">
       <div className="flex">
         <Menu.Button
           className={clsx(
-            'group inline-flex items-center justify-center font-medium text-slate-700 hover:text-slate-900',
-            size === 'default' && 'text-sm',
+            'group inline-flex items-center justify-center whitespace-nowrap border border-slate-300 bg-white font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-600 focus:ring-offset-2',
+            baseClasses[size],
+            sizeClasses[size],
           )}>
           <div>{label}</div>
           <ChevronDownIcon
             aria-hidden="true"
-            className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
+            className={clsx(
+              'flex-shrink-0 text-slate-400 group-hover:text-slate-500',
+              sizeIconSpacingEndClasses[size],
+              sizeIconClasses[size],
+            )}
           />
         </Menu.Button>
       </div>