fix: icon color not changing on button hover (#363)

src/components/general/Button/Button.stories.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 
 const meta: Meta<typeof Button> = {
   title: 'Aquarium/General/Button',
-  component: props => <Button {...props}>{props.children || 'Button Label'}</Button>,
+  component: props => <Button {...props}>{props.children ?? 'Button Label'}</Button>,
 
   args: {
     block: false,
@@ -121,6 +121,14 @@ export const WithIconSM: Story = {
   },
 }
 
+export const WithIconDefaultColorSM: Story = {
+  args: {
+    type: 'default',
+    icon: <Icon name="mpLogo" size="sm" color="default" />,
+    variant: 'with-new-icon',
+  },
+}
+
 export const RoundIconButton: Story = {
   args: {
     icon: <Icon name="siteMap" size="xl" />,

src/components/general/Button/Button.tsx

@@ -1,6 +1,10 @@
+import React from 'react'
 import { Button as AntButton } from 'antd'
 import { type ButtonProps as AntButtonProps } from 'antd'
+import { Icon } from 'src/components'
+import type { IIconProps } from 'src/components'
 import { ConfigProvider } from 'src/components/other/ConfigProvider/ConfigProvider'
+import { type ReactNode } from 'react'
 
 export interface IButtonProps extends AntButtonProps {
   /**
@@ -9,15 +13,26 @@ export interface IButtonProps extends AntButtonProps {
    * This will be removed once all icons are updated.
    */
   variant?: 'with-new-icon'
+  icon?: ReactNode
 }
 export const Button = (props: IButtonProps) => {
   const classMap = {
     'with-new-icon': 'u-display-flex u-align-items-center u-justify-center',
   }
 
+  const buttonIcon =
+    React.isValidElement<IIconProps>(props.icon) && props.icon.type === Icon ? (
+      <Icon {...props.icon.props} color={props.icon.props.color ?? 'inherit'} />
+    ) : (
+      props.icon
+    )
+
   return (
     <ConfigProvider>
-      <AntButton {...props} className={`${props.className}${props.variant ? ` ${classMap[props.variant]}` : ''}`}>
+      <AntButton
+        {...props}
+        icon={buttonIcon}
+        className={`${props.className}${props.variant ? ` ${classMap[props.variant]}` : ''}`}>
         {props.children}
       </AntButton>
     </ConfigProvider>

src/components/general/Icon/Icon.tsx

@@ -16,6 +16,7 @@ export type IconColor =
   | 'text'
   | 'strong'
   | 'brand'
+  | 'inherit'
 
 export interface IIconProps {
   name: IconNames

src/components/general/Icon/icon.css

@@ -89,3 +89,7 @@
 .icon-color-black {
   color: black;
 }
+
+.icon-color-inherit {
+  color: inherit;
+}