Merged iconbutton to button component

refs. https://github.com/TryGhost/Team/issues/3351

ghost/admin-x-settings/src/admin-x-ds/global/Button.stories.tsx

@@ -49,4 +49,11 @@ export const LinkButton: Story = {
         color: 'green',
         link: true
     }
+};
+
+export const IconButton: Story = {
+    args: {
+        icon: 'menu-horizontal',
+        color: 'green'
+    }
 };

ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx

@@ -1,9 +1,11 @@
+import Icon from './Icon';
 import React from 'react';
 
 export type ButtonColor = 'clear' | 'grey' | 'black' | 'green' | 'red';
 
 export interface IButton {
-    label: string;
+    label?: string;
+    icon?: string;
     key?: string;
     color?: string;
     fullWidth?: boolean;
@@ -14,13 +16,14 @@ export interface IButton {
 }
 
 const Button: React.FC<IButton> = ({
-    label,
-    color,
+    label = '',
+    icon = '',
+    color = 'clear',
     fullWidth,
     link,
     disabled,
     onClick,
-    className,
+    className = '',
     ...props
 }) => {
     if (!color) {
@@ -62,6 +65,7 @@ const Button: React.FC<IButton> = ({
             onClick={onClick}
             {...props}
         >
+            {icon && <Icon color={(color === 'clear' || color === 'grey' ? 'black' : 'white')} name={icon} />}
             {label}
         </button>
     );

ghost/admin-x-settings/src/admin-x-ds/global/IconButton.stories.tsx

@@ -1,18 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import IconButton from './IconButton';
-
-const meta = {
-    title: 'Global / Icon Button',
-    component: IconButton,
-    tags: ['autodocs']
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-export const Default: Story = {
-    args: {
-        iconName: 'menu-horizontal'
-    }
-};

ghost/admin-x-settings/src/admin-x-ds/global/IconButton.tsx

@@ -1,17 +0,0 @@
-import Icon from './Icon';
-import React from 'react';
-
-interface IconButtonProps {
-    iconName: string;
-}
-
-const IconButton: React.FC<IconButtonProps> = ({iconName}) => {
-    return (
-        <button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button">
-            <span className="sr-only">Open menu</span>
-            <Icon color="grey-900" name={iconName} />
-        </button>
-    );
-};
-
-export default IconButton;

ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx

@@ -2,7 +2,6 @@ import Avatar from '../../../../admin-x-ds/global/Avatar';
 import Button from '../../../../admin-x-ds/global/Button';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import Icon from '../../../../admin-x-ds/global/Icon';
-import IconButton from '../../../../admin-x-ds/global/IconButton';
 import Menu from '../../../../admin-x-ds/global/Menu';
 import Modal from '../../../../admin-x-ds/global/Modal';
 import NiceModal from '@ebay/nice-modal-react';
@@ -295,6 +294,10 @@ interface UserDetailModalProps {
     updateUser?: (user: User) => void;
 }
 
+const UserMenuTrigger = () => (
+    <Button color='grey' icon='menu-horizontal' />
+);
+
 const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
     const [userData, setUserData] = useState(user);
     const [saveState, setSaveState] = useState('');
@@ -349,7 +352,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
                         <div className='absolute inset-0 z-0 block bg-gradient-to-tr from-[rgba(0,0,0,0.5)] to-[rgba(0,0,0,0.01)]'></div>
                     )}
                     <div className="absolute right-8 top-8">
-                        <Menu items={menuItems} position='left' trigger={<IconButton iconName='menu-horizontal'></IconButton>}></Menu>
+                        <Menu items={menuItems} position='left' trigger={<UserMenuTrigger />}></Menu>
                     </div>
                     <div className='relative z-10 mt-60 flex gap-4'>
                         <Avatar bgColor={generateAvatarColor((userData.name ? userData.name : userData.email))} className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} labelColor='white' size='xl' />